algolia / algolia/instantsearch

Search input's submit button is unavailable in the Satellite theme

Open
#5,191 2 comments 0 reactions 0 assignees View on GitHub
Library: InstantSearch.css
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.