[Draft] Make Slider and Hue Accessible #848
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This commit addresses issue
#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 the
SliderSwatchandHuecomponents.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 todefine 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.