Skip to content

[Frontend] dashboard StreamDetailsModal lacks role=dialog/aria-modal and focus trapping (only modal not using useModalDialog) #860

Description

@grantfox-oss

Telegram (ask questions / claim the issue here first): https://t.me/+DOylgFv1jyJlNzM0

Why this matters

frontend/src/components/dashboard/StreamDetailsModal.tsx:21-38 - this modal hand-rolls a window keydown/Escape listener and its outer div has no role=dialog, no aria-modal, no aria-labelledby, no focus trap, no body scroll-lock, and no focus restore. Every sibling modal uses useModalDialog which provides all of that. Keyboard/SR users can Tab out of this modal into the page behind it and focus is not returned on close.

Acceptance criteria

  • StreamDetailsModal uses useModalDialog (or equivalent) so focus is trapped while open
  • Dialog container has role=dialog, aria-modal=true, and aria-labelledby pointing at the Stream Details heading
  • Body scroll is locked while open and focus returns to the trigger on close
  • Escape handling continues to work

Files to touch

  • frontend/src/components/dashboard/StreamDetailsModal.tsx

Out of scope

  • Other modals already remediated
  • Visual restyle of the modal

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programbugSomething isn't workingcriticalfrontendFrontend related tasks

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions