radix-ui
A11y Bug: Select.Trigger does not correctly pass id to hidden select, breaking Label semantic association
Bug report
Current Behavior
When using the Select primitives with the Label primitive or a html label element, passing an id to the Select.Trigger and a htmlFor to the Label or label does not create a semantic link between the Label and the Select.
This throws issues in automated A11y tooling (Wave shown in screenshots below).
Expected behavior
I had expect this to create the semantic link, adding the id to the hidden select element.
Reproducible example
CodeSandbox repro I had to install a few packages, but this is mostly just your examples from the Select docs with one addition to allow me to pass an id to the SelectDemo component.
Suggested solution
Make the Select.Trigger pass the id correctly?
Additional context
I have come across similar issues before where you folks have well reasoned examples to go around the automated or MDN recommendations for semantic HTML to provide better a11y for actual cases you've tested - perhaps this is one of those?
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | react-select | 2.1.4 |
| React | n/a | 17 (your sandbox) & 18 (our design system) |
| Browser | chrome | Version 131.0.6778.140 (Official Build) (arm64) |
| Assistive tech | Wave | |
| Node | n/a | 20.8.0 (design system) |
| npm/yarn | yarn (design system) | 4.0.2 |
| Operating System | MacOS | 14.7.1 (23H222) |
Could this be related - https://github.com/radix-ui/primitives/issues/2836 ?
Yes, id is not passed to underlying native select component, which also breaks native form behavior. Making e.g. form to be submittable without data filled in.
