-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Labels
difficulty: easySmall, bounded changesSmall, bounded changes
Description
Context
The app uses several modals (wallet connection, payment stream confirmation, offramp quote, offramp success) built with Radix UI Dialog. While Radix provides basic focus trapping, the custom modal implementations may not consistently handle: focus return to the trigger element on close, Escape key dismissal, or preventing background scroll. This is both an accessibility requirement (WCAG 2.1 AA) and a UX issue.
What Success Looks Like
- All modals trap focus within the dialog when open (Tab cycles through modal elements only)
- Pressing Escape closes the modal and returns focus to the element that triggered it
- Background content is inert when a modal is open (no scrolling, no interaction)
- Modals announce themselves to screen readers when opened
- Closing a modal returns focus to the button/link that opened it
Implementation Guidance
apps/web/src/components/organisms/wallet-modal.tsx— wallet connection modalapps/web/src/components/modules/payment-stream/PaymentStreamConfirmationModal.tsx— stream confirmationapps/web/src/components/offramp/OfframpQuoteModal.tsx— quote review modalapps/web/src/components/offramp/OfframpSuccessModal.tsx— success modal- Radix UI Dialog already handles most of this — verify that all modals use
Dialog.Portal,Dialog.Overlay, andDialog.Contentcorrectly - Add
aria-describedbyto Dialog.Content pointing to the modal's description text - Ensure
onOpenAutoFocusis set to focus the first interactive element or the close button
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
difficulty: easySmall, bounded changesSmall, bounded changes