algolia / algolia/instantsearch
Inputs do not conform to accessibility standards
- Dominant language
- TypeScript
- Stars
- 4.1k
- Forks
- 553
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 51
Description
**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](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/React%20InstantSearch/getting-started). 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](https://www.algolia.com/doc/api-reference/widgets/search-box/react/) 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](https://www.w3.org/WAI/tutorials/forms/labels/) 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](https://hn.algolia.com/) [2](https://www.algolia.com/doc/api-reference/widgets/search-box/react/)). 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!
Contributor guide
Research direction
Reproduce the issue in Algolia's linked React InstantSearch CodeSandbox and inspect the inputs rendered by SearchBox and SortBy. Trace how their props reach the input, then verify that aria-label and id are accepted and rendered without connectSearchBox; the React SearchBox documentation should accurately describe the supported behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100