algolia / algolia/instantsearch

Inputs do not conform to accessibility standards

Open
#5,262 12 comments 6 reactions 0 assignees View on GitHub
Library: React InstantSearch < 7
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.