diff --git a/packages/main/src/SliderBase.ts b/packages/main/src/SliderBase.ts index 3ccae40e3a86..dec49c2b46a1 100644 --- a/packages/main/src/SliderBase.ts +++ b/packages/main/src/SliderBase.ts @@ -693,16 +693,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. @@ -719,11 +717,19 @@ abstract class SliderBase extends UI5Element { return isUpAction ? step : step * -1; } - static _isDecreaseValueAction(e: KeyboardEvent) { + static _isDecreaseValueAction(e: KeyboardEvent, directionStart: DirectionStart) { + if (directionStart === "right") { + isDown(e) || isDownCtrl(e) || isRight(e) || isRightCtrl(e) || isMinus(e) || isPageDown(e); + } + return isDown(e) || isDownCtrl(e) || isLeft(e) || isLeftCtrl(e) || isMinus(e) || isPageDown(e); } - static _isIncreaseValueAction(e: KeyboardEvent) { + static _isIncreaseValueAction(e: KeyboardEvent, directionStart: DirectionStart) { + if (directionStart === "right") { + return isUp(e) || isUpCtrl(e) || isLeft(e) || isLeftCtrl(e) || isPlus(e) || isPageUp(e); + } + 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 8faa2d6afbed..245fa4fe6960 100644 --- a/packages/main/test/specs/Slider.spec.js +++ b/packages/main/test/specs/Slider.spec.js @@ -192,7 +192,7 @@ describe("Slider elements - tooltip, step, tickmarks, labels", () => { await slider.click(); assert.strictEqual(await slider.getProperty("_tooltipVisibility"), "visible", "Slider tooltip visibility property should be 'visible'"); - + await sliderTooltipInput.click(); assert.strictEqual(await sliderTooltipInput.getProperty("focused"), true, "The tooltip is not closed and the input is focused"); @@ -282,7 +282,7 @@ describe("Slider elements - tooltip, step, tickmarks, labels", () => { await browser.keys("ArrowUp"); assert.strictEqual(await slider.getProperty("value"), 1, "The value is not changed on arrow up"); - + await browser.keys("ArrowDown"); assert.strictEqual(await slider.getProperty("value"), 1, "The value is not changed on arrow down"); @@ -654,6 +654,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 sliderHandleContainer = await slider.shadow$(".ui5-slider-handle-container"); + + await slider.setProperty("value", 0); + assert.strictEqual((await sliderHandleContainer.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 sliderHandleContainer.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 sliderHandleContainer.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");