casesandberg / casesandberg/react-color

Slider and Hue are not accessible

Open
#847 0 comments 0 reactions 0 assignees View on GitHub
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.