algolia / algolia/instantsearch
rangeSlider does not respond on arrow keys
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 4.1k
- Forks
- 554
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 51
Description
🐛 Bug description
Rheostat by default has some handling of the arrow keys (as can be seen in a React InstantSearch example: https://codesandbox.io/s/1l6k5), but either we aren't using it, or something is broken
🔍 Bug reproduction
Steps to reproduce the behavior:
- Go to https://instantsearchjs.netlify.app/stories/?path=/story/refinements-rangeslider--default
- Focus a handle with tab
- Press left or right arrow key
- See nothing
💭 Expected behavior
Moving with the arrow key should change the value (maybe with a debounce), like it does in React Rheostat by default (https://codesandbox.io/s/1l6k5)
Additional context
WCAG 2.1: https://www.w3.org/WAI/WCAG21/quickref/#keyboard-no-exception point 2.1.3 covers this requirement.
found in https://stackoverflow.com/questions/63591938/algolia-keyboard-navigation-on-range-and-price-slider
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the default rangeSlider story at the linked InstantSearch Storybook URL and compare its keyboard behavior with the linked React Rheostat example. Verify that, after focusing a handle with Tab, left and right arrows change its value and satisfy the cited WCAG 2.1.3 requirement.
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
- 45/100