Modal dialog for menu on small viewports

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] 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: https://github.com/facebook/docusaurus/issues/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

[X] I'd be willing to fix this bug myself.

facebook / docusaurus