mentis

Accessibility

Accessibility features and ARIA support in MentionInput.

The MentionInput component is designed with accessibility in mind:

  • Uses role="combobox" for the contentEditable element and role="listbox"/role="option" for the dropdown and options.
  • Supports comprehensive keyboard navigation including arrow key navigation into mention chips (see Keyboard Navigation).
  • Uses aria-controls, aria-activedescendant, aria-autocomplete, aria-haspopup, and aria-expanded for screen reader support.
  • Focus is managed when selecting options and navigating with contentEditable.
  • The modal can be closed with Escape for easy dismissal.
  • ContentEditable implementation provides enhanced text manipulation and cursor positioning for screen readers.

These features ensure the component is usable by keyboard and assistive technology users, with the contentEditable architecture providing improved accessibility for rich text interactions.