You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Adds optional ariaLabel and title props to tab button items in both
Uncontrolled and Controlled modes, enabling accessibility attributes
required by RGAA and WCAG standards.
A new Storybook story WithAriaLabelAndTitle demonstrates the feature.
@inscomssb Thanks, this is a tight change and it maps cleanly onto both the controlled and uncontrolled tab shapes.
Verified locally on 0e1a1ca: yarn build, tsc -p src, prettier --list-different and yarn test (75/75 on this branch's base) all pass. GitHub Actions has no run at all for this head SHA, so the approval on this PR rests on review alone.
To discuss
The new story demonstrates a WCAG 2.5.3 failure.aria-label replaces the button's content in the accessible name computation, so a tab labelled Tab 1 with ariaLabel="First tab, add content" ends up with an accessible name that does not contain its visible label. Voice-control users cannot say "Tab 1" to activate it. Since the story is what people copy, it should show the visible label as a prefix, e.g. ariaLabel="Tab 1, add content" — and the prop docstring should say so.
title and ariaLabel carrying different text. In the story a mouse user sees "Add content" while a screen reader announces "First tab, add content". Worth documenting that they should agree, or dropping title from the example.
Optional
ariaLabel is a new prop name in this codebase — nothing else in src/ exposes one; the existing pattern is a label prop or an i18n key. Not worth blocking on, but a one-line note in the docstring about when to reach for it would help.
Nothing to flag on security.
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
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.
Closes #471
Adds optional
ariaLabelandtitleprops to tab button items in bothUncontrolled and Controlled modes, enabling accessibility attributes
required by RGAA and WCAG standards.
A new Storybook story
WithAriaLabelAndTitledemonstrates the feature.