feat/add keyboard control #431

xindixu · 2020-05-22T17:42:28Z

Changes

closes scttcper/ngx-emoji-mart#313
Added keyboard control:

Category anchors:

When focusing on any emoji, Tab to change focus to the first category anchor
When a category is selected, Arrow Down to go to the first item in the category
This also means that when focusing on any emoji, Tab can no longer used to go to the next emoji
Same applies to search

Emoji:

Arrow Up, Arrow Down, Arrow Left, Arrow Right to go to emojis on top/down/left/right to the current emoji
Able to jump to next/previous category if at the last line/first row

Style:

emoji focus style now should look the same as emoji on hover style

Markup:

Change emoji layout to table/cell with a11y roles

References:

This PR is largely inspired by Better keyboard navigation/selection #348. Note that some of the features mentioned are not implemented or implemented differently.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role
Slack emoji picker

rugk · 2020-05-24T16:35:11Z

Awesome PR! Thanks! 🎉
Really glad, I want to see this merged.

This PR is largely inspired by #348. Note that some of the features mentioned are not implemented or implemented differently.

Uhm, care to say which exactly?

The far I see these changes in your very nice gifs, I am very satisfied. The only thing I possibly miss is the focus style:

The focus style should be improved, so you can see what (also an accessibility improvement) is selected.

rugk · 2020-05-24T16:42:23Z

Does this possibly also fix scttcper/ngx-emoji-mart#313?

Also note you can (automatically) let issues close when a PR is merged by adding some "magic" text to your PR body.

xindixu · 2020-05-24T18:42:45Z

@rugk
This PR differs from #348 in these ways:

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.~~

Tab can no longer used to select emojis. It will bring focus to the first category anchor. Users can use Tab to tab through category anchors and search bar. Users can also use arrow keys to select emojis

xindixu · 2020-05-24T18:46:04Z

The focus style should be improved, so you can see what (also an accessibility improvement) is selected.

@rugk I am not sure the best way to improve this. I just used the same mouse hover style it has currently. I'm kinda reluctant to add in new styles since I think designers in massive team could make better decision than me :).
Note that developers using this library can still manually override focus style.

xindixu · 2020-05-24T18:48:19Z

Does this possibly also fix TypeCtrl/ngx-emoji-mart#313?

Yup, it will. I'll add magic to close this issue. As for #348, since not all of features you mentioned is implemented, should I still close the issue?

rugk · 2020-05-24T19:19:42Z

Tab can no longer used to select emojis. It will bring focus to the first category anchor.

I'm not sure whether this is a good idea, accessibility-wise. As that is the default accessibility feature. But I'm probably the wrong one to ask, whether this is good…

As for #348, since not all of features you mentioned is implemented, should I still close the issue?

I'd say yes, as long as the maintainer(s) do not say anything else.

rugk · 2020-05-24T19:21:55Z

When you are at the top row of your emojis. arrow_up_small (arrow up) should bring you (the focus) to the search bar.

Even if you are at the first of all rows? E.g. this should be possible IMHO (+ user story):

Search for wink
Go down -> Only now notice you want to use a different emoji
Press up again -> "Correct" your search term to upside [down face] e.g.

xindixu · 2020-05-24T20:36:44Z

When you are at the top row of your emojis. arrow_up_small (arrow up) should bring you (the focus) to the search bar.

Even if you are at the first of all rows? E.g. this should be possible IMHO (+ user story):

I'd say that since emoji grid is separated from the search bar, based on the a11y guideline, Up should not go back to search bar since it is essentially different region. Maybe we could have search bar always in focus and thus users could type in more characters if they need to.
So it will be:

Search for wink
Go down -> Only now notice you want to use a different emoji
Hit backspace and directly type in 'upside'

One benefit I can think of is that users don't have to press up 5 times, say, to just get back to the search bar.

Now I also realized that when a category is selected or a search is triggered, it should automatically select the first emoji, without user pressing down

I'm referring to slack emoji picker. I really like the fact that search bar is always focused so that users could just type in anything even when they are browsing emojis.
In short, the only thing that receive a focus is search bars and category anchors. Emojis are not actually "focused", they are just table cells that are "selected".

haji-ali · 2020-05-24T23:54:40Z

This looks great! Thanks a lot for implementing it.

If I may, I would like to offer some feedback on the interface.

I think having the search bar always in focus makes more sense to me since it’s unambiguous. Letters and backspace change the search field, arrows select a particular emoji, Enter selects the emoji.
Selecting categories can be done with Tab and Shift-Tab. Clearly this makes navigating the text field impossible but since the search text is expected to be short I don’t think that should be an issue.

If the search bar is auto-focused when the interface is shown, that would allow selecting an emoji using the keyboard only with minimal keystrokes, which is ideal while writing a message.

xindixu · 2020-05-25T14:42:34Z

All great ideas. I'm going to implement

search bar always in focus and user can type anywhere to search
auto select first emoji in the category when a category is selected or search result when search is triggered

rugk · 2020-05-25T15:42:29Z

search bar always in focus and user can type anywhere to search

Does not this conflict with accessibility though? Don't screenreaders always read the thing that is focused?

src/components/picker/nimble-picker.js

rugk

LGTM (but I don't know React very much)

xindixu · 2020-06-15T14:04:38Z

Could we consider merging this PR in? @EtienneLem ?

rugk · 2020-06-26T15:48:43Z

src/components/picker/nimble-picker.js

-    switch (e.keyCode) {
-      case 13:
+    switch (e.key) {
+      case 'Enter':


Just because I'm not sure: Currently (with tab focus switches) also space works for selecting emojis. This here only refers to Enter.
IMHO space should also continue to work… 🤔

rugk · 2020-06-26T20:46:16Z

I also don't know whether this is the right thing to add in this PR, but I have a use case, where I'd like more shortcuts to trigger something in the picker/with the selected emoji. In my case Ctrl+C should e.g. trigger a copy to clipboard.

As all methods we can use to get the selected/chosen emoji currently are reactive (i.e. as an dev outside the lib you only get the emoji if something happens as as a result of a click or so) this is hard to implement.
A active method that could just return the currently focused emoji could be very helpful for that. (Note this use case barely existed before, because if you click an emoji you get the reaction.)
So e.g. a getCurrentlyFocussedEmoji that likely is used internally in a similar way, may be very useful here.

Or… of course… you just expose the current keypress handler. However, IMHO, that would be less flexible as an API, because you are then – yet again – limited to key presses only.

Edit: Don't know whether that may also return if an emoji is only hovered hmm… maybe it can do both, possibly in two separate functions. 🤔

xindixu · 2020-07-15T21:04:47Z

@rugk Sorry for the late reply. What you mentioned is a pretty cool idea. I think you could create a separate issue and PR on this. :)

rugk · 2020-07-18T08:58:03Z

Okay, done: #444

Not-Jayden · 2020-08-21T16:13:55Z

Any plans for this to be merged soon? Seems great.

animify · 2020-08-27T19:23:59Z

Looking forward to this too, very much needed for full keyboard navigation 💯

xindixu · 2020-09-01T03:01:13Z

If you are interested in adding keyboard support, feel free to check out this release in our repo: https://github.com/pingboard/emoji-mart/releases/tag/v3.0.1

castroCrea · 2020-09-10T16:49:05Z

Hey @EtienneLem any idea when you can merge that and release ?
Thanks
And thanks @xindixu and @rugk

hackel · 2020-09-23T21:58:15Z

Please consider also including vi-style keyboard navigation (hjkl) in addition to the arrow keys. This would make navigation even more efficient while typing, not having to move one's hands from the home row at all. I don't believe this would conflict with anything.

AjayKumar-25 · 2020-10-28T14:41:16Z

Any tentative date of merging and releasing this ?

EtienneLem · 2020-10-28T14:56:52Z

Sorry for the radio silence on this PR.

There are some important changes that I’m not very sold on, I’m not sure why the layout had to be changed to <table>. I’d be favorable for a more accessibility-based implementation where we can use onFocus and move the focus with keyboard shortcuts.

xindixu · 2020-10-28T15:16:56Z

@EtienneLem The main reason why I changed to table is that: table is a markup more suitable with the aria-role grid.
role=grid implies exisitance of Arrow Up, Arrow Down, Arrow Left, Arrow Right navigations. See more: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role

evang522 · 2021-06-02T10:10:32Z

I would really love to see this merged in and part of a newer version. I'm planning to use this for a Chrome extension I'm developing, but in my opinion it's really not that user friendly unless keyboard navigation is possible.

rugk · 2021-06-02T17:58:18Z

I'm planning to use this for a Chrome extension I'm developing, but in my opinion it's really not that user friendly unless keyboard navigation is possible.

I totally agree, @evang522, and I'm actually affected in the same way as you are affected.
Because I already have a Firefox extension based on this library, which could also be ported/made compatible with Chrome/ium browsers. This is tracked here: rugk/awesome-emoji-picker#54
It was just not on my highest priority so far.

EtienneLem · 2022-04-26T20:32:42Z

Thanks a lot for your contribution. v5.0.0 has been released and this doesn’t apply anymore.

The new version has full keyboard control.

add keyboard control

6f6a77d

rugk mentioned this pull request May 24, 2020

Keyboard friendliness: selecting emojis rugk/awesome-emoji-picker#41

Open

rugk mentioned this pull request May 24, 2020

Anchors and emojis are not keyboard accessible scttcper/ngx-emoji-mart#313

Open

Escape key to jump to search and showing active child in search bar

c18de88

rugk suggested changes Jun 11, 2020

View reviewed changes

src/components/picker/nimble-picker.js Outdated Show resolved Hide resolved

Use e.key instead of e.keyCode

9bd539d

rugk approved these changes Jun 13, 2020

View reviewed changes

rugk suggested changes Jun 26, 2020

View reviewed changes

xindixu mentioned this pull request Jul 15, 2020

Xindi/keyboard control pingboard/emoji-mart#1

Merged

Able to enter to select emojis

59f0dae

rugk mentioned this pull request Jul 18, 2020

API for getting currently focussed/hovered emoji #444

Open

Fixed skin tone button

30468ff

xindixu force-pushed the xindi/keyboard-control branch 2 times, most recently from 638c0b6 to 51dd4a9 Compare July 20, 2020 16:25

arrow keys to select skintone

b611b9b

xindixu force-pushed the xindi/keyboard-control branch from 51dd4a9 to b611b9b Compare July 20, 2020 16:41

escape stop propagation

85d13bd

xindixu force-pushed the xindi/keyboard-control branch from 603783e to 85d13bd Compare July 20, 2020 16:58

Xindi Xu added 3 commits July 20, 2020 12:07

tab should not leave focus

b8b1b79

test

d994d50

on preview change props

48bed5c

xindixu force-pushed the xindi/keyboard-control branch from 4349086 to 48bed5c Compare July 20, 2020 19:14

Xindi Xu added 3 commits July 20, 2020 14:23

onShow onHide previews

16f25c4

enter in anchor or seach should select first emoji

7eae6f1

clean up + update test

2afd85f

xindixu force-pushed the xindi/keyboard-control branch from 81d109a to 2afd85f Compare July 21, 2020 18:33

update test and style

fdedc10

xindixu force-pushed the xindi/keyboard-control branch from c78d650 to fdedc10 Compare July 21, 2020 18:40

sinansonmez mentioned this pull request Nov 15, 2021

recently used emojis are managed using local storage ParabolInc/parabol#5656

Merged

2 tasks

EtienneLem closed this Apr 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat/add keyboard control #431

feat/add keyboard control #431

xindixu commented May 22, 2020 •

edited

rugk commented May 24, 2020

rugk commented May 24, 2020

xindixu commented May 24, 2020 •

edited

xindixu commented May 24, 2020 •

edited

xindixu commented May 24, 2020 •

edited

rugk commented May 24, 2020

rugk commented May 24, 2020

xindixu commented May 24, 2020 •

edited

haji-ali commented May 24, 2020 •

edited

xindixu commented May 25, 2020

rugk commented May 25, 2020

rugk left a comment

xindixu commented Jun 15, 2020 •

edited

rugk Jun 26, 2020

rugk commented Jun 26, 2020 •

edited

xindixu commented Jul 15, 2020

rugk commented Jul 18, 2020

Not-Jayden commented Aug 21, 2020

animify commented Aug 27, 2020

xindixu commented Sep 1, 2020 •

edited

castroCrea commented Sep 10, 2020

hackel commented Sep 23, 2020

AjayKumar-25 commented Oct 28, 2020

EtienneLem commented Oct 28, 2020

xindixu commented Oct 28, 2020

evang522 commented Jun 2, 2021

rugk commented Jun 2, 2021 •

edited

EtienneLem commented Apr 26, 2022

feat/add keyboard control #431

feat/add keyboard control #431

Conversation

xindixu commented May 22, 2020 • edited

Changes

Category anchors:

Emoji:

Style:

Markup:

rugk commented May 24, 2020

rugk commented May 24, 2020

xindixu commented May 24, 2020 • edited

xindixu commented May 24, 2020 • edited

xindixu commented May 24, 2020 • edited

rugk commented May 24, 2020

rugk commented May 24, 2020

xindixu commented May 24, 2020 • edited

haji-ali commented May 24, 2020 • edited

xindixu commented May 25, 2020

rugk commented May 25, 2020

rugk left a comment

Choose a reason for hiding this comment

xindixu commented Jun 15, 2020 • edited

rugk Jun 26, 2020

Choose a reason for hiding this comment

rugk commented Jun 26, 2020 • edited

xindixu commented Jul 15, 2020

rugk commented Jul 18, 2020

Not-Jayden commented Aug 21, 2020

animify commented Aug 27, 2020

xindixu commented Sep 1, 2020 • edited

castroCrea commented Sep 10, 2020

hackel commented Sep 23, 2020

AjayKumar-25 commented Oct 28, 2020

EtienneLem commented Oct 28, 2020

xindixu commented Oct 28, 2020

evang522 commented Jun 2, 2021

rugk commented Jun 2, 2021 • edited

EtienneLem commented Apr 26, 2022

xindixu commented May 22, 2020 •

edited

xindixu commented May 24, 2020 •

edited

xindixu commented May 24, 2020 •

edited

xindixu commented May 24, 2020 •

edited

xindixu commented May 24, 2020 •

edited

haji-ali commented May 24, 2020 •

edited

xindixu commented Jun 15, 2020 •

edited

rugk commented Jun 26, 2020 •

edited

xindixu commented Sep 1, 2020 •

edited

rugk commented Jun 2, 2021 •

edited