Allow custom aria-describedby on checkbox and radio group items (#4778)

Author: devongovett

packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts

@@ -53,6 +53,7 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
     inputProps: {
       ...res.inputProps,
       'aria-describedby': [
+        props['aria-describedby'],
         state.validationState === 'invalid' ? checkboxGroupErrorMessageIds.get(state) : null,
         checkboxGroupDescriptionIds.get(state)
       ].filter(Boolean).join(' ') || undefined

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

@@ -84,6 +84,7 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
       value,
       onChange,
       'aria-describedby': [
+        props['aria-describedby'],
         state.validationState === 'invalid' ? radioGroupErrorMessageIds.get(state) : null,
         radioGroupDescriptionIds.get(state)
       ].filter(Boolean).join(' ') || undefined

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

@@ -193,4 +193,12 @@ describe('CheckboxGroup', () => {
     let label = document.getElementById(group.getAttribute('aria-labelledby'));
     expect(label).toHaveAttribute('data-required', 'true');
   });
+
+  it('should support aria-describedby on a checkbox', () => {
+    let {getAllByRole} = renderGroup({}, {'aria-describedby': 'test'});
+    let checkboxes = getAllByRole('checkbox');
+    for (let checkbox of checkboxes) {
+      expect(checkbox).toHaveAttribute('aria-describedby', 'test');
+    }
+  });
 });

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

@@ -283,7 +283,7 @@ describe('RadioGroup', () => {
     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');
@@ -292,7 +292,7 @@ describe('RadioGroup', () => {
     };
 
     expectNotFocused(labelA, labelB, labelC);
-    
+
     userEvent.tab();
     expect(document.activeElement).toBe(radios[0]);
     expect(labelA).toHaveAttribute('data-focus-visible', 'true');
@@ -316,7 +316,7 @@ describe('RadioGroup', () => {
         <Modal data-test="modal">
           <Dialog role="alertdialog" data-test="dialog">
             {({close}) => (
-              <>                
+              <>
                 <TestRadioGroup radioProps={{className: ({isFocusVisible}) => isFocusVisible ? 'focus' : ''}} />
                 <Button onPress={close}>Close</Button>
               </>
@@ -330,7 +330,7 @@ describe('RadioGroup', () => {
     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');
@@ -344,10 +344,10 @@ describe('RadioGroup', () => {
     };
 
     expectNotFocused(labelA, labelB, labelC);
-    
+
     userEvent.tab();
     expect(document.activeElement).toBe(radios[0]);
-    expect(labelA).toHaveAttribute('data-focus-visible', 'true');    
+    expect(labelA).toHaveAttribute('data-focus-visible', 'true');
     expect(labelA).toHaveClass('focus');
     expectNotFocused(labelB, labelC);
 
@@ -362,4 +362,12 @@ describe('RadioGroup', () => {
     expect(labelC).toHaveClass('focus');
     expectNotFocused(labelA, labelB);
   });
+
+  it('should support aria-describedby on a radio', () => {
+    let {getAllByRole} = renderGroup({}, {'aria-describedby': 'test'});
+    let radios = getAllByRole('radio');
+    for (let radio of radios) {
+      expect(radio).toHaveAttribute('aria-describedby', 'test');
+    }
+  });
 });