The Radio from react-aria-components is missing excludeFromTabOrder prop

[KelvinOm]

Provide a general summary of the issue here

The Radio from react-aria-components is missing excludeFromTabOrder prop

🤔 Expected Behavior?

There is possibility to exclude the Radio component from the sequential tab order

😯 Current Behavior

There is no way to exclude the Radio component from the sequential tab order

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Simply try to exclude the Radio from tab order.

Version

react-aria-components: 1.2.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Can you share an example for why you need to exclude a radio from the tab order?

[akyllus]

To address the issue of the missing excludeFromTabOrder prop in the Radio component from react-aria-components, we need to modify the component to accept this prop and then use it to control the tab order behavior. Below is an example of how this could be implemented:

1. Update the Radio Component:

jsx

  | import React, { useRef } from 'react';
-- | --
  | import { useFocusable } from '@react-aria/focus';
  |  
  | function Radio({ children, isDisabled, excludeFromTabOrder, ...props }) {
  | const ref = useRef(null);
  | const { focusableProps } = useFocusable(
  | {
  | ...props,
  | isDisabled,
  | excludeFromTabOrder,
  | },
  | ref
  | );
  |  
  | return (
  | 
  | 
  | {children}
  | 
  | );
  | }
  |  
  | export default Radio;

[KelvinOm]

Can you share an example for why you need to exclude a radio from the tab order?

In our app, we use components only for presentation in some mode, without the ability to interact with them. Regardless, I believe that the behavior of these components should be consistent throughout the library(other components have excludeFromTabOrder prop).

[snowystinger]

I don't think it makes sense for Radio to be excluded from tab order. Radios only exist in a RadioGroup and RadioGroup is itself a single tab stop, arrow keys to move around inside it.

You could use the RadioGroup as readonly. Then the information is still available to all users, not just the sighted users.

If it's purely visual and is just decoration, then you don't need to use a RadioGroup or Radio at all, just style some divs to look like one.

I'll double check if that prop should be exposed on so many things. It seems further reaching than I had remembered. Adding it to RadioGroup would be the thing to do if we're making it match the others though.

[KelvinOm]

@snowystinger Yes, you are absolutely right. It is best to add this prop to the RadioGroup.

[KelvinOm]

@snowystinger I also noticed that it is also not possible to specify the prop for the Link component. I also can't pass the tabIndex prop, which is a valid parameter for the link.

[snowystinger]

Chatted with the team, adding to RadioGroup is the right move. Given Button has it, Link should be fine as well. Thanks for bringing it up.

Want to open a PR with the change?

[KelvinOm]

@snowystinger I'm willing to do this and will try to find some time this week.