ashleemboyer / a11y-components-og

The purpose of this repository is to share what I've learned about creating accessible React components. It is not currently open source, but might be at some point in the future.

17 stars 0 forks source link

[Listbox] Add keyboard navigation to Listbox #5

Open ashleemboyer opened 4 years ago

ashleemboyer commented 4 years ago

What's the problem?

The new Listbox component needs to work with a keyboard. I'll comb the WAI-ARIA docs and note all the requirements in the next section.

TODO

Note: these requirements are for the single-select, vertically arranged listbox. Multi-select and horizontally arranged options may come later.

When the Listbox receives focus

[ ] If none of the options are selected before receiving focus, the first option receives focus and is automatically selected and receives focus
[ ] If an option is selected before the Listbox receives focus, focus is set on the selected option.

Down, Up, Home, & End With each of these keys, selection follows focus.

[ ] Down arrow: Moves focus to the next option.
[ ] Up Arrow: Moves focus to the previous option.
[ ] Home: Moves focus to the first option.
[ ] End: Moves focus to the last option.

Type ahead

[ ] Type one character: moves focus to the next item with a name that starts with the typed character.
[ ] Type multiple characters in rapid succession: moves focus to the next item with a name that starts with the string of characters typed.

ashleemboyer commented 4 years ago

[Listbox] Keyboard navigation