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

[Draft] Make Slider and Hue Accessible

Open EddyIonescu opened this issue 3 years ago • 0 comments

This commit addresses issue https://github.com/casesandberg/react-color/issues/847 by making the hue and slider swatch components focusable and controllable using arrow keys.

It does this by setting tabIndex to zero and adding onKeyDown handlers to the SliderSwatch and Hue components.

It also changes the detection of keys to the key property rather than keyCode which is deprecated (https://www.w3schools.com/jsref/event_key_keycode.asp) (even if supported in React key seems to be easier to understand as it avoids having to define a code constant).

For updating the hue, changing the hue on the slider is implemented in hue.js for horizontal sliders only.

For repeated key presses to work (ie. arrow key held down) the usage of onChange is required, in addition to onChangeComplete, otherwise the slider won't move while the arrow key is held down, rather needing to be pressed many times. Resolving this within the package is the scope of a future commit, as are tests and docs.

EddyIonescu avatar Dec 28 '21 19:12 EddyIonescu