Skip to content

fix(a11y): trap focus and announce progress in QR and batch modals - #169

Merged
truthixify merged 1 commit into
wraith-protocol:developfrom
fwseyi:fix/a11y-modal-dialogs
Aug 27, 2026
Merged

fix(a11y): trap focus and announce progress in QR and batch modals#169
truthixify merged 1 commit into
wraith-protocol:developfrom
fwseyi:fix/a11y-modal-dialogs

Conversation

@fwseyi

@fwseyi fwseyi commented Aug 26, 2026

Copy link
Copy Markdown
Contributor

Adds focus trapping, focus restoration, keyboard shortcuts, and live-region announcements to the QR scanner, QR code modal, and batch withdraw modal. Adds Playwright a11y coverage for all three via Storybook, plus a new pnpm test:a11y script.

Changes

  • src/hooks/useFocusTrap.ts — shared hook: traps Tab/Shift+Tab within a dialog, focuses first element on open, restores focus to the trigger on close
  • StellarBatchWithdrawModal.tsx — role="dialog", aria-modal, aria-labelledby, Escape-to-close, focus trap, aria-live="polite" on per-item status badges
  • QRCodeModal.tsx — focus trap added (existing Escape/initial-focus preserved), aria-label added to the QR SVG (was a serious axe violation — svg-img-alt)
  • StellarSend.tsx — focus trap on the scanner dialog, Space toggles camera, U triggers upload-fallback, aria-label on the camera preview
  • StellarSplit.tsx — aria-live="polite" aria-atomic="true" on per-row batch-send status (rendered inline, not a modal — confirmed intentional)
  • package.json — pnpm test:a11y script added

Tests

tests/a11y/modals.spec.ts — 10 new tests via Storybook (QRCodeModal.stories.tsx, StellarBatchWithdrawModal.stories.tsx, new QRScannerDialog.stories.tsx), covering axe violations, keyboard-only focus trap, and close/Escape behavior for all three dialogs. All 10 passing.

Known pre-existing failure (unrelated to this PR)

tests/a11y/send.spec.ts's two Stellar chain-switch tests fail on both this branch and develop — the Chain sits in a hidden sm:flex container Playwright can't interact with at the default test viewport. Verified via git stash that this predates this PR; out of scope to fix here. Note The batch-send progress dialog (StellarSplit) got lighter test coverage than the other two — one aria-live presence check rather than a full axe scan + keyboard test, since it renders inline rather than as a true modal overlay. Flagging in case a follow-up is wanted for parity. Validation pnpm test:unit → 135/135 passing pnpm format:check → clean pnpm test:a11y → 10/10 new tests passing Closes #160

@vercel

vercel Bot commented Aug 26, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the truthixify's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Aug 26, 2026

Copy link
Copy Markdown

@fwseyi Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@truthixify
truthixify merged commit 3b17c5f into wraith-protocol:develop Aug 27, 2026
1 of 2 checks passed
@truthixify

Copy link
Copy Markdown
Contributor

Merged. Focus restoration on close plus live progress announcements, and you added the test:a11y script the acceptance list needed. Thanks @fwseyi.

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.

Accessibility deep-dive on QR scan and batch modals

2 participants