Fix RadioGroup lost roving tab index (#4985)

* Fix RadioGroup lost roving tab index

Author: snowystinger

packages/@react-aria/radio/src/useRadio.ts

@@ -68,7 +68,14 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
   }), ref);
   let interactions = mergeProps(pressProps, focusableProps);
   let domProps = filterDOMProps(props, {labelable: true});
-  let tabIndex = state.lastFocusedValue === value || state.lastFocusedValue == null ? 0 : -1;
+  let tabIndex = -1;
+  if (state.selectedValue != null) {
+    if (state.selectedValue === value) {
+      tabIndex = 0;
+    }
+  } else if (state.lastFocusedValue === value || state.lastFocusedValue == null) {
+    tabIndex = 0;
+  }
   if (isDisabled) {
     tabIndex = undefined;
   }

packages/@react-spectrum/radio/stories/Radio.stories.tsx

@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Content, ContextualHelp, Flex, Heading} from '@adobe/react-spectrum';
+import {Button, Content, ContextualHelp, Flex, Heading} from '@adobe/react-spectrum';
 import {Provider} from '@react-spectrum/provider';
 import {Radio, RadioGroup} from '../src';
 import React, {useState} from 'react';
@@ -253,3 +253,30 @@ function renderWithDescriptionErrorMessageAndValidation(props) {
 
   return <Example />;
 }
+
+export const ControlledRovingTab = () => {
+  const [selected, setSelected] = useState('1');
+
+  return (
+    <Flex direction="column" gap="16px" alignItems="center" margin="16px">
+      <Button variant="primary" onPress={() => setSelected('2')}>
+        Make it "Two"
+      </Button>
+      <RadioGroup
+        label="Lucky number? (controlled)"
+        value={selected}
+        onChange={setSelected}>
+        <Radio value="1">One</Radio>
+        <Radio value="2">Two</Radio>
+        <Radio value="3">Three</Radio>
+        <Radio value="4">Four</Radio>
+      </RadioGroup>
+      <Button variant="primary" onPress={() => setSelected('3')}>
+        Make it "Three"
+      </Button>
+    </Flex>
+  );
+};
+ControlledRovingTab.story = {
+  name: 'controlled roving tab'
+};

packages/@react-spectrum/radio/test/Radio.test.js

@@ -534,15 +534,72 @@ describe('Radios', function () {
       expect(radios[2]).toHaveAttribute('tabIndex', '-1');
     });
 
-    it('RadioGroup roving tabIndex for autoFocus', async () => {
-      jest.useFakeTimers();
-      let {getAllByRole} = renderRadioGroup(RadioGroup, Radio, {}, [{}, {autoFocus: true}, {}]);
-      let radios = getAllByRole('radio');
-      act(() => {jest.runAllTimers();});
-      expect(radios[0]).toHaveAttribute('tabIndex', '-1');
-      expect(radios[1]).toHaveAttribute('tabIndex', '0');
-      expect(radios[2]).toHaveAttribute('tabIndex', '-1');
-      jest.useRealTimers();
+    describe('roving tab timers', () => {
+      beforeAll(() => {
+        jest.useFakeTimers();
+      });
+      afterAll(() => {
+        jest.useRealTimers();
+      });
+      it('RadioGroup roving tabIndex for controlled radios', async () => {
+        function ControlledRadioGroup(props) {
+          let [value, setValue] = React.useState(null);
+          return (
+            <>
+              <Button variant="primary" onPress={() => setValue('cats')}>
+                Make it "Two"
+              </Button>
+              <RadioGroup aria-label="favorite pet" value={value} onChange={setValue}>
+                <Radio value="dogs">Dogs</Radio>
+                <Radio value="cats">Cats</Radio>
+                <Radio value="dragons">Dragons</Radio>
+                <Radio value="unicorns">Unicorns</Radio>
+              </RadioGroup>
+              <Button variant="primary" onPress={() => setValue('dragons')}>
+                Make it "Three"
+              </Button>
+            </>
+          );
+        }
+
+        let {getAllByRole} = render(
+          <ControlledRadioGroup />
+        );
+        let radios = getAllByRole('radio');
+        let buttons = getAllByRole('button');
+        expect(radios[0]).toHaveAttribute('tabIndex', '0');
+        expect(radios[1]).toHaveAttribute('tabIndex', '0');
+        expect(radios[2]).toHaveAttribute('tabIndex', '0');
+        expect(radios[3]).toHaveAttribute('tabIndex', '0');
+
+        userEvent.tab();
+        act(() => {jest.runAllTimers();});
+        expect(document.activeElement).toBe(buttons[0]);
+        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+        userEvent.tab();
+        act(() => {jest.runAllTimers();});
+        expect(document.activeElement).toBe(radios[1]);
+        userEvent.tab();
+        act(() => {jest.runAllTimers();});
+        expect(document.activeElement).toBe(buttons[1]);
+        fireEvent.keyDown(document.activeElement, {key: 'Enter'});
+        fireEvent.keyUp(document.activeElement, {key: 'Enter'});
+
+        expect(radios[0]).toHaveAttribute('tabIndex', '-1');
+        expect(radios[1]).toHaveAttribute('tabIndex', '-1');
+        expect(radios[2]).toHaveAttribute('tabIndex', '0');
+        expect(radios[3]).toHaveAttribute('tabIndex', '-1');
+      });
+
+      it('RadioGroup roving tabIndex for autoFocus', async () => {
+        let {getAllByRole} = renderRadioGroup(RadioGroup, Radio, {}, [{}, {autoFocus: true}, {}]);
+        let radios = getAllByRole('radio');
+        act(() => {jest.runAllTimers();});
+        expect(radios[0]).toHaveAttribute('tabIndex', '-1');
+        expect(radios[1]).toHaveAttribute('tabIndex', '0');
+        expect(radios[2]).toHaveAttribute('tabIndex', '-1');
+      });
     });
 
     it.each`