fix(Radio): update tabIndex logic when no radio is selected (#1396)

WEB-2262

Can be verified in [this
playroom](https://mistica-3ujvm8jm3-flows-projects-65bb050e.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AhArgFwxAdgBQCcBLAWwEMCBPAAl0JgGcGBeYACgEprmA%2Ba4AL4CeAYQA2RMAGtqJGEgD06LHWLkqPADo4kAJTJQiEAOIEIaAA5ac1anogB3ADJEGGa7dv2H1DEQxiMMyaIChkOOFkIdQEBkYAamRiaEEhAEaREdEKHp7evv6BwSAAghYWgdGxhhCJyakgZOWVINQ52l4Kuo4ubtaK%2BjWm5lbaIAA0IBgAFjByDAgA2iAAshAAbq4YFCAAupMORFAzC-CLAMwAbAAMuwJAA)

---------

Co-authored-by: Pedro Ladaria <pedro.jose.ladaria.linden@telefonica.com>

Author: pladaria

src/__tests__/radio-button-test.tsx

@@ -297,3 +297,45 @@ test('Radio onClick event is not propagated', async () => {
 
     expect(onPressHandler).not.toHaveBeenCalled();
 });
+
+test('Radiogroup with no radio selected gets focus on first radio using TAB navigation', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <ButtonPrimary onPress={() => {}}>Focus me first</ButtonPrimary>
+            <RadioGroup name="radio-group" aria-labelledby="label">
+                <RadioButton value="banana" />
+                <RadioButton value="apple" />
+            </RadioGroup>
+        </ThemeContextProvider>
+    );
+
+    const button = screen.getByRole('button', {name: 'Focus me first'});
+    await userEvent.click(button);
+    expect(button).toHaveFocus();
+
+    await userEvent.tab();
+
+    const radios = screen.getAllByRole('radio');
+    expect(radios[0]).toHaveFocus();
+});
+
+test('Radiogroup with selected radio gets focus on selected radio using TAB navigation', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <ButtonPrimary onPress={() => {}}>Focus me first</ButtonPrimary>
+            <RadioGroup name="radio-group" aria-labelledby="label" defaultValue="apple">
+                <RadioButton value="banana" />
+                <RadioButton value="apple" />
+            </RadioGroup>
+        </ThemeContextProvider>
+    );
+
+    const button = screen.getByRole('button', {name: 'Focus me first'});
+    await userEvent.click(button);
+    expect(button).toHaveFocus();
+
+    await userEvent.tab();
+
+    const radios = screen.getAllByRole('radio');
+    expect(radios[1]).toHaveFocus();
+});

src/radio-button.tsx

@@ -14,6 +14,7 @@ import {useIsInverseVariant} from './theme-variant-context';
 import type {DataAttributes} from './utils/types';
 
 type RadioContextType = {
+    id: string;
     disabled?: boolean;
     selectedValue?: string | null;
     focusableValue?: string | null;
@@ -22,6 +23,7 @@ type RadioContextType = {
     selectPrev: () => void;
 };
 const RadioContext = React.createContext<RadioContextType>({
+    id: '',
     disabled: false,
     selectedValue: null,
     focusableValue: null,
@@ -64,15 +66,39 @@ const RadioButton = ({
     'aria-label': ariaLabel,
     ...rest
 }: PropsRender | PropsChildren): JSX.Element => {
-    const {disabled, selectedValue, focusableValue, select, selectNext, selectPrev} = useRadioContext();
+    const {
+        id: groupId,
+        disabled,
+        selectedValue,
+        focusableValue,
+        select,
+        selectNext,
+        selectPrev,
+    } = useRadioContext();
+    const [isFirstRadio, setIsFirstRadio] = React.useState(false);
     const reactId = React.useId();
     const labelId = ariaLabelledby || reactId;
     const ref = React.useRef<HTMLDivElement>(null);
     const checked = value === selectedValue;
-    const tabIndex = focusableValue === value ? 0 : -1;
     const {isIos} = useTheme();
     const isInverse = useIsInverseVariant();
 
+    /**
+     * The radio will gain focus with tab navigation if:
+     * - it is not disabled
+     * - it is the currently selected radio -OR- it is the first radio in the group and no radio is selected
+     */
+    const tabIndex = disabled
+        ? undefined
+        : focusableValue === value || (isFirstRadio && !selectedValue)
+          ? 0
+          : -1;
+
+    React.useEffect(() => {
+        const firstRadio = document.getElementById(groupId)?.querySelector('[role=radio]');
+        setIsFirstRadio(firstRadio === ref.current);
+    }, [groupId]);
+
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
         switch (event.key) {
             case SPACE:
@@ -124,11 +150,10 @@ const RadioButton = ({
     );
 
     return (
-        // eslint-disable-next-line jsx-a11y/interactive-supports-focus
         <span
             ref={ref}
             id={id}
-            tabIndex={disabled ? undefined : tabIndex}
+            tabIndex={tabIndex}
             role="radio"
             data-value={value}
             aria-checked={checked}
@@ -189,6 +214,8 @@ export const RadioGroup = (props: RadioGroupProps): JSX.Element => {
         disabled: props.disabled,
     });
 
+    const id = React.useId();
+
     const isControlledByParent = typeof valueContext !== 'undefined';
 
     // This state is needed because the component should be able to work outside a Form context
@@ -265,13 +292,15 @@ export const RadioGroup = (props: RadioGroupProps): JSX.Element => {
     return (
         <div
             ref={combineRefs(ref, focusableRef)}
+            id={id}
             role="radiogroup"
             aria-label={props['aria-label']}
             aria-labelledby={props['aria-label'] ? undefined : props['aria-labelledby']}
             {...getPrefixedDataAttributes(props.dataAttributes, 'RadioGroup')}
         >
             <RadioContext.Provider
                 value={{
+                    id,
                     disabled,
                     selectedValue: value ?? defaultValue,
                     focusableValue,