Accessibility
Interaction behavior, automated checks, and manual verification limits.
The editor keeps DOM focus while suggestions are navigated. The popup uses role="listbox"; options use role="option" and aria-selected. The host's aria-activedescendant points to the highlighted option, and aria-controls points to the mounted listbox.
Name the input with a label or aria-label, and give the listbox an accessible name through Mention.Popover.
For the implementation details behind these relationships, see Focus and ARIA.
Keyboard behavior
| Key | Behavior while suggestions are open |
|---|---|
| ArrowDown / ArrowUp | Move the highlight and reveal it in the scrolling list. |
| Enter / Tab | Commit the current result if the selection is unchanged. |
| Escape | Dismiss without editing the text. |
| IME confirmation | Leave composition to the host; do not commit a suggestion. |
Blur and outside pointer interaction dismiss the list. Consumer key handlers can prevent Mention from handling a key.
Preserve native text semantics
Mention.Input remains a native textarea with its implicit textbox role. Mention supplies suggestion relationships without assigning role or aria-expanded to the host. The HTML-ARIA textarea entry permits the native textbox semantics. WAI-ARIA permits a textbox to reference an active option inside a listbox identified by aria-controls.
For a rich editor, provide its accessible name, role="textbox", and aria-multiline="true" on the editable host, then apply getEditorProps() as the suggestion state changes. See the complete ProseMirror example.
Verification
Browser tests check focus, keyboard behavior, attribute relationships, and automated accessibility rules. The idle textareas and the short lists in the executable composer and form examples pass unfiltered axe checks. The textarea role needs no rule exception.
Two findings are recorded explicitly in the larger test fixture:
scrollable-region-focusable: axe's heuristic exempts combobox popups, but does not recognize this textbox-controlled list. Mention keeps focus in the textarea; arrow keys select and scroll options into view. Browser tests verify access beyond the scroll boundary. Do not add a second tab stop merely to silence the rule; verify keyboard access in your actual host.region: a listbox portaled to the body may sit outside a landmark. Usecontainer={null}or an appropriate landmark container for your application's layout and reading order.
The original prototype had user-reported assistive-technology testing. That result does not validate the current implementation or this structural revision. The current library still needs manual checks with NVDA, JAWS, VoiceOver, and TalkBack, plus real OS IMEs. Synthetic composition tests cover event handling, not real candidate-window behavior.
Test with the actual application, including dialogs, portals, scrolling containers, input labels, and custom option content. For TalkBack swipe order, an in-place popup is available through container={null}.
Default styles include forced-colors rules. Custom styling must preserve a visible highlighted state.