feat(ui5-range-slider): focus and keyboard handling implementation #2620
Conversation
The Slider is now focusable, the element that gets the focus when the component is active is the slider's handle. A new private property 'focused' is added. The full keyboard handling specifications are implemented.
ndeshev
force-pushed
the
rangeslider-focus-keyboard-handling
branch
from
5b8f2ff to
3c5a249
Compare
ndeshev
force-pushed
the
rangeslider-focus-keyboard-handling
branch
3 times, most recently
from
d66f5f8 to
3e7dacc
Compare
The Range Slider is now focusable, the elements that gets the focus when the component is active are the slider's handles and progress tracker. The full keyboard handling specifications are implemented.
ndeshev
force-pushed
the
rangeslider-focus-keyboard-handling
branch
from
3e7dacc to
e7130cc
Compare
-- onEnterDom() moved from Slider.js to SliderBase.js -- A couple of keyboard handling rare cases are fixed -- The private 'focus' property is removed as it is no longer used -- Keyboard interactions with inactive Slider (with step 0) are prevented -- Refactoring of the logic about actions onto the selected range
|
…ransparent background of the handles
| } | ||
|
|
||
| get tabIndexProgress() { | ||
| return this.tabIndex; |
There was a problem hiding this comment.
Do you really need a getter for a property?
There was a problem hiding this comment.
In the upcoming accessibility commit implementing the aria attributes according to the standards we are removing both this getter and the tabindex private property because they will be be no longer needed in results of a couple template changes of the Slider and & Range Slider components.
The Range Slider is now focusable, the elements that gets the focus when
the component is active are the progress bar and the two handles. A new private property
'focused' is added.
The full keyboard handling specifications are implemented:
[TAB]Forward navigation-- On entering, move focus to the progress bar.
-- If the focus is on the progress bar move it to the left handle
-- If the focus is on the left handle move it to the right handle
-- If focus is on the right handle, leave Range Slider
[SHIFT] + [TAB]Backward navigation-- On entering, move focus to the right handle.
-- If the focus is on the right handle move it to the left handle
-- If the focus is on the left handle move it to the progress bar
-- If focus is on the left handle, leave Range Slider
[RIGHT], [UP], or [+]Increases the value of the Range Slider by a small increment.-- The focused Range Slider handle moves to the right/ up by the according value.
-- If the focused Range Slider handle is at the maximum value position, do nothing.
-- If the focus is on the whole selected range move it with the offset by the according value.
[LEFT], [DOWN], or [-]Decreases the value of the Range Slider by a small increment-- The focused Range Slider handle moves to the left/ down by the according value.
-- If the focused Range Slider handle is at the minimum value position, do nothing.
-- If the focus is on the whole selected range move it with the offset by the according value.
[CTRL]+[RIGHT], [CTRL]+[UP], or [PAGE UP]Increases the value of the Range Slider by a large increment-- The focused Range Slider handle moves to the right/ up accordingly.
-- If the focused Range Slider handle is at the maximum value position, do nothing.
-- If the focus is on the whole selected range move it with the offset by the according value.
[CTRL]+[LEFT], [CTRL]+[DOWN], or [PAGE DOWN]Decreases the value of the Range Slider by a large increment.-- The focused Range Slider handle moves to the left/ down accordingly.
-- If the focused Range Slider handle is at the minimum value position, do nothing.
-- If the focus is on the whole selected range move it with the offset by the according value.
[HOME]Sets the minimum value. The Range Slider handles or progress bar move to the leftmost/ bottommost position.[END]Sets the maximum value. The Range Slider handles or progress bar move to the rightmost/ topmost position.[ESC]If focus is on a thumb, revert this thumb to the value which it had when it got the focus.