Keyboard controls and custom alt/title texts

[Cjschmidt]

We are currently using this package on websites which needs to be WCAG2.1 compliant. In order to be compliant, you need to be able to control everything with keyboard-only.

Is it possible to add keyboard control to this package? Right now you can't select or cycle trough the emojis using keyboard only.

Also is it possible to add custom titles/alt texts to the emojis?

[serebrov]

@Cjschmidt I think both keyboard control and titles / alt texts are possible.

It would be good to start with the specification: how exactly the keyboard control would work? which key combinations should be used? how it would behave if there are several emoji components on the page?

Same for titles / alt texts - how would the configuration look like? do you mean to specify custom titles for all emojis (there are many of them) or just override the defaults?

[mathieutu]

Hi.
I also would like to add keyboard navigation in picker.

Here you have both example from native mac picker, and slack one (which is the most perfect picker I've seen).

Thanks!

[serebrov]

Related issue: #104 (with a suggested reference change from the original React emoji-mart library), I can start with that and see if it would also solve this request.

[serebrov]

I've just published version 10.0.0 with keyboard controls and accessibility improvements (use button tags for clickable emojis, add aria- properties).

Keyboard controls are activated when the cursor is in the search field - emoji can be selected with arrow keys and confirmed with Enter (the select event is emmited by picker, same as when the emoji is clicked with mouse).