Skip to content

Add focus trapping and Escape key handling to all modals #21

@pragmaticAweds

Description

@pragmaticAweds

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 modal
  • apps/web/src/components/modules/payment-stream/PaymentStreamConfirmationModal.tsx — stream confirmation
  • apps/web/src/components/offramp/OfframpQuoteModal.tsx — quote review modal
  • apps/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, and Dialog.Content correctly
  • Add aria-describedby to Dialog.Content pointing to the modal's description text
  • Ensure onOpenAutoFocus is set to focus the first interactive element or the close button

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions