fix(ui5-radiobutton): make readonly radiobuttons not selectable via k…

…eyboard (#500)
SAP · Jun 3, 2019 · 2261f1c · 2261f1c
1 parent 8a9d27e
commit 2261f1c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/packages/main/src/RadioButtonGroup.js b/packages/main/src/RadioButtonGroup.js
@@ -118,15 +118,14 @@ class RadioButtonGroup {
 		let nextRadioToSelect = null;
 
 		if (pos === groupLength - 1) {
-			if (!group[0].disabled) {
-				nextRadioToSelect = group[0];
-			} else {
-				return this._nextSelectable(0, group);
+			if (group[0].disabled || group[0].readonly) {
+				return this._nextSelectable(1, group);
 			}
-		} else if (!group[++pos].disabled) {
-			nextRadioToSelect = group[pos];
+			nextRadioToSelect = group[0];
+		} else if (group[pos + 1].disabled || group[pos + 1].readonly) {
+			return this._nextSelectable(pos + 1, group);
 		} else {
-			return this._nextSelectable(pos, group);
+			nextRadioToSelect = group[pos + 1];
 		}
 
 		return nextRadioToSelect;
@@ -135,17 +134,15 @@ class RadioButtonGroup {
 	static _previousSelectable(pos, group) {
 		const groupLength = group.length;
 		let previousRadioToSelect = null;
-
 		if (pos === 0) {
-			if (!group[groupLength - 1].disabled) {
-				previousRadioToSelect = group[groupLength - 1];
-			} else {
+			if (group[groupLength - 1].disabled || group[groupLength - 1].readonly) {
 				return this._previousSelectable(groupLength - 1, group);
 			}
-		} else if (!group[--pos].disabled) {
-			previousRadioToSelect = group[pos];
+			previousRadioToSelect = group[groupLength - 1];
+		} else if (group[pos - 1].disabled || group[pos - 1].readonly) {
+			return this._previousSelectable(pos - 1, group);
 		} else {
-			return this._previousSelectable(pos, group);
+			previousRadioToSelect = group[pos - 1];
 		}
 
 		return previousRadioToSelect;

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/RadioButton.html b/packages/main/test/sap/ui/webcomponents/main/pages/RadioButton.html
@@ -38,6 +38,7 @@ <h1>ui5-radiobutton</h1>
 		<ui5-title>ui5-radiobutton in group</ui5-title>
 		<ui5-radiobutton id="groupRb1" name="a" selected text="Option A long long should shrink long long text text text text text text text text"></ui5-radiobutton>
 		<ui5-radiobutton id="groupRb2" name="a" disabled text="Option C"></ui5-radiobutton>
+		<ui5-radiobutton id="groupRbReadOnly" name="a" readonly text="Option E"></ui5-radiobutton>
 		<ui5-radiobutton id="groupRb3" name="a" text="Option D"></ui5-radiobutton>
 	</section>
 

diff --git a/packages/main/test/specs/RadioButton.spec.js b/packages/main/test/specs/RadioButton.spec.js
@@ -55,7 +55,7 @@ describe("RadioButton general interaction", () => {
 		assert.strictEqual(field.getProperty("value"), "3", "Select event should not be called any more, as radio is disabled.");
 	});
 
-	it("tests radio buttons selection within group with AROW-RIGHT key", () => {
+	it("tests radio buttons selection within group with ARROW-RIGHT key", () => {
 		const field = browser.$("#field");
 		const radioButtonPreviouslySelected = browser.$("#groupRb1");
 		const radioButtonToBeSelected = browser.$("#groupRb3");
@@ -71,7 +71,7 @@ describe("RadioButton general interaction", () => {
 		radioButtonToBeSelected.keys("Tab");
 	});
 
-	it("tests radio buttons selection within group with AROW-LEFT key", () => {
+	it("tests radio buttons selection within group with ARROW-LEFT key", () => {
 		const radioButtonPreviouslySelected = browser.$("#groupRb4");
 		const radioButtonToBeSelected = browser.$("#groupRb6");