Modal dialog for menu on small viewports

[srapilly]

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 or yarn 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

1. https://docusaurus.io/
2. zoom in or reduce the viewport to show the mobile version
3. 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.

[bharateshwq]

Hey, are you still working on this issue?

[hidde]

I've added a fix for this in #10706, to use <dialog>, as you suggested and we did in in our swizzled component on nldesignsystem.nl.

This addresses:

• lack of dialog role in a11y tree: <dialog> comes with dialog role built in
• “Elements outside the dialog are not focusable”: seems to me this point was meant to be the oppossite; currently elements outside the dialog are focusable and if the dialog is to be modal, elements outside should not be focusable; using <dialog> fixes this, the browser will keep focus in the dialog while it is open
• return focus back to invoking element: <dialog> has this built in
• “Elements outside the dialog are exposed to the accessibility tree” should also be fixed with use of <dialog>