Replace aria-live and LiveRegion usage

[mperrotti]

Closes https://github.com/github/primer/issues/4892

Changelog

New

Changed

• Replaces 'aria-live' usage with newer helpers

Removed

• Internal LiveRegion component

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: e774fa5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull request overview

This PR modernizes the accessibility announcement system by replacing direct aria-live attributes and the internal LiveRegion component with the newer AriaStatus helper from the live-region module. This provides a more maintainable and React-friendly approach to screen reader announcements across the design system.

Key Changes

• Removed the internal LiveRegion component entirely and all its dependencies
• Migrated all aria-live attribute usage to the AriaStatus component from the live-region module
• Updated tests to use the getLiveRegion() test helper for verifying announcements

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/react/src/internal/components/LiveRegion.tsx	Removed the entire internal LiveRegion component implementation
packages/react/src/experimental/SelectPanel2/SelectPanel.tsx	Replaced aria-live attributes with AriaStatus component for status messages
packages/react/src/TreeView/TreeView.tsx	Replaced VisuallyHidden with aria-live attributes with AriaStatus component
packages/react/src/TreeView/TreeView.test.tsx	Updated tests to use getLiveRegion() helper and improved test robustness by using getByRole
packages/react/src/Skeleton/Skeleton.examples.stories.tsx	Wrapped loading announcements in AriaStatus component
packages/react/src/DataTable/Pagination.tsx	Removed LiveRegion/Message usage and replaced with AriaStatus for pagination announcements
.changeset/easy-suits-mate.md	Added changeset documenting the changes as a patch release

[Copilot]

The comment has a grammar issue. It should be "Messages fail" (plural) or "Message fails" (singular with correct verb form) instead of "Message fail".

Suggested change

	{/* Message fail without passing a `key` */}
	{/* Message fails without passing a `key` */}

[joshblack]

Suggested change

	<AriaStatus aria-atomic="true">
	<AriaStatus>

You should be okay on this, by default the live-region element sets up the polite region like this:

<div id="polite" aria-live="polite" aria-atomic="true">...</div>

[joshblack]

The live region utilities should be doing this automatically, let me know if not 👀

I think test-wise we just have to have a clean up for them, e.g.

afterEach(() => {
  const liveRegion = document.querySelector('live-region');
  document.body.removeChild(liveRegion);
});

[joshblack]

Ooo what issue were you running into without key? 👀