Emoji picker accessibility quirks

[LukeGarrigan]

With the release of v10.0.0 the accessibility of the emoji-picker has improved drastically. There's just a couple minor issues that our users are having with it.

When using the picker you have to tab to the search box to then start using the arrows, would it be possible to enable arrow use straight away?

Also the colours are different to the browser default and very difficult to see, is the expected use to be to override the .emoji-mart-emoji-selected class?

Would it be possible to use the arrow keys to go back up to the search box? It's a little bit strange that you have to go to the first emoji to then go back to the search box.

[serebrov]

@LukeGarrigan Could you clarify your questions a bit?

When using the picker you have to tab to the search box to then start using the arrows, would it be possible to enable arrow use straight away?

Would it be enough if the search input was focused when we open the emoji picker?

Or would you expect that arrows work across both for the category selector (the top bar where we need to use Tab at the moment) and the main emoji selector block?

I do not remember all the implementation details, but I think it should be possible. In that case it seems that "Tab" would not be needed at all, we could have the search input always focused and the focus could be moved with arrows across the whole component - including the bar about the search input and the emoji area below it.

Also the colours are different to the browser default and very difficult to see, is the expected use to be to override the .emoji-mart-emoji-selected class?

Do you mean the pale gray selection around the emoji? It is the same effect that is used to highlight emoji on mouse hover.
How do you expect it to look, what is the browser default?

Would it be possible to use the arrow keys to go back up to the search box? It's a little bit strange that you have to go to the first emoji to then go back to the search box.

I do not understand this point - the search input stays focused when we use arrows, so there is no need to go back to it, it is possible to type and use arrows to move across emojis at the same time:

Screen.Recording.2023-01-29.at.20.30.15.mov

[LukeGarrigan]

Hi, sure:

Or would you expect that arrows work across both for the category selector (the top bar where we need to use Tab at the moment) and the main emoji selector block?

yes, that's what I would expect. I also think tab should be an option still though.

Do you mean the pale gray selection around the emoji? It is the same effect that is used to highlight emoji on mouse hover.
How do you expect it to look, what is the browser default?

I expect the selection to be the same as when you're tabbing, rather than when you're hovering:

I do not understand this point - the search input stays focused when we use arrows, so there is no need to go back to it, it is possible to type and use arrows to move across emojis at the same time:

I didn't know this, that is good, but if you've used tab to get to an emoji you can't use the search — without going back.