Keyboard Interaction
- UP and DOWN: Cycles through options.
- ESC: Closes the options.
- ENTER: Selects the currently focused option and closes the menu.
- TAB: Closes the menu, leaves what the user has typed, and moves focus to the next focusable element on the page.
Screen-reader Interaction
- When search results are returned, the count and instructions are announced.
- When suggestions are arrowed through, they are announced.
Modified from Intopia
This is a heavily modified version of an accessible autosuggest from Intopia's autosuggest article and code example by Adem Cifcioglu. Changes include:
- Simplified the HTML and CSS.
- Added variable for maximum number of options displayed.
- Improved responsive layout, made widget relatively positioned.
- Arrow up/down only selects the options (previously focused the input).
- Added aria-expanded; changed aria-autocomplete from all to list.
- Changed a few variable names in the Javascript.
- Some Javascript optimization and formatting updates.
- Improved no-Javascript use case.
- Changed options to U.S. cities.
- For better visual affordance in Windows HCM: returned focus ring
; added bullet to selected option.
- For autocomplete options, changed from Divs to UL/LI.
- Moved from ARIA 1.0 version of combobox to 1.1 version (where role="combobox" is placed on a container)