Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
smhigley opened this issue Oct 10, 2022 · 0 comments · Fixed by #25173
Closed

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

smhigley opened this issue Oct 10, 2022 · 0 comments · Fixed by #25173

Comments

@smhigley
Copy link
Contributor

(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
@bsunderhus bsunderhus mentioned this issue Oct 11, 2022
5 tasks
@bsunderhus bsunderhus changed the title react-dialog: send focus to the dialog root when no other foucsables are present react-dialog: send focus to the dialog root when no other focusables are present Oct 11, 2022
@msft-fluent-ui-bot msft-fluent-ui-bot added Status: Fixed Fixed in some PR and removed Status: In PR labels Oct 13, 2022
@microsoft microsoft locked as resolved and limited conversation to collaborators Nov 12, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants