dan/add kbd navigation to categories #10
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Previously, the category tabs were all tabbable. This is wrong according to WAI-ARIA guidelines. I changed that to only allowing the current tab to be tabbable, but broke the keyboard navigation by doing so since the rest of the tabs wasn't tabbable anymore and the arrow keys weren't working natively. So I added a manual arrow key navigation. The tricky part was to handle the fact that the full emoji list is always only partially rendered. Practically, I can select an emoji in the 1st category, then select let's say a 5th category in tablist, and now the 1st is not rendered anymore. Which also means there would be no tabbable emoji for the user to navigate to! For this reason, and for convenience as well, since user should be able to tab to emojis of the just selected category, I always make the first emoji in the currently selected category tabbable upon tab selection. Relates to PS-21279.
In the previous commits, I accepted the fact that NVDA user has to switch from Browse mode to Focus mode to navigate through emojis. This was true for our markup back then. But then I noticed, that user can use arrow keys in the categories tablist just fine in the Browse mode. So I wondered if I could make the emoji list more accessible by assigning the right roles. And I found that yes, doing so allows the user to navigate through emojis using arrow keys directly in the Browse mode! I was torn between using `radiogroup` and `listbox`. The 2 are similar in many ways, with the exception that only 1 radio can be selected at a time whereas list box can have more. This is however not important because only 1 emoji can be selected at a time. In the end, I went with listbox because it sounds like a more natural choice for a list of items but I don't have a strong opinion there. Closes PS-21279.
Just to keep it consistent with the category based emoji list. Relates to PS-21279.
JanPodmajersky
approved these changes
Jul 2, 2024
I think we should :). I still dream about pushing the changes over to the original repo though, that would be the safest bet. |
Well yeah, it would be a dream but I've got a feeling it is slightly unrealistic, though 😢 . |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Screen.Recording.2024-07-02.at.11.18.07.mov