Skip to content

feat(a11y): add LiveRegion component for status announcements#354

Open
TheBigWealth89 wants to merge 1 commit into
ChainForgee:mainfrom
TheBigWealth89:feat/live-region-a11y-295
Open

feat(a11y): add LiveRegion component for status announcements#354
TheBigWealth89 wants to merge 1 commit into
ChainForgee:mainfrom
TheBigWealth89:feat/live-region-a11y-295

Conversation

@TheBigWealth89

Copy link
Copy Markdown

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-live region.

Changes made:

  • Created a <LiveRegion> component (app/frontend/src/components/LiveRegion.tsx) configured with aria-live="polite" and role="status" to seamlessly announce message changes to screen readers. It includes a built-in debounce queue to handle rapid updates.
  • Added a getStatusTransitionMessage utility function (app/frontend/src/lib/status-messages.ts) to convert raw status enums into a descriptive, human-readable format.
  • Integrated the <LiveRegion> component into the CampaignsPage and ClaimReceiptPage to 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.

# Verify component renders with no accessibility violations and updates the DOM properly
pnpm --filter app/frontend test test/live-region.spec.tsx

Manual verification steps:

  1. Run the local dev server using pnpm run dev.
  2. Enable a screen reader (VoiceOver, NVDA, JAWS).
  3. Open the NGO Campaigns page and change a campaign's state (e.g., Pause or Resume).
  4. Ensure the screen reader verbally announces the status change correctly, such as "Campaign status changed from Active to Paused."

Screenshots

N/A - Visually hidden DOM element for accessibility purposes only.

Checklist

  • Tests added or updated for new/changed behavior
  • Existing tests pass
  • No secrets, keys, or seed phrases committed
  • Follows the coding conventions in the relevant service README
  • PR is focused on a single concern

Copy link
Copy Markdown
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. 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Live region announcements for key state transitions

2 participants