Inputs do not conform to accessibility standards

Describe the bug 🐛

The default inputs in components such as SearchBox and SortBy do not allow an aria-label property. Default values or this prop interface should be available by default without having to use connectSearchBox.

Not only does this hurt a site’s Lighthouse score, but most importantly it degrades the experience of our friends who rely on accessibility attributes in HTML.

To Reproduce 🔍

See Algolia’s CodeSandbox demo. Examine the inputs with your browser’s dev tools.

I’ve also tried passing the aria-label as a prop to the component but it looks like it’s ignored. No documentation indicates that this prop is featured. An id prop also doesn’t pass through to the input to execute a different accessibility method.

Expected behavior 💭

It looks like an aria-label was added back in 2017 according to https://github.com/algolia/react-instantsearch/issues/43, but I haven’t looked in the commit history or git blame.

Additional context

See w3.org web accessibility tutorial for more information about the aria-label approach.

While an answer to this bug report may just be to use connectSearchBox, I don’t think it’s the right answer. There are even Algolia sites that don’t comply with basic input accessibility standards (1 2). Setting generic search defaults or making this prop more readily available on components such as SearchBox will help spread accessibility usage.

Let’s make accessibility a priority on the web. Thank you for maintaining a great project!

[Haroenv]

Note that with the connectors, we don’t render any dom, it’s all done by users, so they can easily spread the props themselves if that’s something required. We don’t do that in the native components, since most of them have multiple dom elements inside, so it isn’t obvious to where things should be spread.

[brettinternet]

I agree that the translations object is a great candidate for this sort of thing, and including an ‘aria-label’ field for components that don’t at least have a label would be a great starting point.

@websocket98765 Could you describe the bit about ToggleRefinement? It looks like the toggle passes Lighthouse in the component example, because there’s a label for the input.