Accessibility
MentionsInput implements the WAI-ARIA editable combobox with list autocomplete pattern:
- The input has
role="combobox"witharia-autocomplete="list"(or"inline"whensuggestionsDisplay="inline"),aria-haspopup="listbox", andaria-expandedreflecting whether suggestions are open. - The open suggestions overlay is a
role="listbox"(labeled viaa11ySuggestionsListLabel) referenced byaria-controls, and its focusedrole="option"is referenced byaria-activedescendant, so focus never leaves the input while navigating with the arrow keys. - Inline autocomplete announces the current completion through a visually hidden live region referenced by
aria-describedby. - Remember to give the input an accessible name — pass
aria-labelor associate a<label>yourself.
Expected screen-reader behavior
Section titled “Expected screen-reader behavior”Typing a trigger announces that a list is available; ArrowUp/ArrowDown announce each suggestion as it becomes active (via aria-activedescendant); Enter or Tab inserts the active suggestion; Escape closes the list.
Known deviation
Section titled “Known deviation”In multiline mode the ARIA-in-HTML spec disallows an explicit role on <textarea>, but the combobox role is required for the aria-expanded/aria-controls/aria-activedescendant wiring above and is well supported by screen readers (axe-core rates it minor). Single-line mode (singleLine) renders an <input type="text"> and is fully conformant.
These invariants are enforced by the axe-core suite in tests/MentionsInputA11y.spec.tsx, which validates the closed, open-overlay, inline-autocomplete, and form states.