react-color icon indicating copy to clipboard operation
react-color copied to clipboard

Slider and Hue are not accessible

Open EddyIonescu opened this issue 3 years ago • 0 comments

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.

EddyIonescu avatar Dec 28 '21 18:12 EddyIonescu