Add live-region-element package with a PVC wrapper

[khiga8]

What are you trying to accomplish?

Prereq to https://github.com/primer/view_components/pull/2583

This PR adds:

• The @primer/live-region-element package to PVC.
• A wrapper component for this element, Primer::Alpha::LiveRegionAnnouncement which should act as a global live region. This component should be added to the application layout of the consuming application.

Why

Live regions can be finicky. They do not work well when they are dynamically injected. So for example, if a user does something resulting in a success banner to be shown on a page async, having aria-live="polite" on the banner will not result in an announcement. See Staff only: Challenges with dynamically inserted live region and https://github.com/github/primer/discussions/2942 for more information.

There are ways to get around this – such as by having a global live region that is reliably part of the page layout and populating that to make an announcement. We rely on this solution in dotcom as part of the application layout with aria-live.ts. We want Primer components to be able to hook into this global live region. In addition, other applications may find this global live region utility useful.

@joshblack proposed and published a live-region-element as a solution that encapsulates these methods in aria-live.ts and would allow Primer components across PVC and Primer React to hook into it.

Integration

No

List the issues that this change affects.

Closes # (type the GitHub issue number after #)

Risk Assessment

• [x] Low risk the change is small, highly observable, and easily rolled back.
• [ ] Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• [ ] High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

Merge checklist

• [ ] Added/updated tests
• [ ] Added/updated documentation
• [ ] Added/updated previews (Lookbook)
• [ ] Tested in Chrome
• [ ] Tested in Firefox
• [ ] Tested in Safari
• [ ] Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: d6da81fd51ff95757d239a11f6299b36f9ab2231

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

[khiga8]

I am putting this on pause until we've had a chance to validate live-region in dotcom per my chat with @joshblack!

[github-actions[bot]]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.