[calcite-autocomplete] Explore and improve screen reader behavior for results and selection #12515
Description
monday.com sync: #9614607766
Check existing issues
- I have checked for existing issues to avoid duplicates
Description
When using the Calcite Autocomplete component with assistive technology, the information read to the user is not clear and can be improved. With the recent addition of an aria-live attribute, every calcite-autocomplete-item is read for each query (letter by letter) that the user inputs. For example, if you type in "Red", it will read out all the options fetched for just the first character, "R", then all the options for "Re", and finally all the options for "Red." This can become extremely cumbersome when there are many results populated. This was initially brought up in #12433, and additionally will help comply with #10704.
Once #12505 is merged, calcite-autocomplete should replace the aria-live attribute with an implementation that reads out if the current query, if results are returned and if so, how many, and whether selection has been completed. The aria-live attribute is a stop-gap until each calcite-autocomplete-item is read out when selected.
The UK Gov design systems' component, along with their examples provide a great example of this implementation.
Design team, please provide your guidance on how this UX should be implemented and if any visual changes are needed.
Acceptance Criteria
- When in focus, reads out the collapsed/expanded state of the list items
- For each letter query, reads out the query and how many items are returned. Ex. "3 results are available"
- Reads out when selection of an item is completed
Relevant Info
Blocked by: #12505
May still fails WCAG SC 4.1.3 Status Messages (Level AA), even with the aria-live attribute.
Which Component
calcite-autocomplete
Example Use Case
No response
Priority impact
impact - p2 - want for an upcoming milestone
Calcite package
- @esri/calcite-components
- @esri/calcite-components-react
- @esri/calcite-design-tokens
- @esri/calcite-ui-icons
- @esri/eslint-plugin-calcite-components
Esri team
Calcite (dev)