Improve autocomplete screen reader support #1578
Conversation
| {{#if hasResults}} | ||
| {{#each sections}} | ||
| {{translate | ||
| phrase='[[resultsCount]] [[label]] autocomplete option found.' |
There was a problem hiding this comment.
Outside the context of filter search, there is no label attribute. I think out of an abundance of caution, we should have a phrase for when label is present and another phrase for when there is no label. Having a single phrase like this, we may run into issues for certain languages when label is the empty string or undefined.
| }} | ||
| {{/each}} | ||
| {{else}} | ||
| {{translate phrase='0 autocomplete options found.'}} |
There was a problem hiding this comment.
Do we need to special case this? Or can it be handled by the more generic '[resultsCount]] autocomplete options found' we will have above?
There was a problem hiding this comment.
In the case where there are no results, there are no sections for filterSearch, so the generic '[resultsCount]] autocomplete options found' would not be reached
There was a problem hiding this comment.
Understood. But do we need a specific, new phrase in this case? Could we not use
{{translate
phrase='[[resultsCount]] autocomplete option found.'
pluralForm='[[resultsCount]] autocomplete options found.'
resultsCount=resultsCount
count=resultsCount
}}
here too? That would save us having to have an additional translation in Smartling just for this.
There was a problem hiding this comment.
The resultCount would be 0 here.
There was a problem hiding this comment.
yes, I can change that
## Version 1.12.0 ### Features - Allow search rate tracking (#1558) - Add support for setting and changing the visitor and passing it to answers-core (#1564) - Add support for the auth token that is passed in from the config (#1566) - Add an `environment` field to support consumer auth in Sandbox (#1597) - Allow components to override the beforeMount function (#1547) - Add distance to the card data and a function to format it (#1550) - WCAG updates (allow pagination with Enter (#1575), identify current page in navigation tab (#1576), update autocomplete screen reader support (#1578, #1579)) ### Changes - Update directAnswers component data to include the searcher (#1596) - Use custom alerts instead of window.alert (#1549) - Update Mapbox version to match the Theme (#1551) - Internal repo changes (#1562, #1577) ### Bugfixes - Fix console error which would appear on google maps (#1548) - Fix FAQ expansion when default is expanded (#1553) - Fix error for searches on page load with no businessId (#1561)
Move
spanwitharia-livelabel to be top-level for the autocomplete component so that it is present on page-load, even with empty content. Add instructions for navigating autocomplete to the search bar. Update the autocomplete component to correctly announce number of autocomplete options found for no results and for sectioned filter search.Note: there should be no screen reader text for number of options found or autocomplete instructions when the search bar is not active. Also, there should be no announcement for number of options found when user focuses on the search bar and there are no default autocomplete options shown.
J=SLAP-1653, 1402
TEST=manual
Smoke testing with theme test-site to check that screen reader correctly announces instructions and number of autocomplete options found.