Fix suggestions list and loading progressbar labels

[afercia]

Fixes https://github.com/pacocoursey/cmdk/issues/196

This PR aims to improve the accessible labels of two components of the user interface. Also, the current label are hardcoded English text. In projects that are translated to other languages, these labels need to be passed via prop so that they are translatable.

1 The suggestions list. Currently, it is labelled via both aria-label and aria-labelledby. This is redundant as aria-labelledby will always override aria-label. Also, aria-labelledby points to the search input id. As a result, the list of suggestions is labeled with the term users type in the search field, which is inappropriate.

• Removes the aria-labelledby attribute.
• Adds a prop to pass the aria-label value.

2 Loading progressbar label. Currently, it's hardcoded English text.

• Adds a prop to pass the aria-label value.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cmdk-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 18, 2024 2:14pm

[afercia]

For reference: the labeling issues were discovered while working on the cmdk implementation in the WordPress editor project, see https://github.com/WordPress/gutenberg/pull/56718

[afercia]

Hello @pacocoursey and thanks for merging this. Is there any plan to include it in a next release soon? I'm asking because of an open issue in the WordPress editor repository, where in absence of this fix we would need to resort to some hacky workaround. See https://github.com/WordPress/gutenberg/pull/56718 Thanks in advance for your reply, much appreciated 🙇 Cc @youknowriad

[pacocoursey]

@afercia Released in cmdk@1.0.0

[afercia]

@pacocoursey thank you! ❤️