Replace `aria-live` and `LiveRegion` usage #7230

mperrotti · 2025-11-21T22:12:41Z

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 · 2025-11-21T22:12:45Z

🦋 Changeset detected

Latest commit: 7566471

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 · 2025-11-21T22:13:12Z

👋 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 · 2025-11-21T22:16:27Z

packages/react/src/TreeView/TreeView.tsx

-        <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
-          {ariaLiveMessage}
+        <VisuallyHidden>
+          {/* Message fail without passing a `key` */}


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` */}

Nope, we're getting rid of the key. Thanks though.

packages/react/src/DataTable/Pagination.tsx

joshblack · 2025-11-21T22:49:16Z

packages/react/src/TreeView/TreeView.test.tsx

+    // Set up live region for this test
+    const liveRegionEl = document.createElement('live-region')
+    document.body.appendChild(liveRegionEl)


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); });

That's what I thought too, but they weren't.

@mperrotti if I remove these lines from the test it still seems to pass, are you seeing that too or no?

Huh, that's odd. The failures may have been caused by something else I changed. Will remove.

joshblack · 2025-11-21T22:49:48Z

packages/react/src/TreeView/TreeView.tsx

-        <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
-          {ariaLiveMessage}
+        <VisuallyHidden>
+          {/* Message fail without passing a `key` */}


Ooo what issue were you running into without key? 👀

It just wasn't picking up the content. Here's the test failure when I don't pass a key:

FAIL @primer/react (chromium) src/TreeView/TreeView.test.tsx > Asynchronous loading > updates aria live region when loading is done AssertionError: expected '' to be 'Parent content loading' // Object.is equality - Expected + Received - Parent content loading ❯ toBe src/TreeView/TreeView.test.tsx:1442:44 1440| fireEvent.click(doneButton) 1441| 1442| expect(liveRegion.getMessage('polite')).toBe('Parent content loading') | ^ 1443| 1444| // Click done button to mimic the completion of async loading

@mperrotti it seems like the test is complaining about updates not being wrapped in act() when debugging locally, are you seeing that as well? When updating to the following it seemed to work without key:

// Click load button to mimic async loading await act(async () => { await user.click(doneButton) })

Ahh ok I see! Will update. Thank you!

Co-authored-by: Josh Black <joshblack@github.com>

joshblack

🥳

primer-integration · 2025-12-05T03:55:36Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/8147

primer-integration · 2025-12-05T04:12:42Z

🔴 ci completed with status failure.

mperrotti added 3 commits November 21, 2025 17:03

replaces 'aria-live' usage with live region helpers

a88f02b

removes unused LiveRegion component

cf30b4d

adds changeset

e774fa5

mperrotti requested a review from a team as a code owner November 21, 2025 22:12

mperrotti requested review from Copilot and siddharthkp November 21, 2025 22:12

mperrotti requested a review from joshblack November 21, 2025 22:12

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Nov 21, 2025

Copilot started reviewing on behalf of mperrotti November 21, 2025 22:13 View session

Copilot finished reviewing on behalf of mperrotti November 21, 2025 22:16

Copilot AI reviewed Nov 21, 2025

View reviewed changes

mperrotti deployed to github-pages November 21, 2025 22:22 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7230 November 21, 2025 22:22 Inactive

joshblack reviewed Nov 21, 2025

View reviewed changes

Update packages/react/src/DataTable/Pagination.tsx

1e5cb99

Co-authored-by: Josh Black <joshblack@github.com>

mperrotti deployed to github-pages November 25, 2025 21:13 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7230 November 25, 2025 21:13 Inactive

Merge branch 'main' into mp/update-aria-live-usage

87be474

jonrohan requested a review from joshblack December 1, 2025 17:46

mperrotti deployed to github-pages December 1, 2025 17:53 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7230 December 1, 2025 17:56 Inactive

fixes silly mistakes

7566471

mperrotti deployed to github-pages December 2, 2025 16:23 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7230 December 2, 2025 16:24 View deployment

joshblack approved these changes Dec 2, 2025

View reviewed changes

mperrotti added this pull request to the merge queue Dec 2, 2025

Merged via the queue into main with commit 534ca11 Dec 2, 2025
49 checks passed

mperrotti deleted the mp/update-aria-live-usage branch December 2, 2025 17:10

primer bot mentioned this pull request Dec 2, 2025

Release tracking #7254

Merged

github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Dec 5, 2025

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh labels Dec 5, 2025

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

Replace aria-live and LiveRegion usage #7230

Replace aria-live and LiveRegion usage #7230

Uh oh!

Conversation

mperrotti commented Nov 21, 2025

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Nov 21, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

primer-integration bot commented Dec 5, 2025

Uh oh!

primer-integration bot commented Dec 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Replace `aria-live` and `LiveRegion` usage #7230

Replace `aria-live` and `LiveRegion` usage #7230

changeset-bot bot commented Nov 21, 2025 •

edited

Loading