Accessibility

SuggestMenu is built for accessibility: listbox semantics, keyboard support, and focus management so the editor stays the focus owner while the list uses virtual focus.

ARIA roles

The list container has role="listbox", each selectable option has role="option". The active option is exposed via aria-activedescendant on the listbox, and aria-selected on the option. Groups use role="group" and aria-labelledby pointing to the group label.

Keyboard navigation

When the menu is open, focus stays in the editor. Arrow Up/Down move the virtual focus in the list. Enter selects the highlighted item. Escape dismisses the menu. Home/End jump to the first or last item. Wrap behavior (e.g. from last to first) is configurable. All of this is wired by the compound components; you don’t need to implement it yourself.

Focus management

The editor keeps real DOM focus. The list uses “virtual” focus: the highlighted index is tracked and reflected with aria-activedescendant and data-highlighted. Screen readers announce the listbox and the active option without moving focus out of the editor.

Screen reader considerations

Ensure group labels are meaningful (e.g. “People”, “Commands”). Use SuggestMenu.Empty to provide a verbal “No results” or similar when nothing matches, and compose SuggestMenu.DismissItem inside it if you want a selectable fallback action. Use SuggestMenu.Dismiss for freeform dismiss controls outside the listbox.