fix(ui5-slider): up and down arrow behavior in RTL mode

Fixes #9967

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);
 	}
 

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");