a11y/menu-keyboard

Dlaczego

A role="menu" turns off the screen reader's own reading keys and hands the keyboard to the page. If the page does not implement arrows, Enter and Escape, the menu cannot be used at all.

Poprawka

Opening with Enter, Space or Down Arrow focuses the first item (Up Arrow: the last); Up and Down move with wrapping; Home and End jump; typing a letter moves to the next item starting with it; Enter activates; Escape closes and focuses the button; Tab closes and moves on. Only one item has tabindex="0". If this is more than the use case needs, use a disclosure (button plus list of links) instead.

Przykłady

menu.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') { close(); button.focus() }
  if (e.key === 'ArrowDown') focusItem(index + 1)
  if (e.key === 'ArrowUp') focusItem(index - 1)
})

Źródła

• WAI-ARIA Authoring Practices, Menu Button pattern (keyboard interaction)
• WAI-ARIA Authoring Practices, Menu and Menubar pattern

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain a11y/menu-keyboard