Allow passing inputRef to RAC <Radio>

[sookmax]

Closes #6054, closes #6123

To implement the behavior described in #6054 (comment), I needed to pass tabbable: true to getFocusableTreeWalker(). This behavior is tested by the unit test, but hard to tell in the story.

Not sure if we still need to expose individual inputRefs for each <Radio /> inside the group as done in #5967.

Oh and should we document this behavior somewhere in the docs?

Let me know what you guys think!

This PR exposes inputRef through props in <Radio>, practically the same as #5967.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Docs

• Visit http://localhost:1234/react-aria/RadioGroup.html#radio
• See if inputRef is in the prop table with the description "A ref for the HTML input element."

🧢 Your Project:

[snowystinger]

Looks pretty good, couple small comments.
To your question about documentation. We'll need to change the type on RadioGroup to handle this. In React Spectrum side, we have a FocusableRef type which we can base a new type on over here. We don't want to actually use that type because it obscures access to the DOM Node itself in a way we don't want to do over here.

[Mrtly]

Thanks @sookmax for jumping on this! I'll try to test this shortly. It'd be great if you could add the scrollIntoView() method to the imperative handle, so a form handler can both focus and scroll to the invalid field. I am not sure if all browsers automatically scroll on focus. thoughts on this?

edit to add: checking out the story now, it seems to work well but the focus lacks visual clarity without a focus ring. On inspection, the Dog label has the data-focused=“true” property but per the stylesheet only the data-focus-visible will receive a ring/shadow. Would it be possible to add data-focus-visible when focusing on the radio label programmatically?

[sookmax]

@snowystinger thanks for the feedback! I updated the story to include what you requested.

Let me know if there's anything else I should add or change!

radiogroup_focusable_ref_nerde.mov

[sookmax]

@Mrtly

I am not sure if all browsers automatically scroll on focus. thoughts on this?

It seems like the default behavior per HTMLElement: focus() method:

"By default the browser will scroll the element into view after focusing it, and it may also provide visible indication of the focused element (typically by displaying a "focus ring" around the element)."

And so I thought calling focus() on the ref would be enough to bring the radio group that may possibly be out of screen into view, without calling scrollIntoView() separately again. But calling scrollIntoView() will still work if you choose to call it, it'll just scroll to the radio group's div. I'm just not sure if we want to implement the same behavior for ref.scrollIntoView() as we did for ref.focus(). We need opinions from the core team members for this, I think.

Would it be possible to add data-focus-visible when focusing on the radio label programmatically?

I think this is impossible though I'm not 100% sure. From my understanding, the focus-visible state is controlled only by keyboard interactions, and we can't manipulate it with HTMLElement.focus(). But again, I might be missing something, so It would be better to get the answer from one of the core members!

[snowystinger]

thank you for the quick pivot!