Modal dialog for menu on small viewports

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#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](https://github.com/facebook/docusaurus/assets/85184231/e606dc12-878b-4683-85f4-479771414034)

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](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) 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

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility_considerations) with a `showModal` is a good solution. If the native element is not adequate, a small library like [a11y-dialog](https://a11y-dialog.netlify.app/) 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](https://developer.chrome.com/blog/full-accessibility-tree/))
- 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.