Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Draft] Make Slider and Hue Accessible #848

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

EddyIonescu
Copy link

This commit addresses issue
#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.

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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant