<sl-dialog> does not allow native radio group with no checked option to be focused with keyboard

[esharri2]

Describe the bug

If you use a native radio button group inside of the sl-dialog component, and there is no input with a checked attribute, it cannot be focused via the TAB key.

To Reproduce

Steps to reproduce the behavior:

1. Use sl-dialog component
2. Add a button and a native radio group inside the dialog
3. Open the dialog and press TAB
4. You will see focus move between the dialog close button and the button in the dialog, skipping the radio group

Demo

https://codepen.io/esharri2/pen/wvVbZXz

Screenshots

N/A

Browser / OS

• OS: Windows
• Browser: Chrome
• Browser version: 130

Additional information

• This bug does not occur if you are using the Shoelace radio components.
• It looks like all of the radio inputs are considered untabbable by this line:

  shoelace/src/internal/tabbable.ts

  Line 84 in 8cbd07b

  if (tag === 'input' && el.getAttribute('type') === 'radio' && !el.hasAttribute('checked')) {

  .
• Happy to work on a PR if you all think this is something to fix. Thanks!

[KonnorRogers]

🤔 Feels like it would need to check all radios based on [name] in the current rootNode and if none of them are checked, it would allow focusing the first. If the radio has no name, it should always be focusable.

This should also be el.checked and not el.hasAttribute("checked").

https://codepen.io/paramagicdev/pen/abegBQz

[claviska]

@KonnorRogers I added the fixed-in-wa label because we use <dialog> there and the problem doesn't exist.