shoelace-style / shoelace

A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇
https://webawesome.com
MIT License
12.96k stars 833 forks source link

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

Open esharri2 opened 1 week ago

esharri2 commented 1 week ago

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

Additional information

KonnorRogers commented 1 week ago

🤔 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 commented 1 week ago

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