Tab Behavior

The <auro-menu> component does not participate in the tabindex sequence directly. Keyboard navigation is managed by the parent component (e.g., <auro-select>, <auro-combobox>) through their keyboard strategy classes.

Key Events

Note: <auro-menu> registers a keydown listener on its host. By default the menu is not focusable — no tabindex on the host, and menuoptions are tabindex="-1" — so the listener does not fire on its own. It fires whenever a keydown reaches the host, which happens in any of the following ways:

A wrapping component focuses something inside the menu subtree and the event bubbles up to the host. In the standard integrations (<auro-select>, <auro-combobox>), keyboard behavior is primarily parent-managed rather than bubble-driven: focus stays on the parent's trigger/input, and the parent captures keys there and drives the menu directly via its public navigateOptions() / updateActiveOption() methods and the menu's internal makeSelection() routine (@private, not part of the public menu API).
A wrapping component dispatches or reroutes a KeyboardEvent at the menu programmatically (for example, menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))).
The author makes the host focusable (for example, by adding tabindex="0" to the <auro-menu> element) and focuses it. The host already has role="listbox", so this yields a bare, focusable listbox that responds to the keys in the table below. For full combobox semantics use <auro-select> or <auro-combobox>, or replicate their aria-activedescendant wiring from a separate trigger.

Keys not listed below (Home, End, Escape, type-ahead) are handled by the parent — see the <auro-select> and <auro-combobox> keyboard behavior docs. An "interactive option" is one that is not disabled, hidden, or static — these are always skipped during navigation and selection, along with <hr> dividers.

Key	Current State	Behavior
ArrowDown	No option is active	The first interactive option becomes active.
	An option is active, followed by interactive options	Advances the active option to the next interactive option.
	The last interactive option is active	Wraps to the first interactive option.
	Menu has no options or all options are non-interactive	No option becomes active; no `auroMenu-activatedOption` event fires.
	Menu is in `loading` state	The rendered loading placeholder is inert (marked `disabled`) and is not part of `items`, so it cannot become active.
ArrowUp	No option is active	The last interactive option becomes active.
	An option is active, preceded by interactive options	Advances the active option to the previous interactive option.
	The first interactive option is active	Wraps to the last interactive option.
	Menu has no options or all options are non-interactive	No option becomes active.
Enter	Single-select, active option is not currently selected	The active option is selected. Any previous selection is cleared. `auroMenu-selectedOption` fires.
	Single-select, active option is already selected	No selection change, but `auroMenu-selectedOption` still fires so the parent can react (for example, close the dropdown).
	Multi-select	The active option toggles selected. Other selections are preserved.
	Active option is disabled, hidden, or static	Selection is a no-op.
Tab	An option is active	The active option is selected (same behavior as `Enter`). Note: `Tab` does not `preventDefault`, so focus continues to the next element in the tabindex sequence after selection.
Tab	No option is active	Focus moves to the next tabbable element; no selection change.