Current GeneratePress submenu activation mode: click
This is where I’m developing and testing menu accessibility improvements, primarily for GeneratePress but hopefully adaptable to other themes as well.
Some goals:
- Use
buttonrather thanaelements for parent menu items - Support arrow-key navigation of the menu
- Avoid opening submenus when tabbing unless they are intentionally opened
- Set correct initial state for submenus so screen readers don’t read their contents unless toggled
Intended Keyboard Functionality
Current
| Key | Targets | Behavior Notes |
|---|---|---|
| Tab | Next sibling item, or first submenu item if submenu is open | Leave menu if no next item |
| Shift-Tab | Previous sibling item, or parent item if submenu is open | Leave menu if no previous item |
| Space and Enter | Toggle submenu | Focus first item? |
| Right arrow and down arrow | Next sibling item, or wrap to first sibling | Stay at current menu level |
| Up arrow and left arrow | Previous sibling item, or wrap to last sibling | Stay at current menu level |
| Home | First sibling item | Stay at current menu level |
| End | Last sibling item | Stay at current menu level |
| Escape | Submenu parent item, or mobile/off-canvas menu toggle |
Considering
| Key | Targets |
|---|---|
| Space and Enter | Activate current link? |
| Right arrow and down arrow | Enter open submenu? Jump to next parent sibling if on last sibling? |
| Up arrow and left arrow | Exit open submenu? Jump to previous parent sibling if on first sibling? |