RAC Radio and Checkbox improvements (#4780)

Author: devongovett

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

@@ -137,7 +137,7 @@ function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivEleme
       <Provider
         values={[
           [InternalCheckboxGroupContext, state],
-          [LabelContext, {...labelProps, ref: labelRef}],
+          [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
           [TextContext, {
             slots: {
               description: descriptionProps,

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

@@ -19,7 +19,7 @@ import React, {createContext, ForwardedRef, forwardRef, useState} from 'react';
 import {TextContext} from './Text';
 
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage'>, RenderProps<RadioGroupRenderProps>, SlotProps {}
-export interface RadioProps extends Omit<AriaRadioProps, 'children'>, RenderProps<RadioRenderProps> {}
+export interface RadioProps extends Omit<AriaRadioProps, 'children'>, RenderProps<RadioRenderProps>, SlotProps {}
 
 export interface RadioGroupRenderProps {
   /**
@@ -102,6 +102,7 @@ export interface RadioRenderProps {
 }
 
 export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, HTMLDivElement>>(null);
+export const RadioContext = createContext<ContextValue<RadioProps, HTMLInputElement>>(null);
 let InternalRadioContext = createContext<RadioGroupState | null>(null);
 
 function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
@@ -135,7 +136,7 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
       <Provider
         values={[
           [InternalRadioContext, state],
-          [LabelContext, {...labelProps, ref: labelRef}],
+          [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
           [TextContext, {
             slots: {
               description: descriptionProps,
@@ -150,6 +151,7 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
 }
 
 function Radio(props: RadioProps, ref: ForwardedRef<HTMLInputElement>) {
+  [props, ref] = useContextProps(props, ref, RadioContext);
   let state = React.useContext(InternalRadioContext)!;
   let domRef = useObjectRef(ref);
   let {inputProps, isSelected, isDisabled, isPressed: isPressedKeyboard} = useRadio({

packages/react-aria-components/src/index.ts

@@ -38,7 +38,7 @@ export {OverlayArrow} from './OverlayArrow';
 export {Popover, PopoverContext} from './Popover';
 export {ProgressBar, ProgressBarContext} from './ProgressBar';
 export {Provider, useContextProps} from './utils';
-export {RadioGroup, Radio, RadioGroupContext} from './RadioGroup';
+export {RadioGroup, Radio, RadioGroupContext, RadioContext} from './RadioGroup';
 export {SearchField, SearchFieldContext} from './SearchField';
 export {Select, SelectValue, SelectContext} from './Select';
 export {Separator, SeparatorContext} from './Separator';

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Dialog, DialogTrigger, Label, Modal, Radio, RadioGroup, RadioGroupContext, Text} from '../';
+import {Button, Dialog, DialogTrigger, Label, Modal, Radio, RadioContext, RadioGroup, RadioGroupContext, Text} from '../';
 import {fireEvent, render, within} from '@react-spectrum/test-utils';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
@@ -100,15 +100,22 @@ describe('RadioGroup', () => {
   });
 
   it('should support slot', () => {
-    let {getByRole} = render(
+    let {getByRole, getAllByRole} = render(
       <RadioGroupContext.Provider value={{slots: {test: {'aria-label': 'test'}}}}>
-        <TestRadioGroup groupProps={{slot: 'test'}} />
+        <RadioContext.Provider value={{'data-test': 'test'}}>
+          <TestRadioGroup groupProps={{slot: 'test'}} />
+        </RadioContext.Provider>
       </RadioGroupContext.Provider>
     );
 
     let group = getByRole('radiogroup');
     expect(group).toHaveAttribute('slot', 'test');
     expect(group).toHaveAttribute('aria-label', 'test');
+
+    let radios = getAllByRole('radio');
+    for (let radio of radios) {
+      expect(radio).toHaveAttribute('data-test', 'test');
+    }
   });
 
   it('should support hover', () => {