Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better keyboard navigation/selection #348

Closed
rugk opened this issue Jun 24, 2019 · 6 comments
Closed

Better keyboard navigation/selection #348

rugk opened this issue Jun 24, 2019 · 6 comments

Comments

@rugk
Copy link

rugk commented Jun 24, 2019

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
Copy link

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
Copy link
Author

rugk commented Jun 29, 2019

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
Copy link

jonahparampara commented Mar 4, 2020

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
Copy link

xindixu commented May 14, 2020

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
Copy link

xindixu commented 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?

@EtienneLem
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants