Add valid labels for search button and input fields (a11y issue)

[batpigandme]

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:

1. 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">
2. Buttons must have discernible text
   Element: <button class="aa-DetachedSearchButton">
3. 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

[dragonstyle]

This is injected by our auto-complete library, so the simplest fix would be upstream- related issue:

algolia/autocomplete#963

For now, postponing and I'll work on trying to get fixed upstream.

[signekb]

Hi!
What's the status on this? I'm having the same issue with the search button.

[cderv]

Upstream issue is still opened, and iIssue here also as we didn't do any specific handling on Quarto side.

As said, this would need to be dealt upstream in the autocomplete library.

So work to be done (which is usally the status for issue still opened in this repo)

[signekb]

Ah, yeah, makes sense. Thanks for getting back to me so quickly.