<object/>'s used to display images with a fallback break keyboard navigation inside of RadioGroup about react-spectrum HOT 3 OPEN

Thanks for reporting that.
I'm not sure why we explicitly allow for object to be focusable according to our tree walker. They don't appear to be focusable on their own in plain HTML

https://jsfiddle.net/v0c2kn5L/8/
It looks like they aren't focusable by keyboards even if a tab index is specified. They can be programmatically focused, but would need a tabIndex >= 0

I'll see if anyone on the team remembers more about this line

from react-spectrum.

It looks like what needs to be done to check if an element is focusable/tabbable is a lot more complex than it seems vs. the checks in getFocusableTreeWalker(): https://allyjs.io/data-tables/focusable.html#object-element

In the specific case of RadioGroup though, I think the code could be amended to solely walk the tree for preceeding/proceeding <Radio/> items based on my cursory read of the ARIA RadioGroup spec.

https://www.w3.org/WAI/ARIA/apg/patterns/radio/

For Radio Groups Not Contained in a Toolbar

• Right Arrow and Down Arrow: move focus to the next radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the last button, focus moves to the first button.
• Left Arrow and Up Arrow: move focus to the previous radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the first button, focus moves to the last button.

For Radio Group Contained in a Toolbar

• Right Arrow:
  When focus is on a radio button and that radio button is not the last radio button in the radio group, moves focus to the next radio button.
  When focus is on the last radio button in the radio group and that radio button is not the last element in the toolbar, moves focus to the next element in the toolbar.
  When focus is on the last radio button in the radio group and that radio button is also the last element in the toolbar, moves focus to the first element in the toolbar.
• Left Arrow:
  When focus is on a radio button and that radio button is not the first radio button in the radio group, moves focus to the previous radio button.
  When focus is on the first radio button in the radio group and that radio button is not the first element in the toolbar, moves focus to the previous element in the toolbar.
  When focus is on the first radio button in the radio group and that radio button is also the first element in the toolbar, moves focus to the last element in the toolbar.
• Down Arrow (optional): Moves focus to the next radio button in the radio group. If focus is on the last radio button in the radio group, moves focus to the first radio button in the group.
• Up Arrow (optional): Moves focus to the previous radio button in the radio group. If focus is on the first radio button in the radio group, moves focus to the last radio button in the group.

from react-spectrum.

Thanks for reporting that. I'm not sure why we explicitly allow for object to be focusable according to our tree walker. They don't appear to be focusable on their own in plain HTML

https://jsfiddle.net/v0c2kn5L/8/ It looks like they aren't focusable by keyboards even if a tab index is specified. They can be programmatically focused, but would need a tabIndex >= 0

I'll see if anyone on the team remembers more about this line

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

Line 279 in 0c17289

'object',

It was more relevant in the age of plugins, but object tags are focusable depending on the element being rendered.

from react-spectrum.