Closed B-Reif closed 7 years ago
Thanks for working on this @B-Reif! Is this supposed to work with example in index.html or it needs to be updated? Because I can't change the slider value with arrow keys using the example. Tested on OS X with Safari and Chrome.
I just tested it with Chrome without any issue. Are you able to tab-focus the slider handles, and then the keybinds aren't working? Or can you not even tab to them?
Just checked again and it worked this time after setting a focus with tab.
It looks like Y-axis is reverted, i.e. up arrow moves the slider down and down arrow up. Is this intentional? I'd expect that it worked the other way around.
I was going by examples from http://oaa-accessibility.org/example/32/ where Up/Left always decrements and Down/Right always increments.
The vertical slider example has invert: true
so the arrow key functionality seems backward; it works as expected if it's not inverted.
We can flip the arrow key functions if invert: true
. This might cause some confusion for blind users though. Let me know which way you'd like to go.
We definitely should stick to accessibility standards. Looks good to me. Can you just add missing semicolons? Then I'll merge. Thanks!
Ok, should be good to go.
This PR adds keyboard accessibility to react-slider (and closes #41).
refactors
_move()
now takes a new slider value (used to take a mouse position)_move()
logic for calculating value and position diff are moved into new functions_getValueFromPosition(position)
returns a corresponding slider value_getDiffPosition(position)
compares the argument tostate.startPosition
and inverts if needed_onMouseMove()
and_onTouchMove()
now use these new functions and pass a value to_move()
additions
_moveUpOneStep()
and_moveDownOneStep()
functionstabIndex
andaria-*
attributes to handle_onKeyDown()
,_onBlur()
,_getKeyDownEventMap()
, and_createOnKeyDown()
_createOnKeyDown()
is called on focus_onBlur()
is called on focusoutmisc
activeElement
if it's the currently active handle'sref