Announce dynamic list updates and errors with consistent ARIA live regions

[mikewheeleer]

Improve screen-reader feedback for list loads and result updates

Description

The pairs, events, api-keys, and webhooks pages swap from a loading state to a populated list with no programmatic announcement, so screen-reader users get no feedback that content arrived. For example src/app/pairs/page.tsx renders Loading… then silently replaces it with a <ul>, and src/app/events/page.tsx does the same. Error nodes use role="alert", but success transitions are silent. This issue adds consistent live-region feedback.

Requirements and context

• Repository scope: StableRoute-Org/Stableroute-frontend only.
• Wrap each list's loaded/empty/loading swap in an aria-live="polite" region (or use the accessible src/components/Spinner.tsx role="status") so the transition from loading to "N items loaded" / "no items" is announced once.
• Avoid double announcements: do not nest multiple live regions, and ensure the error role="alert" regions remain the assertive channel.
• Apply consistently across pairs, events, api-keys, and webhooks pages without changing data fetching.
• Keep visual output unchanged; this is semantics-only.

Suggested execution

• Fork the repo and create a branch
• git checkout -b a11y/live-regions-27-announce-updates
• Implement changes
  • Write code in: src/app/pairs/page.tsx, src/app/events/page.tsx, src/app/api-keys/page.tsx, src/app/webhooks/page.tsx.
  • Write comprehensive tests in: add page tests asserting the live region announces the loaded/empty state and that there is a single polite region.
  • Add documentation: note the live-region convention in README.md.
  • Add JSDoc/comments where a status region is introduced.
  • Validate no duplicate live regions and correct politeness levels.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.
• Cover edge cases: loading→loaded, loading→empty, error (assertive), and no duplicate regions.
• Include the full npm test output and a11y notes in the PR description.

Example commit message

a11y: announce list load and empty transitions via live regions

Guidelines

• Minimum 95 percent test coverage for impacted modules.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[Dickson2015]

Hi maintainer, I would love to claim and work on this issue. I have reviewed the requirements and will be delivering timely if given the opportunity, thank you.

[shinzoxD]

Hi maintainers, picking up this GrantFox bounty.

Plan: implement the requested scope on a fork branch with sync-tests, then open a PR referencing this issue.

Payout wallet (Stellar): GBVHELLD2JE235Y2NGTDT3MWI3T65ON6SY4N6FBHYVDAQ5FZC2CP5QXH
GrantFox OSS campaign — smart escrow payout on merge.

— shinzoxD

[Times-stack]

I'll add consistent ARIA live-region feedback across pairs, events, api-keys, and webhooks pages in Stableroute-frontend — wrapping loading/loaded/empty transitions in a single aria-live="polite" region per list (or reusing Spinner's role="status"), keeping error alerts as the assertive channel, with no visual changes. I'll cover loading→loaded, loading→empty, and no-duplicate-region cases in tests, and submit within 96 hours with full npm test output and a11y notes. I have React/Next.js/TypeScript experience from prior GrantFox PRs.