Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emoji picker accessibility quirks #258

Open
LukeGarrigan opened this issue Jan 12, 2023 · 2 comments
Open

Emoji picker accessibility quirks #258

LukeGarrigan opened this issue Jan 12, 2023 · 2 comments
Labels
enhancement New feature or request

Comments

@LukeGarrigan
Copy link

LukeGarrigan commented Jan 12, 2023

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?

GiffyForPicky

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 serebrov added the enhancement New feature or request label Jan 30, 2023
@serebrov
Copy link
Owner

@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
Copy link
Author

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:
image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants