a11y: add arrow key navigation to Tabs - #104
Open
aroberts957 wants to merge 1 commit into
Open
Conversation
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
This PR implements the WAI-ARIA tabs keyboard navigation pattern for the Tabs component in frontend/src/components/ui/tabs.tsx.
What changed:
TabsList now has role=tablist, which was missing. This is required by the ARIA tabs pattern and lets assistive tech identify the tab strip.
TabsTrigger gains an onKeyDown handler that responds to ArrowLeft and ArrowRight. When pressed, focus wraps cyclically through the sibling tabs (ArrowLeft goes to the previous tab, wrapping from first to last; ArrowRight goes to the next, wrapping from last to first). The handler also triggers click on the focused tab so selection follows focus.
Why this matters:
Without arrow key navigation, keyboard users can only reach tabs by tabbing through every element on the page. The WAI-ARIA Authoring Practices Guide specifies that tab lists should support ArrowLeft/ArrowRight for moving between tabs. This brings the component in line with that spec (WCAG 2.1.1 Keyboard).
Verification:
The diff is limited to tabs.tsx. The handleKeyDown handler queries the closest tablist ancestor to find sibling tabs, so it works regardless of how many TabsTrigger instances are rendered. Focus wrapping uses modular arithmetic to cycle correctly.