diff --git a/packages/main/src/SliderBase.ts b/packages/main/src/SliderBase.ts index cf0927835a0f..075d9b530964 100644 --- a/packages/main/src/SliderBase.ts +++ b/packages/main/src/SliderBase.ts @@ -609,16 +609,14 @@ abstract class SliderBase extends UI5Element { } _handleActionKeyPressBase(e: KeyboardEvent, affectedPropName: string) { - const isUpAction = SliderBase._isIncreaseValueAction(e); + const isUpAction = SliderBase._isIncreaseValueAction(e, this.directionStart); const isBigStep = SliderBase._isBigStepAction(e); const currentValue = this[affectedPropName as keyof SliderBase] as number; const min = this._effectiveMin; const max = this._effectiveMax; - // We need to take into consideration the effective direction of the slider - rtl or ltr. - // While in ltr, the left arrow key decreases the value, in rtl it should actually increase it. - let step = this.effectiveDir === "rtl" ? -this._effectiveStep : this._effectiveStep; + let step = this._effectiveStep; // If the action key corresponds to a long step and the slider has more than 10 normal steps, // make a jump of 1/10th of the Slider's length, otherwise just use the normal step property. @@ -635,11 +633,11 @@ abstract class SliderBase extends UI5Element { return isUpAction ? step : step * -1; } - static _isDecreaseValueAction(e: KeyboardEvent) { - return isDown(e) || isDownCtrl(e) || isLeft(e) || isLeftCtrl(e) || isMinus(e) || isPageDown(e); - } + static _isIncreaseValueAction(e: KeyboardEvent, directionStart: DirectionStart) { + if (directionStart === "right") { + return isUp(e) || isUpCtrl(e) || isLeft(e) || isLeftCtrl(e) || isPlus(e) || isPageUp(e); + } - static _isIncreaseValueAction(e: KeyboardEvent) { return isUp(e) || isUpCtrl(e) || isRight(e) || isRightCtrl(e) || isPlus(e) || isPageUp(e); } diff --git a/packages/main/test/specs/Slider.spec.js b/packages/main/test/specs/Slider.spec.js index 76d514aa7a93..632671f361c2 100644 --- a/packages/main/test/specs/Slider.spec.js +++ b/packages/main/test/specs/Slider.spec.js @@ -109,7 +109,7 @@ describe("Properties synchronization and normalization", () => { assert.strictEqual((await slider.getProperty("_labels"))[0], "-20", "Initial slider start label is -20."); assert.strictEqual((await slider.getProperty("_labels"))[labelLength - 1], "20", "Initial slider end label is 20."); - // simulate the synchronous update of min and max made programatically + // simulate the synchronous update of min and max made programatically await browser.executeAsync(done => { const slider = document.getElementById("slider-tickmarks-labels"); slider.min = 0; @@ -492,6 +492,25 @@ describe("Testing resize handling and RTL support", () => { assert.strictEqual(await slider.getProperty("value"), 1, "Slider current value should be 1"); }); + it("Testing RTL KBH support - arrow up and down", async () => { + const slider = await browser.$("#basic-slider-rtl"); + const sliderHandle = await slider.shadow$(".ui5-slider-handle"); + + await slider.setProperty("value", 0); + assert.strictEqual((await sliderHandle.getCSSProperty("right")).value, "0px", "Initially if no value is set, the Slider handle is at the right of the Slider"); + + await slider.keys("ArrowUp"); + await slider.keys("ArrowUp"); + + assert.strictEqual(await sliderHandle.getAttribute("style"), "right: 20%;", "Slider handle should be 20% from the right of the slider"); + assert.strictEqual(await slider.getProperty("value"), 2, "Slider current value should be 2"); + + await slider.keys("ArrowDown"); + + assert.strictEqual(await sliderHandle.getAttribute("style"), "right: 10%;", "Slider handle should be 10% from the right of the slider"); + assert.strictEqual(await slider.getProperty("value"), 1, "Slider current value should be 1"); + }); + it("Should hide all labels except the first and the last one, if there is not enough space for all of them", async () => { const slider = await browser.$("#slider-tickmarks-tooltips-labels");