diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index ca34b8b6e..abab066e0 100644 --- 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 `` when using a large number of options [#2318] - Updated the Japanese translation [#2329] +- Fixed a bug with radios in `` focus trapping. ## 2.19.1 diff --git a/src/internal/tabbable.ts b/src/internal/tabbable.ts index d96ad70d6..8e2accb66 100644 --- 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)) {