casesandberg / casesandberg/react-color
Slider and Hue are not accessible
- Dominant language
- JavaScript
- Stars
- 12.3k
- Forks
- 920
- PR merge metrics
- No merged PRs in 30d
Description
The slider and hue components are not accessible.
**Current Behaviour**
Slider and Hue components cannot be focused or used via the keyboard (to reproduce, navigate through the components here using the tab key: http://casesandberg.github.io/react-color/).
**Expected Behaviour**
Slider and Hue components should be controllable using the keyboard. This is required for the component to be accessible.
**Workaround**
There is no workaround other than to use another component or another package (https://github.com/omgovich/react-colorful).
**Patch**
As to keep using the slider component with the swatches, this PR patches it (https://github.com/casesandberg/react-color/pull/848), making the hue and slider swatches focusable, and enabling setting the colour using the arrow key (for horizontal hue sliders only). A PR with tests and documentation is planned. Note that it requires providing an onChange function for updating the colour when an arrow key is pressed down, and optionally onChangeComplete for when the key is no longer pressed.
Contributor guide
Research direction
Review the slider and hue components and the proposed changes in PR #848 first. Check the planned tests and documentation for keyboard focus and arrow-key behavior, using the linked react-color demo to reproduce the current issue. Done means the components are keyboard-controllable with coverage and documented usage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100