Adds content to alert group react examples.

[edonehoo]

Makes progress on patternfly/patternfly-org#2990

[patternfly-build]

Preview: https://patternfly-react-pr-7763.surge.sh

A11y report: https://patternfly-react-pr-7763-a11y.surge.sh

[thatblindgeye]

In addition to the comments to specific lines below:

• The examples using bold just need to be updated to heading level 3
• My opinion on the flow of examples would be Static Alert Group > Dynamic Alert Group > Toast Alert Group, with toast groups coming off more as a variation of the dynamic group. What do you think @edonehoo?

[thatblindgeye]

As a followup, I think this example and the "Async alert group" example could be updated to be non-toast. This relates to my general comment made as part of the review.

[edonehoo]

For the "async alert group" example - is that only relevant for non-toast? When I turn async on, alerts are added to the queue when I click both the toast alert and inline dynamic generators, but is it only intended for the inline dynamic/non-toast in practice?

[thatblindgeye]

@edonehoo I think that example could be relevant for toast or non-toast, but I don't think we need to show it for both types. This comment was more related to my second point in the first message about a possible flow of examples (Static Alert Group > Dynamic Alert Group > Toast Alert Group). Though it may be better to just mention in the example description how an "async alert group can be applied to both non-toast and toast alert groups" or something along those lines.

[thatblindgeye]

@mcarrano do you know if the original intent for the Async alert group example was for it to only apply to toast alerts? Looks like when the component was first created that example was a toast group from the beginning, but I'm wondering if that was purposeful or just a choice made in the moment.

[mcarrano]

I do think it was by intent. Toast alerts are asynchronous by nature. For inline alerts, sure, you could insert and remove inline alerts within a page dynamically, but I don't recommend that in most cases. The inline alerts usually come as the result of a submit operation or page refresh. Otherwise I think it can be a jarring user experience.

[thatblindgeye]

Just some minor tweaks here, based on the suggestion I made a bit further down at #7763 (comment)

Suggested change

	Alerts that are asynchronously appended into dynamic `AlertGroups` with `isLiveRegion` will be announced to assistive technology at the moment the change happens, following the strategy used for `aria-atomic`, which defaults to `false`. This means only changes of type `addition` will be announced.
	The following example uses `isLiveRegion` to add toast alerts to a group after a button click, but does not set `aria-atomic` to `addition`.
	An `AlertGroup` can be turned into a toast group by passing in the `isToast` and `isLiveRegion` properties. Alerts that are asynchronously appended into a toast `AlertGroup` will be announced to assistive technology at the moment the change happens.
	The following example adds alerts to a toast group after a button is clicked.

[thatblindgeye]

Suggested change

	| Toast (dynamic) | Toast alert groups position alerts on top of other content at the top right of the page. |
	| Dynamic | Dynamic alert groups appear in line with the page's content flow, often in response to a user action.|
	| Toast (dynamic) | Toast alert groups contain alerts that often appear in response to an asynchronous event or user action, and position alerts on top of other content at the top right of the page. |
	| Dynamic | Dynamic alert groups contain alerts that often appear in response to a user action, and position alert inline with the page's content flow. |

Or something along those lines. Based on @mcarrano comment above about that async example, adding some verbiage about that here may not be bad. Part of the intent is also to help differentiate when one would want to use a toast alert group since it and the normal dynamic group are fairly similar.

[thatblindgeye]

Bit of a tweak here, to combine some verbiage you had elsewhere and bring it up here to a less specific section:

Suggested change

	Dynamic alerts are generated after the page initially loads. Additional measures are required to ensure these alerts are accessible to screen readers.
	Dynamic alerts that are generated after the page initially loads must be appended to either a "toast" or "dynamic" `AlertGroup` and the group must have the `isLiveRegion` prop passed in.
	By default, only new alerts appended to a toast or dynamic group will be announced by assistive technologies when the `isLiveRegion` prop is passed into the group. For information about customizing this announcement, read the [aria-atomic and aria-relevant](/components/alert-group/accessibility#aria-atomic-and-aria-relevant) section of the alert group accessibility documentation.

Or something along those lines. Basically the goals I had with this tweak is to make it clear you must pass in isLiveRegion to the alert group when alerts will be dynamic, and to link to the a11y docs for aria-atomic/aria-relevant (which was originally mentioned further down).

[edonehoo]

I believe I incorporated all of these ideas, but I also edited (what I thought were) some repetitive/redundant bits, so please let me know if I cut out any important information!

[thatblindgeye]

🎉 This looks great!

[nicolethoen]

Great work! This is a huge improvement for Alert Group info

[wolfeallison]

Looks great to me!

[mcarrano]

This looks great. Nice work @edonehoo !

[patternfly-build]

Your changes have been released in:

• [email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• [email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• [email protected]

Thanks for your contribution! 🎉