Better keyboard navigation/selection

[rugk]

Use case

You have autoFocus on and now you want to search for an emoji and quickly select it (preferably without a mouse, because that's faster).

Currently

What you can do currently is:

• search for it
• press Tab multiple times to navigate to the right position (two times as far as I see) to get to the first emoji
• use Tab again (or shift+Tab) to go through the list item by item…
• enter/space to select emoji

Proposed solution

• When you are in the input field an 🔽 (arrow down) should bring you (the focus) to the list of emojis, i.e. actually to the first emoji in that list.
• The focus style should be improved, so you can see what (also an accessibility improvement) is selected.
• use the keyboard keys to navigate the list of emojis in a grid-style (currently: if you use up/down arrows, it scrolls the scrollbar)
• Just press space or enter as usual to select an emoji.
• When you are at the top row of your emojis. 🔼 (arrow up) should bring you (the focus) to the search bar.
• Tab navigation should obviously still be possible.

[nolanlawson]

These are great ideas, although I would add that there should be an aria-describedby that explains for the benefit of screenreader users how to use these shortcuts. I'm not sure how to surface these shortcuts to non-screenreader users though.

[rugk]

Okay, good idea. However, I'd argue that:

1. This feature is not only for screenreaders. Actually, I would like to use it by myself and I don't use a screenreader. (And it has been suggested in my project by a user who apparently also does not use a screenreader: Keyboard friendliness: selecting emojis rugk/awesome-emoji-picker#41).
2. I personally think a description is not really necessary (for users that don't use a screenreader, at least), because that is quite intuitive IMHO. I tried pressing the down button in the search input field, because that's the direction where the emojis are.
   And navigating the list of emojis with arrow keys is something very intuitive, because that's how any game navigation or so works… 😉

So anyway yes, we can add those.

[jonahparampara]

I agree with rugk, and I think the main benefit is for general powerusers who are good with their keyboards, not screenreaders.

There also seems to be a bug in the current selection implementation - if I use tab to navigate to a search results, and then hit enter, the first search result is returned instead of the selected item.

[xindixu]

Any update on this issue? I'd love to have keyboard support in emoji picker ❤️. Also, would you consider accepting a PR adding this feature?

[xindixu]

I created a new branch and implemented some of the above suggestions. Would you be able to take a look at my PR? Where can I get permission to push?

[EtienneLem]

This is considered fixed in latest version. Please reopen an issue if that’s not the case.