Mattermost-server: Improve the keyboard usability of the emoji picker

[esethna]

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

---

Notes: Jira ticket

Repro:

1. Open the emoji picker
2. Enter text into the search box
3. Use the arrow key to try to go back and correct text (arrow key to move, shift and arrow to select, etc)

Observed: Moving the text cursor with the keyboard arrows does not work

Expected:

• If the left arrow key is pressed while focus is on the emoji picker text box, the cursor should move left in the text.
• If the right arrow key is pressed when the cursor is at the end of the word in the text box, move the selection to the right in the emoji picker, otherwise move the cursor to the right in the text.
• If the down arrow key is pressed at any time, move the selection down in the emoji picker
• If the up arrow is pressed when the emoji selector is already on the top row of emoji, set the cursor to the beginning of the string. Otherwise, up arrow moves the emoji selector up a row.
• If CTRL/CMD + Arrow Left/Up is pressed at any time, set the cursor to the beginning of the string when the cursor is at the end of the string.
• If CTRL/CMD + Arrow Right/Down is pressed at any time, set the cursor to the end of the string when the cursor is at the beginning of the string.
• If Shift + Arrow Left/Right is pressed at any time, should select or deselect individual characters based on the cursor position and if characters have or have not been selected.
• If Shift + CTRL/CMD + Arrow Left/Up is pressed at any time, selects the string to the left of the cursor.
• If Shift + CTRL/CMD + Arrow Right/Down is pressed at any time, selects the string to the right of the cursor.

[niklabh]

Hey, can i take this one?

[hanzei]

Hey @niklabh,

Gentle reminder about this ticket. Do you still want to work on this?

[niklabh]

sorry wasn’t able to work on this. you can reassign

[esethna]

No worries @niklabh, re-adding the up for grabs label

[thnat1234]

Hi, I am a first time contributor and would like to work on this feature. Can I take it?

[hanzei]

Surely @thnat1234. Let me know if you have any questions or face issues.

[thnat1234]

Hi @hanzei @esethna ,
I was thinking about the UX of the navigation using the arrows and I have one some suggestions if you agree.

In relation to the a11y, the focus from the emoji search box to the emoji picker should be switched using TAB, or SHIFT+TAB relatively. Based on my experience, if I want to go back in the text to correct a mistake and then go to the end of the text, I'm just holding the right key and I am expecting that cursor will stop at the end of the text and not to continue to the emoji picker.

Please let me know what do you think about that.

Thanks,
Tomas