fix tabbable for radios (#2357)

* fix tabbable for radios * prettier * add note about focus trapping * prettier
shoelace-style · Feb 3, 2025 · b0399ca · b0399ca
1 parent 6761fdc
commit b0399ca
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
@@ -16,6 +16,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 - Improved performance of `<sl-select>` when using a large number of options [#2318]
 - Updated the Japanese translation [#2329]
+- Fixed a bug with radios in `<sl-dialog>` focus trapping.
 
 ## 2.19.1
 

diff --git a/src/internal/tabbable.ts b/src/internal/tabbable.ts
@@ -80,9 +80,19 @@ function isTabbable(el: HTMLElement) {
     return false;
   }
 
-  // Radios without a checked attribute are not tabbable
-  if (tag === 'input' && el.getAttribute('type') === 'radio' && !el.hasAttribute('checked')) {
-    return false;
+  if (tag === 'input' && el.getAttribute('type') === 'radio') {
+    const rootNode = el.getRootNode() as HTMLElement;
+
+    const findRadios = `input[type='radio'][name="${el.getAttribute('name')}"]`;
+    const firstChecked = rootNode.querySelector(`${findRadios}:checked`);
+
+    if (firstChecked) {
+      return firstChecked === el;
+    }
+
+    const firstRadio = rootNode.querySelector(findRadios);
+
+    return firstRadio === el;
   }
 
   if (!isVisible(el)) {