Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Better keyboard navigation/selection

See original GitHub issue

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 <kbd>Tab</kbd> multiple times to navigate to the right position (two times as far as I see) to get to the first emoji
use <kbd>Tab</kbd> again (or <kbd>shift</kbd>+<kbd>Tab</kbd>) to go through the list item by item…
enter/space to select emoji

Proposed solution

When you are in the input field an <kbd>🔽</kbd> (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 <kbd>space</kbd> or <kbd>enter</kbd> as usual to select an emoji.
When you are at the top row of your emojis. <kbd>🔼</kbd> (arrow up) should bring you (the focus) to the search bar.
<kbd>Tab</kbd> navigation should obviously still be possible.

Issue Analytics

State:
Created 4 years ago
Reactions:12
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

xindixucommented, May 21, 2020

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?

1reaction

rugkcommented, Jun 29, 2019

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

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: https://github.com/rugk/awesome-emoji-picker/issues/41).
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.