fix [RAC]: RadioGroup/Dialog Focus (#4766)

* fix [RAC]: RadioGroup/Dialog Focus

Resolved issue with RadioGroup tab navigation within Dialog Component.

Fixes #4746

* Update packages/react-aria-components/example/index.css

---------

Co-authored-by: Daniel Lu <[email protected]>

Author: mariareedstrom

packages/react-aria-components/example/index.css

@@ -206,3 +206,85 @@ html {
     border: 2px solid blue;
   }
 }
+
+.radiogroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &[aria-orientation=horizontal] {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  & [slot=description] {
+    font-size: 12px;
+  }
+
+  & [slot=errorMessage] {
+    font-size: 12px;
+    color: var(--spectrum-global-color-red-600);
+  }
+}
+
+.radio {
+  --label-color: var(--spectrum-alias-text-color);
+  --deselected-color: gray;
+  --deselected-color-pressed: dimgray;
+  --background-color: var(--spectrum-global-color-gray-50);
+  --selected-color: slateblue;
+  --selected-color-pressed: lch(from slateblue 38% c h);
+  --invalid-color: var(--spectrum-global-color-static-red-600);
+  --invalid-color-pressed: var(--spectrum-global-color-static-red-700);
+
+  display: flex;
+  align-items: center;
+  gap: 0.571rem;
+  font-size: 1.143rem;
+  color: var(--label-color);
+
+  &:before {
+    content: '';
+    display: block;
+    width: 1.286rem;
+    height: 1.286rem;
+    box-sizing: border-box;
+    border: 0.143rem solid var(--deselected-color);
+    background: var(--background-color);
+    border-radius: 1.286rem;
+    transition: all 200ms;
+  }
+
+  &[data-pressed]:before {
+    border-color: var(--deselected-color-pressed);
+  }
+
+  &[data-selected] {
+    &:before {
+      border-color: var(--selected-color);
+      border-width: 0.429rem;
+    }
+
+    &[data-pressed]:before {
+      border-color: var(--selected-color-pressed);
+    }
+  }
+
+  &[data-validation-state=invalid] {
+    &:before {
+      border-color: var(--invalid-color);
+    }
+
+    &[data-pressed]:before {
+      border-color: var(--invalid-color-pressed);
+    }
+  }
+
+  &[data-focus-visible]:before {
+    box-shadow: 0 0 0 2px canvas, 0 0 0 4px var(--selected-color);
+  }
+
+  &[data-disabled] {
+    opacity: 0.4;
+  }
+}

packages/react-aria-components/src/RadioGroup.tsx

@@ -229,7 +229,7 @@ function Radio(props: RadioProps, ref: ForwardedRef<HTMLInputElement>) {
       data-validation-state={state.validationState || undefined}
       data-required={state.isRequired || undefined}>
       <VisuallyHidden elementType="span">
-        <input {...inputProps} {...focusProps} ref={domRef} />
+        <input {...mergeProps(inputProps, focusProps)} ref={domRef} />
       </VisuallyHidden>
       {renderProps.children}
     </label>

packages/react-aria-components/stories/index.stories.tsx

@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Button, Calendar, CalendarCell, CalendarGrid, Cell, Column, ComboBox, DateField, DateInput, DatePicker, DateRangePicker, DateSegment, Dialog, DialogTrigger, DropZone, FileTrigger, Group, Header, Heading, Input, Item, Keyboard, Label, Link, ListBox, ListBoxProps, Menu, MenuTrigger, Modal, ModalOverlay, NumberField, OverlayArrow, Popover, RangeCalendar, Row, Section, Select, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Tab, Table, TableBody, TableHeader, TabList, TabPanel, Tabs, TabsProps, Text, TimeField, Tooltip, TooltipTrigger, useDragAndDrop} from 'react-aria-components';
+import {Button, Calendar, CalendarCell, CalendarGrid, Cell, Column, ComboBox, DateField, DateInput, DatePicker, DateRangePicker, DateSegment, Dialog, DialogTrigger, DropZone, FileTrigger, Group, Header, Heading, Input, Item, Keyboard, Label, Link, ListBox, ListBoxProps, Menu, MenuTrigger, Modal, ModalOverlay, NumberField, OverlayArrow, Popover, Radio, RadioGroup, RangeCalendar, Row, Section, Select, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Tab, Table, TableBody, TableHeader, TabList, TabPanel, Tabs, TabsProps, Text, TimeField, Tooltip, TooltipTrigger, useDragAndDrop} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
 import clsx from 'clsx';
 import {FocusRing, mergeProps, useButton, useClipboard, useDrag} from 'react-aria';
@@ -1032,3 +1032,64 @@ ListBoxDnd.story = {
     }
   }
 };
+
+export const RadioGroupExample = () => {
+  return (
+    <RadioGroup
+      className={styles.radiogroup}>
+      <Label>Favorite pet</Label>
+      <Radio className={styles.radio} value="dogs">Dog</Radio>
+      <Radio className={styles.radio} value="cats">Cat</Radio>
+      <Radio className={styles.radio} value="dragon">Dragon</Radio>
+    </RadioGroup>
+  );
+};
+
+export const RadioGroupInDialogExample = () => {
+  return (
+    <DialogTrigger>      
+      <Button>Open dialog</Button>
+      <ModalOverlay
+        style={{
+          position: 'fixed',
+          zIndex: 100,
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          background: 'rgba(0, 0, 0, 0.5)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+        <Modal
+          style={{
+            background: 'Canvas',
+            color: 'CanvasText',
+            border: '1px solid gray',
+            padding: 30
+          }}>
+          <Dialog
+            style={{
+              outline: '2px solid transparent',
+              outlineOffset: '2px',
+              position: 'relative'
+            }}>
+            {({close}) => (              
+              <>
+                <div>
+                  <RadioGroupExample />
+                </div>
+                <div>
+                  <Button onPress={close} style={{marginTop: 10}}>
+                    Close
+                  </Button>
+                </div>
+              </>
+            )}
+          </Dialog>
+        </Modal>
+      </ModalOverlay>
+    </DialogTrigger>
+  );
+};

packages/react-aria-components/test/RadioGroup.test.js

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {fireEvent, render} from '@react-spectrum/test-utils';
-import {Label, Radio, RadioGroup, RadioGroupContext, Text} from '../';
+import {Button, Dialog, DialogTrigger, Label, Modal, Radio, RadioGroup, RadioGroupContext, Text} from '../';
+import {fireEvent, render, within} from '@react-spectrum/test-utils';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 
@@ -276,4 +276,90 @@ describe('RadioGroup', () => {
     expect(radio).toHaveAttribute('aria-describedby');
     expect(radio.getAttribute('aria-describedby').split(' ').map(id => document.getElementById(id).textContent).join(' ')).toBe('Error Description');
   });
+
+  it('should not navigate within the group using Tab', () => {
+    let {getAllByRole} = renderGroup({}, {className: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''});
+    let radios = getAllByRole('radio');
+    let labelA = radios[0].closest('label');
+    let labelB = radios[1].closest('label');
+    let labelC = radios[2].closest('label');
+    
+    const expectNotFocused = (...labels) => {
+      labels.forEach((label) => {
+        expect(label).not.toHaveAttribute('data-focus-visible');
+        expect(label).not.toHaveClass('focus');
+      });
+    };
+
+    expectNotFocused(labelA, labelB, labelC);
+    
+    userEvent.tab();
+    expect(document.activeElement).toBe(radios[0]);
+    expect(labelA).toHaveAttribute('data-focus-visible', 'true');
+    expect(labelA).toHaveClass('focus');
+    expectNotFocused(labelB, labelC);
+
+    userEvent.tab();
+    expectNotFocused(labelA, labelB, labelC);
+
+    userEvent.tab({shift: true});
+    expect(document.activeElement).toBe(radios[2]);
+    expect(labelC).toHaveAttribute('data-focus-visible', 'true');
+    expect(labelC).toHaveClass('focus');
+    expectNotFocused(labelA, labelB);
+  });
+
+  it('should not navigate within the group using Tab in Dialog', () => {
+    let {getByRole} = render(
+      <DialogTrigger>
+        <Button>Trigger</Button>
+        <Modal data-test="modal">
+          <Dialog role="alertdialog" data-test="dialog">
+            {({close}) => (
+              <>                
+                <TestRadioGroup radioProps={{className: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''}} />
+                <Button onPress={close}>Close</Button>
+              </>
+            )}
+          </Dialog>
+        </Modal>
+      </DialogTrigger>
+    );
+
+    let trigger = getByRole('button');
+    userEvent.click(trigger);
+
+    let dialog = getByRole('alertdialog');
+    
+    let radios = within(dialog).getAllByRole('radio');
+    let labelA = radios[0].closest('label');
+    let labelB = radios[1].closest('label');
+    let labelC = radios[2].closest('label');
+
+    const expectNotFocused = (...labels) => {
+      labels.forEach((label) => {
+        expect(label).not.toHaveAttribute('data-focus-visible');
+        expect(label).not.toHaveClass('focus');
+      });
+    };
+
+    expectNotFocused(labelA, labelB, labelC);
+    
+    userEvent.tab();
+    expect(document.activeElement).toBe(radios[0]);
+    expect(labelA).toHaveAttribute('data-focus-visible', 'true');    
+    expect(labelA).toHaveClass('focus');
+    expectNotFocused(labelB, labelC);
+
+    userEvent.tab();
+    let close = within(dialog).getByRole('button');
+    expect(document.activeElement).toBe(close);
+    expectNotFocused(labelA, labelB, labelC);
+
+    userEvent.tab({shift: true});
+    expect(document.activeElement).toBe(radios[2]);
+    expect(labelC).toHaveAttribute('data-focus-visible', 'true');
+    expect(labelC).toHaveClass('focus');
+    expectNotFocused(labelA, labelB);
+  });
 });