feat(select): allow accessible name on standalone Select, Combobox, Autocomplete#354
Merged
Merged
Conversation
…utocomplete The standalone components destructured a fixed prop set and dropped the rest, so aria-label/aria-labelledby/id compiled but never reached the DOM. Outside a Form, the combobox's only accessible name was its current value (WCAG 4.1.2 / 2.5.3). Add first-class aria-label, aria-labelledby, and id props to the standalone Select, Combobox, and Autocomplete (including .Async and creatable variants) and forward them to the underlying combobox-role element. Closes #1455 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
IzumiSy
approved these changes
Jul 3, 2026
IzumiSy
left a comment
Contributor
There was a problem hiding this comment.
Great. Thanks for your eyes on accessibility!
Contributor
Author
|
Oh thanks @IzumiSy ! I haven't even posted it yet 😆 |
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
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.
Summary
The high-level standalone
Select,Combobox, andAutocompletehad no way to receive an accessible name when used outside aForm/FormControl. Passingaria-label,aria-labelledby, oridcompiled fine (React allowsaria-*/idin JSX typing) but the props were discarded at runtime — the components destructured a fixed prop set and never spread the rest onto the trigger/input. The result was a combobox whose only accessible name was its current value, breaking WCAG 4.1.2 (Name, Role, Value) and 2.5.3 (Label in Name) for table toolbars, list filters, and faceted search.This implements proposed fix #1 from the issue — adding first-class
aria-label/aria-labelledby/idprops that forward to the trigger — applied consistently across all three standalone components (including.Asyncand creatable variants) as the issue recommends.Changes
select-standalone.tsx— addedaria-label/aria-labelledby/idtoSelectPropsBase; forwarded ontoSelectTrigger(thecombobox-role element) inSelectStandaloneandSelectAsyncStandalone, single and multiple modes.combobox-standalone.tsx— added the props toComboboxPropsBase; added aninputPropsparam toComboboxShellspread ontoComboboxInput; wired all four paths (static/async × plain/creatable) via apickInputPropshelper, stripping the a11y props from the...valuePropsspread so they don't leak ontoComboboxRoot.autocomplete-standalone.tsx— added the props toAutocompletePropsBase; forwarded ontoAutocompleteInputin both static and async components.Usage
Tests & docs
*-standalone.test.tsxfiles (15 new tests) coveringaria-label,aria-labelledby,id, multiple mode, creatable, and async — each assertinggetByRole("combobox", { name })now resolves.docs/components/{select,combobox,autocomplete}.mdprop tables and Accessibility sections.Verification
pnpm type-checkcleanpnpm lint— 0 warnings, 0 errorspnpm test— 1244 passedCloses tailor-inc/platform-planning#1455
🤖 Generated with Claude Code