Filed from the second-wave repository audit (issue 55/100). See the audit summary for full category context.
- Location:
frontend/src/components/wallet/WalletModal.tsx:26-196
- Problem: This modal hand-rolls its own Escape handling (61-73) and body-scroll lock (76-81) instead of using
useModalDialog (used by every other modal: TopUpModal, CancelConfirmModal, StreamDetailsModal, StreamCreationWizard, Navbar's MobileMenu). As a result it has no focus trap and no focus restoration to the previously-focused element on close — the very first modal a new user interacts with is the one without proper keyboard accessibility.
- Evidence: No
useModalDialog import/usage in the file, unlike every sibling modal.
- Suggested implementation: Migrate
WalletModal to useModalDialog, removing its bespoke Escape/scroll-lock logic.
- Acceptance criteria: Tab key cannot move focus outside the modal while open; closing it returns focus to the button that opened it, verified by a keyboard-navigation test.
- Difficulty: S
- Expected impact: Fixes the most consequential accessibility gap in the app, given it's the entry point to using the product at all.
frontend/src/components/wallet/WalletModal.tsx:26-196useModalDialog(used by every other modal:TopUpModal,CancelConfirmModal,StreamDetailsModal,StreamCreationWizard,Navbar'sMobileMenu). As a result it has no focus trap and no focus restoration to the previously-focused element on close — the very first modal a new user interacts with is the one without proper keyboard accessibility.useModalDialogimport/usage in the file, unlike every sibling modal.WalletModaltouseModalDialog, removing its bespoke Escape/scroll-lock logic.