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

[peirstom]

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 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.

[Josh-Cena]

Interesting. I'm willing to accept a fix, but in which case would people be (a) using mobile layout and (b) using keyboard navigation?

[slorber]

I'm able to focus the hamburger and navigate inside, but "enter" does not open it, and you need to press tab 😄

Also tabbing order might not be very good (it focuses the search after tabbing once)

and once we reach the end we tab up to the hidden secondary menu (that is empty for the homepage)

As @Josh-Cena , wondering if it's worth investing effort in solving all this.

Who will be using this, why and how?