Menu accessibility · Needless UI

Keyboard interaction

Key	Action
`Enter or Space`	On the trigger: opens the menu on its first item. On an item: chooses it, or opens its submenu.
`Down arrow`	On the trigger: opens the menu on its first item. In the menu: moves to the next item.
`Up arrow`	On the trigger: opens the menu on its last item. In the menu: moves to the previous item.
`Home and End`	Moves to the first or last item.
`Right arrow`	Opens a submenu and moves to its first item (left arrow in right-to-left text).
`Left arrow`	Closes a submenu and returns to its parent item (right arrow in right-to-left text).
`Escape`	Closes the menu and returns focus to the trigger.
`Letters`	Moves to the next item whose label starts with the typed text.

The trigger gets aria-haspopup, aria-expanded and aria-controls; the menu and its items get their ARIA roles from Angular Aria.
The highlighted item uses a solid fill with at least 4.5:1 text contrast, and it doubles as the focus indicator. In forced-colors mode it gets a system highlight outline.
Checkable items announce their state through aria-checked.
Choosing an item closes the menu and returns focus to the trigger. Moving focus outside the trigger and the menu also closes it.
Items are at least 28 pixels tall, above the WCAG 2.2 minimum target size.