FocusScope breaks native radio input behavior within a `fieldset`

[ohaicristina]

🐛 Bug Report

When FocusScope contains a fieldset with <input type="radio"> (ie. a radio button group), the native keyboard tab behavior breaks.

🤔 Expected Behavior

When you're focused within the radio group, tab should focus to the next focusable element outside of the radio group.

😯 Current Behavior

tab brings you to the next option within the radio group.
(Note: the up and down arrow keys still work as expected)

💁 Possible Solution

n/a

🔦 Context

We're using this within a custom built modal (not using the useModalOverlay hook) so I'm unsure if this is happening with that hook as well.

This is fairly minor considering the up and down arrow keys still work as expected and the selections can be made, but breaking native behavior seems like something that should be looked into.

💻 Code Sample

Code sandbox recreating the bug: https://codesandbox.io/s/kind-shadow-3mqv03?file=/src/App.js

🌍 Your Environment

Software	Version(s)
@react-aria/focus	3.10.0
Chrome	108.0.5359.124
macOS	Monterey 12.4
React	17.0.2

🧢 Your Company/Team

n/a

🕷 Tracking Issue (optional)

n/a

[snowystinger]

Looks like it's due to this function in FocusScope. https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/focus/src/FocusScope.tsx#L277
and specifically using the focusable tree walker to advance focus

react-spectrum/packages/@react-aria/focus/src/FocusScope.tsx

Line 628 in 080488a

export function getFocusableTreeWalker(root: Element, opts?: FocusManagerOptions, scope?: Element[]) {

This relies on this set of selectors to determine if an element is tabbable

react-spectrum/packages/@react-aria/focus/src/FocusScope.tsx

Line 242 in 080488a

const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');

each radio is an input and it's not disabled, so it'll be a valid candidate

we'd need to track radio name attributes or you'd need to implement the radio group with a roving tabIndex, such as we do with our Radios/RadioGroup.

I'd suggest using our radio hooks, they will take care of the tabIndex for you.

[devongovett]

We could potentially use RadioNodeList for this by finding the items in the same radio group and skipping non-selected ones (if any).

console.log(inputElement.form.elements.namedItem(inputElement.name))