chore: auto merge branchs (#35420)

chore: next merge feature

.github/CODEOWNERS

@@ -1,4 +0,0 @@
-package.json          @ant-design/ant-design-core
-.github/workflows/    @ant-design/ant-design-core
-scripts/              @ant-design/ant-design-core
-LICENSE               @ant-design/ant-design-core

.stylelintrc.json

@@ -13,6 +13,7 @@
       {
         "ignoreFunctions": [
           "fade",
+          "fadeout",
           "tint",
           "darken",
           "ceil",

components/_util/theme/util/roundedArrow.tsx

@@ -18,6 +18,10 @@ export const roundedArrow = (width: number, outerRadius: number, bgColor: string
   const fy = width - cornerHeight;
   const ex = 2 * width;
   const ey = fy + outerRadius * (1 / Math.sqrt(2));
+  const gx = fx - 1;
+  const gy = fy;
+  const hx = ax;
+  const hy = ay - 1;
 
   return {
     borderRadius: { _skip_check_: true, value: `0 0 2px` },
@@ -29,11 +33,12 @@ export const roundedArrow = (width: number, outerRadius: number, bgColor: string
       insetInlineStart: -width,
       width: width * 3,
       height: width * 3,
-      background: `linear-gradient(to left, ${bgColor} 50%, ${bgColor} 50%) no-repeat ${Math.ceil(
+      background: bgColor,
-        -width + 1,
+      // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
-      )}px ${Math.ceil(-width + 1)}px`,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: `${Math.ceil(-width + 1)}px ${Math.ceil(-width + 1)}px`,
       content: '""',
-      clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 1 ${bx} ${by} L ${cx} ${cy} A ${radiusBase} ${radiusBase} 0 0 0 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 1 ${fx} ${fy} Z')`,
+      clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 1 ${bx} ${by} L ${cx} ${cy} A ${radiusBase} ${radiusBase} 0 0 0 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 1 ${fx} ${fy} L ${gx} ${gy} L ${hx} ${hy} Z')`,
     },
   };
 };

components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -522,9 +522,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
 >
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -535,6 +537,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -589,9 +592,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -602,6 +607,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -730,9 +736,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -743,6 +751,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -917,9 +926,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -930,6 +941,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1011,9 +1023,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -1024,6 +1038,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1225,9 +1240,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -1238,6 +1255,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1448,9 +1466,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -1461,6 +1481,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -174,9 +174,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
 >
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -187,6 +189,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -227,9 +230,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -240,6 +245,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -308,9 +314,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -321,6 +329,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -421,9 +430,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -434,6 +445,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -501,9 +513,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -514,6 +528,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -641,9 +656,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -654,6 +671,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -790,9 +808,11 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      role="cell"
     >
       <label
         class=""
@@ -803,6 +823,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"

components/avatar/demo/fallback.md

@@ -8,11 +8,11 @@ debug: true
 
 ## zh-CN
 
-图片不存在时，会回退到 `src`。
+图片不存在时，如果 `src` 本身是个 ReactElement，会尝试回退到 `src`，否则尝试回退到 `icon`，最后回退到显示 `children`。
 
 ## en-US
 
-图片不存在时，会回退到 `src`。
+图片不存在时，如果 `src` 本身是个 ReactElement，会尝试回退到 `src`，否则尝试回退到 `icon`，最后回退到显示 `children`。
 
 ```tsx
 import { Avatar } from 'antd';

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

@@ -3185,10 +3185,12 @@ exports[`renders ./components/calendar/demo/customize-header.md extend context c
       </h4>
       <div
         class="ant-row"
+        role="row"
         style="margin-left:-4px;margin-right:-4px"
       >
         <div
           class="ant-col"
+          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div
@@ -3237,6 +3239,7 @@ exports[`renders ./components/calendar/demo/customize-header.md extend context c
         </div>
         <div
           class="ant-col"
+          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div
@@ -3687,6 +3690,7 @@ exports[`renders ./components/calendar/demo/customize-header.md extend context c
         </div>
         <div
           class="ant-col"
+          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div

components/calendar/__tests__/__snapshots__/demo.test.js.snap

@@ -1905,10 +1905,12 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
       </h4>
       <div
         class="ant-row"
+        role="row"
         style="margin-left:-4px;margin-right:-4px"
       >
         <div
           class="ant-col"
+          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div
@@ -1957,6 +1959,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
         </div>
         <div
           class="ant-col"
+          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div
@@ -2021,6 +2024,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
         </div>
         <div
           class="ant-col"
+          role="cell"
           style="padding-left:4px;padding-right:4px"
         >
           <div

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

@@ -233,10 +233,12 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
 >
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
       class="ant-col ant-col-8"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -264,6 +266,7 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -291,6 +294,7 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -434,10 +438,12 @@ Array [
       >
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
             class="ant-col ant-col-22"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -447,10 +453,12 @@ Array [
         </div>
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
             class="ant-col ant-col-8"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -459,6 +467,7 @@ Array [
           </div>
           <div
             class="ant-col ant-col-15"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -468,10 +477,12 @@ Array [
         </div>
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
             class="ant-col ant-col-6"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -480,6 +491,7 @@ Array [
           </div>
           <div
             class="ant-col ant-col-18"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -489,10 +501,12 @@ Array [
         </div>
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
             class="ant-col ant-col-13"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -501,6 +515,7 @@ Array [
           </div>
           <div
             class="ant-col ant-col-9"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -510,10 +525,12 @@ Array [
         </div>
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
             class="ant-col ant-col-4"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -522,6 +539,7 @@ Array [
           </div>
           <div
             class="ant-col ant-col-3"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -530,6 +548,7 @@ Array [
           </div>
           <div
             class="ant-col ant-col-16"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div

components/card/__tests__/__snapshots__/demo.test.js.snap

@@ -233,10 +233,12 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
 >
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
       class="ant-col ant-col-8"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -264,6 +266,7 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -291,6 +294,7 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -434,10 +438,12 @@ Array [
       >
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
             class="ant-col ant-col-22"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -447,10 +453,12 @@ Array [
         </div>
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
             class="ant-col ant-col-8"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -459,6 +467,7 @@ Array [
           </div>
           <div
             class="ant-col ant-col-15"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -468,10 +477,12 @@ Array [
         </div>
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
             class="ant-col ant-col-6"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -480,6 +491,7 @@ Array [
           </div>
           <div
             class="ant-col ant-col-18"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -489,10 +501,12 @@ Array [
         </div>
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
             class="ant-col ant-col-13"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -501,6 +515,7 @@ Array [
           </div>
           <div
             class="ant-col ant-col-9"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -510,10 +525,12 @@ Array [
         </div>
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
             class="ant-col ant-col-4"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -522,6 +539,7 @@ Array [
           </div>
           <div
             class="ant-col ant-col-3"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -530,6 +548,7 @@ Array [
           </div>
           <div
             class="ant-col ant-col-16"
+            role="cell"
             style="padding-left:4px;padding-right:4px"
           >
             <div

components/card/__tests__/__snapshots__/index.test.js.snap

@@ -24,10 +24,12 @@ exports[`Card should still have padding when card which set padding to 0 is load
     >
       <div
         class="ant-row"
+        role="row"
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
           class="ant-col ant-col-22"
+          role="cell"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -37,10 +39,12 @@ exports[`Card should still have padding when card which set padding to 0 is load
       </div>
       <div
         class="ant-row"
+        role="row"
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
           class="ant-col ant-col-8"
+          role="cell"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -49,6 +53,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         </div>
         <div
           class="ant-col ant-col-15"
+          role="cell"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -58,10 +63,12 @@ exports[`Card should still have padding when card which set padding to 0 is load
       </div>
       <div
         class="ant-row"
+        role="row"
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
           class="ant-col ant-col-6"
+          role="cell"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -70,6 +77,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         </div>
         <div
           class="ant-col ant-col-18"
+          role="cell"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -79,10 +87,12 @@ exports[`Card should still have padding when card which set padding to 0 is load
       </div>
       <div
         class="ant-row"
+        role="row"
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
           class="ant-col ant-col-13"
+          role="cell"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -91,6 +101,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         </div>
         <div
           class="ant-col ant-col-9"
+          role="cell"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -100,10 +111,12 @@ exports[`Card should still have padding when card which set padding to 0 is load
       </div>
       <div
         class="ant-row"
+        role="row"
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
           class="ant-col ant-col-4"
+          role="cell"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -112,6 +125,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         </div>
         <div
           class="ant-col ant-col-3"
+          role="cell"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -120,6 +134,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         </div>
         <div
           class="ant-col ant-col-16"
+          role="cell"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div

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

@@ -606,9 +606,11 @@ exports[`renders ./components/checkbox/demo/layout.md extend context correctly 1
 >
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -632,6 +634,7 @@ exports[`renders ./components/checkbox/demo/layout.md extend context correctly 1
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -655,6 +658,7 @@ exports[`renders ./components/checkbox/demo/layout.md extend context correctly 1
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -678,6 +682,7 @@ exports[`renders ./components/checkbox/demo/layout.md extend context correctly 1
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -701,6 +706,7 @@ exports[`renders ./components/checkbox/demo/layout.md extend context correctly 1
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       <label
         class="ant-checkbox-wrapper"

components/checkbox/__tests__/__snapshots__/demo.test.js.snap

@@ -606,9 +606,11 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
 >
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -632,6 +634,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -655,6 +658,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -678,6 +682,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -701,6 +706,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       <label
         class="ant-checkbox-wrapper"

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

@@ -216,9 +216,11 @@ exports[`renders ./components/comment/demo/editor.md extend context correctly 1`
       >
         <div
           class="ant-row ant-form-item"
+          role="row"
         >
           <div
             class="ant-col ant-form-item-control"
+            role="cell"
           >
             <div
               class="ant-form-item-control-input"
@@ -236,9 +238,11 @@ exports[`renders ./components/comment/demo/editor.md extend context correctly 1`
         </div>
         <div
           class="ant-row ant-form-item"
+          role="row"
         >
           <div
             class="ant-col ant-form-item-control"
+            role="cell"
           >
             <div
               class="ant-form-item-control-input"

components/comment/__tests__/__snapshots__/demo.test.js.snap

@@ -144,9 +144,11 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
       >
         <div
           class="ant-row ant-form-item"
+          role="row"
         >
           <div
             class="ant-col ant-form-item-control"
+            role="cell"
           >
             <div
               class="ant-form-item-control-input"
@@ -164,9 +166,11 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
         </div>
         <div
           class="ant-row ant-form-item"
+          role="row"
         >
           <div
             class="ant-col ant-form-item-control"
+            role="cell"
           >
             <div
               class="ant-form-item-control-input"

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -13368,9 +13368,11 @@ exports[`ConfigProvider components Form configProvider 1`] = `
 >
   <div
     class="config-row config-form-item config-form-item-with-help config-form-item-has-error"
+    role="row"
   >
     <div
       class="config-col config-form-item-control"
+      role="cell"
     >
       <div
         class="config-form-item-control-input"
@@ -13406,9 +13408,11 @@ exports[`ConfigProvider components Form configProvider componentSize large 1`] =
 >
   <div
     class="config-row config-form-item config-form-item-with-help config-form-item-has-error"
+    role="row"
   >
     <div
       class="config-col config-form-item-control"
+      role="cell"
     >
       <div
         class="config-form-item-control-input"
@@ -13444,9 +13448,11 @@ exports[`ConfigProvider components Form configProvider componentSize middle 1`]
 >
   <div
     class="config-row config-form-item config-form-item-with-help config-form-item-has-error"
+    role="row"
   >
     <div
       class="config-col config-form-item-control"
+      role="cell"
     >
       <div
         class="config-form-item-control-input"
@@ -13482,9 +13488,11 @@ exports[`ConfigProvider components Form configProvider virtual and dropdownMatch
 >
   <div
     class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -13520,9 +13528,11 @@ exports[`ConfigProvider components Form normal 1`] = `
 >
   <div
     class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -13558,9 +13568,11 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
 >
   <div
     class="ant-row prefix-Form-item prefix-Form-item-with-help prefix-Form-item-has-error"
+    role="row"
   >
     <div
       class="ant-col prefix-Form-item-control"
+      role="cell"
     >
       <div
         class="prefix-Form-item-control-input"
@@ -13593,9 +13605,11 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
 exports[`ConfigProvider components Grid configProvider 1`] = `
 <div
   class="config-row"
+  role="row"
 >
   <div
     class="config-col config-col-1"
+    role="cell"
   />
 </div>
 `;
@@ -13603,9 +13617,11 @@ exports[`ConfigProvider components Grid configProvider 1`] = `
 exports[`ConfigProvider components Grid configProvider componentSize large 1`] = `
 <div
   class="config-row"
+  role="row"
 >
   <div
     class="config-col config-col-1"
+    role="cell"
   />
 </div>
 `;
@@ -13613,9 +13629,11 @@ exports[`ConfigProvider components Grid configProvider componentSize large 1`] =
 exports[`ConfigProvider components Grid configProvider componentSize middle 1`] = `
 <div
   class="config-row"
+  role="row"
 >
   <div
     class="config-col config-col-1"
+    role="cell"
   />
 </div>
 `;
@@ -13623,9 +13641,11 @@ exports[`ConfigProvider components Grid configProvider componentSize middle 1`]
 exports[`ConfigProvider components Grid configProvider virtual and dropdownMatchSelectWidth 1`] = `
 <div
   class="ant-row"
+  role="row"
 >
   <div
     class="ant-col ant-col-1"
+    role="cell"
   />
 </div>
 `;
@@ -13633,9 +13653,11 @@ exports[`ConfigProvider components Grid configProvider virtual and dropdownMatch
 exports[`ConfigProvider components Grid normal 1`] = `
 <div
   class="ant-row"
+  role="row"
 >
   <div
     class="ant-col ant-col-1"
+    role="cell"
   />
 </div>
 `;
@@ -13643,9 +13665,11 @@ exports[`ConfigProvider components Grid normal 1`] = `
 exports[`ConfigProvider components Grid prefixCls 1`] = `
 <div
   class="prefix-row"
+  role="row"
 >
   <div
     class="prefix-col prefix-col-1"
+    role="cell"
   />
 </div>
 `;

components/config-provider/__tests__/__snapshots__/form.test.js.snap

@@ -6,9 +6,11 @@ exports[`ConfigProvider.Form form requiredMark set requiredMark optional 1`] = `
 >
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-label"
+      role="cell"
     >
       <label
         class="ant-form-item-required-mark-optional"
@@ -26,6 +28,7 @@ exports[`ConfigProvider.Form form requiredMark set requiredMark optional 1`] = `
     </div>
     <div
       class="ant-col ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"

components/form/__tests__/__snapshots__/index.test.js.snap

@@ -6,9 +6,11 @@ exports[`Form Form item hidden noStyle should not work when hidden 1`] = `
 >
   <div
     class="ant-row ant-form-item ant-form-item-hidden"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -35,9 +37,11 @@ exports[`Form Form item hidden should work 1`] = `
 >
   <div
     class="ant-row ant-form-item ant-form-item-hidden"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -67,9 +71,11 @@ exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`]
     cccc="bbbb"
     class="ant-row ant-form-item"
     data-text="123"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -91,9 +97,11 @@ exports[`Form form should support disabled 1`] = `
 >
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -105,6 +113,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -138,9 +147,11 @@ exports[`Form form should support disabled 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -151,6 +162,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -206,9 +218,11 @@ exports[`Form form should support disabled 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -219,6 +233,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -237,9 +252,11 @@ exports[`Form form should support disabled 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -250,6 +267,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -320,9 +338,11 @@ exports[`Form form should support disabled 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -333,6 +353,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -402,9 +423,11 @@ exports[`Form form should support disabled 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -415,6 +438,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -484,9 +508,11 @@ exports[`Form form should support disabled 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -497,6 +523,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -549,9 +576,11 @@ exports[`Form form should support disabled 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -562,6 +591,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -656,9 +686,11 @@ exports[`Form form should support disabled 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -669,6 +701,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -755,9 +788,11 @@ exports[`Form form should support disabled 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -768,6 +803,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -785,9 +821,11 @@ exports[`Form form should support disabled 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -798,6 +836,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -824,9 +863,11 @@ exports[`Form form should support disabled 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -837,6 +878,7 @@ exports[`Form form should support disabled 1`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -865,9 +907,11 @@ exports[`Form form should support disabled 2`] = `
 >
   <div
     class="ant-row ant-form-item ant-form-item-has-success"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -879,6 +923,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -912,9 +957,11 @@ exports[`Form form should support disabled 2`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -925,6 +972,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -980,9 +1028,11 @@ exports[`Form form should support disabled 2`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -993,6 +1043,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1011,9 +1062,11 @@ exports[`Form form should support disabled 2`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -1024,6 +1077,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1094,9 +1148,11 @@ exports[`Form form should support disabled 2`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -1107,6 +1163,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1176,9 +1233,11 @@ exports[`Form form should support disabled 2`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -1189,6 +1248,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1258,9 +1318,11 @@ exports[`Form form should support disabled 2`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -1271,6 +1333,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1323,9 +1386,11 @@ exports[`Form form should support disabled 2`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -1336,6 +1401,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1430,9 +1496,11 @@ exports[`Form form should support disabled 2`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -1443,6 +1511,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1529,9 +1598,11 @@ exports[`Form form should support disabled 2`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -1542,6 +1613,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1559,9 +1631,11 @@ exports[`Form form should support disabled 2`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -1572,6 +1646,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1598,9 +1673,11 @@ exports[`Form form should support disabled 2`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -1611,6 +1688,7 @@ exports[`Form form should support disabled 2`] = `
     </div>
     <div
       class="ant-col ant-col-14 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -1642,9 +1720,11 @@ exports[`Form rtl render component should be rendered correctly in RTL direction
 exports[`Form rtl render component should be rendered correctly in RTL direction 2`] = `
 <div
   class="ant-row ant-row-rtl ant-form-item"
+  role="row"
 >
   <div
     class="ant-col ant-form-item-control ant-col-rtl"
+    role="cell"
   >
     <div
       class="ant-form-item-control-input"

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

@@ -4,66 +4,80 @@ exports[`renders ./components/grid/demo/basic.md extend context correctly 1`] =
 Array [
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-24"
+      role="cell"
     >
       col
     </div>
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-12"
+      role="cell"
     >
       col-12
     </div>
     <div
       class="ant-col ant-col-12"
+      role="cell"
     >
       col-12
     </div>
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       col-8
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       col-8
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       col-8
     </div>
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-6"
+      role="cell"
     >
       col-6
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
     >
       col-6
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
     >
       col-6
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
     >
       col-6
     </div>
@@ -85,24 +99,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-start"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -119,24 +138,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-center"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -153,24 +177,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-end"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -187,24 +216,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-space-between"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -221,24 +255,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-space-around"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -255,24 +294,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-space-evenly"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -294,9 +338,11 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-center ant-row-top"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-100"
@@ -306,6 +352,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-50"
@@ -315,6 +362,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-120"
@@ -324,6 +372,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-80"
@@ -344,9 +393,11 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-space-around ant-row-middle"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-100"
@@ -356,6 +407,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-50"
@@ -365,6 +417,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-120"
@@ -374,6 +427,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-80"
@@ -394,9 +448,11 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-space-between ant-row-bottom"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-100"
@@ -406,6 +462,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-50"
@@ -415,6 +472,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-120"
@@ -424,6 +482,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-80"
@@ -449,24 +508,29 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-6 ant-col-order-4"
+      role="cell"
     >
       1 col-order-4
     </div>
     <div
       class="ant-col ant-col-6 ant-col-order-3"
+      role="cell"
     >
       2 col-order-3
     </div>
     <div
       class="ant-col ant-col-6 ant-col-order-2"
+      role="cell"
     >
       3 col-order-2
     </div>
     <div
       class="ant-col ant-col-6 ant-col-order-1"
+      role="cell"
     >
       4 col-order-1
     </div>
@@ -483,24 +547,29 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-6 ant-col-xs-order-1 ant-col-sm-order-2 ant-col-md-order-3 ant-col-lg-order-4"
+      role="cell"
     >
       1 col-order-responsive
     </div>
     <div
       class="ant-col ant-col-6 ant-col-xs-order-2 ant-col-sm-order-1 ant-col-md-order-4 ant-col-lg-order-3"
+      role="cell"
     >
       2 col-order-responsive
     </div>
     <div
       class="ant-col ant-col-6 ant-col-xs-order-3 ant-col-sm-order-4 ant-col-md-order-2 ant-col-lg-order-1"
+      role="cell"
     >
       3 col-order-responsive
     </div>
     <div
       class="ant-col ant-col-6 ant-col-xs-order-4 ant-col-sm-order-3 ant-col-md-order-1 ant-col-lg-order-2"
+      role="cell"
     >
       4 col-order-responsive
     </div>
@@ -522,15 +591,18 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col"
+      role="cell"
       style="flex:2 2 auto"
     >
       2 / 5
     </div>
     <div
       class="ant-col"
+      role="cell"
       style="flex:3 3 auto"
     >
       3 / 5
@@ -548,15 +620,18 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col"
+      role="cell"
       style="flex:0 0 100px"
     >
       100px
     </div>
     <div
       class="ant-col"
+      role="cell"
       style="flex:auto"
     >
       Fill Rest
@@ -574,15 +649,18 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col"
+      role="cell"
       style="flex:1 1 200px"
     >
       1 1 200px
     </div>
     <div
       class="ant-col"
+      role="cell"
       style="flex:0 1 300px"
     >
       0 1 300px
@@ -590,9 +668,11 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-no-wrap"
+    role="row"
   >
     <div
       class="ant-col"
+      role="cell"
       style="flex:none;min-width:0"
     >
       <div
@@ -603,6 +683,7 @@ Array [
     </div>
     <div
       class="ant-col"
+      role="cell"
       style="flex:auto;min-width:0"
     >
       auto with no-wrap
@@ -625,10 +706,12 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -639,6 +722,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -649,6 +733,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -659,6 +744,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -680,10 +766,12 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-16px;margin-right:-16px"
   >
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:16px;padding-right:16px"
     >
       <div
@@ -694,6 +782,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:16px;padding-right:16px"
     >
       <div
@@ -704,6 +793,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:16px;padding-right:16px"
     >
       <div
@@ -714,6 +804,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:16px;padding-right:16px"
     >
       <div
@@ -735,10 +826,12 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:-12px"
   >
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -749,6 +842,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -759,6 +853,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -769,6 +864,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -779,6 +875,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -789,6 +886,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -799,6 +897,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -809,6 +908,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -825,37 +925,45 @@ exports[`renders ./components/grid/demo/offset.md extend context correctly 1`] =
 Array [
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       col-8
     </div>
     <div
       class="ant-col ant-col-8 ant-col-offset-8"
+      role="cell"
     >
       col-8
     </div>
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-6 ant-col-offset-6"
+      role="cell"
     >
       col-6 col-offset-6
     </div>
     <div
       class="ant-col ant-col-6 ant-col-offset-6"
+      role="cell"
     >
       col-6 col-offset-6
     </div>
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-12 ant-col-offset-6"
+      role="cell"
     >
       col-12 col-offset-6
     </div>
@@ -1227,10 +1335,12 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
   >
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1239,6 +1349,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1247,6 +1358,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1255,6 +1367,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1263,6 +1376,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1271,6 +1385,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1279,6 +1394,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1287,6 +1403,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1297,10 +1414,12 @@ Array [
   "Another Row:",
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
   >
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1309,6 +1428,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1317,6 +1437,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1325,6 +1446,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1363,19 +1485,23 @@ Array [
 exports[`renders ./components/grid/demo/responsive.md extend context correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
 >
   <div
     class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
+    role="cell"
   >
     Col
   </div>
   <div
     class="ant-col ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4"
+    role="cell"
   >
     Col
   </div>
   <div
     class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
+    role="cell"
   >
     Col
   </div>
@@ -1385,19 +1511,23 @@ exports[`renders ./components/grid/demo/responsive.md extend context correctly 1
 exports[`renders ./components/grid/demo/responsive-more.md extend context correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
 >
   <div
     class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    role="cell"
   >
     Col
   </div>
   <div
     class="ant-col ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    role="cell"
   >
     Col
   </div>
   <div
     class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    role="cell"
   >
     Col
   </div>
@@ -1407,14 +1537,17 @@ exports[`renders ./components/grid/demo/responsive-more.md extend context correc
 exports[`renders ./components/grid/demo/sort.md extend context correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
 >
   <div
     class="ant-col ant-col-18 ant-col-push-6"
+    role="cell"
   >
     col-18 col-push-6
   </div>
   <div
     class="ant-col ant-col-6 ant-col-pull-18"
+    role="cell"
   >
     col-6 col-pull-18
   </div>

components/grid/__tests__/__snapshots__/demo.test.js.snap

@@ -4,66 +4,80 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
 Array [
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-24"
+      role="cell"
     >
       col
     </div>
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-12"
+      role="cell"
     >
       col-12
     </div>
     <div
       class="ant-col ant-col-12"
+      role="cell"
     >
       col-12
     </div>
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       col-8
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       col-8
     </div>
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       col-8
     </div>
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-6"
+      role="cell"
     >
       col-6
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
     >
       col-6
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
     >
       col-6
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
     >
       col-6
     </div>
@@ -85,24 +99,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-start"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -119,24 +138,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-center"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -153,24 +177,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-end"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -187,24 +216,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-space-between"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -221,24 +255,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-space-around"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -255,24 +294,29 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-space-evenly"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       col-4
     </div>
@@ -294,9 +338,11 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-center ant-row-top"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-100"
@@ -306,6 +352,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-50"
@@ -315,6 +362,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-120"
@@ -324,6 +372,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-80"
@@ -344,9 +393,11 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-space-around ant-row-middle"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-100"
@@ -356,6 +407,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-50"
@@ -365,6 +417,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-120"
@@ -374,6 +427,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-80"
@@ -394,9 +448,11 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-space-between ant-row-bottom"
+    role="row"
   >
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-100"
@@ -406,6 +462,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-50"
@@ -415,6 +472,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-120"
@@ -424,6 +482,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <p
         class="height-80"
@@ -449,24 +508,29 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-6 ant-col-order-4"
+      role="cell"
     >
       1 col-order-4
     </div>
     <div
       class="ant-col ant-col-6 ant-col-order-3"
+      role="cell"
     >
       2 col-order-3
     </div>
     <div
       class="ant-col ant-col-6 ant-col-order-2"
+      role="cell"
     >
       3 col-order-2
     </div>
     <div
       class="ant-col ant-col-6 ant-col-order-1"
+      role="cell"
     >
       4 col-order-1
     </div>
@@ -483,24 +547,29 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-6 ant-col-xs-order-1 ant-col-sm-order-2 ant-col-md-order-3 ant-col-lg-order-4"
+      role="cell"
     >
       1 col-order-responsive
     </div>
     <div
       class="ant-col ant-col-6 ant-col-xs-order-2 ant-col-sm-order-1 ant-col-md-order-4 ant-col-lg-order-3"
+      role="cell"
     >
       2 col-order-responsive
     </div>
     <div
       class="ant-col ant-col-6 ant-col-xs-order-3 ant-col-sm-order-4 ant-col-md-order-2 ant-col-lg-order-1"
+      role="cell"
     >
       3 col-order-responsive
     </div>
     <div
       class="ant-col ant-col-6 ant-col-xs-order-4 ant-col-sm-order-3 ant-col-md-order-1 ant-col-lg-order-2"
+      role="cell"
     >
       4 col-order-responsive
     </div>
@@ -522,15 +591,18 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col"
+      role="cell"
       style="flex:2 2 auto"
     >
       2 / 5
     </div>
     <div
       class="ant-col"
+      role="cell"
       style="flex:3 3 auto"
     >
       3 / 5
@@ -548,15 +620,18 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col"
+      role="cell"
       style="flex:0 0 100px"
     >
       100px
     </div>
     <div
       class="ant-col"
+      role="cell"
       style="flex:auto"
     >
       Fill Rest
@@ -574,15 +649,18 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col"
+      role="cell"
       style="flex:1 1 200px"
     >
       1 1 200px
     </div>
     <div
       class="ant-col"
+      role="cell"
       style="flex:0 1 300px"
     >
       0 1 300px
@@ -590,9 +668,11 @@ Array [
   </div>,
   <div
     class="ant-row ant-row-no-wrap"
+    role="row"
   >
     <div
       class="ant-col"
+      role="cell"
       style="flex:none;min-width:0"
     >
       <div
@@ -603,6 +683,7 @@ Array [
     </div>
     <div
       class="ant-col"
+      role="cell"
       style="flex:auto;min-width:0"
     >
       auto with no-wrap
@@ -625,10 +706,12 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -639,6 +722,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -649,6 +733,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -659,6 +744,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -680,10 +766,12 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-16px;margin-right:-16px"
   >
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:16px;padding-right:16px"
     >
       <div
@@ -694,6 +782,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:16px;padding-right:16px"
     >
       <div
@@ -704,6 +793,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:16px;padding-right:16px"
     >
       <div
@@ -714,6 +804,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:16px;padding-right:16px"
     >
       <div
@@ -735,10 +826,12 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:-12px"
   >
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -749,6 +842,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -759,6 +853,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -769,6 +864,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -779,6 +875,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -789,6 +886,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -799,6 +897,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -809,6 +908,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
     >
       <div
@@ -825,37 +925,45 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
 Array [
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-8"
+      role="cell"
     >
       col-8
     </div>
     <div
       class="ant-col ant-col-8 ant-col-offset-8"
+      role="cell"
     >
       col-8
     </div>
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-6 ant-col-offset-6"
+      role="cell"
     >
       col-6 col-offset-6
     </div>
     <div
       class="ant-col ant-col-6 ant-col-offset-6"
+      role="cell"
     >
       col-6 col-offset-6
     </div>
   </div>,
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-12 ant-col-offset-6"
+      role="cell"
     >
       col-12 col-offset-6
     </div>
@@ -1155,10 +1263,12 @@ Array [
   </div>,
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
   >
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1167,6 +1277,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1175,6 +1286,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1183,6 +1295,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1191,6 +1304,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1199,6 +1313,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1207,6 +1322,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1215,6 +1331,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1225,10 +1342,12 @@ Array [
   "Another Row:",
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
   >
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1237,6 +1356,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1245,6 +1365,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1253,6 +1374,7 @@ Array [
     </div>
     <div
       class="ant-col ant-col-6"
+      role="cell"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -1291,19 +1413,23 @@ Array [
 exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
 >
   <div
     class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
+    role="cell"
   >
     Col
   </div>
   <div
     class="ant-col ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4"
+    role="cell"
   >
     Col
   </div>
   <div
     class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
+    role="cell"
   >
     Col
   </div>
@@ -1313,19 +1439,23 @@ exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
 exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
 >
   <div
     class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    role="cell"
   >
     Col
   </div>
   <div
     class="ant-col ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    role="cell"
   >
     Col
   </div>
   <div
     class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    role="cell"
   >
     Col
   </div>
@@ -1335,14 +1465,17 @@ exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
 exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
 >
   <div
     class="ant-col ant-col-18 ant-col-push-6"
+    role="cell"
   >
     col-18 col-push-6
   </div>
   <div
     class="ant-col ant-col-6 ant-col-pull-18"
+    role="cell"
   >
     col-6 col-pull-18
   </div>

components/grid/__tests__/__snapshots__/index.test.js.snap

@@ -3,16 +3,19 @@
 exports[`Grid renders wrapped Col correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
   style="margin-left:-10px;margin-right:-10px"
 >
   <div>
     <div
       class="ant-col ant-col-12"
+      role="cell"
       style="padding-left:10px;padding-right:10px"
     />
   </div>
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:10px;padding-right:10px"
   />
 </div>
@@ -21,30 +24,35 @@ exports[`Grid renders wrapped Col correctly 1`] = `
 exports[`Grid rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
   class="ant-row ant-row-rtl"
+  role="row"
 />
 `;
 
 exports[`Grid rtl render component should be rendered correctly in RTL direction 2`] = `
 <div
   class="ant-col ant-col-rtl"
+  role="cell"
 />
 `;
 
 exports[`Grid should render Col 1`] = `
 <div
   class="ant-col ant-col-2"
+  role="cell"
 />
 `;
 
 exports[`Grid should render Row 1`] = `
 <div
   class="ant-row"
+  role="row"
 />
 `;
 
 exports[`Grid when typeof gutter is object array in large screen 1`] = `
 <div
   class="ant-row"
+  role="row"
   style="margin-left:-20px;margin-right:-20px;margin-top:-200px;margin-bottom:-200px"
 />
 `;

components/grid/__tests__/gap.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { mount } from 'enzyme';
-import { render } from '../../../tests/utils';
+import { render, screen } from '../../../tests/utils';
 import { Col, Row } from '..';
 // eslint-disable-next-line no-unused-vars
 import * as styleChecker from '../../_util/styleChecker';
@@ -13,6 +13,16 @@ jest.mock('../../_util/styleChecker', () => ({
 }));
 
 describe('Grid.Gap', () => {
+  it('should not have `row-gap: 0px` style', () => {
+    render(
+      <Row>
+        <Col />
+      </Row>,
+    );
+
+    expect(screen.getByRole('row').style.rowGap).toBe('');
+  });
+
   it('should use gap', () => {
     const wrapper = mount(
       <Row gutter={[16, 8]}>

components/grid/col.tsx

@@ -131,7 +131,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
   }
 
   return wrapSSR(
-    <div {...others} style={{ ...mergedStyle, ...style }} className={classes} ref={ref}>
+    <div role="cell" {...others} style={{ ...mergedStyle, ...style }} className={classes} ref={ref}>
       {children}
     </div>,
   );

components/grid/row.tsx

@@ -14,7 +14,8 @@ import { useRowStyle } from './style';
 const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
 const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
 
-export type Gutter = number | Partial<Record<Breakpoint, number>>;
+type Gap = number | undefined;
+export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   gutter?: Gutter | [Gutter, Gutter];
   align?: typeof RowAligns[number];
@@ -67,9 +68,9 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   }, []);
 
   // ================================== Render ==================================
-  const getGutter = (): [number, number] => {
+  const getGutter = (): [Gap, Gap] => {
-    const results: [number, number] = [0, 0];
+    const results: [Gap, Gap] = [undefined, undefined];
-    const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
+    const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined];
     normalizedGutter.forEach((g, index) => {
       if (typeof g === 'object') {
         for (let i = 0; i < responsiveArray.length; i++) {
@@ -80,7 +81,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
           }
         }
       } else {
-        results[index] = g || 0;
+        results[index] = g;
       }
     });
     return results;
@@ -103,8 +104,8 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
 
   // Add gutter related style
   const rowStyle: React.CSSProperties = {};
-  const horizontalGutter = gutters[0] > 0 ? gutters[0] / -2 : undefined;
+  const horizontalGutter = gutters[0] != null && gutters[0] > 0 ? gutters[0] / -2 : undefined;
-  const verticalGutter = gutters[1] > 0 ? gutters[1] / -2 : undefined;
+  const verticalGutter = gutters[1] != null && gutters[1] > 0 ? gutters[1] / -2 : undefined;
 
   if (horizontalGutter) {
     rowStyle.marginLeft = horizontalGutter;
@@ -129,7 +130,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
 
   return wrapSSR(
     <RowContext.Provider value={rowContext}>
-      <div {...others} className={classes} style={{ ...rowStyle, ...style }} ref={ref}>
+      <div role="row" {...others} className={classes} style={{ ...rowStyle, ...style }} ref={ref}>
         {children}
       </div>
     </RowContext.Provider>,

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

@@ -5201,10 +5201,12 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
   >
     <div
       class="ant-row"
+      role="row"
       style="margin-left:-4px;margin-right:-4px"
     >
       <div
         class="ant-col ant-col-5"
+        role="cell"
         style="padding-left:4px;padding-right:4px"
       >
         <input
@@ -5215,6 +5217,7 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
       </div>
       <div
         class="ant-col ant-col-8"
+        role="cell"
         style="padding-left:4px;padding-right:4px"
       >
         <input

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -1418,10 +1418,12 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
   >
     <div
       class="ant-row"
+      role="row"
       style="margin-left:-4px;margin-right:-4px"
     >
       <div
         class="ant-col ant-col-5"
+        role="cell"
         style="padding-left:4px;padding-right:4px"
       >
         <input
@@ -1432,6 +1434,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
       </div>
       <div
         class="ant-col ant-col-8"
+        role="cell"
         style="padding-left:4px;padding-right:4px"
       >
         <input

components/input/__tests__/__snapshots__/index.test.tsx.snap

@@ -365,9 +365,11 @@ exports[`Input should support size in form 1`] = `
 >
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"

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

@@ -179,6 +179,7 @@ exports[`renders ./components/list/demo/grid.md extend context correctly 1`] = `
     >
       <div
         class="ant-row"
+        role="row"
         style="margin-left:-8px;margin-right:-8px"
       >
         <div
@@ -186,6 +187,7 @@ exports[`renders ./components/list/demo/grid.md extend context correctly 1`] = `
         >
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -221,6 +223,7 @@ exports[`renders ./components/list/demo/grid.md extend context correctly 1`] = `
         >
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -256,6 +259,7 @@ exports[`renders ./components/list/demo/grid.md extend context correctly 1`] = `
         >
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -291,6 +295,7 @@ exports[`renders ./components/list/demo/grid.md extend context correctly 1`] = `
         >
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -340,6 +345,7 @@ Array [
       >
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-8px;margin-right:-8px"
         >
           <div
@@ -347,6 +353,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -382,6 +389,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -417,6 +425,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -452,6 +461,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -487,6 +497,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -522,6 +533,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -567,6 +579,7 @@ Array [
       >
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-8px;margin-right:-8px"
         >
           <div
@@ -574,6 +587,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -609,6 +623,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -644,6 +659,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -679,6 +695,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -714,6 +731,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -749,6 +767,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -794,6 +813,7 @@ Array [
       >
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-8px;margin-right:-8px"
         >
           <div
@@ -801,6 +821,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -837,6 +858,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -873,6 +895,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -909,6 +932,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -945,6 +969,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -981,6 +1006,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -1176,11 +1202,13 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
     >
       <div
         class="ant-row"
+        role="row"
         style="margin-left:-8px;margin-right:-8px"
       >
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -1214,6 +1242,7 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -1247,6 +1276,7 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -1280,6 +1310,7 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -1313,6 +1344,7 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -1346,6 +1378,7 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div

components/list/__tests__/__snapshots__/demo.test.js.snap

@@ -179,6 +179,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
     >
       <div
         class="ant-row"
+        role="row"
         style="margin-left:-8px;margin-right:-8px"
       >
         <div
@@ -186,6 +187,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
         >
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -221,6 +223,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
         >
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -256,6 +259,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
         >
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -291,6 +295,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
         >
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -340,6 +345,7 @@ Array [
       >
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-8px;margin-right:-8px"
         >
           <div
@@ -347,6 +353,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -382,6 +389,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -417,6 +425,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -452,6 +461,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -487,6 +497,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -522,6 +533,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -567,6 +579,7 @@ Array [
       >
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-8px;margin-right:-8px"
         >
           <div
@@ -574,6 +587,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -609,6 +623,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -644,6 +659,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -679,6 +695,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -714,6 +731,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -749,6 +767,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -794,6 +813,7 @@ Array [
       >
         <div
           class="ant-row"
+          role="row"
           style="margin-left:-8px;margin-right:-8px"
         >
           <div
@@ -801,6 +821,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -837,6 +858,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -873,6 +895,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -909,6 +932,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -945,6 +969,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -981,6 +1006,7 @@ Array [
           >
             <div
               class="ant-col"
+              role="cell"
               style="padding-left:8px;padding-right:8px;flex:1 1 auto"
             >
               <div
@@ -1176,11 +1202,13 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
     >
       <div
         class="ant-row"
+        role="row"
         style="margin-left:-8px;margin-right:-8px"
       >
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -1214,6 +1242,7 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -1247,6 +1276,7 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -1280,6 +1310,7 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -1313,6 +1344,7 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div
@@ -1346,6 +1378,7 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
         <div>
           <div
             class="ant-col"
+            role="cell"
             style="padding-left:8px;padding-right:8px;flex:1 1 auto"
           >
             <div

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

@@ -44,9 +44,11 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
 >
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -58,6 +60,7 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
     </div>
     <div
       class="ant-col ant-col-16 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -80,9 +83,11 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
+      role="cell"
     >
       <label
         class="ant-form-item-required"
@@ -94,6 +99,7 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
     </div>
     <div
       class="ant-col ant-col-16 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -117,9 +123,11 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"

components/mentions/__tests__/__snapshots__/demo.test.js.snap

@@ -44,9 +44,11 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
 >
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -58,6 +60,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-16 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -80,9 +83,11 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-6 ant-form-item-label"
+      role="cell"
     >
       <label
         class="ant-form-item-required"
@@ -94,6 +99,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-16 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"
@@ -117,9 +123,11 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"

components/menu/__tests__/index.test.js

@@ -942,14 +942,12 @@ describe('Menu', () => {
     const ref = React.createRef();
     const { container } = render(
       <Menu ref={ref}>
-        <SubMenu key="sub1" title="Navigation One">
+        <Menu.Item key="1">Option 1</Menu.Item>
-          <Menu.Item key="1">Option 1</Menu.Item>
-        </SubMenu>
       </Menu>,
     );
     expect(ref.current?.menu?.list).toBe(container.querySelector('ul'));
     ref.current?.focus();
-    expect(document.activeElement).toBe(container.querySelector('ul'));
+    expect(document.activeElement).toBe(container.querySelector('li'));
   });
 
   it('expandIcon', () => {

components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -339,6 +339,7 @@ Array [
     >
       <div
         class="ant-row"
+        role="row"
       >
         <div
           class="ant-statistic"
@@ -942,6 +943,7 @@ exports[`renders ./components/page-header/demo/content.md extend context correct
   >
     <div
       class="ant-row"
+      role="row"
     >
       <div
         style="flex:1"

components/page-header/__tests__/__snapshots__/demo.test.js.snap

@@ -339,6 +339,7 @@ Array [
     >
       <div
         class="ant-row"
+        role="row"
       >
         <div
           class="ant-statistic"
@@ -739,6 +740,7 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
   >
     <div
       class="ant-row"
+      role="row"
     >
       <div
         style="flex:1"

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

@@ -190,9 +190,11 @@ Array [
   >
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -203,6 +205,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -229,9 +232,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -242,6 +247,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -268,9 +274,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -281,6 +289,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -356,9 +365,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -369,6 +380,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -444,9 +456,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -457,6 +471,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"

components/skeleton/__tests__/__snapshots__/demo.test.js.snap

@@ -190,9 +190,11 @@ Array [
   >
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -203,6 +205,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -229,9 +232,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -242,6 +247,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -268,9 +274,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -281,6 +289,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -356,9 +365,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -369,6 +380,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -444,9 +456,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -457,6 +471,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"

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

@@ -466,9 +466,11 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
 <div>
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-12"
+      role="cell"
     >
       <div
         class="ant-slider ant-slider-horizontal"
@@ -521,6 +523,7 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <div
         class="ant-input-number"
@@ -603,9 +606,11 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
   </div>
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-12"
+      role="cell"
     >
       <div
         class="ant-slider ant-slider-horizontal"
@@ -658,6 +663,7 @@ exports[`renders ./components/slider/demo/input-number.md extend context correct
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <div
         class="ant-input-number"

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -250,9 +250,11 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
 <div>
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-12"
+      role="cell"
     >
       <div
         class="ant-slider ant-slider-horizontal"
@@ -281,6 +283,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <div
         class="ant-input-number"
@@ -363,9 +366,11 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
   </div>
   <div
     class="ant-row"
+    role="row"
   >
     <div
       class="ant-col ant-col-12"
+      role="cell"
     >
       <div
         class="ant-slider ant-slider-horizontal"
@@ -394,6 +399,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-4"
+      role="cell"
     >
       <div
         class="ant-input-number"

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

@@ -3,10 +3,12 @@
 exports[`renders ./components/statistic/demo/basic.md extend context correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -34,6 +36,7 @@ exports[`renders ./components/statistic/demo/basic.md extend context correctly 1
   </div>
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -75,6 +78,7 @@ exports[`renders ./components/statistic/demo/basic.md extend context correctly 1
   </div>
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -107,10 +111,12 @@ exports[`renders ./components/statistic/demo/card.md extend context correctly 1`
 >
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
       class="ant-col ant-col-12"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -180,6 +186,7 @@ exports[`renders ./components/statistic/demo/card.md extend context correctly 1`
     </div>
     <div
       class="ant-col ant-col-12"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -254,10 +261,12 @@ exports[`renders ./components/statistic/demo/card.md extend context correctly 1`
 exports[`renders ./components/statistic/demo/countdown.md extend context correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -281,6 +290,7 @@ exports[`renders ./components/statistic/demo/countdown.md extend context correct
   </div>
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -304,6 +314,7 @@ exports[`renders ./components/statistic/demo/countdown.md extend context correct
   </div>
   <div
     class="ant-col ant-col-24"
+    role="cell"
     style="padding-left:8px;padding-right:8px;margin-top:32px"
   >
     <div
@@ -327,6 +338,7 @@ exports[`renders ./components/statistic/demo/countdown.md extend context correct
   </div>
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -354,10 +366,12 @@ exports[`renders ./components/statistic/demo/countdown.md extend context correct
 exports[`renders ./components/statistic/demo/unit.md extend context correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -408,6 +422,7 @@ exports[`renders ./components/statistic/demo/unit.md extend context correctly 1`
   </div>
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div

components/statistic/__tests__/__snapshots__/demo.test.js.snap

@@ -3,10 +3,12 @@
 exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -34,6 +36,7 @@ exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
   </div>
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -75,6 +78,7 @@ exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
   </div>
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -107,10 +111,12 @@ exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
 >
   <div
     class="ant-row"
+    role="row"
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
       class="ant-col ant-col-12"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -180,6 +186,7 @@ exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
     </div>
     <div
       class="ant-col ant-col-12"
+      role="cell"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -254,10 +261,12 @@ exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
 exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -281,6 +290,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
   </div>
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -304,6 +314,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
   </div>
   <div
     class="ant-col ant-col-24"
+    role="cell"
     style="padding-left:8px;padding-right:8px;margin-top:32px"
   >
     <div
@@ -327,6 +338,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
   </div>
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -354,10 +366,12 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
 exports[`renders ./components/statistic/demo/unit.md correctly 1`] = `
 <div
   class="ant-row"
+  role="row"
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -408,6 +422,7 @@ exports[`renders ./components/statistic/demo/unit.md correctly 1`] = `
   </div>
   <div
     class="ant-col ant-col-12"
+    role="cell"
     style="padding-left:8px;padding-right:8px"
   >
     <div

components/style/mixins/rounded-arrow.less

@@ -17,6 +17,10 @@
   @e-y: @f-y + @outer-radius-without-unit * (1 / sqrt(2));
   @f-x: 2 * @width-without-unit + @corner-height;
   @f-y: @width-without-unit - @corner-height;
+  @g-x: @f-x - 1;
+  @g-y: @f-y;
+  @h-x: @a-x;
+  @h-y: @a-y - 1;
 
   border-radius: 0 0 @arrow-border-radius;
   pointer-events: none;
@@ -27,11 +31,13 @@
     left: -@width;
     width: @width * 3;
     height: @width * 3;
-    background: linear-gradient(to left, @bg-color 50%, @bg-color 50%) no-repeat ceil(-@width + 1px)
+    background: @bg-color;
-      ceil(-@width + 1px); // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
+    // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
+    background-repeat: no-repeat;
+    background-position: ceil(-@width + 1px) ceil(-@width + 1px);
     content: '';
     clip-path: path(
-      'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} Z'
+      'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} L @{g-x} @{g-y} L @{h-x} @{h-y} Z'
     );
   }
 }

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

@@ -2295,9 +2295,11 @@ Array [
   >
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2308,6 +2310,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2334,9 +2337,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2347,6 +2352,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2373,9 +2379,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2386,6 +2394,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2412,9 +2421,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2425,6 +2436,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2451,9 +2463,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2464,6 +2478,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2490,9 +2505,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2503,6 +2520,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2529,9 +2547,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2542,6 +2562,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2568,9 +2589,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2581,6 +2604,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2607,9 +2631,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2620,6 +2646,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2646,9 +2673,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2659,6 +2688,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2685,9 +2715,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2698,6 +2730,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2773,9 +2806,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2786,6 +2821,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2860,9 +2896,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2873,6 +2911,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2928,9 +2967,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2941,6 +2982,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -3035,9 +3077,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -3048,6 +3092,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -15701,9 +15746,11 @@ Array [
   >
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -15714,6 +15761,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -15740,9 +15788,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -15753,6 +15803,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -1804,9 +1804,11 @@ Array [
   >
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -1817,6 +1819,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -1843,9 +1846,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -1856,6 +1861,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -1882,9 +1888,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -1895,6 +1903,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -1921,9 +1930,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -1934,6 +1945,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -1960,9 +1972,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -1973,6 +1987,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -1999,9 +2014,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2012,6 +2029,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2038,9 +2056,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2051,6 +2071,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2077,9 +2098,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2090,6 +2113,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2116,9 +2140,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2129,6 +2155,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2155,9 +2182,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2168,6 +2197,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2194,9 +2224,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2207,6 +2239,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2282,9 +2315,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2295,6 +2330,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2369,9 +2405,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2382,6 +2420,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2437,9 +2476,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2450,6 +2491,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -2544,9 +2586,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -2557,6 +2601,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -11943,9 +11988,11 @@ Array [
   >
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -11956,6 +12003,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"
@@ -11982,9 +12030,11 @@ Array [
     </div>
     <div
       class="ant-row ant-form-item"
+      role="row"
     >
       <div
         class="ant-col ant-form-item-label"
+        role="cell"
       >
         <label
           class=""
@@ -11995,6 +12045,7 @@ Array [
       </div>
       <div
         class="ant-col ant-form-item-control"
+        role="cell"
       >
         <div
           class="ant-form-item-control-input"

components/tooltip/style/index.less

@@ -1,196 +1,196 @@
-// @import '../../style/themes/index';
-// @import '../../style/mixins/index';
-
-// @tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
-
-// @tooltip-arrow-shadow-width: 3px;
-
-// @tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) +
-//   @tooltip-arrow-shadow-width * 2;
-
-// @tooltip-arrow-offset-vertical: 5px; // 8 - 3px
-// @tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
-
-// Base class
 // .@{tooltip-prefix-cls} {
-// .reset-component();
+//   .reset-component();
-
+//
-// position: absolute;
-// z-index: @zindex-tooltip;
-// display: block;
-// width: max-content;
-// width: intrinsic;
-// max-width: @tooltip-max-width;
-// visibility: visible;
-
-// &-hidden {
-//   display: none;
-// }
-
-// &-placement-top,
-// &-placement-topLeft,
-// &-placement-topRight {
-//   padding-bottom: @tooltip-distance;
-// }
-
-// &-placement-right,
-// &-placement-rightTop,
-// &-placement-rightBottom {
-//   padding-left: @tooltip-distance;
-// }
-
-// &-placement-bottom,
-// &-placement-bottomLeft,
-// &-placement-bottomRight {
-//   padding-top: @tooltip-distance;
-// }
-
-// &-placement-left,
-// &-placement-leftTop,
-// &-placement-leftBottom {
-//   padding-right: @tooltip-distance;
-// }
-
-// // Wrapper for the tooltip content
-// &-inner {
-//   min-width: 30px;
-//   min-height: 32px;
-//   padding: 6px 8px;
-//   color: @tooltip-color;
-//   text-align: left;
-//   text-decoration: none;
-//   word-wrap: break-word;
-//   background-color: @tooltip-bg;
-//   border-radius: @tooltip-border-radius;
-//   box-shadow: @box-shadow-base;
-// }
-
-// // Arrows
-// &-arrow {
 //   position: absolute;
+//   z-index: @zindex-tooltip;
 //   display: block;
-//   width: @tooltip-arrow-rotate-width;
+//   width: max-content;
-//   height: @tooltip-arrow-rotate-width;
+//   width: intrinsic;
-//   overflow: hidden;
+//   max-width: @tooltip-max-width;
-//   background: transparent;
+//   visibility: visible;
-//   pointer-events: none;
+//
-
 //   &-content {
-//     --antd-arrow-background-color: @tooltip-bg;
+//     position: relative;
-
+//   }
+//
+//   &-hidden {
+//     display: none;
+//   }
+//
+//   &-placement-top,
+//   &-placement-topLeft,
+//   &-placement-topRight {
+//     padding-bottom: @tooltip-distance;
+//   }
+//
+//   &-placement-right,
+//   &-placement-rightTop,
+//   &-placement-rightBottom {
+//     padding-left: @tooltip-distance;
+//   }
+//
+//   &-placement-bottom,
+//   &-placement-bottomLeft,
+//   &-placement-bottomRight {
+//     padding-top: @tooltip-distance;
+//   }
+//
+//   &-placement-left,
+//   &-placement-leftTop,
+//   &-placement-leftBottom {
+//     padding-right: @tooltip-distance;
+//   }
+//
+//   // Wrapper for the tooltip content
+//   &-inner {
+//     min-width: 30px;
+//     min-height: 32px;
+//     padding: 6px 8px;
+//     color: @tooltip-color;
+//     text-align: left;
+//     text-decoration: none;
+//     word-wrap: break-word;
+//     background-color: @tooltip-bg;
+//     border-radius: @tooltip-border-radius;
+//     box-shadow: @box-shadow-base;
+//   }
+//
+//   // Arrows
+//   &-arrow {
 //     position: absolute;
-//     top: 0;
+//     z-index: 2;
-//     right: 0;
-//     bottom: 0;
-//     left: 0;
 //     display: block;
-//     width: @tooltip-arrow-width;
+//     width: @tooltip-arrow-rotate-width;
-//     height: @tooltip-arrow-width;
+//     height: @tooltip-arrow-rotate-width;
-//     margin: auto;
+//     overflow: hidden;
-//     background-color: transparent;
+//     background: transparent;
-//     content: '';
+//     pointer-events: none;
-//     pointer-events: auto;
+//
-//     .roundedArrow(@tooltip-arrow-width, 5px);
+//     &-content {
+//       // Use linear gradient to mix box shadow of tooltip inner
+//       --antd-arrow-background-color: linear-gradient(
+//         to right bottom,
+//         fadeout(@tooltip-bg, 10%),
+//         @tooltip-bg
+//       );
+//
+//       position: absolute;
+//       top: 0;
+//       right: 0;
+//       bottom: 0;
+//       left: 0;
+//       display: block;
+//       width: @tooltip-arrow-width;
+//       height: @tooltip-arrow-width;
+//       margin: auto;
+//       background-color: transparent;
+//       content: '';
+//       pointer-events: auto;
+//       .roundedArrow(@tooltip-arrow-width, 5px);
+//     }
 //   }
-// }
+//
-
+//   &-placement-top &-arrow,
-// &-placement-top &-arrow,
+//   &-placement-topLeft &-arrow,
-// &-placement-topLeft &-arrow,
+//   &-placement-topRight &-arrow {
-// &-placement-topRight &-arrow {
+//     bottom: 0;
-//   bottom: @tooltip-distance - @tooltip-arrow-rotate-width + 0.24px;
+//     transform: translateY(100%);
-
+//
-//   &-content {
+//     &-content {
-//     box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
+//       box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
-//     transform: translateY((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
+//       transform: translateY((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
+//     }
 //   }
-// }
+//
-
+//   &-placement-top &-arrow {
-// &-placement-top &-arrow {
+//     left: 50%;
-//   left: 50%;
+//     transform: translateY(100%) translateX(-50%);
-//   transform: translateX(-50%);
-// }
-
-// &-placement-topLeft &-arrow {
-//   left: @tooltip-arrow-offset-horizontal;
-// }
-
-// &-placement-topRight &-arrow {
-//   right: @tooltip-arrow-offset-horizontal;
-// }
-
-// &-placement-right &-arrow,
-// &-placement-rightTop &-arrow,
-// &-placement-rightBottom &-arrow {
-//   left: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
-
-//   &-content {
-//     box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
-//     transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(135deg);
 //   }
-// }
+//
-
+//   &-placement-topLeft &-arrow {
-// &-placement-right &-arrow {
+//     left: @tooltip-arrow-offset-horizontal;
-//   top: 50%;
+//   }
-//   transform: translateY(-50%);
+//
-// }
+//   &-placement-topRight &-arrow {
-
+//     right: @tooltip-arrow-offset-horizontal;
-// &-placement-rightTop &-arrow {
+//   }
-//   top: @tooltip-arrow-offset-vertical;
+//
-// }
+//   &-placement-right &-arrow,
-
+//   &-placement-rightTop &-arrow,
-// &-placement-rightBottom &-arrow {
+//   &-placement-rightBottom &-arrow {
-//   bottom: @tooltip-arrow-offset-vertical;
+//     left: 0;
-// }
+//     transform: translateX(-100%);
-
+//
+//     &-content {
+//       box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
+//       transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(135deg);
+//     }
+//   }
+//
+//   &-placement-right &-arrow {
+//     top: 50%;
+//     transform: translateX(-100%) translateY(-50%);
+//   }
+//
+//   &-placement-rightTop &-arrow {
+//     top: @tooltip-arrow-offset-vertical;
+//   }
+//
+//   &-placement-rightBottom &-arrow {
+//     bottom: @tooltip-arrow-offset-vertical;
+//   }
+//
 //   &-placement-left &-arrow,
 //   &-placement-leftTop &-arrow,
 //   &-placement-leftBottom &-arrow {
-//     right: @tooltip-distance - @tooltip-arrow-rotate-width + 0.08px;
+//     right: 0;
-
+//     transform: translateX(100%);
+//
 //     &-content {
 //       box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
 //       transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(315deg);
 //     }
 //   }
-
+//
 //   &-placement-left &-arrow {
 //     top: 50%;
-//     transform: translateY(-50%);
+//     transform: translateX(100%) translateY(-50%);
 //   }
-
+//
 //   &-placement-leftTop &-arrow {
 //     top: @tooltip-arrow-offset-vertical;
 //   }
-
+//
 //   &-placement-leftBottom &-arrow {
 //     bottom: @tooltip-arrow-offset-vertical;
 //   }
-
+//
 //   &-placement-bottom &-arrow,
 //   &-placement-bottomLeft &-arrow,
 //   &-placement-bottomRight &-arrow {
-//     top: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
+//     top: 0;
-
+//     transform: translateY(-100%);
+//
 //     &-content {
 //       box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
 //       transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(225deg);
 //     }
 //   }
-
+//
 //   &-placement-bottom &-arrow {
 //     left: 50%;
-//     transform: translateX(-50%);
+//     transform: translateY(-100%) translateX(-50%);
 //   }
-
+//
 //   &-placement-bottomLeft &-arrow {
 //     left: @tooltip-arrow-offset-horizontal;
 //   }
-
+//
 //   &-placement-bottomRight &-arrow {
 //     right: @tooltip-arrow-offset-horizontal;
 //   }
 // }
-
+//
 // .generator-tooltip-preset-color(@i: length(@preset-colors)) when (@i > 0) {
 //   .generator-tooltip-preset-color(@i - 1);
 //   @color: extract(@preset-colors, @i);
@@ -207,5 +207,5 @@
 //   }
 // }
 // .generator-tooltip-preset-color();
-
+//
 // @import './rtl';

components/tooltip/style/index.tsx

@@ -65,6 +65,8 @@ const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {
     boxShadow,
   } = token;
 
+  const tooltipBgColor = new TinyColor(tooltipBg);
+
   return {
     [componentCls]: {
       ...resetComponent(token),
@@ -112,9 +114,14 @@ const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {
         boxShadow,
       },
 
+      [`${componentCls}-content`]: {
+        position: 'relative',
+      },
+
       // Arrows
       [`${componentCls}-arrow`]: {
         position: 'absolute',
+        zIndex: 2,
         display: 'block',
         width: tooltipArrowRotateWidth,
         height: tooltipArrowRotateWidth,
@@ -123,7 +130,9 @@ const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {
         pointerEvents: 'none',
 
         '&-content': {
-          '--antd-arrow-background-color': tooltipBg,
+          '--antd-arrow-background-color': `linear-gradient(to right bottom, ${new TinyColor(
+            tooltipBgColor,
+          ).setAlpha(tooltipBgColor.getAlpha() - 0.1)}, ${tooltipBg})`,
           position: 'absolute',
           top: 0, // FIXME: hardcode in v4
           insetInlineEnd: 0, // FIXME: hardcode in v4
@@ -140,22 +149,24 @@ const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {
         },
       },
 
-      [`&-placement-top ${componentCls}-arrow, &-placement-topLeft ${componentCls}-arrow, &-placement-topRight ${componentCls}-arrow`]:
+      [`&-placement-top ${componentCls}-arrow,
-        {
+        &-placement-topLeft ${componentCls}-arrow,
-          bottom: tooltipDistance - tooltipArrowRotateWidth + 0.24, // FIXME: hardcode in v4
+        &-placement-topRight ${componentCls}-arrow`]: {
+        bottom: 0, // FIXME: hardcode in v4
+        transform: 'translateY(100%)',
 
-          '&-content': {
+        '&-content': {
-            boxShadow: `${tooltipArrowShadowWidth}px ${tooltipArrowShadowWidth}px 7px ${tooltipShadowColor}`, // FIXME: hardcode in v4
+          boxShadow: `${tooltipArrowShadowWidth}px ${tooltipArrowShadowWidth}px 7px ${tooltipShadowColor}`, // FIXME: hardcode in v4
-            transform: `translateY(${-tooltipArrowRotateWidth / 2}px) rotate(45deg)`, // FIXME: hardcode in v4
+          transform: `translateY(${-tooltipArrowRotateWidth / 2}px) rotate(45deg)`, // FIXME: hardcode in v4
-          },
         },
+      },
 
       [`&-placement-top ${componentCls}-arrow`]: {
         left: {
           _skip_check_: true,
           value: '50%', // FIXME: hardcode in v4
         },
-        transform: 'translateX(-50%)',
+        transform: 'translateX(-50%) translateY(100%)',
       },
 
       [`&-placement-topLeft ${componentCls}-arrow`]: {
@@ -172,21 +183,24 @@ const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {
         },
       },
 
-      [`&-placement-right ${componentCls}-arrow, &-placement-rightTop ${componentCls}-arrow, &-placement-rightBottom ${componentCls}-arrow`]:
+      [`&-placement-right ${componentCls}-arrow,
-        {
+        &-placement-rightTop ${componentCls}-arrow,
-          left: {
+        &-placement-rightBottom ${componentCls}-arrow`]: {
-            _skip_check_: true,
+        left: {
-            value: tooltipDistance - tooltipArrowRotateWidth + 0.1, // FIXME: hardcode in v4
+          _skip_check_: true,
-          },
+          value: 0, // FIXME: hardcode in v4
-          '&-content': {
-            boxShadow: `-${tooltipArrowShadowWidth}px ${tooltipArrowShadowWidth}px 7px ${tooltipShadowColor}`, // FIXME: hardcode in v4
-            transform: `translateX(${tooltipArrowRotateWidth / 2}px) rotate(135deg)`, // FIXME: hardcode in v4
-          },
         },
+        transform: 'translateX(-100%)',
+
+        '&-content': {
+          boxShadow: `-${tooltipArrowShadowWidth}px ${tooltipArrowShadowWidth}px 7px ${tooltipShadowColor}`, // FIXME: hardcode in v4
+          transform: `translateX(${tooltipArrowRotateWidth / 2}px) rotate(135deg)`, // FIXME: hardcode in v4
+        },
+      },
 
       [`&-placement-right ${componentCls}-arrow`]: {
         top: '50%', // FIXME: hardcode in v4
-        transform: 'translateY(-50%)', // FIXME: hardcode in v4
+        transform: 'translateX(-100%) translateY(-50%)', // FIXME: hardcode in v4
       },
 
       [`&-placement-rightTop ${componentCls}-arrow`]: {
@@ -201,8 +215,9 @@ const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {
         {
           right: {
             _skip_check_: true,
-            value: tooltipDistance - tooltipArrowRotateWidth + 0.08, // FIXME: hardcode in v4
+            value: 0, // FIXME: hardcode in v4
           },
+          transform: 'translateX(100%)',
 
           '&-content': {
             boxShadow: `${tooltipArrowShadowWidth}px -${tooltipArrowShadowWidth}px 7px ${tooltipShadowColor}`, // FIXME: hardcode in v4
@@ -212,7 +227,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {
 
       [`&-placement-left ${componentCls}-arrow`]: {
         top: '50%', // FIXME: hardcode in v4
-        transform: 'translateY(-50%)', // FIXME: hardcode in v4
+        transform: 'translateX(100%) translateY(-50%)', // FIXME: hardcode in v4
       },
 
       [`&-placement-leftTop ${componentCls}-arrow`]: {
@@ -225,7 +240,8 @@ const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {
 
       [`&-placement-bottom ${componentCls}-arrow, &-placement-bottomLeft ${componentCls}-arrow, &-placement-bottomRight ${componentCls}-arrow`]:
         {
-          top: tooltipDistance - tooltipArrowRotateWidth + 0.1, // FIXME: hardcode in v4
+          top: 0, // FIXME: hardcode in v4
+          transform: 'translateY(-100%)',
 
           '&-content': {
             boxShadow: `-${tooltipArrowShadowWidth}px -${tooltipArrowShadowWidth}px 7px ${tooltipShadowColor}`, // FIXME: hardcode in v4
@@ -238,7 +254,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken, CSSObject> = token => {
           _skip_check_: true,
           value: '50%', // FIXME: hardcode in v4
         },
-        transform: 'translateX(-50%)', // FIXME: hardcode in v4
+        transform: 'translateY(-100%) translateX(-50%)', // FIXME: hardcode in v4
       },
 
       [`&-placement-bottomLeft ${componentCls}-arrow`]: {

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

@@ -3559,9 +3559,11 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md extend conte
 >
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -3573,6 +3575,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md extend conte
     </div>
     <div
       class="ant-col ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"

components/upload/__tests__/__snapshots__/demo.test.js.snap

@@ -3343,9 +3343,11 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
 >
   <div
     class="ant-row ant-form-item"
+    role="row"
   >
     <div
       class="ant-col ant-col-4 ant-form-item-label"
+      role="cell"
     >
       <label
         class=""
@@ -3357,6 +3359,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
     </div>
     <div
       class="ant-col ant-form-item-control"
+      role="cell"
     >
       <div
         class="ant-form-item-control-input"

package.json

@@ -135,8 +135,8 @@
     "rc-image": "~5.6.0",
     "rc-input": "~0.0.1-alpha.5",
     "rc-input-number": "~7.3.0",
-    "rc-mentions": "~1.7.0",
+    "rc-mentions": "~1.8.0",
-    "rc-menu": "~9.5.5",
+    "rc-menu": "~9.6.0",
     "rc-motion": "^2.5.1",
     "rc-notification": "~4.6.0",
     "rc-pagination": "~3.1.9",