docs(components): give the stories and examples accessible names (part of #3015) - #3050
Merged
Conversation
Three examples left a form control without an accessible name, and react-aria warned about each one (#3015): - the two `CountryOptions` Select stories had no `<Label>` - the RadioGroup in Modal's LongContent story had none either; it sits under a `Permissions` heading, so it gets that as an `aria-label` - the ProgressBar status example passed its text as raw children, which renders but never becomes a label — wrapped in `<Label>` now Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The Default, WithUnit and WithTextValue stories left the inner react-aria `ProgressBar` unnamed, so a screen reader announced a bare value and react-aria warned (#3015). `aria-label` is part of `DonutChartProps` already, inherited from `Aria.ProgressBarProps`, and every docs example passes it — the stories were the outliers. Hiding the progressbar from assistive tech instead would drop the value, which is the point of the chart. The requirement now appears in the page's best practices, where it was only implicit in the examples. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
react-aria needs both, and warned 48 times per dev run without them (#3015): a `GridList` with no accessible name, and `GridListItem`s with non-plain-text children but no `textValue` — which also breaks type-to-select on those items. Both are existing `List` properties, so this is a fix to the examples, not to the component. The List page gains the missing `textValue` best practice; the `aria-label` one was already there. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
Coverage Report for ./packages/components/
File CoverageNo changed files found. |
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
mfal
enabled auto-merge (squash)
September 1, 2026 13:59
`Section` already labels a contained `List`: its props context hands the list an `aria-labelledby` pointing at the section heading, and `Items` drops that link as soon as an `aria-label` is present. The two `aria-label`s on the Avatar status example were therefore redundant and replaced a live reference with a duplicated string — reverted. The `Modal` story's `RadioGroup` now references its `Permissions` heading via `aria-labelledby` instead of repeating the text. A local `id` wins over the one the section's props context supplies, so the group is named by the heading a sighted user reads. `create-container.tsx` keeps its `aria-label`: that section holds three headings, and the props context gives all of them the same id, so the inherited `aria-labelledby` would name the volume list "Entrypoint". Verified in a browser test: without the `aria-label` the typedList list inside the section resolves to "Benachrichtigungen" and react-aria emits no accessible-name warning. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
mfal
disabled auto-merge
September 1, 2026 14:19
mfal
enabled auto-merge (squash)
September 1, 2026 14:19
Jan-Eimertenbrink
approved these changes
Sep 1, 2026
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
2 participants
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.
Part of #3015. Split out of #3022, which now carries only the
react-tunnelfix. Everything here is a caller passing a name that was always available — no component code, no locale file, no generated artifact.DonutChart,Selectaria-labelis already public API (inherited fromAria.ProgressBarProps, already in the generated remote element). Three stories just never passed itModal --long-contentRadioGroupinside the story, not fromModalProgressBardocsstatusexample passed its text as raw children, which renders but never becomes a label. Wrapped in<Label>GridListInnerneeds a nameListalready supportsaria-label/aria-labelledby; five ListItem stories omitted ittextValuerequiredList.Itemalready has the prop; four stories omitted itaria-hiddenonDonutChart's innerProgressBarwas considered and rejected — it would hidearia-valuenow/aria-valuetext, which is the chart's actual content.textValuewas deliberately not made required or auto-derived: required would break the public API, and deriving text from an arbitraryrenderFnis not reliable. The react-aria warning stays as the signal, now documented on the List page.A code scan turned up the same two defects in four docs examples the issue had not listed (
content/avatar, twopatterns/anlegeprozessexamples); those are fixed too.No new UI text
No locale file was touched — every accessible name comes from a caller. The only new prose is two German best-practice bullets on the DonutChart and List docs pages.
Verified
console.warnwrapped with a stack trace to name the react-aria frame).main(1.1.4).The three
Sliderstories from the issue are fixed by #3022, not here.🤖 Generated with Claude Code