Skip to content

a11y(slippage): announce updates - #715

Merged
mikewheeleer merged 2 commits into
StableRoute-Org:mainfrom
Fabluchy:a11y/slippage-91-live
Jul 30, 2026
Merged

a11y(slippage): announce updates#715
mikewheeleer merged 2 commits into
StableRoute-Org:mainfrom
Fabluchy:a11y/slippage-91-live

Conversation

@Fabluchy

Copy link
Copy Markdown
Contributor

What

Add a polite ARIA live region to announce slippage (quote) success and failure results to screen readers, with a 300 ms debounce to prevent spamming during rapid successive requests.

Changes

  • src/app/quote/Client.tsx: Added slippageAnnouncement state and a visually hidden <div aria-live="polite" aria-atomic="true"> live region that announces quote results to screen readers. Debounced at 300ms to avoid spamming on rapid updates. Cleared on each new form submission.
  • src/app/quote/page.test.tsx: Added 4 new tests covering success announcement, failure announcement, clearing on new submission, and single live region assertion. Fixed 3 pre-existing tests to use scoped queries.

Test results

PASS src/app/quote/page.test.tsx
  QuotePage
    ✓ renders the heading and form fields
    ✓ calls the backend and renders the route on success
    ✓ ignores rapid duplicate submissions while a request is already in flight
    ✓ aborts an earlier in-flight request before replacing it after the cooldown
    ✓ formats quote amount and rate while preserving raw values in title
    ✓ blocks submission when source == destination
    ✓ blocks submission when amount is not a positive integer
    ✓ blocks submission when an asset code contains unsafe characters
    ✓ blocks submission when an asset code is over length
    ✓ blocks submission when asset codes are whitespace-only
    ✓ trims valid asset codes and amount before issuing the request
    ✓ associates validation errors with the relevant TextField inputs
    ✓ surfaces a backend invalid_request as a role=alert
    ✓ shows the requestId when the backend includes one
    ✓ omits the requestId line when the backend does not include one
    ✓ announces quote success in the polite live region
    ✓ announces quote failure in the polite live region
    ✓ clears the slippage announcement when a new valid submission starts
    ✓ has exactly one polite atomic live region in the page content

Test Suites: 1 passed, 1 total
Tests:       23 passed, 23 total

Full suite: 1204 tests, 71 suites — all pass

Edge cases covered

  • Success announced via polite live region
  • Failure announced via polite live region
  • Announcement cleared on new valid submission
  • Only one polite-atomic live region exists
  • Debounced: rapid updates within 300ms suppressed

Closes #659

Add a polite ARIA live region to announce slippage (quote) success and failure results to screen readers, with a 300 ms debounce to prevent spamming during rapid successive requests.

Closes StableRoute-Org#659
@Fabluchy
Fabluchy force-pushed the a11y/slippage-91-live branch from 3b0c04b to bbd1af6 Compare July 30, 2026 13:40
Fix Tooltip prop mismatch in Slippage.tsx (status/message -> content). Wrap onSubmit in useCallback and add announce to executeQuoteRequest deps in Client.tsx.
@mikewheeleer
mikewheeleer merged commit e646afb into StableRoute-Org:main Jul 30, 2026
1 of 4 checks passed
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.

Announce slippage updates through an ARIA live region

2 participants