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

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

Fixes #9967

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

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