Skip to content

feat(select): allow accessible name on standalone Select, Combobox, Autocomplete#354

Merged
erickteowarang merged 2 commits into
mainfrom
feat/1455-select-combobox-accessibility
Jul 3, 2026
Merged

feat(select): allow accessible name on standalone Select, Combobox, Autocomplete#354
erickteowarang merged 2 commits into
mainfrom
feat/1455-select-combobox-accessibility

Conversation

@erickteowarang

Copy link
Copy Markdown
Contributor

Summary

The high-level standalone Select, Combobox, and Autocomplete had no way to receive an accessible name when used outside a Form/FormControl. Passing aria-label, aria-labelledby, or id compiled fine (React allows aria-*/id in 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 / id props that forward to the trigger — applied consistently across all three standalone components (including .Async and creatable variants) as the issue recommends.

Changes

  • select-standalone.tsx — added aria-label/aria-labelledby/id to SelectPropsBase; forwarded onto SelectTrigger (the combobox-role element) in SelectStandalone and SelectAsyncStandalone, single and multiple modes.
  • combobox-standalone.tsx — added the props to ComboboxPropsBase; added an inputProps param to ComboboxShell spread onto ComboboxInput; wired all four paths (static/async × plain/creatable) via a pickInputProps helper, stripping the a11y props from the ...valueProps spread so they don't leak onto ComboboxRoot.
  • autocomplete-standalone.tsx — added the props to AutocompletePropsBase; forwarded onto AutocompleteInput in both static and async components.

Usage

// Announced as "Direction filter, combobox" instead of just its value
<Select items={items} value={value} onValueChange={setValue} aria-label="Direction filter" />

// Or point at a visible label
<span id="dir-label">From</span>
<Combobox items={items} aria-labelledby="dir-label" />

Tests & docs

  • Added an "accessible name" describe block to each of the three *-standalone.test.tsx files (15 new tests) covering aria-label, aria-labelledby, id, multiple mode, creatable, and async — each asserting getByRole("combobox", { name }) now resolves.
  • Updated docs/components/{select,combobox,autocomplete}.md prop tables and Accessibility sections.
  • Added a minor changeset.

Verification

  • pnpm type-check clean
  • pnpm lint — 0 warnings, 0 errors
  • pnpm test — 1244 passed

Closes tailor-inc/platform-planning#1455

🤖 Generated with Claude Code

…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>
@erickteowarang erickteowarang requested a review from a team as a code owner July 3, 2026 02:16

@IzumiSy IzumiSy left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great. Thanks for your eyes on accessibility!

@erickteowarang

Copy link
Copy Markdown
Contributor Author

Oh thanks @IzumiSy ! I haven't even posted it yet 😆

@erickteowarang erickteowarang merged commit 7f33506 into main Jul 3, 2026
5 checks passed
@erickteowarang erickteowarang deleted the feat/1455-select-combobox-accessibility branch July 3, 2026 03:00
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.

2 participants