fix tabbable for radios (#2357)

* fix tabbable for radios

* prettier

* add note about focus trapping

* prettier

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
 

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)) {