Skip to content

feat(Tabs): add ariaLabel and title props to tab buttons - #491

Open
inscomssb wants to merge 1 commit into
codegouvfr:mainfrom
inscomssb:feat/tabs-aria-label-title
Open

feat(Tabs): add ariaLabel and title props to tab buttons#491
inscomssb wants to merge 1 commit into
codegouvfr:mainfrom
inscomssb:feat/tabs-aria-label-title

Conversation

@inscomssb

Copy link
Copy Markdown
Contributor

Closes #471

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.

@kevbarns

Copy link
Copy Markdown
Collaborator

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Accessibilité] Composant Tabs - Ajout des attributs aria-label et title sur les buttons

3 participants