feat(ui5-slider): focus and keyboard handling implementation #2614
Conversation
This file contains 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
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
changed the title
ndeshev
force-pushed
the
slider-focus-and-kbd-handling
branch
from
53785a9 to
a07f2f6
Compare
…ed by it. add focusInnerElement() as a hook in SliderBase.js
vladitasev
reviewed
Jan 7, 2021
|
Reseting with ESC doesn't relly work well. |
|
HOME & END don't work as expected. Focus the handle, navigate several times with just the arrow. |
|
The inactive slider works with HOME & END |
|
I fixed the problem that the inactive Slider (with step set to '0') is affected by the keyboard shortcuts, but cannot reproduce the the first two described issues with ESC, HOME and END keys. |
-- onEnterDom() moved from Slider.js to SliderBase.js -- The Slider's handle is now focused via UI5Element getFocusDomRef() -- The private 'focus' property is removed as it is no longer used -- Keyboard interactions with inactive Slider (with step 0) are prevented
MapTo0
reviewed
Jan 11, 2021
MapTo0
approved these changes
Jan 11, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
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:
[TAB]Forward navigation-- On entering, move focus to the Slider.
-- If focus is on the Slider, move focus to the next element within the tab chain after the Slider.
[SHIFT] + [TAB]Backward navigation-- On entering, move focus to the Slider.
-- If focus is on the Slider, move focus to the previous element within the tab chain before the Slider.
[RIGHT], [UP], or [+]Increases the value of the Slider by a small increment.-- The Slider Thumb moves to the right/ up by the according value.
-- If the Slider Handle (Thumb) is at the maximum value position, do nothing.
[LEFT], [DOWN], or [-]Decreases the value of the Slider by a small increment-- The Slider Thumb moves to the left/ down by the according value.
-- If the Slider Thumb is at the minimum value position, do nothing.
[CTRL]+[RIGHT], [CTRL]+[UP], or [PAGE UP]Increases the value of the Slider by a large increment-- The Slider Thumb moves to the right/ up accordingly.
-- If the Slider Thumb is at the maximum value position, do nothing.
[CTRL]+[LEFT], [CTRL]+[DOWN], or [PAGE DOWN]Decreases the value of the Slider by a large increment.-- The Slider Thumb moves to the left/ down accordingly.
-- If the Slider Thumb is at the minimum value position, do nothing.
[HOME]Sets the minimum value. The Slider Thumb moves to the leftmost/ bottommost position.[END]Sets the maximum value. The Slider Thumb moves to the rightmost/ topmost position.[ESC]Sets the Slider back to the value which it had when it got the focus.