feat(Checkbox.Group, Radio.Group): add support for role prop (#56126)

Co-authored-by: 遇见同学 <1875694521@qq.com>

components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-solid css-var-test-id ant-radio-css-var"
+  role="radiogroup"
 >
   <span
     class="ant-badge css-var-test-id"
@@ -182,6 +183,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
   >
     <div
       class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+      role="radiogroup"
     >
       <label
         class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -279,6 +281,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
   >
     <div
       class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+      role="radiogroup"
     >
       <label
         class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled css-var-test-id ant-radio-css-var"
@@ -380,6 +383,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
   >
     <div
       class="ant-radio-group ant-radio-group-solid css-var-test-id ant-radio-css-var"
+      role="radiogroup"
     >
       <label
         class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -642,6 +646,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
 >
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -735,6 +740,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
   </div>
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -829,6 +835,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
   </div>
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled css-var-test-id ant-radio-css-var"
@@ -935,6 +942,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr
 >
   <div
     class="ant-radio-group ant-radio-group-solid css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -1028,6 +1036,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr
   </div>
   <div
     class="ant-radio-group ant-radio-group-solid css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper css-var-test-id ant-radio-css-var"
@@ -1128,6 +1137,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr
 exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+  role="radiogroup"
 >
   <label
     class="ant-radio-wrapper ant-radio-wrapper-checked option-1 css-var-test-id ant-radio-css-var"
@@ -1325,6 +1335,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
 >
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-block css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-block css-var-test-id ant-radio-css-var"
@@ -1396,6 +1407,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
   </div>
   <div
     class="ant-radio-group ant-radio-group-solid ant-radio-group-block css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-block css-var-test-id ant-radio-css-var"
@@ -1467,6 +1479,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
   </div>
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-block css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-block css-var-test-id ant-radio-css-var"
@@ -1544,6 +1557,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
 exports[`renders components/radio/demo/radiogroup-more.tsx extend context correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var ant-radio-group-vertical"
+  role="radiogroup"
 >
   <label
     class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -1643,6 +1657,7 @@ exports[`renders components/radio/demo/radiogroup-options.tsx extend context cor
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -1715,6 +1730,7 @@ Array [
   <br />,
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-wrapper ant-radio-wrapper-checked label-1 css-var-test-id ant-radio-css-var"
@@ -1789,6 +1805,7 @@ Array [
   <br />,
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1 css-var-test-id ant-radio-css-var"
@@ -1863,6 +1880,7 @@ Array [
   <br />,
   <div
     class="ant-radio-group ant-radio-group-solid css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1 css-var-test-id ant-radio-css-var"
@@ -1941,6 +1959,7 @@ exports[`renders components/radio/demo/radiogroup-options.tsx extend context cor
 exports[`renders components/radio/demo/radiogroup-with-name.tsx extend context correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+  role="radiogroup"
 >
   <label
     class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2042,6 +2061,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
 >
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-large css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2135,6 +2155,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
   </div>
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2228,6 +2249,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
   </div>
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-small css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2381,6 +2403,7 @@ exports[`renders components/radio/demo/wireframe.tsx extend context correctly 1`
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2475,6 +2498,7 @@ Array [
   <br />,
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled css-var-test-id ant-radio-css-var"

components/radio/__tests__/__snapshots__/demo.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`renders components/radio/demo/badge.tsx correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-solid css-var-test-id ant-radio-css-var"
+  role="radiogroup"
 >
   <span
     class="ant-badge css-var-test-id"
@@ -178,6 +179,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
   >
     <div
       class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+      role="radiogroup"
     >
       <label
         class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -275,6 +277,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
   >
     <div
       class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+      role="radiogroup"
     >
       <label
         class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled css-var-test-id ant-radio-css-var"
@@ -376,6 +379,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
   >
     <div
       class="ant-radio-group ant-radio-group-solid css-var-test-id ant-radio-css-var"
+      role="radiogroup"
     >
       <label
         class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -632,6 +636,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
 >
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -725,6 +730,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
   </div>
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -819,6 +825,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
   </div>
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled css-var-test-id ant-radio-css-var"
@@ -923,6 +930,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
 >
   <div
     class="ant-radio-group ant-radio-group-solid css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -1016,6 +1024,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
   </div>
   <div
     class="ant-radio-group ant-radio-group-solid css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper css-var-test-id ant-radio-css-var"
@@ -1114,6 +1123,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
 exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+  role="radiogroup"
 >
   <label
     class="ant-radio-wrapper ant-radio-wrapper-checked option-1 css-var-test-id ant-radio-css-var"
@@ -1309,6 +1319,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
 >
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-block css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-block css-var-test-id ant-radio-css-var"
@@ -1380,6 +1391,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
   </div>
   <div
     class="ant-radio-group ant-radio-group-solid ant-radio-group-block css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-block css-var-test-id ant-radio-css-var"
@@ -1451,6 +1463,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
   </div>
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-block css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-block css-var-test-id ant-radio-css-var"
@@ -1526,6 +1539,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
 exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var ant-radio-group-vertical"
+  role="radiogroup"
 >
   <label
     class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -1623,6 +1637,7 @@ exports[`renders components/radio/demo/radiogroup-options.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -1695,6 +1710,7 @@ Array [
   <br />,
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-wrapper ant-radio-wrapper-checked label-1 css-var-test-id ant-radio-css-var"
@@ -1769,6 +1785,7 @@ Array [
   <br />,
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1 css-var-test-id ant-radio-css-var"
@@ -1843,6 +1860,7 @@ Array [
   <br />,
   <div
     class="ant-radio-group ant-radio-group-solid css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked label-1 css-var-test-id ant-radio-css-var"
@@ -1919,6 +1937,7 @@ Array [
 exports[`renders components/radio/demo/radiogroup-with-name.tsx correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+  role="radiogroup"
 >
   <label
     class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2018,6 +2037,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
 >
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-large css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2111,6 +2131,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
   </div>
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2204,6 +2225,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
   </div>
   <div
     class="ant-radio-group ant-radio-group-outline ant-radio-group-small css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2353,6 +2375,7 @@ exports[`renders components/radio/demo/wireframe.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-wrapper ant-radio-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2447,6 +2470,7 @@ Array [
   <br />,
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled css-var-test-id ant-radio-css-var"

components/radio/__tests__/__snapshots__/group.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`Radio Group passes prefixCls down to radio 1`] = `
 <div
   class="my-radio-group my-radio-group-outline css-var-root my-radio-css-var"
+  role="radiogroup"
 >
   <label
     class="my-radio-wrapper css-var-root my-radio-css-var"

components/radio/__tests__/__snapshots__/radio-button.test.tsx.snap

@@ -44,6 +44,7 @@ exports[`Radio Button should render correctly 1`] = `
 exports[`Radio Group passes prefixCls down to radio 1`] = `
 <div
   class="my-radio-group my-radio-group-outline css-var-root my-radio-css-var"
+  role="radiogroup"
 >
   <label
     class="my-radio-wrapper css-var-root my-radio-css-var"

components/radio/__tests__/__snapshots__/radio.test.tsx.snap

@@ -21,6 +21,7 @@ exports[`Radio rtl render component should be rendered correctly in RTL directio
 exports[`Radio rtl render component should be rendered correctly in RTL direction 2`] = `
 <div
   class="ant-radio-group ant-radio-group-outline ant-radio-group-rtl css-var-root ant-radio-css-var"
+  role="radiogroup"
 />
 `;
 

components/radio/__tests__/group.test.tsx

@@ -388,4 +388,26 @@ describe('Radio Group', () => {
       expect(container.querySelector<HTMLDivElement>('.ant-radio-group-vertical')).toBeTruthy();
     });
   });
+
+  describe('role prop', () => {
+    it('should set default role', () => {
+      const { container } = render(
+        <Radio.Group vertical orientation="horizontal">
+          <Radio value="A">Preference A</Radio>
+          <Radio value="B">Preference B</Radio>
+        </Radio.Group>,
+      );
+      expect(container.firstChild).toHaveAttribute('role', 'radiogroup');
+    });
+
+    it('should set passed role', () => {
+      const { container } = render(
+        <Radio.Group vertical orientation="horizontal" role="radio">
+          <Radio value="A">Preference A</Radio>
+          <Radio value="B">Preference B</Radio>
+        </Radio.Group>,
+      );
+      expect(container.firstChild).toHaveAttribute('role', 'radio');
+    });
+  });
 });

components/radio/group.tsx

@@ -49,6 +49,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
     onBlur,
     orientation,
     vertical,
+    role = 'radiogroup',
   } = props;
 
   const [value, setValue] = useControlledState(defaultValue, customizedValue);
@@ -137,6 +138,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
   return (
     <div
       {...pickAttrs(props, { aria: true, data: true })}
+      role={role}
       className={clsx(classString, { [`${prefixCls}-group-vertical`]: mergedVertical })}
       style={style}
       onMouseEnter={onMouseEnter}