fix(ui5-radio-button): correct keyboard navigation in RTL (#5529)

Fixes: #5165
SAP · Jul 20, 2022 · bc726a9 · bc726a9
1 parent 62c4c20
commit bc726a9
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js
@@ -400,11 +400,13 @@ class RadioButton extends UI5Element {
 			return this.toggle();
 		}
 
-		if (isDown(event) || isRight(event)) {
+		const isRTL = this.effectiveDir === "rtl";
+
+		if (isDown(event) || (!isRTL && isRight(event)) || (isRTL && isLeft(event))) {
 			this._handleDown(event);
 		}
 
-		if (isUp(event) || isLeft(event)) {
+		if (isUp(event) || (!isRTL && isLeft(event)) || (isRTL && isRight(event))) {
 			this._handleUp(event);
 		}
 	}

diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html
@@ -121,6 +121,13 @@
 		<ui5-label>- for belize use 'sap-ui-theme=sap_belize'</ui5-label>
 	</p>
 
+	<ui5-title level="H2">Navigation in RTL</ui5-title><br>
+	<div dir="rtl">
+		<ui5-radio-button id="rtlOptionA" name="rtlGroup" text="Option A" checked></ui5-radio-button>
+		<ui5-radio-button id="rtlOptionB" name="rtlGroup" text="Option B"></ui5-radio-button>
+		<ui5-radio-button id="rtlOptionC" name="rtlGroup" text="Option C"></ui5-radio-button>
+	</div>
+
 	<script>
 		var counter = 0;
 		var groupEventCounter = 0;

diff --git a/packages/main/test/specs/RadioButton.spec.js b/packages/main/test/specs/RadioButton.spec.js
@@ -182,3 +182,33 @@ describe("RadioButton general interaction", () => {
 		assert.strictEqual(await rb.getProperty("ariaLabelText"), `${labelText} ${rbText}`, "The ariaLabelText includes both the accessibleNameRef text and the radio button text.");
 	});
 });
+
+describe("RadioButton keyboard handling in RTL", () => {
+	before(async () => {
+		await browser.url(`test/pages/RadioButton.html`);
+	});
+
+	it("Arrow Left", async () => {
+		const rb = await browser.$("#rtlOptionA");
+		await rb.click();
+		await rb.keys("ArrowLeft");
+
+		assert.ok(await browser.$("#rtlOptionB").getAttribute("checked"), "Pressing ArrowLeft selects the next radio in the group.");
+
+		await browser.$("#rtlOptionB").keys("ArrowLeft");
+
+		assert.ok(await browser.$("#rtlOptionC").getAttribute("checked"), "Pressing ArrowLeft selects the next radio in the group.");
+	});
+
+	it("Arrow Right", async () => {
+		const rb = await browser.$("#rtlOptionA");
+		await rb.click();
+		await rb.keys("ArrowRight");
+
+		assert.ok(await browser.$("#rtlOptionC").getAttribute("checked"), "Pressing ArrowRight selects the next radio in the group.");
+
+		await browser.$("#rtlOptionC").keys("ArrowRight");
+
+		assert.ok(await browser.$("#rtlOptionB").getAttribute("checked"), "Pressing ArrowRight selects the next radio in the group.");
+	});
+});