Accessible "Chips" Pattern

Selected cities:

Basic Interaction

  1. Enter a U.S. city name via typing, or select via autosuggest (for keyboard use the up/down arrows and Enter).
  2. Select the Add City button.
  3. City appears in list below; select remove/X to remove selection.
  4. Focus management is optimized for ideal usability and accessibility.

Notes

  1. This pattern was created as an alternative design to the Angular Material Chips Autocomplete pattern.
  2. This pattern is based on the autosuggest demo (in the same repo).
  3. As an experiment, here's a fork of this project implementing the HTML5 datalist element for the dropdown. Check datalist accessibility support on A11ySupport.io. Both resources by Michael Fairchild (@mfairchild365).
  4. Related: Datalist over ARIA combobox via Web Axe.
  5. This pattern was created June 2019.