Hamburger menu for left-side navigation cannot be accessed by keyboard - Keyboard Navigation - Accessibility #8095
Labels
bug
An error in the Docusaurus core causing instability or issues with its execution
domain: a11y
Related to accessibility concerns of the default theme
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.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
Self-service
The text was updated successfully, but these errors were encountered: