Skip to content

react-dialog: send focus to the dialog root when no other focusables are present #25150

@smhigley

Description

@smhigley

(discussed during the dialog a11y pass)

Two steps needed to implement the fix:

  • the dialog surface (the element with role="dialog") should have tabindex="-1" to make it focusable, but not in the tab order
  • When no other focusables are present, focus should go to the role=dialog element

This will fix the following bugs:

  • Opening a dialog with no focusables gives no screen reader feedback
  • A modal dialog with no focusables fully breaks the page for screen reader users
  • Keyboard users cannot dismiss a dialog with no focusables, since escape is implemented within the dialog itself

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions