feat: announce live-region package #5872
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
!! Package Update !!
🧪 Review environmenthttps://veh5b6yxqzc6abzm767d7cm37i0vcmdo.lambda-url.ca-central-1.on.aws/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary | Résumé
This package adds a util to help announce dynamic page updates in either a polite or assertive ARIA Live Region. The idea is to 1) have a live-region that is primed (in the DOM tree long before being used), and 2) make it convenient to announce a live region in any client workflow.
To use first add the
<Announce />component ideally in a component near the root of the app. Another way is by calling the hookuseAnnounce()anywhere in the app. This will add the live region to the root of document.Then to announce a dynamic update from any client context call
announce(YOUR_MESSAGE). Or for an assertive message callannounce(YOUR_MESSAGE, Priority.HIGH).Test
To test the announce live region is updating fire up any screen reader and make sure
announce(YOUR_MESSAGE)is being announced. Another way is to check the content in the live region e.g. for a polite announcementdocument.querySelector("[data-testid='gc-announce-polite']").textContent;