Radios in a set are all tabbable but only one at a time should be

[davidtheclark]

When you tab through a radio set (radio inputs sharing a name), only one of them is actually tabbable — one of the following:

• The one that has been selected.
• If none are selected and you're moving forward with tab, the first one.
• If none are selected and you're moving backward with shift-tab, the last one.

This library doesn't take that into account: it treats radio inputs like other inputs, assuming they're all tabbable.

This would be a tricky problem to fix without adding a fair amount of delicate complexity. The best solution might be similar to the iframe problem: #23 (comment) — only hijack tab and shift+tab if you're leaving the focus trap. However, the big blocking failing of this solution remains to be solved: I think the approach will only work if the first and last tabbable elements in the container are recognizable by the library. For example, if the first element that's actually tabbable (according to the browser) is in an iframe or the shadow dom or is a selected radio button that's not the first one of it's group — then how is this library going to know that that's what should receive focus?

Open to solutions.

cc @doodirock

[doodirock]

Thanks for posting here @davidtheclark

Hopefully we can get a solve for ADA

[davidtheclark]

In 2.0 this is addressed by only including the checked radio in a radio group. The necessary caveat here is that you should have a checked radio.