-
Notifications
You must be signed in to change notification settings - Fork 361
Closed
Labels
accessibilitybugSomething isn't workingSomething isn't workingsearchupstreamBug is in upstream libraryBug is in upstream library
Milestone
Description
Both the collapsed and expanded search features (the button, and then the input field) currently have aria-labelledby
properties set that reference an element that doesn't exist (and, thus, they have no label)
<div class="aa-Autocomplete" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="autocomplete-0-label">
<button class="aa-DetachedSearchButton">
...
</button>
</div>
There are three associated accessibility issues I get related to the search:
- ARIA input fields must have an accessible name
Element:<div class="aa-Autocomplete" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="autocomplete-0-label">
- Buttons must have discernible text
Element:<button class="aa-DetachedSearchButton">
- ARIA attributes must conform to valid values
Element:<div class="aa-Autocomplete" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="autocomplete-0-label">
Error: ARIA attribute element ID does not exist on the page: aria-labelledby="autocomplete-0-label"
The third presumably applies to the search input when opened on the element below:
<input class="aa-Input" aria-autocomplete="both" aria-labelledby="autocomplete-0-label" id="autocomplete-0-input" autocomplete="off" autocorrect="off" autocapitalize="off" enterkeyhint="search" spellcheck="false" placeholder="" maxlength="512" type="search">
As far as internationalization goes, it looks like the buttons have translation parameters in the Algolia docs.
Link to issue report from audit with axe: https://axe.deque.com/issues/7854d2a8-7632-43fd-98a7-ad22683ed4d5
signekb and mfisher87
Metadata
Metadata
Assignees
Labels
accessibilitybugSomething isn't workingSomething isn't workingsearchupstreamBug is in upstream libraryBug is in upstream library