maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
docbrown/app/javascript/crayons/MentionAutocompleteTextArea/__stories__/mention-autocomplete.md
Michael Kohl 7c31a9cc98
Remove buffer gem and related code: step 1 (#12993) 
* Remove buffer gem and related code

* Remove more Buffer-related code

* Remove one more Buffer spec

* Remove DUS

* Remove more Buffer code
2021-03-24 09:58:38 +07:00

1.2 KiB
Raw Blame History

Mention autocomplete

The MentionAutocompleteTextArea component uses the Reach UI Combobox under the hood. It works by replacing the textarea you pass in props with one enhanced with the @mention functionality.

The autocomplete will begin fetching suggestions once a user has typed @ plus at least two characters. A user's selection is confirmed when they either:

  • Click on a search option
  • Hit enter on a search option
  • Click away from the dropdown
  • Enter space to move away from the autocomplete

Mention autocomplete accessibility

The component replaces the given textarea with one generated using Reach UI Combobox. The underlying behavior then conforms to the WAI_ARIA guidelines on comboboxes.

An aria-live region communicates to a screen reader user when the list has been populated with suggestions.

Please note: When using the MentionAutocompleteTextArea, you must have either an aria-labelledby or aria-label attribute on the textarea you pass as a prop. These attributes are copied across to the Reach UI Combobox input, ensuring it is labelled correctly for accessibility.