Open
Description
Have you read the Contributing Guidelines on issues?
- I have read the Contributing Guidelines on issues.
Prerequisites
- I'm using the latest version of Docusaurus.
- I have tried the
npm run clear
oryarn clear
command. - I have tried
rm -rf node_modules yarn.lock package-lock.json
and re-installing packages. - I have tried creating a repro with https://new.docusaurus.io.
- I have read the console error message carefully (if applicable).
Description
On a small viewport (for example zoom on a desktop) or on mobile, the menu looks like a modal but for assistive technologies, it doesn't work like one.
menu-docusaurus.webm
Tested with Safari and VoiceOver on desktop (It's the same on a mobile screen reader)
We can also see 2 other issues:
- the toggle button to switch themes is announced when the menu open because of a live region Related to what was done in this I think: a11y: light & dark mode checkbox doesn't announce state switches #7667
- the secondary menu is focusable and present in the accessibility tree (same issue on a doc page for the main menu)
Reproducible demo
No response
Steps to reproduce
- https://docusaurus.io/
- zoom in or reduce the viewport to show the mobile version
- Open the menu
Expected behavior
The menu should work like a modal dialog:
- Keyboard focus should move inside the dialog when it opens
- Keyboard focus should move back to the trigger when it's closed
- Elements outside the dialog should not be exposed to the accessibility tree
To improve that, using the native HTML dialog with a showModal
is a good solution. If the native element is not adequate, a small library like a11y-dialog could help
Actual behavior
The menu does not work like a modal dialog:
- it's not exposed as a dialog to the accessibility tree (can be visualized in chrome devtools)
- Elements outside the dialog are not focusable
- Keyboard focus do not move back to the trigger when it's closed
- Elements outside the dialog are exposed to the accessibility tree
Your environment
- Public site URL: https://docusaurus.io/
Self-service
- I'd be willing to fix this bug myself.