xstate-catalogue icon indicating copy to clipboard operation
xstate-catalogue copied to clipboard

Searcher UX: Handle arrow keys

Open with-heart opened this issue 3 years ago • 2 comments

Right now the searcher can only be navigated using tab, which feels unexpected for that type of interaction. Most sites with an Alogolia UI or similar support arrow keys.

Obviously not the highest priority, but it's a nice bit of polish that would make search feel extra special. Plus this would probably add enough unique functionality to make the searcher machine a good one to include in the catalogue itself, while also driving the search experience. That's my kind of dogfooding!

Key Cond Action
Down Arrow Final item is focused Move focus to first item
Down Arrow - Move focus to next item
Up Arrow First item is focused Move focus to last item
Up Arrow - Move focus to previous item

with-heart avatar Apr 07 '21 14:04 with-heart

👍 . The right way to do this would be to use a combobox primitive I think (so that it's as accessible as can be), e.g. https://reach.tech/combobox or https://www.downshift-js.com/use-combobox. Or as you say, dog-food the upcoming combobox state machine!

hmaurer avatar Apr 07 '21 15:04 hmaurer

Yeah! Once the combobox state machine is written we can practice what we preach.

mattpocock avatar Apr 07 '21 15:04 mattpocock