Accessibility / keyboard demo

Keyboard navigation reference

Key	Context	Action
↓	Input focused, dropdown closed, static/pre-fetched source	Opens dropdown and highlights first suggestion
↓	Dropdown open	Moves highlight to next option (wraps to first)
↑	Dropdown open	Moves highlight to previous option (wraps to last)
Home	Dropdown open	Highlights first option; does not move text cursor
End	Dropdown open	Highlights last option; does not move text cursor
Enter	Dropdown open, option highlighted	Selects highlighted suggestion, closes dropdown, adds tag
Enter	Dropdown open, no highlight	Commits typed text as free-form tag (if enforceSuggestions is off)
Enter	Dropdown closed	Commits typed text as tag
,	Any, input has text	Commits typed text as tag (default delimiter)
Escape	Dropdown open	Closes dropdown; preserves input text and focus
Backspace	Input empty, tags present	Removes the last tag
Tab	Input has text	Commits typed text (when Tab is configured as delimiter); moves focus to next element
Shift+Tab	Any	Moves focus backward; never trapped inside the component

Screen reader verification checklist

Focus management

• Focus stays on the combobox input throughout dropdown navigation.
• After removing a chip (via the ✕ button or Backspace), focus returns to the combobox input.
• Escape preserves focus on the combobox input.
• Tab moves focus out of the component naturally — no focus trap.

ARIA structure summary

• Input: role="combobox", aria-autocomplete="list", aria-haspopup="listbox", aria-expanded, aria-controls, aria-activedescendant
• Suggestion list: role="listbox"
• Each suggestion: role="option", aria-selected
• Chip region: role="list", aria-label="Selected tags"
• Each chip: role="listitem" with a <button> — aria-label="Remove <label>"
• Error region: role="alert" (assertive live region)
• Status announcer: aria-live="polite", aria-atomic="true"