[Support request] Keyboard access issues with desktop and mobile dropdowns

[Greg]

Example: https://buildingdetails.com/
This site does not have any custom JS or CSS that impacts the menu functionality.

Desktop:

1. The submenu is displayed immediately upon receiving focus, which makes it painful for keyboard users trying to get to other top-level menu items.

2. Esc key does not close the submenu.

Mobile:

3. Esc key does not close the menu when toggled open via the keyboard.

This site is running 3.2.1 and 2.2.0. I had read that 2.2.0 would fix a number of keyboard accessibility issues, but these issues persist.

[Greg]

I started looking for example in the Site Library that use the same menu configuration, but gave up after six or seven.

[Fernando]

Hi Greg,

1. You may change the Navigation Dropdown behavior in Appearance > Customize > Layout > Primary Navigation > Navigation Dropdown.

Try changing it to Click - Arrow for instance. Reference: https://docs.generatepress.com/article/navigation-dropdown/

2. Esc + Enter should work.

If you use the Off canvas Menu instead on mobile, just pressing Esc is enough.

[Greg]

1. That doesn’t make any sense. I shouldn’t have to make the experience with a mouse worse so that it can be usable with the keyboard.

2. Esc + Enter doesn’t work, and it would be a bad solution if it did.

[David]

Hi Greg,

we will be focusing on Accessibility in the next update.
If you want to contribute by adding an issue on our github then we can add it to the project and you can track its progress:

https://github.com/tomusborne/generatepress/issues/

[Author]

Posts