Slider and Hue are not accessible #847
Comments
EddyIonescu
added a commit
to EddyIonescu/react-color
that referenced
this issue
Dec 28, 2021
This commit addresses issue casesandberg#847 by making the hue and slider swatch focusable and controllable using arrow keys. It does this by adding onKeyDown handlers to the SliderSwatch and Hue components. 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
added a commit
to EddyIonescu/react-color
that referenced
this issue
Dec 28, 2021
This commit addresses issue casesandberg#847 by making the hue and slider swatch focusable and controllable using arrow keys. It does this by adding onKeyDown handlers to the SliderSwatch and Hue components. 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
added a commit
to EddyIonescu/react-color
that referenced
this issue
Dec 28, 2021
This commit addresses issue casesandberg#847 by making the hue and slider swatch focusable and controllable using arrow keys. It does this by adding onKeyDown handlers to the SliderSwatch and Hue components. 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
added a commit
to EddyIonescu/react-color
that referenced
this issue
Dec 28, 2021
This commit addresses issue casesandberg#847 by making the hue and slider swatch 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). 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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 (#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.
The text was updated successfully, but these errors were encountered: