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.
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
tabIndexto zero and addingonKeyDownhandlers to theSliderSwatchandHuecomponents.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
keyseems 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.