Unable to tab through radio buttons in Firefox

[brgrz]

Describe the bug

In a form, either HTML <form> or <sl-form>, we are unable to tab through radio buttons. Tabbing stops at radio button options.

Demo

https://codepen.io/trailrun80/pen/MWvNOQp
Try it in Firefox

Browser / OS

• OS: Windows 10
• Browser: Firefox 94

[claviska]

Looks like the radio group needs to use a roving tab index to make this work properly. Basically, only the checked radio will have a tabindex so tabbing in and out of the radio group will focus the correct control.

The browser normally does this on its own when radios are linked. Unfortunately, with radios in shadow roots we don't get this behavior for free. The current behaviors appears to work in all browsers except Firefox.

The correct behavior of a radio group appears to be:

1. You should not be able to tab through each individual radio. Instead, arrow keys are used to change the "checked" state within the group.
2. Tabbing into the radio group should focus on the checked radio (unchecked radios are skipped if any are present). If no radio is checked, the first one will receive focus.
3. Tabbing out of the group should focus the next tabbable element that occurs before or after the group (depending on tab direction).

[brgrz]

I'm sorry but this is not working properly in FF. With tabbing the focus does move into radio group but does not progress out of it onto next form elements unless you first move with arrow key up/down and even then only in random cases.

[claviska]

Please test against next, as this fix hasn't been released yet.

https://next.shoelace.style/components/radio

It's working for me in Firefox.

[brgrz]

I can confirm this working in FF but there's an JS error now in Chrome console

Uncaught (in promise) TypeError: Cannot set properties of null (setting 'tabIndex')
    at SlRadio.firstUpdated (chunk.PJVT7J2Z.js:57:35)
    at SlRadio._$AE (chunk.2VBMOEKG.js:520:58)
    at SlRadio.performUpdate (chunk.2VBMOEKG.js:511:16)
    at SlRadio.scheduleUpdate (chunk.2VBMOEKG.js:494:17)
    at SlRadio._$EC (chunk.2VBMOEKG.js:490:21)

This could be related to Chrome tabIndex issue but not neccessarily.