A11Y: Implement tab behavior for homepage tabs#3115
Open
Conversation
…delines regarding keyboard navigation and aria attributes (aria-selected and aria-current). Users now switch tabs with arrow keys after focusing on the tab nav, and activate the tab with space or enter. Pressing tab while in the tab nav goes focuses on the content of that tab, pressing shift tab goes to the previous (non tab) focusable element on the page.
…he tab navigation
… not the active visual indicator. Cleaned up more code. This change makes it so aria-selected follows the focus, and aria-current follows the active visual indicator.
…value (it was always true, so I removed the ifs).
…le wrap-around of the tab focus
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.
Scope
Asana Ticket: ♿ Implement tab behavior for homepage tabs
Implementation
Changed the JS for the main page tabs to adhere to a11y guidelines:
aria-selectedattribute is set to true for the currently focused tabaria-currentattribute is set to "page" for the currently active tabUpdated the template to wrap things in a
instead of aScreenshots
Screen.Recording.2026-04-15.at.2.02.07.PM.mov
How to test
http://localhost:4001/
Use keyboard navigation and inspect the main page tabs to ensure the aria attributes are being set correctly, and the keyboard behavior works as expected.