aria-label="Suggestions" is a hardcoded English text. This is not what most consumers need, as cmdk is used in multi-lingual applications that get translated in languages other than English. I guess this should be a prop with maybe a fallback to "Suggestions" if the prop is null.
aria-labelledby={context.inputId} overrides aria-label anyways. The usage of both aria-label and aria-labelledby seems a bit pointless.
However, aria-labelledby={context.inputId} points to the input id. As such:
The aria-labelledby points to an element that is initially 'empty' i.e. the input has no value. At this point, the suggestions Listbox is unlabelled.
As soon as users type something in the input field, the actual labelling of the suggestions Listbox is the value entered by users. This doesn't seem to be an appropriate labeling.
Proposed remediation:
It would be way simpler to entirely remove aria-labelledby and only use aria-label, with a prop and fallback value.
For what is worth, I contribute to WordPress development as a core committer specialized in web accessibility. wordPress does use cmdk in the Gutenberg editor and we'd love to have cmdk as accessible as possible. ❤️
It appears the Listbox with suggestions is incorrectly labeled;
https://github.com/pacocoursey/cmdk/blob/05199cbad94a800ee98510645f138537f368dc85/cmdk/src/index.tsx#L795-L803
aria-label="Suggestions"is a hardcoded English text. This is not what most consumers need, as cmdk is used in multi-lingual applications that get translated in languages other than English. I guess this should be a prop with maybe a fallback to "Suggestions" if the prop is null.aria-labelledby={context.inputId}overridesaria-labelanyways. The usage of botharia-labelandaria-labelledbyseems a bit pointless.aria-labelledby={context.inputId}points to the input id. As such:aria-labelledbypoints to an element that is initially 'empty' i.e. the input has no value. At this point, the suggestions Listbox is unlabelled.Proposed remediation:
aria-labelledbyand only usearia-label, with a prop and fallback value.To reproeuce:
role="listbox"in your browser's dev tools > Accessibility tabScreenshot from the current demo at https://cmdk.paco.me/
Initially unlabelled:
Wrongly labelled with the user input value:
For what is worth, I contribute to WordPress development as a core committer specialized in web accessibility. wordPress does use cmdk in the Gutenberg editor and we'd love to have cmdk as accessible as possible. ❤️