Accessible "Chips" Pattern
Enter a U.S. city name via typing, or select via autosuggest (for keyboard use the up/down arrows and Enter).
Press the Add City button.
City appears in list below; press remove/X to remove selection.
This pattern was created as an alternative design to the
Angular Material Chips Autocomplete
This pattern is based on the
(in the same repo).
As an experiment, here's a
fork of this project implementing the HTML5 datalist element
for the dropdown. Unfortunately,
datalist has fairly poor accessibility support
. Both resources by Michael Fairchild (@mfairchild365).