reach / reach-ui

The Accessible Foundation for React Apps and Design Systems
https://reacttraining.com/reach-ui/
MIT License
5.97k stars 560 forks source link

Open Listbox on pressing Enter #935

Open danielsimao opened 2 years ago

danielsimao commented 2 years ago

🚀 Feature request

Current Behavior

At the moment, while the focus is in ListboxButton, you can only open the Listbox by pressing Space and some of the ArrowKeys.

Desired Behavior

Add the possibility of opening the listbox by pressing Enter while the focus is in the ListboxButton.

Suggested Solution

For what I gathered, should require only a check for the key pressed on KeyDown and emit open listbox event in case that key equals Enter.

Who does this impact? Who is this for?

Intermediet

danielsimao commented 2 years ago

I see machine.ts is handling the onEnter event in a different way, but I dunno if I agree. Allowing the listbox button to submit the form should come in come in some kind of prop that would enable that. Not opening the listbox while pressing Enter as been very weird as user and that key is always my go to, even more than the Space key.

carlostpg commented 1 year ago

FWIW the ARIA Authoring Practices for a "Select-Only Combobox" (not to be confused with reach-ui/Combobox, which allows for user text input) notes that Enter key "Opens the listbox without moving focus or changing selection" when closed. It would be great for reach-ui to match that recommendation too.