Hamburger menu for left-side navigation cannot be accessed by keyboard - Keyboard Navigation - Accessibility

### 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#reporting-new-issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [X] I have tried creating a repro with https://new.docusaurus.io.
- [X] I have read the console error message carefully (if applicable).

### Description

On low resolutions/mobile devices, a hamburger menu replaces the sidebar on the left. This hamburger menu cannot be correctly accessed with the keyboard:

when you click it with the mouse, it opens and stays open and allows
when you try to access it with the keyboard (tab -> return), it does not open or does not stay open
when you manage to open it, it is hard to close it or navigate it with keyboard


For comparison, here is a page with a similar design on low res where you can access the hamburger menu with keyboard and close it by pressing esc:
https://support.microsoft.com/de-de/office/erstellen-eines-organigramms-in-powerpoint-mithilfe-einer-vorlage-d361c25f-665e-4d2c-bfc9-133763511a85?ui=de-DE&rs=de-DE&ad=DE

### Reproducible demo

Thank you

### Steps to reproduce

When you press enter or space on the hamburger menu it should open and the active link should go to the first item.
Then navigation with tab should work within the menu. However pressing shift-tab to the close menu button should be possible to navigate out of the menu.

### Expected behavior

When you press enter or space on the hamburger menu it should open and the active link should go to the first item.
Then navigation with tab should work within the menu. However pressing shift-tab to the close menu button should be possible to navigate out of the menu.

### Actual behavior

Now when your focus is on the hamburger menu and then you press TAB twice the menu opens which is already strange.
The hamburger menu should only open when you are focussed on it and press enter or space then.

### Your environment

- Public source code: /
- Public site URL: https://docs.boc-group.com/adonis/en/
- Docusaurus version used: 2.0.1
- Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome (latest)
- Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows

### Self-service

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