feat: add live region support with Alert, Status, and Announce

[joshblack]

Add support for using the @primer/live-region-element package through three components:

• Alert, analogous to role="alert", used for assertive announcements
• Status, analogous to role="status", used for polite announcements
• Announce, a wrapper component that makes announcements when its text contents have changed using the <live-region> element

These components use Box under the hood and can be styled and customized as-needed. They can be used as the visual parts of a component. They can also be hidden when wrapped with VisuallyHidden.

Note

Wanted to add a section in case you're wondering why we aren't using role="alert" and role="status" directly 👀

The core challenge we're trying to work around is adding the corresponding live region and message at the same time.

Put another way, support for rendering and announcing the following snippet is not great:

<divrole="status">Test message</div>

Broadly speaking, making sure that the element exists first before adding the message has better support than doing both at the same time. This is what the components in this PR, and corresponding @primer/live-region-element, help to accomplish.

Changelog

New

• Add Alert, Status, and Announce as internal components

Changed

• Add the file path to Announce to the list of side effects to the package due to its usage of @primer/live-region-element/define

Removed

Rollout strategy

• None; if selected, include a brief description as to why

This is adding components to our internal set of components and does not impact the public API of @primer/react

Testing & Reviewing

• Checkout the storybook stories for the Status component and verify that the live region works as expected (let me know if I can help out with instructions for this!)
• Go through the tests to make sure they have accurate coverage for the component
• Try to use this component in the app-router example and verify that it can be called in a server component, has no SSR errors, and appropriately announces on render
• Let me know if you have any feedback on the approach here! Very open to feedback, suggestions, and ideas 👀

[changeset-bot]

⚠️ No Changeset found

Latest commit: e0ff928

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	113.58 KB (0%)
packages/react/dist/browser.umd.js	114.25 KB (0%)

[siddharthkp]

(non blocking) Ah, I was wondering if this should be a prop on the component or the default on the component. I guess we can find out once we start using it!

[joshblack]

Ideally, I want people to think of Status as <div role="status">. It won't do anything more or less than that role, but under-the-hood we make it work. So you can style it if you're using it visually, or if you want to hide then you use VisuallyHidden.

[siddharthkp]

Ideally, I want people to think of Status as

I see... do you see the default of folks using it an visible element? Maybe in Banner?

[joshblack]

@siddharthkp good question, I definitely see a mix of visible and hidden use-cases but don't have a sense of which one is the majority case yet 👀

[siddharthkp]

Left a few comments, none of them are blocking. Approving in advance