fix(a11y): give the model-picker listbox its name instead of labelling an input that does not exist (#14682)
* fix(a11y): name the model-picker listbox itself instead of labelling an input that does not exist
The picker renders <Command label> with no CommandInput. cmdk's label prop
renders a hidden <label htmlFor={inputId}> for that input, so the label
references a non-existent element — IBM label_ref_valid, the last remaining
violation on the model-picker scan state.
cmdk renders that hidden label unconditionally, so removing the prop alone
still leaves an empty label with the same dangling reference. Three parts:
- the accessible name moves to the listbox: CommandList label, both the
populated and the empty state
- the label prop comes off <Command>
- a ref callback strips the residual dangling for ATTRIBUTE (not the node,
which React owns and would fight over) — React only rewrites props it
diffs, and htmlFor never changes here, so the removal sticks
Unit tests pin the listbox name and that no label references a missing
element; both fail on the previous code.
* fix(a11y): keep the cmdk label's text — an empty label only trades one violation for another
IBM label_content_exists fires on any label element without inner text,
aria-label or aria-labelledby — and it ignores aria-hidden. So blanking
cmdk's hidden label swapped label_ref_valid for label_content_exists, one
violation for another. Keeping the label prop's text and stripping only the
dangling for attribute passes both rules: a text-bearing label associated
with nothing is inert to screen readers. Verified with the engine on the
live picker: both rules gone. V
Viktor Avelino committed
2a29054a33f80dcacfeb982a4c1e9be64c755031
Parent: bb1ccf7
Committed by GitHub <noreply@github.com>
on 8/20/2026, 7:40:58 PM