Make emojis selectable by tab

[skjnldsv]

• on open : Search is in focus

• if search is in focus, emojis are selectable by arrow keys

• Categories and emojis are selectable by tab

Is this the behavior we want to see?

[nimishavijay]

on open : Search is in focus
if search is in focus, emojis are selectable by arrow keys

Looks good! :)

Categories and emojis are selectable by tab

Not sure about this, I think arrow keys can be used to select emojis and categories also. Tab can used to change focus between categories, search, and emojis. Within that you navigate using arrow keys.

Also a couple more points from me:

• Esc should close the picker
• If you have selected the last emoji in the list, pressing the right arrow should cycle back to the first one again. Currently the right arrow does nothing if you are on the last emoji. Similarly for left arrow and first emoji as well.
• I also think that if the emoji picker is open, tab should not make focus leave the picker, it should only cycle through categories, search and emojis. Currently if you are focused on the last emoji and you press tab, the focus jumps to the browser tab which is a bit jarring. What do you think?

cc @jancborchardt if there is anything else to add

[skjnldsv]

• If you have selected the last emoji in the list, pressing the right arrow should cycle back to the first one again. Currently the right arrow does nothing if you are on the last emoji. Similarly for left arrow and first emoji as well.
• I also think that if the emoji picker is open, tab should not make focus leave the picker, it should only cycle through categories, search and emojis. Currently if you are focused on the last emoji and you press tab, the focus jumps to the browser tab which is a bit jarring. What do you think?

Not sure those two are doable

[jancborchardt]

Only a detail from my side: Would look nicer to have the focus box be a circle instead of a square with rounded corners? :)

[skjnldsv]

/rebase

[vanpertsch]

@nimishavijay & @jancborchardt can you check again if the picker looks good and works as expected like it is now?

• If you have selected the last emoji in the list, pressing the right arrow should cycle back to the first one again. Currently the right arrow does nothing if you are on the last emoji. Similarly for left arrow and first emoji as well.

• is not possible (atm)

• I also think that if the emoji picker is open, tab should not make focus leave the picker, it should only cycle through categories, search and emojis. Currently if you are focused on the last emoji and you press tab, the focus jumps to the browser tab which is a bit jarring.

• focus stays inside

Search is in focus on open
|

Categories selectable by tab
|

emojis selectable by tab and arrow-keys
|

[skjnldsv]

Approval from my side, you can self-approve on my behalf @vanpertsch
:)

[nimishavijay]

🚀 :)

[artonge]

👌