SIGN IN SIGN UP

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