fix(ui5-radio-button): fix tab index when there are more read-only and

if inside composite component
SAP · Nov 25, 2024 · 2a54942 · 2a54942
1 parent d8256f3
commit 2a54942
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/main/src/RadioButtonGroup.ts b/packages/main/src/RadioButtonGroup.ts
@@ -1,3 +1,4 @@
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import type RadioButton from "./RadioButton.js";
 
 class RadioButtonGroup {
@@ -117,9 +118,18 @@ class RadioButtonGroup {
 		const hasCheckedRadio = group.some(radioBtn => radioBtn.checked);
 
 		group.filter(radioBtn => !radioBtn.disabled).forEach((radioBtn, idx) => {
+			let activeElement: Element | RadioButton = getActiveElement()!;
+
+			if (activeElement.classList.contains("ui5-radio-root")) {
+				activeElement = activeElement.getRootNode() as Element;
+				if (activeElement instanceof ShadowRoot) {
+					activeElement = activeElement.host;
+				}
+			}
+
 			if (hasCheckedRadio) {
-				if ((document.activeElement as RadioButton).readonly) {
-					radioBtn._tabIndex = radioBtn.readonly ? "0" : "-1";
+				if (activeElement.hasAttribute("ui5-radio-button") && (activeElement as RadioButton).readonly) {
+					radioBtn._tabIndex = activeElement === radioBtn && radioBtn.readonly ? "0" : "-1";
 				} else {
 					radioBtn._tabIndex = radioBtn.checked ? "0" : "-1";
 				}

diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html
@@ -28,7 +28,10 @@
 		<ui5-radio-button id="testRbtn12" name="test2" disabled text="Disabled B"></ui5-radio-button>
 		<ui5-radio-button id="testRbtn13" name="test2" text="Standard C"></ui5-radio-button>
 		<ui5-radio-button name="test2" readonly text="Read-Only D"></ui5-radio-button>
-		<ui5-radio-button name="test2" text="Standard E"></ui5-radio-button>
+		<ui5-radio-button name="test2" readonly text="Read-Only E"></ui5-radio-button>
+		<ui5-radio-button name="test2" text="Standard F"></ui5-radio-button>
+		<ui5-radio-button name="test2" readonly text="Read-Only G"></ui5-radio-button>
+		<ui5-radio-button name="test2" text="Standard H"></ui5-radio-button>
 	</div>
 
 	<div aria-labelledby="radioGroupTitle3" role="radiogroup" class="radio-section">