[accessibility] Listbox: Navigate between options while typing, (like native <select> does)

[yaronuliel]

In native <select> - when the user types on the keyboard while focused on the element, the component looks for the next relevant options by the keystrokes, and replaces the selected value

This feature will help keyboard navigation, which is a huge deal in accessibility. It will also make the user experience better and more expected by resembling the way the browser works.

To resemble browser behavior, keystrokes should:

• Have a debounce before searching for the option (for fast typing)
• Reset the keystrokes after X ms (if the user rests for more than x ms, the next stroke starts a new search)
• When repeating a single keystroke - rotate between options starting with the same letter (a a a sequence will rotate between options starting with "a" rather than searching for next option that starts with "aaa")
• Be case insensitive
• Dispatch a change event on each change, even during typing (between keydown and keyup events)
• Skip disabled options
• Treat Spacebar while typing as the space character, and not open the listbox
• Do all the following without opening the listbox
• If the listbox is already open when typing - the behavior is a bit different: The matching option will be highlighted, but not selected (same way navigation with arrows currently works)

Example of what happens in a native select:

Screen.Recording.2022-10-26.at.20.49.09.mov

[vincerubinetti]

Headless does (at least some of) this when the select dropdown is open, but not when it is collapsed as the native select does. Out of curiosity I looked at React Aria's select, and it does do type-ahead when closed, but not when open, oddly. Material UI does it when open. Vuetify does it when open or closed. Personally I would expect it when open or closed.

[yaronuliel]

@vincerubinetti I think that the library should aim to resemble native behavior, regardless of whether other libraries did it or not

[vincerubinetti]

Yes I agree but it is still worthwhile to list what the precedence is for other libraries.

Also, I reported the fact that React Aria doesn't do it when open, and they immediately labeled it as a bug and fixed it already. So, this is hopefully a good motivation for Headless to do the same.