feat(a11y): add LiveRegion component for status announcements#354
Open
TheBigWealth89 wants to merge 1 commit into
Open
feat(a11y): add LiveRegion component for status announcements#354TheBigWealth89 wants to merge 1 commit into
TheBigWealth89 wants to merge 1 commit into
Conversation
Contributor
|
👋 Thanks for the contribution! This PR contains code/test changes and CI workflows were never auto-triggered (a GitHub Actions safety requirement for cross-repo forks). To unblock this for merging, a maintainer needs to either:\n\n1. Manually click 'Approve and run workflows' on this PR's Actions tab via the GitHub UI, or\n2. Approve the pending CI on the PR checks page.\n\nOnce the CI checks pass, this can be merged. 🚀 |
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
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.
Closes #295
Summary
This PR addresses the lack of accessibility for status updates in the application. Field operators using assistive technology may miss status updates without an
aria-liveregion.Changes made:
<LiveRegion>component (app/frontend/src/components/LiveRegion.tsx) configured witharia-live="polite"androle="status"to seamlessly announce message changes to screen readers. It includes a built-in debounce queue to handle rapid updates.getStatusTransitionMessageutility function (app/frontend/src/lib/status-messages.ts) to convert raw status enums into a descriptive, human-readable format.<LiveRegion>component into theCampaignsPageandClaimReceiptPageto trigger announcements whenever a status transition is detected.Testing
I manually tested the screen reader behavior to confirm it successfully detects transitions, and I've also written accessibility unit tests via
jest-axe.Manual verification steps:
pnpm run dev.Screenshots
N/A - Visually hidden DOM element for accessibility purposes only.
Checklist