algolia / algolia/instantsearch
Search input's submit button is unavailable in the Satellite theme
- Dominant language
- TypeScript
- Stars
- 4.1k
- Forks
- 553
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 51
Description
In the InstantSearch Satellite theme, the search icon in the search box isn't clickable. The actual submit button is [constantly hidden](https://github.com/algolia/instantsearch-specs/blob/master/src/scss/themes/satellite.scss#L539-L543) and [replaced with a non-clickable decorative `:before` element](https://github.com/algolia/instantsearch-specs/blob/master/src/scss/themes/satellite.scss#L442-L453), even when [`searchAsYouType`](https://www.algolia.com/doc/api-reference/widgets/search-box/js/#widget-param-searchasyoutype) is `false`.
This is an accessibility issue, because an end-user using a non-SayT implementation can only refine with the `Enter` key. Screen readers won't pick up on explicitly hidden elements, so this makes the search box unusable for users without a keyboard when [`searchAsYouType`](https://www.algolia.com/doc/api-reference/widgets/search-box/js/#widget-param-searchasyoutype) is `false`.
InstantSearch users can work around the issue with some custom CSS for the time being, but we should address it as it creates some understandable confusion, and might result in non-accessible implementations when users don't notice it.
## Expected behavior
The search icon should be a submit button. We can style the submit button to meet the Satellite aesthetics and position it with CSS to achieve this.
**Workaround:** https://codesandbox.io/s/interesting-dubinsky-f373v?file=/src/index.css
## Reproduction
https://codesandbox.io/s/nameless-http-95qsp?file=/src/app.js
Contributor guide
Research direction
Start in src/scss/themes/satellite.scss, especially the linked rules around lines 442-453 and 539-543. Use the reproduction with searchAsYouType set to false and compare the behavior with the provided workaround. Done means the search icon is a styled, clickable submit button that remains usable for non-keyboard users.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100