diff --git a/.dumi/components/SemanticPreview.tsx b/.dumi/components/SemanticPreview.tsx
index 3c734d73d3..ecdfa5442e 100644
--- a/.dumi/components/SemanticPreview.tsx
+++ b/.dumi/components/SemanticPreview.tsx
@@ -111,12 +111,14 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
       const targetElement = containerRef.current?.querySelector<HTMLElement>(`.${targetClassName}`);
       const containerRect = containerRef.current?.getBoundingClientRect();
       const targetRect = targetElement?.getBoundingClientRect();
+
       setMarkPos([
         (targetRect?.left || 0) - (containerRect?.left || 0),
         (targetRect?.top || 0) - (containerRect?.top || 0),
         targetRect?.width || 0,
         targetRect?.height || 0,
       ]);
+
       timerRef.current = setTimeout(() => {
         setPositionMotion(true);
       }, 10);
diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx
index 4db445a449..68262526b9 100644
--- a/.dumi/pages/index/components/Theme/ColorPicker.tsx
+++ b/.dumi/pages/index/components/Theme/ColorPicker.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { ColorPicker, Flex, Input } from 'antd';
-import { createStyles } from 'antd-style';
 import type { ColorPickerProps, GetProp } from 'antd';
+import { createStyles } from 'antd-style';
 import { generateColor } from 'antd/es/color-picker/util';
 import classNames from 'classnames';
 
@@ -61,7 +61,7 @@ const DebouncedColorPicker: React.FC<React.PropsWithChildren<ThemeColorPickerPro
     <ColorPicker
       value={value}
       onChange={setValue}
-      presets={[{ label: 'PresetColors', colors: PRESET_COLORS }]}
+      presets={[{ label: 'PresetColors', key: 'PresetColors', colors: PRESET_COLORS }]}
     >
       {children}
     </ColorPicker>
diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx
index 78ebcb860d..2a60ebada0 100644
--- a/.dumi/pages/index/components/Theme/index.tsx
+++ b/.dumi/pages/index/components/Theme/index.tsx
@@ -6,7 +6,7 @@ import {
   HomeOutlined,
   QuestionCircleOutlined,
 } from '@ant-design/icons';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import type { ColorPickerProps, GetProp, MenuProps, ThemeConfig } from 'antd';
 import {
   Breadcrumb,
@@ -324,7 +324,7 @@ const ThemesInfo: Record<THEME, Partial<ThemeData>> = {
 const normalize = (value: number) => value / 255;
 
 function rgbToColorMatrix(color: string) {
-  const rgb = new TinyColor(color).toRgb();
+  const rgb = new FastColor(color).toRgb();
   const { r, g, b } = rgb;
 
   const invertValue = normalize(r) * 100;
diff --git a/.dumi/theme/builtins/ColorChunk/index.tsx b/.dumi/theme/builtins/ColorChunk/index.tsx
index 26d815145f..743ded015d 100644
--- a/.dumi/theme/builtins/ColorChunk/index.tsx
+++ b/.dumi/theme/builtins/ColorChunk/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ColorInput } from '@ctrl/tinycolor';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
+import type { ColorInput } from '@ant-design/fast-color';
 import { createStyles } from 'antd-style';
 
 const useStyle = createStyles(({ token, css }) => ({
@@ -22,7 +22,7 @@ const useStyle = createStyles(({ token, css }) => ({
 }));
 
 interface ColorChunkProps {
-  value?: ColorInput;
+  value: ColorInput;
 }
 
 const ColorChunk: React.FC<React.PropsWithChildren<ColorChunkProps>> = (props) => {
@@ -30,7 +30,7 @@ const ColorChunk: React.FC<React.PropsWithChildren<ColorChunkProps>> = (props) =
   const { value, children } = props;
 
   const dotColor = React.useMemo(() => {
-    const _color = new TinyColor(value).toHex8String();
+    const _color = new FastColor(value).toHexString();
     return _color.endsWith('ff') ? _color.slice(0, -2) : _color;
   }, [value]);
 
diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx
index fb600abd3b..402a365ff0 100644
--- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx
+++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx
@@ -157,7 +157,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
           {title}
           <Popover
             title={null}
-            overlayStyle={{ width: 400 }}
+            styles={{ root: { width: 400 } }}
             content={
               <Typography>
                 {/* <SourceCode lang="jsx">{code}</SourceCode> */}
diff --git a/.dumi/theme/builtins/TokenCompare/index.tsx b/.dumi/theme/builtins/TokenCompare/index.tsx
index dc20185a61..2da926f294 100644
--- a/.dumi/theme/builtins/TokenCompare/index.tsx
+++ b/.dumi/theme/builtins/TokenCompare/index.tsx
@@ -1,6 +1,6 @@
 // 用于 color.md 中的颜色对比
 import React from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import { Flex, theme } from 'antd';
 import { createStyles } from 'antd-style';
 import tokenMeta from 'antd/es/version/token-meta.json';
@@ -55,7 +55,7 @@ const useStyle = createStyles(({ token, css }) => {
 });
 
 function color2Rgba(color: string) {
-  return `#${new TinyColor(color).toHex8().toUpperCase()}`;
+  return `#${new FastColor(color).toHexString().toUpperCase()}`;
 }
 
 interface ColorCircleProps {
diff --git a/.dumi/theme/builtins/TokenTable/index.tsx b/.dumi/theme/builtins/TokenTable/index.tsx
index afe7a86612..7611b51999 100644
--- a/.dumi/theme/builtins/TokenTable/index.tsx
+++ b/.dumi/theme/builtins/TokenTable/index.tsx
@@ -99,7 +99,7 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
           name: token,
           desc: lang === 'cn' ? meta.desc : meta.descEn,
           type: meta.type,
-          value: defaultToken[token],
+          value: defaultToken[token as keyof typeof defaultToken],
         })),
     [type, lang],
   );
diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx
index 81cb69c4c4..952074b558 100644
--- a/.dumi/theme/common/styles/Markdown.tsx
+++ b/.dumi/theme/common/styles/Markdown.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';
 
@@ -410,7 +410,7 @@ const GlobalStyle: React.FC = () => {
             background: ${demoGridColor};
 
             &:nth-child(2n + 1) {
-              background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()};
+              background: ${new FastColor(demoGridColor).setA(0.75).toHexString()};
             }
           }
 
@@ -426,12 +426,12 @@ const GlobalStyle: React.FC = () => {
           }
 
           ${antCls}-row .demo-col-1 {
-            background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()};
+            background: ${new FastColor(demoGridColor).setA(0.75).toHexString()};
           }
 
           ${antCls}-row .demo-col-2,
             .code-box-demo ${antCls}-row .demo-col-2 {
-            background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()};
+            background: ${new FastColor(demoGridColor).setA(0.75).toHexString()};
           }
 
           ${antCls}-row .demo-col-3,
@@ -442,7 +442,7 @@ const GlobalStyle: React.FC = () => {
 
           ${antCls}-row .demo-col-4,
             .code-box-demo ${antCls}-row .demo-col-4 {
-            background: ${new TinyColor(demoGridColor).setAlpha(0.6).toHexString()};
+            background: ${new FastColor(demoGridColor).setA(0.6).toHexString()};
           }
 
           ${antCls}-row .demo-col-5,
diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx
index 01d038bdb7..7419eef0e3 100644
--- a/.dumi/theme/slots/Footer/index.tsx
+++ b/.dumi/theme/slots/Footer/index.tsx
@@ -13,7 +13,7 @@ import {
   UsergroupAddOutlined,
   ZhihuOutlined,
 } from '@ant-design/icons';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import { createStyles } from 'antd-style';
 import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
 import { FormattedMessage, Link } from 'dumi';
@@ -37,7 +37,7 @@ const locales = {
 const useStyle = () => {
   const { isMobile } = useContext(SiteContext);
   return createStyles(({ token, css }) => {
-    const background = new TinyColor(getAlphaColor('#f0f3fa', '#fff'))
+    const background = new FastColor(getAlphaColor('#f0f3fa', '#fff'))
       .onBackground(token.colorBgContainer)
       .toHexString();
 
diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
index ab493de079..3dc38090f8 100644
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@@ -357,7 +357,7 @@ const Header: React.FC = () => {
     <header className={headerClassName}>
       {isMobile && (
         <Popover
-          overlayClassName={styles.popoverMenu}
+          classNames={{ root: styles.popoverMenu }}
           placement="bottomRight"
           content={menu}
           trigger="click"
diff --git a/components/avatar/__tests__/Avatar.test.tsx b/components/avatar/__tests__/Avatar.test.tsx
index dfbdf9f8a5..bfb47f2bfc 100644
--- a/components/avatar/__tests__/Avatar.test.tsx
+++ b/components/avatar/__tests__/Avatar.test.tsx
@@ -271,8 +271,8 @@ describe('Avatar Render', () => {
           count: 2,
           popover: {
             placement: 'bottomRight',
-            overlayClassName: 'wanpan-111',
-            overlayStyle: { background: 'red' },
+            classNames: { root: 'wanpan-111' },
+            styles: { root: { background: 'red' } },
             content: 'Avatar.Group',
             open: true,
           },
diff --git a/components/avatar/group.tsx b/components/avatar/group.tsx
index 34fc2ee5ed..71d6180669 100644
--- a/components/avatar/group.tsx
+++ b/components/avatar/group.tsx
@@ -121,7 +121,7 @@ const Group: React.FC<GroupProps> = (props) => {
     const mergeProps = {
       content: childrenHidden,
       ...max?.popover,
-      overlayClassName: classNames(`${groupPrefixCls}-popover`, max?.popover?.overlayClassName),
+      classNames: { root: classNames(`${groupPrefixCls}-popover`, max?.popover?.classNames?.root) },
       placement: mergePopoverPlacement,
       trigger: mergePopoverTrigger,
     };
diff --git a/components/button/LoadingIcon.tsx b/components/button/DefaultLoadingIcon.tsx
similarity index 93%
rename from components/button/LoadingIcon.tsx
rename to components/button/DefaultLoadingIcon.tsx
index 8d06a980ac..7af127427b 100644
--- a/components/button/LoadingIcon.tsx
+++ b/components/button/DefaultLoadingIcon.tsx
@@ -23,7 +23,7 @@ const InnerLoadingIcon = forwardRef<HTMLSpanElement, InnerLoadingIconProps>((pro
   );
 });
 
-export type LoadingIconProps = {
+export type DefaultLoadingIconProps = {
   prefixCls: string;
   existIcon: boolean;
   loading?: boolean | object;
@@ -44,7 +44,7 @@ const getRealWidth = (node: HTMLElement): React.CSSProperties => ({
   transform: 'scale(1)',
 });
 
-const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
+const DefaultLoadingIcon: React.FC<DefaultLoadingIconProps> = (props) => {
   const { prefixCls, loading, existIcon, className, style, mount } = props;
   const visible = !!loading;
 
@@ -84,4 +84,4 @@ const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
   );
 };
 
-export default LoadingIcon;
+export default DefaultLoadingIcon;
diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index b83e422849..0fff3639e8 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -492,6 +492,162 @@ exports[`renders components/button/demo/color-variant.tsx extend context correct
       </span>
     </button>
   </div>
+  <div
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+  >
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-solid ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Solid
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-outlined ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Outlined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-dashed ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Dashed
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-filled ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Filled
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-text ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Text
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-link ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Link
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+  >
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-solid ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Solid
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-outlined ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Outlined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-dashed ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Dashed
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-filled ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Filled
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-text ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Text
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-link ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Link
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+  >
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-solid ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Solid
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-outlined ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Outlined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-dashed ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Dashed
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-filled ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Filled
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-text ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Text
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-link ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Link
+      </span>
+    </button>
+  </div>
 </div>
 `;
 
@@ -743,6 +899,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -762,6 +919,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="default"
         />
@@ -781,6 +939,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -1434,7 +1593,7 @@ Array [
         >
           <input
             class="ant-input ant-input-lg ant-input-outlined"
-            type="text"
+            type="search"
             value=""
           />
           <span
@@ -2206,6 +2365,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="start"
             />
@@ -2226,6 +2386,7 @@ Array [
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="end"
             />
@@ -3155,6 +3316,37 @@ exports[`renders components/button/demo/loading.tsx extend context correctly 1`]
         </span>
       </span>
     </button>
+    <button
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-loading"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="sync"
+          class="anticon anticon-sync anticon-spin"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="sync"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span>
+        Loading Icon
+      </span>
+    </button>
   </div>
   <div
     class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
@@ -3234,6 +3426,37 @@ exports[`renders components/button/demo/loading.tsx extend context correctly 1`]
         </span>
       </span>
     </button>
+    <button
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="poweroff"
+          class="anticon anticon-poweroff"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="poweroff"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span>
+        Loading Icon
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -3422,6 +3645,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -3441,6 +3665,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="default"
         />
@@ -3460,6 +3685,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="small"
         />
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index 501b25f706..3af1eaf513 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -484,6 +484,162 @@ exports[`renders components/button/demo/color-variant.tsx correctly 1`] = `
       </span>
     </button>
   </div>
+  <div
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+  >
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-solid ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Solid
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-outlined ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Outlined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-dashed ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Dashed
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-filled ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Filled
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-text ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Text
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-link ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Link
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+  >
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-solid ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Solid
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-outlined ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Outlined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-dashed ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Dashed
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-filled ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Filled
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-text ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Text
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-link ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Link
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+  >
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-solid ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Solid
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-outlined ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Outlined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-dashed ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Dashed
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-filled ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Filled
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-text ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Text
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-link ant-btn-sm"
+      type="button"
+    >
+      <span>
+        Link
+      </span>
+    </button>
+  </div>
 </div>
 `;
 
@@ -727,6 +883,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -746,6 +903,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="default"
         />
@@ -765,6 +923,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -1342,7 +1501,7 @@ Array [
         >
           <input
             class="ant-input ant-input-lg ant-input-outlined"
-            type="text"
+            type="search"
             value=""
           />
           <span
@@ -2030,6 +2189,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="start"
             />
@@ -2050,6 +2210,7 @@ Array [
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="end"
             />
@@ -2783,6 +2944,37 @@ exports[`renders components/button/demo/loading.tsx correctly 1`] = `
         </span>
       </span>
     </button>
+    <button
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-loading"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="sync"
+          class="anticon anticon-sync anticon-spin"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="sync"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span>
+        Loading Icon
+      </span>
+    </button>
   </div>
   <div
     class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
@@ -2862,6 +3054,37 @@ exports[`renders components/button/demo/loading.tsx correctly 1`] = `
         </span>
       </span>
     </button>
+    <button
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+      type="button"
+    >
+      <span
+        class="ant-btn-icon"
+      >
+        <span
+          aria-label="poweroff"
+          class="anticon anticon-poweroff"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="poweroff"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span>
+        Loading Icon
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -2943,6 +3166,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -2962,6 +3186,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="default"
         />
@@ -2981,6 +3206,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="small"
         />
diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx
index f5ae30c8c5..3b2f9fae4d 100644
--- a/components/button/__tests__/index.test.tsx
+++ b/components/button/__tests__/index.test.tsx
@@ -2,13 +2,14 @@ import React, { Suspense, useRef, useState } from 'react';
 import { SearchOutlined } from '@ant-design/icons';
 import { resetWarned } from 'rc-util/lib/warning';
 
-import Button from '..';
+import Button, { _ButtonVariantTypes } from '..';
 import type { GetRef } from '../../_util/type';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import theme from '../../theme';
+import { PresetColors } from '../../theme/interface';
 import type { BaseButtonProps } from '../button';
 
 describe('Button', () => {
@@ -475,6 +476,20 @@ describe('Button', () => {
     });
   });
 
+  it('should render preset colors and variants correctly', () => {
+    PresetColors.forEach((color) => {
+      _ButtonVariantTypes.forEach((variant) => {
+        const { container } = render(
+          <Button color={color} variant={variant}>
+            {color}
+          </Button>,
+        );
+        expect(container.firstChild).toHaveClass(`ant-btn-color-${color}`);
+        expect(container.firstChild).toHaveClass(`ant-btn-variant-${variant}`);
+      });
+    });
+  });
+
   it('autoFocus should work', () => {
     const { container } = render(<Button autoFocus>button</Button>);
 
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 808cc557be..4970f63f7d 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -20,7 +20,7 @@ import type {
 } from './buttonHelpers';
 import { isTwoCNChar, isUnBorderedButtonVariant, spaceChildren } from './buttonHelpers';
 import IconWrapper from './IconWrapper';
-import LoadingIcon from './LoadingIcon';
+import DefaultLoadingIcon from './DefaultLoadingIcon';
 import useStyle from './style';
 import Compact from './style/compact';
 
@@ -35,7 +35,7 @@ export interface BaseButtonProps {
   shape?: ButtonShape;
   size?: SizeType;
   disabled?: boolean;
-  loading?: boolean | { delay?: number };
+  loading?: boolean | { delay?: number; icon?: React.ReactNode };
   prefixCls?: string;
   className?: string;
   rootClassName?: string;
@@ -310,8 +310,12 @@ const InternalCompoundedButton = React.forwardRef<
       <IconWrapper prefixCls={prefixCls} className={iconClasses} style={iconStyle}>
         {icon}
       </IconWrapper>
+    ) : typeof loading === 'object' && loading.icon ? (
+      <IconWrapper prefixCls={prefixCls} className={iconClasses} style={iconStyle}>
+        {loading.icon}
+      </IconWrapper>
     ) : (
-      <LoadingIcon
+      <DefaultLoadingIcon
         existIcon={!!icon}
         prefixCls={prefixCls}
         loading={innerLoading}
diff --git a/components/button/buttonHelpers.tsx b/components/button/buttonHelpers.tsx
index 527bd32b7b..58db117972 100644
--- a/components/button/buttonHelpers.tsx
+++ b/components/button/buttonHelpers.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { cloneElement, isFragment } from '../_util/reactNode';
+import { PresetColors } from '../theme/interface';
 import type { BaseButtonProps, LegacyButtonType } from './button';
 
 const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/;
@@ -106,5 +107,6 @@ export const _ButtonVariantTypes = [
 ] as const;
 export type ButtonVariantType = (typeof _ButtonVariantTypes)[number];
 
-export const _ButtonColorTypes = ['default', 'primary', 'danger'] as const;
+export const _ButtonColorTypes = ['default', 'primary', 'danger', ...PresetColors] as const;
+
 export type ButtonColorType = (typeof _ButtonColorTypes)[number];
diff --git a/components/button/demo/color-variant.tsx b/components/button/demo/color-variant.tsx
index 12b23c62f9..776c8cdd08 100644
--- a/components/button/demo/color-variant.tsx
+++ b/components/button/demo/color-variant.tsx
@@ -68,6 +68,67 @@ const App: React.FC = () => {
             Link
           </Button>
         </Flex>
+        <Flex gap="middle" wrap>
+          <Button color="pink" variant="solid">
+            Solid
+          </Button>
+          <Button color="pink" variant="outlined">
+            Outlined
+          </Button>
+          <Button color="pink" variant="dashed">
+            Dashed
+          </Button>
+          <Button color="pink" variant="filled">
+            Filled
+          </Button>
+          <Button color="pink" variant="text">
+            Text
+          </Button>
+          <Button color="pink" variant="link">
+            Link
+          </Button>
+        </Flex>
+        <Flex gap="middle" wrap>
+          <Button color="purple" variant="solid">
+            Solid
+          </Button>
+          <Button color="purple" variant="outlined">
+            Outlined
+          </Button>
+          <Button color="purple" variant="dashed">
+            Dashed
+          </Button>
+          <Button color="purple" variant="filled">
+            Filled
+          </Button>
+          <Button color="purple" variant="text">
+            Text
+          </Button>
+          <Button color="purple" variant="link">
+            Link
+          </Button>
+        </Flex>
+
+        <Flex gap="middle" wrap>
+          <Button color="cyan" variant="solid">
+            Solid
+          </Button>
+          <Button color="cyan" variant="outlined">
+            Outlined
+          </Button>
+          <Button color="cyan" variant="dashed">
+            Dashed
+          </Button>
+          <Button color="cyan" variant="filled">
+            Filled
+          </Button>
+          <Button color="cyan" variant="text">
+            Text
+          </Button>
+          <Button color="cyan" variant="link">
+            Link
+          </Button>
+        </Flex>
       </Flex>
     </ConfigProvider>
   );
diff --git a/components/button/demo/debug-color-variant.tsx b/components/button/demo/debug-color-variant.tsx
index 0085a81d31..bb00ea02bb 100644
--- a/components/button/demo/debug-color-variant.tsx
+++ b/components/button/demo/debug-color-variant.tsx
@@ -54,7 +54,7 @@ const App: React.FC = () => {
     <Flex vertical gap="small">
       {/* link color */}
       <Flex gap="small">
-        <ConfigProvider theme={{ token: { colorPrimary: 'red' } }}>
+        <ConfigProvider theme={{ token: { colorLink: '#FF0000' } }}>
           <Button type="link">Link Button</Button>
         </ConfigProvider>
         <Button type="link">Link Button</Button>
diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md
index b78725001d..37024ec5c4 100644
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@@ -1,7 +1,7 @@
 ## zh-CN
 
-添加 `loading` 属性即可让按钮处于加载状态，最后三个按钮演示点击后进入加载状态。
+添加 `loading` 属性即可让按钮处于加载状态，`loading.icon` 可以自定义加载图标，最后三个按钮演示点击后进入加载状态。
 
 ## en-US
 
-A loading indicator can be added to a button by setting the `loading` property on the `Button`.
+A loading indicator can be added to a button by setting the `loading` property on the `Button`. The `loading.icon` can be used to customize the loading icon.
diff --git a/components/button/demo/loading.tsx b/components/button/demo/loading.tsx
index 58f1e26034..07f83900eb 100644
--- a/components/button/demo/loading.tsx
+++ b/components/button/demo/loading.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { PoweroffOutlined } from '@ant-design/icons';
+import { PoweroffOutlined, SyncOutlined } from '@ant-design/icons';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => {
@@ -31,6 +31,9 @@ const App: React.FC = () => {
           Loading
         </Button>
         <Button type="primary" icon={<PoweroffOutlined />} loading />
+        <Button type="primary" loading={{ icon: <SyncOutlined spin /> }}>
+          Loading Icon
+        </Button>
       </Flex>
       <Flex gap="small" wrap>
         <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
@@ -58,6 +61,14 @@ const App: React.FC = () => {
           loading={loadings[3]}
           onClick={() => enterLoading(3)}
         />
+        <Button
+          type="primary"
+          icon={<PoweroffOutlined />}
+          loading={loadings[3] && { icon: <SyncOutlined spin /> }}
+          onClick={() => enterLoading(3)}
+        >
+          Loading Icon
+        </Button>
       </Flex>
     </Flex>
   );
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index 8952aadd35..3c7964fda6 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -63,7 +63,7 @@ Different button styles generated by setting Button properties. The recommended
 | autoInsertSpace | We add a space between two Chinese characters by default, which removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 |
 | block | Option to fit button width to its parent width | boolean | false |  |
 | classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
-| color | Set button color | `default` \| `primary` \| `danger` | - | 5.21.0 |
+| color | Set button color | `default` \| `primary` \| `danger` \| [PresetColors](#presetcolors) | - | `default`, `primary` and `danger`: 5.21.0, `PresetColors`: 5.23.0 |
 | danger | Syntactic sugar. Set the danger status of button. will follow `color` if provided | boolean | false |  |
 | disabled | Disabled state of button | boolean | false |  |
 | ghost | Make background transparent and invert text and border colors | boolean | false |  |
@@ -71,7 +71,7 @@ Different button styles generated by setting Button properties. The recommended
 | htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` |  |
 | icon | Set the icon component of button | ReactNode | - |  |
 | iconPosition | Set the icon position of button | `start` \| `end` | `start` | 5.17.0 |
-| loading | Set the loading status of button | boolean \| { delay: number } | false |  |
+| loading | Set the loading status of button | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
 | shape | Can be used to set button shape | `default` \| `circle` \| `round` | `default` |  |
 | size | Set the size of button | `large` \| `middle` \| `small` | `middle` |  |
 | styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
@@ -82,6 +82,10 @@ Different button styles generated by setting Button properties. The recommended
 
 It accepts all props which native buttons support.
 
+### PresetColors
+
+> type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
+
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index 5424d1fb97..e281fc491d 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -69,7 +69,7 @@ group:
 | autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 `autoInsertSpace` 为 `false` 关闭 | boolean | `true` | 5.17.0 |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  |
 | classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
-| color | 设置按钮的颜色 | `default` \| `primary` \| `danger` | - | 5.21.0 |
+| color | 设置按钮的颜色 | `default` \| `primary` \| `danger` \| [PresetColors](#presetcolors) | - | `default`、`primary` 和 `danger`: 5.21.0, `PresetColors`: 5.23.0 |
 | danger | 语法糖，设置危险按钮。当设置 `color` 时会以后者为准 | boolean | false |  |
 | disabled | 设置按钮失效状态 | boolean | false |  |
 | ghost | 幽灵属性，使按钮背景透明 | boolean | false |  |
@@ -77,7 +77,7 @@ group:
 | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` |  |
 | icon | 设置按钮的图标组件 | ReactNode | - |  |
 | iconPosition | 设置按钮图标组件的位置 | `start` \| `end` | `start` | 5.17.0 |
-| loading | 设置按钮载入状态 | boolean \| { delay: number } | false |  |
+| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
 | shape | 设置按钮形状 | `default` \| `circle` \| `round` | `default` |  |
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` |  |
 | styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
@@ -88,6 +88,10 @@ group:
 
 支持原生 button 的其他所有属性。
 
+### PresetColors
+
+> type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
+
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
diff --git a/components/button/style/index.ts b/components/button/style/index.ts
index 267047ba36..f495b99212 100644
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@@ -2,7 +2,8 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
 import { genFocusStyle, resetIcon } from '../../style';
-import type { GenerateStyle } from '../../theme/internal';
+import { PresetColors } from '../../theme/interface';
+import type { GenerateStyle, PresetColorKey } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import type { ButtonVariantType } from '../buttonHelpers';
 import genGroupStyle from './group';
@@ -298,6 +299,95 @@ const genTextLinkButtonStyle = (
 });
 
 // =============================== Color ==============================
+const genPresetColorStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
+  const { componentCls } = token;
+
+  return PresetColors.reduce<CSSObject>((prev: CSSObject, colorKey: PresetColorKey) => {
+    const darkColor = token[`${colorKey}6`];
+    const lightColor = token[`${colorKey}1`];
+    const hoverColor = token[`${colorKey}5`];
+    const lightHoverColor = token[`${colorKey}2`];
+    const lightBorderColor = token[`${colorKey}3`];
+    const activeColor = token[`${colorKey}7`];
+    const boxShadow = `0 ${token.controlOutlineWidth} 0 ${token[`${colorKey}1`]}`;
+
+    return {
+      ...prev,
+      [`&${componentCls}-color-${colorKey}`]: {
+        color: darkColor,
+        boxShadow,
+
+        ...genSolidButtonStyle(
+          token,
+          token.colorTextLightSolid,
+          darkColor,
+          {
+            background: hoverColor,
+          },
+          {
+            background: activeColor,
+          },
+        ),
+
+        ...genOutlinedDashedButtonStyle(
+          token,
+          darkColor,
+          token.colorBgContainer,
+          {
+            color: hoverColor,
+            borderColor: hoverColor,
+            background: token.colorBgContainer,
+          },
+          {
+            color: activeColor,
+            borderColor: activeColor,
+            background: token.colorBgContainer,
+          },
+        ),
+
+        ...genDashedButtonStyle(token),
+
+        ...genFilledButtonStyle(
+          token,
+          lightColor,
+          {
+            background: lightHoverColor,
+          },
+          {
+            background: lightBorderColor,
+          },
+        ),
+
+        ...genTextLinkButtonStyle(
+          token,
+          darkColor,
+          'link',
+          {
+            color: hoverColor,
+          },
+          {
+            color: activeColor,
+          },
+        ),
+
+        ...genTextLinkButtonStyle(
+          token,
+          darkColor,
+          'text',
+          {
+            color: hoverColor,
+            background: lightColor,
+          },
+          {
+            color: activeColor,
+            background: lightBorderColor,
+          },
+        ),
+      },
+    };
+  }, {});
+};
+
 const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   color: token.defaultColor,
 
@@ -513,6 +603,8 @@ const genColorButtonStyle: GenerateStyle<ButtonToken> = (token) => {
     [`${componentCls}-color-default`]: genDefaultButtonStyle(token),
     [`${componentCls}-color-primary`]: genPrimaryButtonStyle(token),
     [`${componentCls}-color-dangerous`]: genDangerousStyle(token),
+
+    ...genPresetColorStyle(token),
   };
 };
 
diff --git a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
index 1f0898e341..f4f104613c 100644
--- a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -783,6 +783,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="month"
           />
@@ -802,6 +803,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="year"
           />
@@ -2376,6 +2378,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -2395,6 +2398,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -3968,6 +3972,7 @@ Array [
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -3987,6 +3992,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -5554,6 +5560,7 @@ Array [
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -5573,6 +5580,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -6397,6 +6405,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
                 <input
                   checked=""
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="month"
                 />
@@ -6416,6 +6425,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
               >
                 <input
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="year"
                 />
@@ -8788,6 +8798,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="month"
           />
@@ -8807,6 +8818,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="year"
           />
@@ -10791,6 +10803,7 @@ Array [
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -10810,6 +10823,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -11598,3 +11612,3299 @@ Array [
 `;
 
 exports[`renders components/calendar/demo/select.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/calendar/demo/week.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-picker-calendar ant-picker-calendar-full"
+  >
+    <div
+      class="ant-picker-calendar-header"
+    >
+      <div
+        class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-wrap"
+          >
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2016"
+            >
+              2016
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <div>
+            <div
+              id="rc_select_TEST_OR_SSR_list"
+              role="listbox"
+              style="height: 0px; width: 0px; overflow: hidden;"
+            >
+              <div
+                aria-label="2006"
+                aria-selected="false"
+                id="rc_select_TEST_OR_SSR_list_0"
+                role="option"
+              >
+                2006
+              </div>
+              <div
+                aria-label="2007"
+                aria-selected="false"
+                id="rc_select_TEST_OR_SSR_list_1"
+                role="option"
+              >
+                2007
+              </div>
+            </div>
+            <div
+              class="rc-virtual-list"
+              style="position: relative;"
+            >
+              <div
+                class="rc-virtual-list-holder"
+                style="max-height: 256px; overflow-y: auto;"
+              >
+                <div>
+                  <div
+                    class="rc-virtual-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
+                  >
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                      title="2006"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2006
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2007"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2007
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2008"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2008
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2009"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2009
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2010"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2010
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2011"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2011
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2012"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2012
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2013"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2013
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2014"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2014
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2015"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2015
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="true"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-selected"
+                      title="2016"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2016
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2017"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2017
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2018"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2018
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2019"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2019
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2020"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2020
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2021"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2021
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2022"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2022
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2023"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2023
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2024"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2024
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2025"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2025
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select: none;"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-wrap"
+          >
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Nov"
+            >
+              Nov
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <div>
+            <div
+              id="rc_select_TEST_OR_SSR_list"
+              role="listbox"
+              style="height: 0px; width: 0px; overflow: hidden;"
+            >
+              <div
+                aria-label="Jan"
+                aria-selected="false"
+                id="rc_select_TEST_OR_SSR_list_0"
+                role="option"
+              >
+                0
+              </div>
+              <div
+                aria-label="Feb"
+                aria-selected="false"
+                id="rc_select_TEST_OR_SSR_list_1"
+                role="option"
+              >
+                1
+              </div>
+            </div>
+            <div
+              class="rc-virtual-list"
+              style="position: relative;"
+            >
+              <div
+                class="rc-virtual-list-holder"
+                style="max-height: 256px; overflow-y: auto;"
+              >
+                <div>
+                  <div
+                    class="rc-virtual-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
+                  >
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                      title="Jan"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Jan
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Feb"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Feb
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Mar"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Mar
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Apr"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Apr
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="May"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        May
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Jun"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Jun
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Jul"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Jul
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Aug"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Aug
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Sep"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Sep
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Oct"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Oct
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="true"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-selected"
+                      title="Nov"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Nov
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Dec"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Dec
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select: none;"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-radio-group ant-radio-group-outline ant-picker-calendar-mode-switch"
+      >
+        <label
+          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+        >
+          <span
+            class="ant-radio-button ant-radio-button-checked"
+          >
+            <input
+              checked=""
+              class="ant-radio-button-input"
+              name="test-id"
+              type="radio"
+              value="month"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            Month
+          </span>
+        </label>
+        <label
+          class="ant-radio-button-wrapper"
+        >
+          <span
+            class="ant-radio-button"
+          >
+            <input
+              class="ant-radio-button-input"
+              name="test-id"
+              type="radio"
+              value="year"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            Year
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      class="ant-picker-panel"
+      tabindex="0"
+    >
+      <div
+        class="ant-picker-date-panel ant-picker-date-panel-show-week"
+      >
+        <div
+          class="ant-picker-body"
+        >
+          <table
+            class="ant-picker-content"
+          >
+            <thead>
+              <tr>
+                <th
+                  aria-label="empty cell"
+                />
+                <th>
+                  Su
+                </th>
+                <th>
+                  Mo
+                </th>
+                <th>
+                  Tu
+                </th>
+                <th>
+                  We
+                </th>
+                <th>
+                  Th
+                </th>
+                <th>
+                  Fr
+                </th>
+                <th>
+                  Sa
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    45
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-10-30"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      30
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-10-31"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      31
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-01"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      01
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-02"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      02
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-03"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      03
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-04"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      04
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-05"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      05
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    46
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-06"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      06
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-07"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      07
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-08"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      08
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-09"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      09
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-10"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      10
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-11"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      11
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-12"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      12
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    47
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-13"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      13
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-14"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      14
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-15"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      15
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-16"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      16
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-17"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      17
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-18"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      18
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-19"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      19
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    48
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-20"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      20
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-21"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      21
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-selected ant-picker-cell-in-view ant-picker-cell-today"
+                  title="2016-11-22"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date ant-picker-calendar-date-today"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      22
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-23"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      23
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-24"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      24
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-25"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      25
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-26"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      26
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    49
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-27"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      27
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-28"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      28
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-29"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      29
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-30"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      30
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-01"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      01
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-02"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      02
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-03"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      03
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    50
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-04"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      04
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-05"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      05
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-06"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      06
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-07"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      07
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-08"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      08
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-09"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      09
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-10"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      10
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <div
+    class="ant-picker-calendar ant-picker-calendar-mini"
+  >
+    <div
+      class="ant-picker-calendar-header"
+    >
+      <div
+        class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-wrap"
+          >
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2016"
+            >
+              2016
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <div>
+            <div
+              id="rc_select_TEST_OR_SSR_list"
+              role="listbox"
+              style="height: 0px; width: 0px; overflow: hidden;"
+            >
+              <div
+                aria-label="2006"
+                aria-selected="false"
+                id="rc_select_TEST_OR_SSR_list_0"
+                role="option"
+              >
+                2006
+              </div>
+              <div
+                aria-label="2007"
+                aria-selected="false"
+                id="rc_select_TEST_OR_SSR_list_1"
+                role="option"
+              >
+                2007
+              </div>
+            </div>
+            <div
+              class="rc-virtual-list"
+              style="position: relative;"
+            >
+              <div
+                class="rc-virtual-list-holder"
+                style="max-height: 256px; overflow-y: auto;"
+              >
+                <div>
+                  <div
+                    class="rc-virtual-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
+                  >
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                      title="2006"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2006
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2007"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2007
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2008"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2008
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2009"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2009
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2010"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2010
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2011"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2011
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2012"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2012
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2013"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2013
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2014"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2014
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2015"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2015
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="true"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-selected"
+                      title="2016"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2016
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2017"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2017
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2018"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2018
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2019"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2019
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2020"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2020
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2021"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2021
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2022"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2022
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2023"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2023
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2024"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2024
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="2025"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        2025
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select: none;"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-wrap"
+          >
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Nov"
+            >
+              Nov
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <div>
+            <div
+              id="rc_select_TEST_OR_SSR_list"
+              role="listbox"
+              style="height: 0px; width: 0px; overflow: hidden;"
+            >
+              <div
+                aria-label="Jan"
+                aria-selected="false"
+                id="rc_select_TEST_OR_SSR_list_0"
+                role="option"
+              >
+                0
+              </div>
+              <div
+                aria-label="Feb"
+                aria-selected="false"
+                id="rc_select_TEST_OR_SSR_list_1"
+                role="option"
+              >
+                1
+              </div>
+            </div>
+            <div
+              class="rc-virtual-list"
+              style="position: relative;"
+            >
+              <div
+                class="rc-virtual-list-holder"
+                style="max-height: 256px; overflow-y: auto;"
+              >
+                <div>
+                  <div
+                    class="rc-virtual-list-holder-inner"
+                    style="display: flex; flex-direction: column;"
+                  >
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                      title="Jan"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Jan
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Feb"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Feb
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Mar"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Mar
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Apr"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Apr
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="May"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        May
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Jun"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Jun
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Jul"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Jul
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Aug"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Aug
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Sep"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Sep
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Oct"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Oct
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="true"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-selected"
+                      title="Nov"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Nov
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                    <div
+                      aria-selected="false"
+                      class="ant-select-item ant-select-item-option"
+                      title="Dec"
+                    >
+                      <div
+                        class="ant-select-item-option-content"
+                      >
+                        Dec
+                      </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select: none;"
+                        unselectable="on"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select: none;"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-radio-group ant-radio-group-outline ant-radio-group-small ant-picker-calendar-mode-switch"
+      >
+        <label
+          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+        >
+          <span
+            class="ant-radio-button ant-radio-button-checked"
+          >
+            <input
+              checked=""
+              class="ant-radio-button-input"
+              name="test-id"
+              type="radio"
+              value="month"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            Month
+          </span>
+        </label>
+        <label
+          class="ant-radio-button-wrapper"
+        >
+          <span
+            class="ant-radio-button"
+          >
+            <input
+              class="ant-radio-button-input"
+              name="test-id"
+              type="radio"
+              value="year"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            Year
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      class="ant-picker-panel"
+      tabindex="0"
+    >
+      <div
+        class="ant-picker-date-panel ant-picker-date-panel-show-week"
+      >
+        <div
+          class="ant-picker-body"
+        >
+          <table
+            class="ant-picker-content"
+          >
+            <thead>
+              <tr>
+                <th
+                  aria-label="empty cell"
+                />
+                <th>
+                  Su
+                </th>
+                <th>
+                  Mo
+                </th>
+                <th>
+                  Tu
+                </th>
+                <th>
+                  We
+                </th>
+                <th>
+                  Th
+                </th>
+                <th>
+                  Fr
+                </th>
+                <th>
+                  Sa
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    45
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-10-30"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      30
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-10-31"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      31
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-01"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      01
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-02"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      02
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-03"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      03
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-04"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      04
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-05"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      05
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    46
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-06"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      06
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-07"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      07
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-08"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      08
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-09"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      09
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-10"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      10
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-11"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      11
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-12"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      12
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    47
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-13"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      13
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-14"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      14
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-15"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      15
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-16"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      16
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-17"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      17
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-18"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      18
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-19"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      19
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    48
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-20"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      20
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-21"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      21
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-selected ant-picker-cell-in-view ant-picker-cell-today"
+                  title="2016-11-22"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date ant-picker-calendar-date-today"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      22
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-23"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      23
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-24"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      24
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-25"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      25
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-26"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      26
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    49
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-27"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      27
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-28"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      28
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-29"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      29
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-30"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      30
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-01"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      01
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-02"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      02
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-03"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      03
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    50
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-04"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      04
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-05"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      05
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-06"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      06
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-07"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      07
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-08"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      08
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-09"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      09
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-10"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      10
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders components/calendar/demo/week.tsx extend context correctly 2`] = `[]`;
diff --git a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap
index afcaa40c6d..7b033caebb 100644
--- a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap
@@ -145,6 +145,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="month"
           />
@@ -164,6 +165,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="year"
           />
@@ -1098,6 +1100,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -1117,6 +1120,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -2050,6 +2054,7 @@ Array [
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -2069,6 +2074,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -2998,6 +3004,7 @@ Array [
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -3017,6 +3024,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -3839,6 +3847,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
                 <input
                   checked=""
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="month"
                 />
@@ -3858,6 +3867,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
               >
                 <input
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="year"
                 />
@@ -4928,6 +4938,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="month"
           />
@@ -4947,6 +4958,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="year"
           />
@@ -6291,6 +6303,7 @@ Array [
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -6310,6 +6323,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -7096,3 +7110,2021 @@ Array [
   </div>,
 ]
 `;
+
+exports[`renders components/calendar/demo/week.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-picker-calendar ant-picker-calendar-full"
+  >
+    <div
+      class="ant-picker-calendar-header"
+    >
+      <div
+        class="ant-select ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-wrap"
+          >
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2016"
+            >
+              2016
+            </span>
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-select ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-wrap"
+          >
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Nov"
+            >
+              Nov
+            </span>
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-radio-group ant-radio-group-outline ant-picker-calendar-mode-switch"
+      >
+        <label
+          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+        >
+          <span
+            class="ant-radio-button ant-radio-button-checked"
+          >
+            <input
+              checked=""
+              class="ant-radio-button-input"
+              name="test-id"
+              type="radio"
+              value="month"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            Month
+          </span>
+        </label>
+        <label
+          class="ant-radio-button-wrapper"
+        >
+          <span
+            class="ant-radio-button"
+          >
+            <input
+              class="ant-radio-button-input"
+              name="test-id"
+              type="radio"
+              value="year"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            Year
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      class="ant-picker-panel"
+      tabindex="0"
+    >
+      <div
+        class="ant-picker-date-panel ant-picker-date-panel-show-week"
+      >
+        <div
+          class="ant-picker-body"
+        >
+          <table
+            class="ant-picker-content"
+          >
+            <thead>
+              <tr>
+                <th
+                  aria-label="empty cell"
+                />
+                <th>
+                  Su
+                </th>
+                <th>
+                  Mo
+                </th>
+                <th>
+                  Tu
+                </th>
+                <th>
+                  We
+                </th>
+                <th>
+                  Th
+                </th>
+                <th>
+                  Fr
+                </th>
+                <th>
+                  Sa
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    45
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-10-30"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      30
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-10-31"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      31
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-01"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      01
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-02"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      02
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-03"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      03
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-04"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      04
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-05"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      05
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    46
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-06"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      06
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-07"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      07
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-08"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      08
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-09"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      09
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-10"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      10
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-11"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      11
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-12"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      12
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    47
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-13"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      13
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-14"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      14
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-15"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      15
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-16"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      16
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-17"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      17
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-18"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      18
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-19"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      19
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    48
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-20"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      20
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-21"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      21
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-selected ant-picker-cell-in-view ant-picker-cell-today"
+                  title="2016-11-22"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date ant-picker-calendar-date-today"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      22
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-23"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      23
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-24"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      24
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-25"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      25
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-26"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      26
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    49
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-27"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      27
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-28"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      28
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-29"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      29
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-30"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      30
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-01"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      01
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-02"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      02
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-03"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      03
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    50
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-04"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      04
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-05"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      05
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-06"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      06
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-07"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      07
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-08"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      08
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-09"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      09
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-10"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      10
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <div
+    class="ant-picker-calendar ant-picker-calendar-mini"
+  >
+    <div
+      class="ant-picker-calendar-header"
+    >
+      <div
+        class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-wrap"
+          >
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="2016"
+            >
+              2016
+            </span>
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-select ant-select-sm ant-select-outlined ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-wrap"
+          >
+            <span
+              class="ant-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="undefined_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-owns="undefined_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                readonly=""
+                role="combobox"
+                style="opacity:0"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="ant-select-selection-item"
+              title="Nov"
+            >
+              Nov
+            </span>
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-radio-group ant-radio-group-outline ant-radio-group-small ant-picker-calendar-mode-switch"
+      >
+        <label
+          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+        >
+          <span
+            class="ant-radio-button ant-radio-button-checked"
+          >
+            <input
+              checked=""
+              class="ant-radio-button-input"
+              name="test-id"
+              type="radio"
+              value="month"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            Month
+          </span>
+        </label>
+        <label
+          class="ant-radio-button-wrapper"
+        >
+          <span
+            class="ant-radio-button"
+          >
+            <input
+              class="ant-radio-button-input"
+              name="test-id"
+              type="radio"
+              value="year"
+            />
+            <span
+              class="ant-radio-button-inner"
+            />
+          </span>
+          <span>
+            Year
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      class="ant-picker-panel"
+      tabindex="0"
+    >
+      <div
+        class="ant-picker-date-panel ant-picker-date-panel-show-week"
+      >
+        <div
+          class="ant-picker-body"
+        >
+          <table
+            class="ant-picker-content"
+          >
+            <thead>
+              <tr>
+                <th
+                  aria-label="empty cell"
+                />
+                <th>
+                  Su
+                </th>
+                <th>
+                  Mo
+                </th>
+                <th>
+                  Tu
+                </th>
+                <th>
+                  We
+                </th>
+                <th>
+                  Th
+                </th>
+                <th>
+                  Fr
+                </th>
+                <th>
+                  Sa
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    45
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-10-30"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      30
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-10-31"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      31
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-01"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      01
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-02"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      02
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-03"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      03
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-04"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      04
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-05"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      05
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    46
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-06"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      06
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-07"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      07
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-08"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      08
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-09"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      09
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-10"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      10
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-11"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      11
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-12"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      12
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    47
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-13"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      13
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-14"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      14
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-15"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      15
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-16"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      16
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-17"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      17
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-18"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      18
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-19"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      19
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    48
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-20"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      20
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-21"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      21
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-selected ant-picker-cell-in-view ant-picker-cell-today"
+                  title="2016-11-22"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date ant-picker-calendar-date-today"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      22
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-23"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      23
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-24"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      24
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-25"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      25
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-26"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      26
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    49
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-27"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      27
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-28"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      28
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-29"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      29
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell ant-picker-cell-in-view"
+                  title="2016-11-30"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      30
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-01"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      01
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-02"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      02
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-03"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      03
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="ant-picker-cell ant-picker-cell-week"
+                >
+                  <div
+                    class="ant-picker-cell-inner"
+                  >
+                    50
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-04"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      04
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-05"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      05
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-06"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      06
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-07"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      07
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-08"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      08
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-09"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      09
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+                <td
+                  class="ant-picker-cell"
+                  title="2016-12-10"
+                >
+                  <div
+                    class="ant-picker-cell-inner ant-picker-calendar-date"
+                  >
+                    <div
+                      class="ant-picker-calendar-date-value"
+                    >
+                      10
+                    </div>
+                    <div
+                      class="ant-picker-calendar-date-content"
+                    />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
diff --git a/components/calendar/__tests__/__snapshots__/index.test.tsx.snap b/components/calendar/__tests__/__snapshots__/index.test.tsx.snap
index a348a96a68..b1be928a0a 100644
--- a/components/calendar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/calendar/__tests__/__snapshots__/index.test.tsx.snap
@@ -147,6 +147,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="month"
           />
@@ -166,6 +167,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="year"
           />
@@ -1099,6 +1101,7 @@ exports[`Calendar Calendar should support locale 1`] = `
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="month"
           />
@@ -1118,6 +1121,7 @@ exports[`Calendar Calendar should support locale 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="year"
           />
@@ -2051,6 +2055,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="month"
           />
@@ -2070,6 +2075,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="year"
           />
@@ -3003,6 +3009,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="month"
           />
@@ -3022,6 +3029,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="year"
           />
diff --git a/components/calendar/demo/week.md b/components/calendar/demo/week.md
new file mode 100644
index 0000000000..cba80646e7
--- /dev/null
+++ b/components/calendar/demo/week.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过将 `showWeek` 属性设置为 `true`，在全屏日历中显示周数。
+
+## en-US
+
+Show week number in fullscreen calendar by setting `showWeek` prop to `true`.
diff --git a/components/calendar/demo/week.tsx b/components/calendar/demo/week.tsx
new file mode 100644
index 0000000000..ccd28a21f9
--- /dev/null
+++ b/components/calendar/demo/week.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Calendar } from 'antd';
+
+const App: React.FC = () => (
+  <>
+    <Calendar fullscreen showWeek />
+    <br />
+    <Calendar fullscreen={false} showWeek />
+  </>
+);
+
+export default App;
diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
index cb47428d20..96ed4afa33 100644
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@@ -49,6 +49,7 @@ export interface CalendarProps<DateType> {
   defaultValue?: DateType;
   mode?: CalendarMode;
   fullscreen?: boolean;
+  showWeek?: boolean;
   onChange?: (date: DateType) => void;
   onPanelChange?: (date: DateType, mode: CalendarMode) => void;
   onSelect?: (date: DateType, selectInfo: SelectInfo) => void;
@@ -89,6 +90,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
       mode,
       validRange,
       fullscreen = true,
+      showWeek,
       onChange,
       onPanelChange,
       onSelect,
@@ -299,6 +301,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
           picker={panelMode}
           disabledDate={mergedDisabledDate}
           hideHeader
+          showWeek={showWeek}
         />
       </div>,
     );
diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
index ddf4655bac..0c1e9ab1f5 100644
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@@ -19,6 +19,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 <code src="./demo/card.tsx" clientOnly>Card</code>
 <code src="./demo/select.tsx" clientOnly>Selectable Calendar</code>
 <code src="./demo/lunar.tsx" clientOnly>Lunar Calendar</code>
+<code src="./demo/week.tsx" clientOnly version="5.23.0">Show Week</code>
 <code src="./demo/customize-header.tsx" clientOnly>Customize Header</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
 
@@ -45,7 +46,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | defaultValue | The date selected by default | [dayjs](https://day.js.org/) | - |  |
 | disabledDate | Function that specifies the dates that cannot be selected, `currentDate` is same dayjs object as `value` prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - |  |
 | fullscreen | Whether to display in full-screen | boolean | true |  |
-| headerRender | Render custom header in panel | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - |  |
+| showWeek | Whether to display week number | boolean | false | 5.23.0 |
+| headerRender | Render custom header in panel | function(object:{value: Dayjs, type: 'year' \| 'month', onChange: f(), onTypeChange: f()}) | - |  |
 | locale | The calendar's locale | object | [(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | The display mode of the calendar | `month` \| `year` | `month` |  |
 | validRange | To set valid range | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx
index d89d8cec86..d340679b3e 100644
--- a/components/calendar/index.tsx
+++ b/components/calendar/index.tsx
@@ -1,7 +1,7 @@
 import type { Dayjs } from 'dayjs';
 import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 
-import type { CalendarProps } from './generateCalendar';
+import type { CalendarMode, CalendarProps } from './generateCalendar';
 import generateCalendar from './generateCalendar';
 
 const Calendar = generateCalendar<Dayjs>(dayjsGenerateConfig);
@@ -12,5 +12,5 @@ export type CalendarType = typeof Calendar & {
 
 (Calendar as CalendarType).generateCalendar = generateCalendar;
 
-export type { CalendarProps };
+export type { CalendarMode, CalendarProps };
 export default Calendar as CalendarType;
diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
index 3e76ce755a..707911d643 100644
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 <code src="./demo/card.tsx" clientOnly>卡片模式</code>
 <code src="./demo/select.tsx" clientOnly>选择功能</code>
 <code src="./demo/lunar.tsx" clientOnly>农历日历</code>
+<code src="./demo/week.tsx" clientOnly version="5.23.0">周数</code>
 <code src="./demo/customize-header.tsx" clientOnly>自定义头部</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 
@@ -46,7 +47,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 | defaultValue | 默认展示的日期 | [dayjs](https://day.js.org/) | - |  |
 | disabledDate | 不可选择的日期，参数为当前 `value`，注意使用时[不要直接修改](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - |  |
 | fullscreen | 是否全屏显示 | boolean | true |  |
-| headerRender | 自定义头部内容 | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - |  |
+| showWeek | 是否显示周数列 | boolean | false | 5.23.0 |
+| headerRender | 自定义头部内容 | function(object:{value: Dayjs, type: 'year' \| 'month', onChange: f(), onTypeChange: f()}) | - |  |
 | locale | 国际化配置 | object | [(默认配置)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | 初始模式 | `month` \| `year` | `month` |  |
 | validRange | 设置可以显示的日期 | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts
index fdeec49379..180da3d1e6 100644
--- a/components/calendar/style/index.ts
+++ b/components/calendar/style/index.ts
@@ -149,6 +149,18 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
           },
         },
       },
+      [`${componentCls}-cell-week ${componentCls}-cell-inner`]: {
+        display: 'block',
+        borderRadius: 0,
+        borderTop: `${unit(token.lineWidthBold)} ${token.lineType} ${token.colorSplit}`,
+        width: '100%',
+        height: token
+          .calc(token.dateValueHeight)
+          .add(token.dateContentHeight)
+          .add(token.calc(token.paddingXS).div(2))
+          .add(token.lineWidthBold)
+          .equal(),
+      },
       [`${componentCls}-cell`]: {
         '&::before': {
           display: 'none',
diff --git a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
index b8a7b4b5a6..d123508745 100644
--- a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -160,6 +160,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -195,7 +196,7 @@ Array [
                   class="ant-tabs-tab-btn"
                   id="rc-tabs-test-tab-tab2"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   tab2
                 </div>
@@ -1127,6 +1128,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -1162,7 +1164,7 @@ Array [
                   class="ant-tabs-tab-btn"
                   id="rc-tabs-test-tab-tab2"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   tab2
                 </div>
@@ -1267,6 +1269,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-middle ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -1287,7 +1290,7 @@ Array [
                   class="ant-tabs-tab-btn"
                   id="rc-tabs-test-tab-article"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   article
                 </div>
@@ -1317,7 +1320,7 @@ Array [
                   class="ant-tabs-tab-btn"
                   id="rc-tabs-test-tab-project"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   project
                 </div>
diff --git a/components/card/__tests__/__snapshots__/demo.test.ts.snap b/components/card/__tests__/__snapshots__/demo.test.ts.snap
index ac2919c40e..fe9f5f0186 100644
--- a/components/card/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.ts.snap
@@ -156,6 +156,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -187,7 +188,7 @@ Array [
                   aria-selected="false"
                   class="ant-tabs-tab-btn"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   tab2
                 </div>
@@ -1084,6 +1085,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -1115,7 +1117,7 @@ Array [
                   aria-selected="false"
                   class="ant-tabs-tab-btn"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   tab2
                 </div>
@@ -1201,6 +1203,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-middle ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -1219,7 +1222,7 @@ Array [
                   aria-selected="false"
                   class="ant-tabs-tab-btn"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   article
                 </div>
@@ -1245,7 +1248,7 @@ Array [
                   aria-selected="false"
                   class="ant-tabs-tab-btn"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   project
                 </div>
diff --git a/components/card/__tests__/__snapshots__/index.test.tsx.snap b/components/card/__tests__/__snapshots__/index.test.tsx.snap
index 838b3c0b47..f074d43f4e 100644
--- a/components/card/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/card/__tests__/__snapshots__/index.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`Card correct pass tabList props 1`] = `
       class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-large ant-tabs-card ant-tabs-editable-card ant-card-head-tabs"
     >
       <div
+        aria-orientation="horizontal"
         class="ant-tabs-nav"
         role="tablist"
       >
@@ -76,14 +77,14 @@ exports[`Card correct pass tabList props 1`] = `
                 class="ant-tabs-tab-btn"
                 id="rc-tabs-test-tab-deprecated"
                 role="tab"
-                tabindex="0"
+                tabindex="-1"
               >
                 Deprecated
               </div>
               <button
                 aria-label="remove"
                 class="ant-tabs-tab-remove"
-                tabindex="0"
+                tabindex="-1"
                 type="button"
               >
                 <span
@@ -133,7 +134,7 @@ exports[`Card correct pass tabList props 1`] = `
                 class="ant-tabs-tab-btn"
                 id="rc-tabs-test-tab-notClosable"
                 role="tab"
-                tabindex="0"
+                tabindex="-1"
               >
                 NotClosable
               </div>
diff --git a/components/card/demo/component-token.tsx b/components/card/demo/component-token.tsx
index 1c15e239f0..a54498b342 100644
--- a/components/card/demo/component-token.tsx
+++ b/components/card/demo/component-token.tsx
@@ -8,6 +8,10 @@ export default () => (
       components: {
         Card: {
           headerBg: '#e6f4ff',
+          bodyPaddingSM: 22,
+          headerPaddingSM: 20,
+          headerPadding: 18,
+          bodyPadding: 26,
           headerFontSize: 20,
           headerFontSizeSM: 20,
           headerHeight: 60,
diff --git a/components/card/style/index.ts b/components/card/style/index.ts
index 3aabdb985d..99d21908ce 100644
--- a/components/card/style/index.ts
+++ b/components/card/style/index.ts
@@ -31,6 +31,26 @@ export interface ComponentToken {
    * @descEN Height of small card header
    */
   headerHeightSM: number | string;
+  /**
+   * @desc 小号卡片内边距
+   * @descEN Padding of small card body
+   */
+  bodyPaddingSM: number;
+  /**
+   * @desc 小号卡片头部内边距
+   * @descEN Padding of small card head
+   */
+  headerPaddingSM: number;
+  /**
+   * @desc 卡片内边距
+   * @descEN Padding of card body
+   */
+  bodyPadding: number;
+  /**
+   * @desc 卡片头部内边距
+   * @descEN Padding of card head
+   */
+  headerPadding: number;
   /**
    * @desc 操作区背景色
    * @descEN Background color of card actions
@@ -64,11 +84,6 @@ interface CardToken extends FullToken<'Card'> {
    * @descEN Padding of card header
    */
   cardHeadPadding: number;
-  /**
-   * @desc 小号卡片内边距
-   * @descEN Padding of small card
-   */
-  cardPaddingSM: number;
   /**
    * @desc 卡片基础内边距
    * @descEN Padding of base card
@@ -85,7 +100,7 @@ interface CardToken extends FullToken<'Card'> {
 
 // ============================== Head ==============================
 const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
-  const { antCls, componentCls, headerHeight, cardPaddingBase, tabsMarginBottom } = token;
+  const { antCls, componentCls, headerHeight, headerPadding, tabsMarginBottom } = token;
 
   return {
     display: 'flex',
@@ -93,7 +108,7 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
     flexDirection: 'column',
     minHeight: headerHeight,
     marginBottom: -1, // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
-    padding: `0 ${unit(cardPaddingBase)}`,
+    padding: `0 ${unit(headerPadding)}`,
     color: token.colorTextHeading,
     fontWeight: token.fontWeightStrong,
     fontSize: token.headerFontSize,
@@ -259,11 +274,11 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
 
 // ============================== Inner ==============================
 const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
-  const { componentCls, cardPaddingBase, colorFillAlter } = token;
+  const { componentCls, colorFillAlter, headerPadding, bodyPadding } = token;
 
   return {
     [`${componentCls}-head`]: {
-      padding: `0 ${unit(cardPaddingBase)}`,
+      padding: `0 ${unit(headerPadding)}`,
       background: colorFillAlter,
 
       '&-title': {
@@ -272,7 +287,7 @@ const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
     },
 
     [`${componentCls}-body`]: {
-      padding: `${unit(token.padding)} ${unit(cardPaddingBase)}`,
+      padding: `${unit(token.padding)} ${unit(bodyPadding)}`,
     },
   };
 };
@@ -298,7 +313,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
     cardHeadPadding,
     colorBorderSecondary,
     boxShadowTertiary,
-    cardPaddingBase,
+    bodyPadding,
     extraColor,
   } = token;
 
@@ -325,7 +340,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
       },
 
       [`${componentCls}-body`]: {
-        padding: cardPaddingBase,
+        padding: bodyPadding,
         borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`,
         ...clearFix(),
       },
@@ -400,13 +415,13 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
 
 // ============================== Size ==============================
 const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
-  const { componentCls, cardPaddingSM, headerHeightSM, headerFontSizeSM } = token;
+  const { componentCls, bodyPaddingSM, headerPaddingSM, headerHeightSM, headerFontSizeSM } = token;
 
   return {
     [`${componentCls}-small`]: {
       [`> ${componentCls}-head`]: {
         minHeight: headerHeightSM,
-        padding: `0 ${unit(cardPaddingSM)}`,
+        padding: `0 ${unit(headerPaddingSM)}`,
         fontSize: headerFontSizeSM,
 
         [`> ${componentCls}-head-wrapper`]: {
@@ -417,7 +432,7 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
       },
 
       [`> ${componentCls}-body`]: {
-        padding: cardPaddingSM,
+        padding: bodyPaddingSM,
       },
     },
     [`${componentCls}-small${componentCls}-contain-tabs`]: {
@@ -442,6 +457,10 @@ export const prepareComponentToken: GetDefaultToken<'Card'> = (token) => ({
   actionsLiMargin: `${token.paddingSM}px 0`,
   tabsMarginBottom: -token.padding - token.lineWidth,
   extraColor: token.colorText,
+  bodyPaddingSM: 12, // Fixed padding.
+  headerPaddingSM: 12,
+  bodyPadding: token.bodyPadding ?? token.paddingLG,
+  headerPadding: token.headerPadding ?? token.paddingLG,
 });
 
 // ============================== Export ==============================
@@ -453,7 +472,6 @@ export default genStyleHooks(
       cardHeadPadding: token.padding,
       cardPaddingBase: token.paddingLG,
       cardActionsIconSize: token.fontSize,
-      cardPaddingSM: 12, // Fixed padding.
     });
 
     return [
diff --git a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7986e72923..2d7ef550c7 100644
--- a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1158,6 +1158,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="top"
         />
@@ -1177,6 +1178,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottom"
         />
@@ -1196,6 +1198,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="left"
         />
@@ -1215,6 +1218,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="right"
         />
diff --git a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
index 50751a7206..e1fca0f462 100644
--- a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
@@ -1147,6 +1147,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="top"
         />
@@ -1166,6 +1167,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottom"
         />
@@ -1185,6 +1187,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="left"
         />
@@ -1204,6 +1207,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="right"
         />
diff --git a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
index 240abeb1e6..134883a736 100644
--- a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -310,6 +310,162 @@ exports[`renders components/cascader/demo/change-on-select.tsx extend context co
 
 exports[`renders components/cascader/demo/change-on-select.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/cascader/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
+>
+  <div
+    class="ant-select-selector"
+  >
+    <span
+      class="ant-select-selection-wrap"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="rc_select_TEST_OR_SSR_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          id="rc_select_TEST_OR_SSR"
+          readonly=""
+          role="combobox"
+          style="opacity: 0;"
+          type="search"
+          unselectable="on"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        Please select
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
+  >
+    <div>
+      <div
+        class="ant-cascader-menus"
+      >
+        <ul
+          class="ant-cascader-menu"
+          role="menu"
+        >
+          <li
+            aria-checked="false"
+            class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+            data-path-key="zhejiang"
+            role="menuitemcheckbox"
+            title="Zhejiang"
+          >
+            <div
+              class="ant-cascader-menu-item-content"
+            >
+              Zhejiang
+            </div>
+            <div
+              class="ant-cascader-menu-item-expand-icon"
+            >
+              <span
+                aria-label="right"
+                class="anticon anticon-right"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="right"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-checked="false"
+            class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+            data-path-key="jiangsu"
+            role="menuitemcheckbox"
+            title="Jiangsu"
+          >
+            <div
+              class="ant-cascader-menu-item-content"
+            >
+              Jiangsu
+            </div>
+            <div
+              class="ant-cascader-menu-item-expand-icon"
+            >
+              <span
+                aria-label="right"
+                class="anticon anticon-right"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="right"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select: none;"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`renders components/cascader/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/cascader/demo/custom-dropdown.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
@@ -2043,6 +2199,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topLeft"
         />
@@ -2062,6 +2219,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topRight"
         />
@@ -2081,6 +2239,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomLeft"
         />
@@ -2100,6 +2259,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomRight"
         />
diff --git a/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap b/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
index 1259919ee6..52befde46b 100644
--- a/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
@@ -128,6 +128,71 @@ exports[`renders components/cascader/demo/change-on-select.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/cascader/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
+>
+  <div
+    class="ant-select-selector"
+  >
+    <span
+      class="ant-select-selection-wrap"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          readonly=""
+          role="combobox"
+          style="opacity:0"
+          type="search"
+          unselectable="on"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        Please select
+      </span>
+    </span>
+  </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
 exports[`renders components/cascader/demo/custom-dropdown.tsx correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
@@ -1022,6 +1087,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topLeft"
         />
@@ -1041,6 +1107,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topRight"
         />
@@ -1060,6 +1127,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomLeft"
         />
@@ -1079,6 +1147,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomRight"
         />
diff --git a/components/cascader/demo/component-token.md b/components/cascader/demo/component-token.md
new file mode 100644
index 0000000000..83366668fe
--- /dev/null
+++ b/components/cascader/demo/component-token.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+组件 Token
+
+## en-US
+
+Component Token
diff --git a/components/cascader/demo/component-token.tsx b/components/cascader/demo/component-token.tsx
new file mode 100644
index 0000000000..c91540a5b5
--- /dev/null
+++ b/components/cascader/demo/component-token.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import type { CascaderProps } from 'antd';
+import { Cascader, ConfigProvider } from 'antd';
+
+interface Option {
+  value: string;
+  label: string;
+  children?: Option[];
+}
+
+const options: Option[] = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const onChange: CascaderProps<Option>['onChange'] = (value) => {
+  console.log(value);
+};
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Cascader: {
+          optionSelectedColor: 'red',
+        },
+      },
+    }}
+  >
+    <Cascader options={options} onChange={onChange} placeholder="Please select" />
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md
index 70b4656f1f..c3fca686a3 100644
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@@ -37,6 +37,7 @@ demo:
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/panel.tsx" version=">= 5.10.0">Panel</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 
diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md
index cedd36f33b..fdb5b0929d 100644
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@@ -38,6 +38,7 @@ demo:
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/panel.tsx" version=">= 5.10.0">面板使用</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 
diff --git a/components/cascader/style/columns.ts b/components/cascader/style/columns.ts
index adc24abafc..dbb4887ad7 100644
--- a/components/cascader/style/columns.ts
+++ b/components/cascader/style/columns.ts
@@ -92,6 +92,7 @@ const getColumnsStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CS
 
             [`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
               '&, &:hover': {
+                color: token.optionSelectedColor,
                 fontWeight: token.optionSelectedFontWeight,
                 backgroundColor: token.optionSelectedBg,
               },
diff --git a/components/cascader/style/index.ts b/components/cascader/style/index.ts
index 663d396132..23592e89a1 100644
--- a/components/cascader/style/index.ts
+++ b/components/cascader/style/index.ts
@@ -26,6 +26,11 @@ export interface ComponentToken {
    * @descEN Background color of selected item
    */
   optionSelectedBg: string;
+  /**
+   * @desc 选项选中时文本颜色
+   * @descEN Text color when option is selected
+   */
+  optionSelectedColor: string;
   /**
    * @desc 选项选中时字重
    * @descEN Font weight of selected item
@@ -100,6 +105,7 @@ export const prepareComponentToken = (token: GlobalToken) => {
     optionSelectedFontWeight: token.fontWeightStrong,
     optionPadding: `${itemPaddingVertical}px ${token.paddingSM}px`,
     menuPadding: token.paddingXXS,
+    optionSelectedColor: token.colorText,
   };
 };
 
diff --git a/components/collapse/__tests__/__snapshots__/demo.test.ts.snap b/components/collapse/__tests__/__snapshots__/demo.test.ts.snap
index c20dfb4712..5961eaaf28 100644
--- a/components/collapse/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/collapse/__tests__/__snapshots__/demo.test.ts.snap
@@ -727,7 +727,7 @@ exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
 >
   <div
     class="ant-collapse-item ant-collapse-item-active"
-    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
+    style="margin-bottom:24px;background:rgba(0,0,0,0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"
@@ -782,7 +782,7 @@ exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
   </div>
   <div
     class="ant-collapse-item"
-    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
+    style="margin-bottom:24px;background:rgba(0,0,0,0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"
@@ -823,7 +823,7 @@ exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
   </div>
   <div
     class="ant-collapse-item"
-    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
+    style="margin-bottom:24px;background:rgba(0,0,0,0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"
diff --git a/components/collapse/style/index.ts b/components/collapse/style/index.ts
index ddac88cb7a..ef40116c75 100644
--- a/components/collapse/style/index.ts
+++ b/components/collapse/style/index.ts
@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 import { unit } from '@ant-design/cssinjs';
 
-import { resetComponent, resetIcon } from '../../style';
+import { genFocusStyle, resetComponent, resetIcon } from '../../style';
 import { genCollapseMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
@@ -95,6 +95,14 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
 
       [`& > ${componentCls}-item`]: {
         borderBottom: borderBase,
+        '&:first-child': {
+          [`
+            &,
+            & > ${componentCls}-header`]: {
+            borderRadius: `${unit(collapsePanelBorderRadius)} ${unit(collapsePanelBorderRadius)} 0 0`,
+          },
+        },
+
         '&:last-child': {
           [`
             &,
@@ -115,6 +123,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
           lineHeight,
           cursor: 'pointer',
           transition: `all ${motionDurationSlow}, visibility 0s`,
+          ...genFocusStyle(token),
 
           [`> ${componentCls}-header-text`]: {
             flex: 'auto',
diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx
index 8b6cdf8160..2cc7ed50b4 100644
--- a/components/color-picker/ColorPicker.tsx
+++ b/components/color-picker/ColorPicker.tsx
@@ -221,7 +221,7 @@ const ColorPicker: CompoundedComponent = (props) => {
   return wrapCSSVar(
     <Popover
       style={styles?.popup}
-      overlayInnerStyle={styles?.popupOverlayInner}
+      styles={{ body: styles?.popupOverlayInner }}
       onOpenChange={(visible) => {
         if (!visible || !mergedDisabled) {
           setPopupOpen(visible);
@@ -253,7 +253,7 @@ const ColorPicker: CompoundedComponent = (props) => {
           />
         </ContextIsolator>
       }
-      overlayClassName={mergedPopupCls}
+      classNames={{ root: mergedPopupCls }}
       {...popoverProps}
     >
       {children || (
diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index 97636aaef0..528b82de68 100644
--- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3981,7 +3981,8 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                   <div
                     aria-label="segmented control"
                     class="ant-segmented ant-segmented-sm"
-                    role="listbox"
+                    role="radiogroup"
+                    tabindex="0"
                   >
                     <div
                       class="ant-segmented-group"
@@ -3992,12 +3993,12 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                         <input
                           checked=""
                           class="ant-segmented-item-input"
+                          name="test-id"
                           type="radio"
                         />
                         <div
                           aria-selected="false"
                           class="ant-segmented-item-label"
-                          role="option"
                           title="Single"
                         >
                           Single
@@ -4008,12 +4009,12 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                       >
                         <input
                           class="ant-segmented-item-input"
+                          name="test-id"
                           type="radio"
                         />
                         <div
                           aria-selected="true"
                           class="ant-segmented-item-label"
-                          role="option"
                           title="Gradient"
                         >
                           Gradient
diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
index 59a0daefca..45ee9dbe29 100644
--- a/components/color-picker/__tests__/index.test.tsx
+++ b/components/color-picker/__tests__/index.test.tsx
@@ -12,7 +12,7 @@ import Form from '../../form';
 import theme from '../../theme';
 import { AggregationColor } from '../color';
 import ColorPicker from '../ColorPicker';
-import type { ColorPickerProps, ColorValueType } from '../interface';
+import type { ColorPickerProps, ColorValueType, PresetsItem } from '../interface';
 import { generateColor } from '../util';
 
 function doMouseMove(
@@ -178,6 +178,7 @@ describe('ColorPicker', () => {
         onChange={handleColorChange}
         presets={[
           {
+            key: 'Recommended',
             label: 'Recommended',
             colors: [
               '#000000',
@@ -193,6 +194,7 @@ describe('ColorPicker', () => {
             ],
           },
           {
+            key: 'Recent',
             label: 'Recent',
             colors: [],
           },
@@ -243,7 +245,8 @@ describe('ColorPicker', () => {
   });
 
   describe('preset collapsed', () => {
-    const recommendedPreset = {
+    const recommendedPreset: PresetsItem = {
+      key: 'Recommended',
       label: 'Recommended',
       colors: ['#f00', '#0f0', '#00f'],
     };
@@ -263,6 +266,7 @@ describe('ColorPicker', () => {
           presets={[
             recommendedPreset,
             {
+              key: 'Recent',
               label: 'Recent',
               colors: ['#f00d', '#0f0d', '#00fd'],
               defaultOpen: false,
@@ -381,6 +385,7 @@ describe('ColorPicker', () => {
           open
           presets={[
             {
+              key: 'test',
               label: 'test',
               colors: ['#0000001A'],
             },
@@ -955,9 +960,9 @@ describe('ColorPicker', () => {
       <ColorPicker
         open
         presets={[
-          { label: <span>aaa</span>, colors: ['#333'], defaultOpen: true },
-          { label: <span>bbb</span>, colors: ['#666'], defaultOpen: true },
-          { label: <span>ccc</span>, colors: ['#999'], defaultOpen: true },
+          { label: <span>aaa</span>, colors: ['#333'], key: 'a', defaultOpen: true },
+          { label: <span>bbb</span>, colors: ['#666'], key: 'b', defaultOpen: true },
+          { label: <span>ccc</span>, colors: ['#999'], key: 'c', defaultOpen: true },
         ]}
       />,
     );
diff --git a/components/color-picker/components/ColorPresets.tsx b/components/color-picker/components/ColorPresets.tsx
index 0fe5b45f80..6131bf36a2 100644
--- a/components/color-picker/components/ColorPresets.tsx
+++ b/components/color-picker/components/ColorPresets.tsx
@@ -35,10 +35,10 @@ export const isBright = (value: AggregationColor, bgColorToken: string) => {
   return r * 0.299 + g * 0.587 + b * 0.114 > 192;
 };
 
-const genCollapsePanelKey = (preset: PresetsItem, index: number) =>
-  typeof preset.label === 'string' || typeof preset.label === 'number'
-    ? `panel-${preset.label}-${index}`
-    : `panel-${index}`;
+const genCollapsePanelKey = (preset: PresetsItem, index: number) => {
+  const mergedKey = preset.key ?? index;
+  return `panel-${mergedKey}`;
+};
 
 const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color, onChange }) => {
   const [locale] = useLocale('ColorPicker');
@@ -65,7 +65,7 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
     onChange?.(colorValue);
   };
 
-  const items: CollapseProps['items'] = presetsValue.map((preset, index) => ({
+  const items = presetsValue.map<NonNullable<CollapseProps['items']>[number]>((preset, index) => ({
     key: genCollapsePanelKey(preset, index),
     label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>,
     children: (
diff --git a/components/color-picker/demo/panel-render.tsx b/components/color-picker/demo/panel-render.tsx
index db229ec9c6..a815e15cef 100644
--- a/components/color-picker/demo/panel-render.tsx
+++ b/components/color-picker/demo/panel-render.tsx
@@ -5,11 +5,9 @@ import type { ColorPickerProps } from 'antd';
 
 type Presets = Required<ColorPickerProps>['presets'][number];
 
-const genPresets = (presets = presetPalettes) =>
-  Object.entries(presets).map<Presets>(([label, colors]) => ({
-    label,
-    colors,
-  }));
+function genPresets(presets = presetPalettes) {
+  return Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors, key: label }));
+}
 
 const HorizontalLayoutDemo = () => {
   const { token } = theme.useToken();
diff --git a/components/color-picker/demo/presets.tsx b/components/color-picker/demo/presets.tsx
index ad9cb83c21..23cdba1a3e 100644
--- a/components/color-picker/demo/presets.tsx
+++ b/components/color-picker/demo/presets.tsx
@@ -5,8 +5,9 @@ import type { ColorPickerProps } from 'antd';
 
 type Presets = Required<ColorPickerProps>['presets'][number];
 
-const genPresets = (presets = presetPalettes) =>
-  Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors }));
+function genPresets(presets = presetPalettes) {
+  return Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors, key: label }));
+}
 
 const Demo: React.FC = () => {
   const { token } = theme.useToken();
diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md
index 9a4fd171e3..23217bdbaa 100644
--- a/components/color-picker/index.en-US.md
+++ b/components/color-picker/index.en-US.md
@@ -54,7 +54,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | |
 | mode | Configure single or gradient color | `'single' \| 'gradient' \| ('single' \| 'gradient')[]` | `single` | 5.20.0 |
 | open | Whether to show popup | boolean | - | |
-| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` |
+| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean, key?: React.Key }[]` | - | `defaultOpen: 5.11.0, key: 5.23.0` |
 | placement | Placement of popup | The design of the [placement](/components/tooltip/#api) parameter is the same as the `Tooltips` component. | `bottomLeft` | |
 | panelRender | Custom Render Panel | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
 | showText | Show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md
index 69467b80e0..d8d653386a 100644
--- a/components/color-picker/index.zh-CN.md
+++ b/components/color-picker/index.zh-CN.md
@@ -55,7 +55,7 @@ group:
 | format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | |
 | mode | 选择器模式，用于配置单色与渐变 | `'single' \| 'gradient' \| ('single' \| 'gradient')[]` | `single` | 5.20.0 |
 | open | 是否显示弹出窗口 | boolean | - | |
-| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` |
+| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean, key?: React.Key }[]` | - | `defaultOpen: 5.11.0, key: 5.23.0` |
 | placement | 弹出窗口的位置 | 同 `Tooltips` 组件的 [placement](/components/tooltip-cn/#api) 参数设计 | `bottomLeft` | |
 | panelRender | 自定义渲染面板 | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
 | showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
diff --git a/components/color-picker/interface.ts b/components/color-picker/interface.ts
index 24c5e982fd..d213c8c712 100644
--- a/components/color-picker/interface.ts
+++ b/components/color-picker/interface.ts
@@ -1,4 +1,5 @@
 import type { CSSProperties, FC, ReactNode } from 'react';
+import React from 'react';
 import type {
   ColorGenInput,
   ColorPickerProps as RcColorPickerProps,
@@ -33,7 +34,13 @@ export interface PresetsItem {
    * @default true
    */
   defaultOpen?: boolean;
+  /**
+   * The key of the panel
+   * @since 5.23.0
+   */
+  key?: React.Key;
 }
+
 export type TriggerType = 'click' | 'hover';
 
 export type TriggerPlacement = TooltipPlacement; // Alias, to prevent breaking changes.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
index afce1338a8..c7759d39e7 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -1755,6 +1755,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
             <input
               checked=""
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -1774,6 +1775,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
           >
             <input
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -2639,6 +2641,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
           >
             <input
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -2659,6 +2662,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
             <input
               checked=""
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -3058,6 +3062,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
               checked=""
               class="config-radio-button-input"
               disabled=""
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -3078,6 +3083,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
             <input
               class="config-radio-button-input"
               disabled=""
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -3945,6 +3951,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
             <input
               class="config-radio-button-input"
               disabled=""
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -3966,6 +3973,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
               checked=""
               class="config-radio-button-input"
               disabled=""
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -4362,6 +4370,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
             <input
               checked=""
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -4381,6 +4390,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
           >
             <input
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -5246,6 +5256,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
           >
             <input
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -5266,6 +5277,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
             <input
               checked=""
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -5662,6 +5674,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
             <input
               checked=""
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -5681,6 +5694,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
           >
             <input
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -6546,6 +6560,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
           >
             <input
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -6566,6 +6581,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
             <input
               checked=""
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -6962,6 +6978,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
             <input
               checked=""
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -6981,6 +6998,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
           >
             <input
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -7846,6 +7864,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
           >
             <input
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -7866,6 +7885,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
             <input
               checked=""
               class="config-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -8262,6 +8282,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -8281,6 +8302,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -9146,6 +9168,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -9166,6 +9189,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -9562,6 +9586,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -9581,6 +9606,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -10446,6 +10472,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -10466,6 +10493,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -16125,7 +16153,7 @@ exports[`ConfigProvider components Input configProvider 1`] = `
       >
         <input
           class="config-input config-input-outlined"
-          type="text"
+          type="search"
           value=""
         />
         <span
@@ -16225,7 +16253,7 @@ exports[`ConfigProvider components Input configProvider componentDisabled 1`] =
         <input
           class="config-input config-input-disabled config-input-outlined"
           disabled=""
-          type="text"
+          type="search"
           value=""
         />
         <span
@@ -16326,7 +16354,7 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
       >
         <input
           class="config-input config-input-lg config-input-outlined"
-          type="text"
+          type="search"
           value=""
         />
         <span
@@ -16424,7 +16452,7 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`]
       >
         <input
           class="config-input config-input-outlined"
-          type="text"
+          type="search"
           value=""
         />
         <span
@@ -16522,7 +16550,7 @@ exports[`ConfigProvider components Input configProvider componentSize small 1`]
       >
         <input
           class="config-input config-input-sm config-input-outlined"
-          type="text"
+          type="search"
           value=""
         />
         <span
@@ -16620,7 +16648,7 @@ exports[`ConfigProvider components Input normal 1`] = `
       >
         <input
           class="ant-input ant-input-outlined"
-          type="text"
+          type="search"
           value=""
         />
         <span
@@ -16718,7 +16746,7 @@ exports[`ConfigProvider components Input prefixCls 1`] = `
       >
         <input
           class="ant-input ant-input-outlined"
-          type="text"
+          type="search"
           value=""
         />
         <span
@@ -22174,6 +22202,7 @@ exports[`ConfigProvider components Radio configProvider 1`] = `
         <input
           checked=""
           class="config-radio-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -22197,6 +22226,7 @@ exports[`ConfigProvider components Radio configProvider 1`] = `
         <input
           checked=""
           class="config-radio-button-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -22226,6 +22256,7 @@ exports[`ConfigProvider components Radio configProvider componentDisabled 1`] =
           checked=""
           class="config-radio-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <span
@@ -22250,6 +22281,7 @@ exports[`ConfigProvider components Radio configProvider componentDisabled 1`] =
           checked=""
           class="config-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <span
@@ -22278,6 +22310,7 @@ exports[`ConfigProvider components Radio configProvider componentSize large 1`]
         <input
           checked=""
           class="config-radio-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -22301,6 +22334,7 @@ exports[`ConfigProvider components Radio configProvider componentSize large 1`]
         <input
           checked=""
           class="config-radio-button-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -22329,6 +22363,7 @@ exports[`ConfigProvider components Radio configProvider componentSize middle 1`]
         <input
           checked=""
           class="config-radio-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -22352,6 +22387,7 @@ exports[`ConfigProvider components Radio configProvider componentSize middle 1`]
         <input
           checked=""
           class="config-radio-button-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -22380,6 +22416,7 @@ exports[`ConfigProvider components Radio configProvider componentSize small 1`]
         <input
           checked=""
           class="config-radio-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -22403,6 +22440,7 @@ exports[`ConfigProvider components Radio configProvider componentSize small 1`]
         <input
           checked=""
           class="config-radio-button-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -22431,6 +22469,7 @@ exports[`ConfigProvider components Radio normal 1`] = `
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -22454,6 +22493,7 @@ exports[`ConfigProvider components Radio normal 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -22482,6 +22522,7 @@ exports[`ConfigProvider components Radio prefixCls 1`] = `
         <input
           checked=""
           class="prefix-Radio-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -22505,6 +22546,7 @@ exports[`ConfigProvider components Radio prefixCls 1`] = `
         <input
           checked=""
           class="prefix-Radio-button-input"
+          name="test-id"
           type="radio"
         />
         <span
@@ -28935,6 +28977,7 @@ exports[`ConfigProvider components Tabs configProvider 1`] = `
   class="config-tabs config-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="config-tabs-nav"
     role="tablist"
   >
@@ -29025,6 +29068,7 @@ exports[`ConfigProvider components Tabs configProvider componentDisabled 1`] = `
   class="config-tabs config-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="config-tabs-nav"
     role="tablist"
   >
@@ -29115,6 +29159,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize large 1`] =
   class="config-tabs config-tabs-top config-tabs-large"
 >
   <div
+    aria-orientation="horizontal"
     class="config-tabs-nav"
     role="tablist"
   >
@@ -29205,6 +29250,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize middle 1`]
   class="config-tabs config-tabs-top config-tabs-middle"
 >
   <div
+    aria-orientation="horizontal"
     class="config-tabs-nav"
     role="tablist"
   >
@@ -29295,6 +29341,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize small 1`] =
   class="config-tabs config-tabs-top config-tabs-small"
 >
   <div
+    aria-orientation="horizontal"
     class="config-tabs-nav"
     role="tablist"
   >
@@ -29385,6 +29432,7 @@ exports[`ConfigProvider components Tabs normal 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -29475,6 +29523,7 @@ exports[`ConfigProvider components Tabs prefixCls 1`] = `
   class="prefix-Tabs prefix-Tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="prefix-Tabs-nav"
     role="tablist"
   >
@@ -41434,7 +41483,6 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
 <div>
   <div
     class="config-tree config-tree-icon-hide"
-    role="tree"
   >
     <div>
       <input
@@ -41459,6 +41507,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
     </div>
     <div
       class="config-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -41470,9 +41519,10 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -41499,7 +41549,6 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
   </div>
   <div
     class="config-tree config-tree-block-node config-tree-directory"
-    role="tree"
   >
     <div>
       <input
@@ -41524,6 +41573,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
     </div>
     <div
       class="config-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -41535,9 +41585,10 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -41592,7 +41643,6 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
 <div>
   <div
     class="config-tree config-tree-icon-hide"
-    role="tree"
   >
     <div>
       <input
@@ -41617,6 +41667,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
     </div>
     <div
       class="config-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -41628,9 +41679,10 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -41657,7 +41709,6 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
   </div>
   <div
     class="config-tree config-tree-block-node config-tree-directory"
-    role="tree"
   >
     <div>
       <input
@@ -41682,6 +41733,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
     </div>
     <div
       class="config-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -41693,9 +41745,10 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -41750,7 +41803,6 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
 <div>
   <div
     class="config-tree config-tree-icon-hide"
-    role="tree"
   >
     <div>
       <input
@@ -41775,6 +41827,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
     </div>
     <div
       class="config-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -41786,9 +41839,10 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -41815,7 +41869,6 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
   </div>
   <div
     class="config-tree config-tree-block-node config-tree-directory"
-    role="tree"
   >
     <div>
       <input
@@ -41840,6 +41893,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
     </div>
     <div
       class="config-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -41851,9 +41905,10 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -41908,7 +41963,6 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
 <div>
   <div
     class="config-tree config-tree-icon-hide"
-    role="tree"
   >
     <div>
       <input
@@ -41933,6 +41987,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
     </div>
     <div
       class="config-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -41944,9 +41999,10 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -41973,7 +42029,6 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
   </div>
   <div
     class="config-tree config-tree-block-node config-tree-directory"
-    role="tree"
   >
     <div>
       <input
@@ -41998,6 +42053,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
     </div>
     <div
       class="config-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -42009,9 +42065,10 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -42066,7 +42123,6 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
 <div>
   <div
     class="config-tree config-tree-icon-hide"
-    role="tree"
   >
     <div>
       <input
@@ -42091,6 +42147,7 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
     </div>
     <div
       class="config-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -42102,9 +42159,10 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -42131,7 +42189,6 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
   </div>
   <div
     class="config-tree config-tree-block-node config-tree-directory"
-    role="tree"
   >
     <div>
       <input
@@ -42156,6 +42213,7 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
     </div>
     <div
       class="config-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -42167,9 +42225,10 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -42224,7 +42283,6 @@ exports[`ConfigProvider components Tree normal 1`] = `
 <div>
   <div
     class="ant-tree ant-tree-icon-hide"
-    role="tree"
   >
     <div>
       <input
@@ -42249,6 +42307,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
     </div>
     <div
       class="ant-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -42260,9 +42319,10 @@ exports[`ConfigProvider components Tree normal 1`] = `
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -42289,7 +42349,6 @@ exports[`ConfigProvider components Tree normal 1`] = `
   </div>
   <div
     class="ant-tree ant-tree-block-node ant-tree-directory"
-    role="tree"
   >
     <div>
       <input
@@ -42314,6 +42373,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
     </div>
     <div
       class="ant-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -42325,9 +42385,10 @@ exports[`ConfigProvider components Tree normal 1`] = `
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -42382,7 +42443,6 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
 <div>
   <div
     class="prefix-Tree prefix-Tree-icon-hide"
-    role="tree"
   >
     <div>
       <input
@@ -42407,6 +42467,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
     </div>
     <div
       class="prefix-Tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -42418,9 +42479,10 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -42447,7 +42509,6 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
   </div>
   <div
     class="prefix-Tree prefix-Tree-block-node prefix-Tree-directory"
-    role="tree"
   >
     <div>
       <input
@@ -42472,6 +42533,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
     </div>
     <div
       class="prefix-Tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -42483,9 +42545,10 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -42585,7 +42648,6 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
         </span>
         <div
           class="config-select-tree config-select-tree-active-focused"
-          role="tree"
         >
           <div>
             <input
@@ -42610,6 +42672,7 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
           </div>
           <div
             class="config-select-tree-list"
+            role="tree"
             style="position: relative;"
           >
             <div
@@ -42622,9 +42685,10 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
                   style="display: flex; flex-direction: column;"
                 >
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -42795,7 +42859,6 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
         </span>
         <div
           class="config-select-tree config-select-tree-active-focused"
-          role="tree"
         >
           <div>
             <input
@@ -42820,6 +42883,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
           </div>
           <div
             class="config-select-tree-list"
+            role="tree"
             style="position: relative;"
           >
             <div
@@ -42832,9 +42896,10 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
                   style="display: flex; flex-direction: column;"
                 >
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -42940,7 +43005,6 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
         </span>
         <div
           class="config-select-tree config-select-tree-active-focused"
-          role="tree"
         >
           <div>
             <input
@@ -42965,6 +43029,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
           </div>
           <div
             class="config-select-tree-list"
+            role="tree"
             style="position: relative;"
           >
             <div
@@ -42977,9 +43042,10 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
                   style="display: flex; flex-direction: column;"
                 >
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -43085,7 +43151,6 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
         </span>
         <div
           class="config-select-tree config-select-tree-active-focused"
-          role="tree"
         >
           <div>
             <input
@@ -43110,6 +43175,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
           </div>
           <div
             class="config-select-tree-list"
+            role="tree"
             style="position: relative;"
           >
             <div
@@ -43122,9 +43188,10 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
                   style="display: flex; flex-direction: column;"
                 >
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -43230,7 +43297,6 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
         </span>
         <div
           class="ant-select-tree ant-select-tree-active-focused"
-          role="tree"
         >
           <div>
             <input
@@ -43255,6 +43321,7 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
           </div>
           <div
             class="ant-select-tree-list"
+            role="tree"
             style="position: relative;"
           >
             <div
@@ -43267,9 +43334,10 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
                   style="display: flex; flex-direction: column;"
                 >
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-active ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -43375,7 +43443,6 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
         </span>
         <div
           class="prefix-TreeSelect-tree prefix-TreeSelect-tree-active-focused"
-          role="tree"
         >
           <div>
             <input
@@ -43400,6 +43467,7 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
           </div>
           <div
             class="prefix-TreeSelect-tree-list"
+            role="tree"
             style="position: relative;"
           >
             <div
@@ -43412,9 +43480,10 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
                   style="display: flex; flex-direction: column;"
                 >
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="prefix-TreeSelect-tree-treenode prefix-TreeSelect-tree-treenode-switcher-close prefix-TreeSelect-tree-treenode-active prefix-TreeSelect-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
diff --git a/components/config-provider/__tests__/theme.test.tsx b/components/config-provider/__tests__/theme.test.tsx
index 11f66c7674..6b71c4f6c8 100644
--- a/components/config-provider/__tests__/theme.test.tsx
+++ b/components/config-provider/__tests__/theme.test.tsx
@@ -39,7 +39,7 @@ describe('ConfigProvider.Theme', () => {
       );
       expect(themeStyle).toBeTruthy();
 
-      expect(themeStyle?.innerHTML).toContain(`--bamboo-${kebabCase(colorName)}: rgb(0, 0, 255)`);
+      expect(themeStyle?.innerHTML).toContain(`--bamboo-${kebabCase(colorName)}: rgb(0,0,255)`);
     });
   });
 
@@ -234,7 +234,7 @@ describe('ConfigProvider.Theme', () => {
 
       expect(button).toHaveClass('foo');
       expect(button).toHaveStyle({
-        '--ant-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--ant-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--ant-button-default-shadow)',
         'border-radius': 'var(--ant-border-radius)',
       });
@@ -257,14 +257,14 @@ describe('ConfigProvider.Theme', () => {
 
       expect(fooBtn).toHaveClass('foo');
       expect(fooBtn).toHaveStyle({
-        '--ant-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--ant-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--ant-button-default-shadow)',
         'border-radius': 'var(--ant-border-radius)',
       });
 
       expect(barBtn).toHaveClass('bar');
       expect(barBtn).toHaveStyle({
-        '--bar-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--bar-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--bar-button-default-shadow)',
         'border-radius': 'var(--bar-border-radius)',
       });
@@ -298,7 +298,7 @@ describe('ConfigProvider.Theme', () => {
       const fooBtn = container.querySelector('.button-foo')!;
       expect(fooBtn).toHaveClass('foo');
       expect(fooBtn).toHaveStyle({
-        '--foo-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--foo-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--foo-button-default-shadow)',
         'border-radius': 'var(--foo-border-radius)',
       });
@@ -306,7 +306,7 @@ describe('ConfigProvider.Theme', () => {
       const barBtn = container.querySelector('.button-bar')!;
       expect(barBtn).toHaveClass('bar');
       expect(barBtn).toHaveStyle({
-        '--bar-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--bar-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--bar-button-default-shadow)',
         'border-radius': 'var(--bar-border-radius)',
       });
@@ -314,7 +314,7 @@ describe('ConfigProvider.Theme', () => {
       const bananaBtn = container.querySelector('.button-banana')!;
       expect(bananaBtn).toHaveClass('banana');
       expect(bananaBtn).toHaveStyle({
-        '--banana-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--banana-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--banana-button-default-shadow)',
         'border-radius': 'var(--banana-border-radius)',
       });
@@ -322,7 +322,7 @@ describe('ConfigProvider.Theme', () => {
       const catBtn = container.querySelector('.button-cat')!;
       expect(catBtn).toHaveClass('apple');
       expect(catBtn).toHaveStyle({
-        '--cat-color-text': 'rgba(0, 0, 0, 0.88)',
+        '--cat-color-text': 'rgba(0,0,0,0.88)',
         boxShadow: 'var(--cat-button-default-shadow)',
         'border-radius': 'var(--cat-border-radius)',
       });
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index cf94182c1a..e5e8b5aeeb 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -34,6 +34,12 @@ import type { TourProps } from '../tour/interface';
 import type { TransferProps } from '../transfer';
 import type { TreeSelectProps } from '../tree-select';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
+import type { TooltipProps } from '../tooltip';
+import type { PopoverProps } from '../popover';
+import type { PopconfirmProps } from '../popconfirm';
+import type { DescriptionsProps } from '../descriptions';
+import type { SliderProps } from '../slider';
+import type { EmptyProps } from '../empty';
 
 export const defaultPrefixCls = 'ant';
 export const defaultIconPrefixCls = 'anticon';
@@ -133,6 +139,11 @@ export type MenuConfig = ComponentStyleConfig & Pick<MenuProps, 'expandIcon'>;
 
 export type TourConfig = Pick<TourProps, 'closeIcon'>;
 
+export type DescriptionsConfig = ComponentStyleConfig &
+  Pick<DescriptionsProps, 'classNames' | 'styles'>;
+
+export type EmptyConfig = ComponentStyleConfig & Pick<EmptyProps, 'classNames' | 'styles'>;
+
 export type ModalConfig = ComponentStyleConfig &
   Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon' | 'closable'>;
 
@@ -176,6 +187,17 @@ export type SelectConfig = ComponentStyleConfig & Pick<SelectProps, 'showSearch'
 
 export type SpaceConfig = ComponentStyleConfig & Pick<SpaceProps, 'size' | 'classNames' | 'styles'>;
 
+export type TooltipConfig = Pick<TooltipProps, 'className' | 'style' | 'styles' | 'classNames'>;
+
+export type PopoverConfig = Pick<PopoverProps, 'className' | 'style' | 'styles' | 'classNames'>;
+
+export type PopconfirmConfig = Pick<
+  PopconfirmProps,
+  'className' | 'style' | 'styles' | 'classNames'
+>;
+
+export type SliderConfig = ComponentStyleConfig & Pick<SliderProps, 'styles' | 'classNames'>;
+
 export type SpinConfig = ComponentStyleConfig & Pick<SpinProps, 'indicator'>;
 
 export type InputNumberConfig = ComponentStyleConfig & Pick<InputNumberProps, 'variant'>;
@@ -269,12 +291,12 @@ export interface ConfigConsumerProps {
   modal?: ModalConfig;
   progress?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
-  slider?: ComponentStyleConfig;
+  slider?: SliderConfig;
   breadcrumb?: ComponentStyleConfig;
   menu?: MenuConfig;
   checkbox?: ComponentStyleConfig;
-  descriptions?: ComponentStyleConfig;
-  empty?: ComponentStyleConfig;
+  descriptions?: DescriptionsConfig;
+  empty?: EmptyConfig;
   badge?: BadgeConfig;
   radio?: ComponentStyleConfig;
   rate?: ComponentStyleConfig;
@@ -289,6 +311,9 @@ export interface ConfigConsumerProps {
   timeline?: ComponentStyleConfig;
   timePicker?: TimePickerConfig;
   tour?: TourConfig;
+  tooltip?: TooltipConfig;
+  popover?: PopoverConfig;
+  popconfirm?: PopconfirmConfig;
   upload?: ComponentStyleConfig;
   notification?: NotificationConfig;
   tree?: ComponentStyleConfig;
diff --git a/components/config-provider/cssVariables.ts b/components/config-provider/cssVariables.ts
index d897310ba3..90d89177c5 100644
--- a/components/config-provider/cssVariables.ts
+++ b/components/config-provider/cssVariables.ts
@@ -1,5 +1,5 @@
 import { generate } from '@ant-design/colors';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 
@@ -11,21 +11,21 @@ const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
 export function getStyle(globalPrefixCls: string, theme: Theme) {
   const variables: Record<string, string> = {};
 
-  const formatColor = (color: TinyColor, updater?: (cloneColor: TinyColor) => TinyColor) => {
+  const formatColor = (color: FastColor, updater?: (cloneColor: FastColor) => FastColor) => {
     let clone = color.clone();
     clone = updater?.(clone) || clone;
     return clone.toRgbString();
   };
 
   const fillColor = (colorVal: string, type: string) => {
-    const baseColor = new TinyColor(colorVal);
+    const baseColor = new FastColor(colorVal);
     const colorPalettes = generate(baseColor.toRgbString());
 
     variables[`${type}-color`] = formatColor(baseColor);
     variables[`${type}-color-disabled`] = colorPalettes[1];
     variables[`${type}-color-hover`] = colorPalettes[4];
     variables[`${type}-color-active`] = colorPalettes[6];
-    variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString();
+    variables[`${type}-color-outline`] = baseColor.clone().setA(0.2).toRgbString();
     variables[`${type}-color-deprecated-bg`] = colorPalettes[0];
     variables[`${type}-color-deprecated-border`] = colorPalettes[2];
   };
@@ -34,7 +34,7 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
   if (theme.primaryColor) {
     fillColor(theme.primaryColor, 'primary');
 
-    const primaryColor = new TinyColor(theme.primaryColor);
+    const primaryColor = new FastColor(theme.primaryColor);
     const primaryColors = generate(primaryColor.toRgbString());
 
     // Legacy - We should use semantic naming standard
@@ -47,12 +47,12 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
     variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, (c) => c.tint(20));
     variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, (c) => c.tint(50));
     variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, (c) =>
-      c.setAlpha(c.getAlpha() * 0.12),
+      c.setA(c.a * 0.12),
     );
 
-    const primaryActiveColor = new TinyColor(primaryColors[0]);
+    const primaryActiveColor = new FastColor(primaryColors[0]);
     variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, (c) =>
-      c.setAlpha(c.getAlpha() * 0.3),
+      c.setA(c.a * 0.3),
     );
     variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, (c) =>
       c.darken(2),
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 1d091e8323..b2d4ef88ee 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -123,11 +123,11 @@ const {
 | colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | datePicker | Set datePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | rangePicker | Set rangePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
-| descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties, classNames?: [DescriptionsProps\["classNames"\]](/components/descriptions#api), styles?: [DescriptionsProps\["styles"\]](/components/descriptions#api) } | - | 5.7.0, `classNames` and `styles`: 5.23.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer#api), styles?: [DrawerProps\["styles"\]](/components/drawer#api), closeIcon?: ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 |
 | dropdown | Set Dropdown common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
-| empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| empty | Set Empty common props | { className?: string, style?: React.CSSProperties, classNames?: [EmptyProps\["classNames"\]](/components/empty#api), styles?: [EmptyProps\["styles"\]](/components/empty#api) } | - | 5.7.0, `classNames` and `styles`: 5.23.0 |
 | flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | floatButtonGroup | Set FloatButton.Group common props | { closeIcon?: React.ReactNode } | - | 5.16.0 |
 | form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
@@ -149,7 +149,7 @@ const {
 | skeleton | Set Skeleton common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
-| slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| slider | Set Slider common props | { className?: string, style?: React.CSSProperties, classNames?: [SliderProps\["classNames"\]](/components/slider#api), styles?: [SliderProps\["styles"\]](/components/slider#api) } | - | 5.7.0, `classNames` and `styles`: 5.23.0 |
 | switch | Set Switch common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space#api), styles?: [SpaceProps\["styles"\]](/components/space#api) } | - | 5.6.0 |
 | splitter | Set Splitter common props | { className?: string, style?: React.CSSProperties } | - | 5.21.0 |
@@ -162,6 +162,9 @@ const {
 | timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tour | Set Tour common props | { closeIcon?: React.ReactNode } | - | 5.14.0 |
+| tooltip | Set Tooltip common props | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip#api), styles?: [Tooltip\["styles"\]](/components/tooltip#api) } | - | 5.23.0 |
+| popover | Set Popover common props | { className?: string, style?: React.CSSProperties, classNames?:[Popover\["classNames"\]](/components/popover#api), styles?: [Popover\["styles"\]](/components/popover#api) } | - | 5.23.0 |
+| popconfirm | Set Popconfirm common props | { className?: string, style?: React.CSSProperties, classNames?:[Popconfirm\["classNames"\]](/components/popconfirm#api), styles?: [Popconfirm\["styles"\]](/components/popconfirm#api) } | - | 5.23.0 |
 | transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 |
 | tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 3014bffc80..b5d1d87b17 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -51,11 +51,15 @@ import type {
   Theme,
   ThemeConfig,
   TimePickerConfig,
+  TooltipConfig,
+  PopoverConfig,
+  PopconfirmConfig,
   TourConfig,
   TransferConfig,
   TreeSelectConfig,
   Variant,
   WaveConfig,
+  EmptyConfig,
 } from './context';
 import {
   ConfigConsumer,
@@ -208,7 +212,7 @@ export interface ConfigProviderProps {
   floatButtonGroup?: FloatButtonGroupConfig;
   checkbox?: ComponentStyleConfig;
   descriptions?: ComponentStyleConfig;
-  empty?: ComponentStyleConfig;
+  empty?: EmptyConfig;
   badge?: BadgeConfig;
   radio?: ComponentStyleConfig;
   rate?: ComponentStyleConfig;
@@ -235,6 +239,9 @@ export interface ConfigProviderProps {
    */
   wave?: WaveConfig;
   tour?: TourConfig;
+  tooltip?: TooltipConfig;
+  popover?: PopoverConfig;
+  popconfirm?: PopconfirmConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -389,6 +396,9 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     dropdown,
     warning: warningConfig,
     tour,
+    tooltip,
+    popover,
+    popconfirm,
     floatButtonGroup,
     variant,
     inputNumber,
@@ -489,6 +499,9 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     dropdown,
     warning: warningConfig,
     tour,
+    tooltip,
+    popover,
+    popconfirm,
     floatButtonGroup,
     variant,
     inputNumber,
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index 79b001f361..f0ac8f4ff8 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -125,11 +125,11 @@ const {
 | colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | datePicker | 设置 DatePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | rangePicker | 设置 RangePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
-| descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DescriptionsProps\["classNames"\]](/components/descriptions-cn#api), styles?: [DescriptionsProps\["styles"\]](/components/descriptions-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.23.0 |
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api), closeIcon?: ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0, `closeIcon`: 5.14.0 |
 | dropdown | 设置 Dropdown 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
-| empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[EmptyProps\["classNames"\]](/components/empty-cn#api), styles?: [EmptyProps\["styles"\]](/components/empty-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.23.0 |
 | flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | floatButtonGroup | 设置 FloatButton.Group 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.16.0 |
 | form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
@@ -151,7 +151,7 @@ const {
 | skeleton | 设置 Skeleton 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
-| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [SliderProps\["classNames"\]](/components/slider-cn#api), styles?: [SliderProps\["styles"\]](/components/slider-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.23.0 |
 | switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space-cn#api), styles?: [SpaceProps\["styles"\]](/components/space-cn#api) } | - | 5.6.0 |
 | splitter | 设置 Splitter 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.21.0 |
@@ -164,6 +164,9 @@ const {
 | timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tour | 设置 Tour 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.14.0 |
+| tooltip | 设置 Tooltip 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip-cn#api), styles?: [Tooltip\["styles"\]](/components/tooltip-cn#api) } | - | 5.23.0 |
+| popover | 设置 Popover 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[Popover\["classNames"\]](/components/popover-cn#api), styles?: [Popover\["styles"\]](/components/popover-cn#api) } | - | 5.23.0 |
+| popconfirm | 设置 Popconfirm 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[Popconfirm\["classNames"\]](/components/popconfirm-cn#api), styles?: [Popconfirm\["styles"\]](/components/popconfirm-cn#api) } | - | 5.23.0 |
 | transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 |
 | tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index 6f21c900a0..40a3a804af 100644
--- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -47230,6 +47230,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topLeft"
         />
@@ -47249,6 +47250,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topRight"
         />
@@ -47268,6 +47270,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomLeft"
         />
@@ -47287,6 +47290,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomRight"
         />
@@ -61481,6 +61485,7 @@ exports[`renders components/date-picker/demo/size.tsx extend context correctly 1
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="large"
           />
@@ -61501,6 +61506,7 @@ exports[`renders components/date-picker/demo/size.tsx extend context correctly 1
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="middle"
           />
@@ -61520,6 +61526,7 @@ exports[`renders components/date-picker/demo/size.tsx extend context correctly 1
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="small"
           />
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap b/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap
index 86a8a6ef6b..4598e02c0b 100644
--- a/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap
@@ -4782,6 +4782,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topLeft"
         />
@@ -4801,6 +4802,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topRight"
         />
@@ -4820,6 +4822,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomLeft"
         />
@@ -4839,6 +4842,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomRight"
         />
@@ -5999,6 +6003,7 @@ exports[`renders components/date-picker/demo/size.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="large"
           />
@@ -6019,6 +6024,7 @@ exports[`renders components/date-picker/demo/size.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="middle"
           />
@@ -6038,6 +6044,7 @@ exports[`renders components/date-picker/demo/size.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="small"
           />
diff --git a/components/date-picker/style/panel.ts b/components/date-picker/style/panel.ts
index 1c7f802de4..30c90ede05 100644
--- a/components/date-picker/style/panel.ts
+++ b/components/date-picker/style/panel.ts
@@ -1,6 +1,6 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import type { GenerateStyle } from '../../theme/internal';
 import type { PickerToken, SharedPickerToken } from './token';
@@ -477,7 +477,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
               },
 
               [`&${componentCls}-cell-week`]: {
-                color: new TinyColor(colorTextLightSolid).setAlpha(0.5).toHexString(),
+                color: new FastColor(colorTextLightSolid).setA(0.5).toHexString(),
               },
 
               [pickerCellInnerCls]: {
@@ -578,7 +578,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           },
 
           '&-active': {
-            background: new TinyColor(controlItemBgActive).setAlpha(0.2).toHexString(),
+            background: new FastColor(controlItemBgActive).setA(0.2).toHexString(),
           },
 
           '&:hover': {
diff --git a/components/date-picker/style/token.ts b/components/date-picker/style/token.ts
index 44cb3cee05..38a211886a 100644
--- a/components/date-picker/style/token.ts
+++ b/components/date-picker/style/token.ts
@@ -1,4 +1,4 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
 import { initComponentToken } from '../../input/style/token';
@@ -6,9 +6,9 @@ import type { MultipleSelectorToken, SelectorToken } from '../../select/style/to
 import type { ArrowToken } from '../../style/roundedArrow';
 import { getArrowToken } from '../../style/roundedArrow';
 import type {
-  GlobalToken,
   FullToken,
   GetDefaultToken,
+  GlobalToken,
   TokenWithCommonCls,
 } from '../../theme/internal';
 
@@ -175,8 +175,8 @@ export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken
     INTERNAL_FIXED_ITEM_MARGIN,
     cellHoverBg: token.controlItemBgHover,
     cellActiveWithRangeBg: token.controlItemBgActive,
-    cellHoverWithRangeBg: new TinyColor(token.colorPrimary).lighten(35).toHexString(),
-    cellRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toHexString(),
+    cellHoverWithRangeBg: new FastColor(token.colorPrimary).lighten(35).toHexString(),
+    cellRangeBorderColor: new FastColor(token.colorPrimary).lighten(20).toHexString(),
     cellBgDisabled: colorBgContainerDisabled,
     timeColumnWidth: controlHeightLG * 1.4,
     timeColumnHeight: 28 * 8,
diff --git a/components/descriptions/Cell.tsx b/components/descriptions/Cell.tsx
index cc530a2152..400809f1bb 100644
--- a/components/descriptions/Cell.tsx
+++ b/components/descriptions/Cell.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { JSX } from 'react';
 import classNames from 'classnames';
+import DescriptionsContext from './DescriptionsContext';
 
 function notEmpty(val: any) {
   return val !== undefined && val !== null;
@@ -12,8 +13,18 @@ export interface CellProps {
   className?: string;
   component: string;
   style?: React.CSSProperties;
+  /** @deprecated Please use `styles={{ label: {} }}` instead */
   labelStyle?: React.CSSProperties;
+  /** @deprecated Please use `styles={{ content: {} }}` instead */
   contentStyle?: React.CSSProperties;
+  styles?: {
+    label?: React.CSSProperties;
+    content?: React.CSSProperties;
+  };
+  classNames?: {
+    label?: string;
+    content?: string;
+  };
   bordered?: boolean;
   label?: React.ReactNode;
   content?: React.ReactNode;
@@ -35,9 +46,12 @@ const Cell: React.FC<CellProps> = (props) => {
     content,
     colon,
     type,
+    styles,
   } = props;
 
   const Component = component as keyof JSX.IntrinsicElements;
+  const descContext = React.useContext(DescriptionsContext);
+  const { classNames: descriptionsClassNames } = descContext;
 
   if (bordered) {
     return (
@@ -46,14 +60,16 @@ const Cell: React.FC<CellProps> = (props) => {
           {
             [`${itemPrefixCls}-item-label`]: type === 'label',
             [`${itemPrefixCls}-item-content`]: type === 'content',
+            [`${descriptionsClassNames?.label}`]: type === 'label',
+            [`${descriptionsClassNames?.content}`]: type === 'content',
           },
           className,
         )}
         style={style}
         colSpan={span}
       >
-        {notEmpty(label) && <span style={labelStyle}>{label}</span>}
-        {notEmpty(content) && <span style={contentStyle}>{content}</span>}
+        {notEmpty(label) && <span style={{ ...labelStyle, ...styles?.label }}>{label}</span>}
+        {notEmpty(content) && <span style={{ ...labelStyle, ...styles?.content }}>{content}</span>}
       </Component>
     );
   }
@@ -67,16 +83,19 @@ const Cell: React.FC<CellProps> = (props) => {
       <div className={`${itemPrefixCls}-item-container`}>
         {(label || label === 0) && (
           <span
-            className={classNames(`${itemPrefixCls}-item-label`, {
+            className={classNames(`${itemPrefixCls}-item-label`, descriptionsClassNames?.label, {
               [`${itemPrefixCls}-item-no-colon`]: !colon,
             })}
-            style={labelStyle}
+            style={{ ...labelStyle, ...styles?.label }}
           >
             {label}
           </span>
         )}
         {(content || content === 0) && (
-          <span className={classNames(`${itemPrefixCls}-item-content`)} style={contentStyle}>
+          <span
+            className={classNames(`${itemPrefixCls}-item-content`, descriptionsClassNames?.content)}
+            style={{ ...contentStyle, ...styles?.content }}
+          >
             {content}
           </span>
         )}
diff --git a/components/descriptions/DescriptionsContext.ts b/components/descriptions/DescriptionsContext.ts
index fdff05b6be..7505daa837 100644
--- a/components/descriptions/DescriptionsContext.ts
+++ b/components/descriptions/DescriptionsContext.ts
@@ -1,8 +1,18 @@
 import React from 'react';
 
 export interface DescriptionsContextProps {
+  /** @deprecated Please use `styles={{ label: {} }}` instead */
   labelStyle?: React.CSSProperties;
+  /** @deprecated Please use `styles={{ content: {} }}` instead */
   contentStyle?: React.CSSProperties;
+  styles?: {
+    label?: React.CSSProperties;
+    content?: React.CSSProperties;
+  };
+  classNames?: {
+    label?: string;
+    content?: string;
+  };
 }
 
 const DescriptionsContext = React.createContext<DescriptionsContextProps>({});
diff --git a/components/descriptions/Item.ts b/components/descriptions/Item.ts
index 588be334aa..659d809fc1 100644
--- a/components/descriptions/Item.ts
+++ b/components/descriptions/Item.ts
@@ -5,8 +5,18 @@ export interface DescriptionsItemProps {
   className?: string;
   style?: React.CSSProperties;
   label?: React.ReactNode;
+  /** @deprecated Please use `styles={{ label: {} }}` instead */
   labelStyle?: React.CSSProperties;
+  /** @deprecated Please use `styles={{ content: {} }}` instead */
   contentStyle?: React.CSSProperties;
+  styles?: {
+    label?: React.CSSProperties;
+    content?: React.CSSProperties;
+  };
+  classNames?: {
+    label?: string;
+    content?: string;
+  };
   children: React.ReactNode;
   span?: number;
 }
diff --git a/components/descriptions/Row.tsx b/components/descriptions/Row.tsx
index a181ba5286..f9311902d1 100644
--- a/components/descriptions/Row.tsx
+++ b/components/descriptions/Row.tsx
@@ -22,6 +22,7 @@ function renderCells(
     showContent,
     labelStyle: rootLabelStyle,
     contentStyle: rootContentStyle,
+    styles: rootStyles,
   }: CellConfig & DescriptionsContextProps,
 ) {
   return items.map(
@@ -36,6 +37,7 @@ function renderCells(
         contentStyle,
         span = 1,
         key,
+        styles,
       },
       index,
     ) => {
@@ -45,8 +47,20 @@ function renderCells(
             key={`${type}-${key || index}`}
             className={className}
             style={style}
-            labelStyle={{ ...rootLabelStyle, ...labelStyle }}
-            contentStyle={{ ...rootContentStyle, ...contentStyle }}
+            styles={{
+              label: {
+                ...rootLabelStyle,
+                ...rootStyles?.label,
+                ...labelStyle,
+                ...styles?.label,
+              },
+              content: {
+                ...rootContentStyle,
+                ...rootStyles?.content,
+                ...contentStyle,
+                ...styles?.content,
+              },
+            }}
             span={span}
             colon={colon}
             component={component}
@@ -63,7 +77,13 @@ function renderCells(
         <Cell
           key={`label-${key || index}`}
           className={className}
-          style={{ ...rootLabelStyle, ...style, ...labelStyle }}
+          style={{
+            ...rootLabelStyle,
+            ...rootStyles?.label,
+            ...style,
+            ...labelStyle,
+            ...styles?.label,
+          }}
           span={1}
           colon={colon}
           component={component[0]}
@@ -75,7 +95,13 @@ function renderCells(
         <Cell
           key={`content-${key || index}`}
           className={className}
-          style={{ ...rootContentStyle, ...style, ...contentStyle }}
+          style={{
+            ...rootContentStyle,
+            ...rootStyles?.content,
+            ...style,
+            ...contentStyle,
+            ...styles?.content,
+          }}
           span={span * 2 - 1}
           component={component[1]}
           itemPrefixCls={itemPrefixCls}
diff --git a/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap
index f9d0138ec4..bf73b04f5e 100644
--- a/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -513,6 +513,7 @@ exports[`renders components/descriptions/demo/component-token.tsx extend context
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="default"
         />
@@ -532,6 +533,7 @@ exports[`renders components/descriptions/demo/component-token.tsx extend context
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -551,6 +553,7 @@ exports[`renders components/descriptions/demo/component-token.tsx extend context
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -1604,6 +1607,7 @@ exports[`renders components/descriptions/demo/size.tsx extend context correctly
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="default"
         />
@@ -1623,6 +1627,7 @@ exports[`renders components/descriptions/demo/size.tsx extend context correctly
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -1642,6 +1647,7 @@ exports[`renders components/descriptions/demo/size.tsx extend context correctly
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -2060,6 +2066,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="horizontal"
         />
@@ -2079,6 +2086,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="vertical"
         />
diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap b/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap
index 2789a29bdc..fbdedee93b 100644
--- a/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap
@@ -467,6 +467,7 @@ exports[`renders components/descriptions/demo/component-token.tsx correctly 1`]
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="default"
         />
@@ -486,6 +487,7 @@ exports[`renders components/descriptions/demo/component-token.tsx correctly 1`]
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -505,6 +507,7 @@ exports[`renders components/descriptions/demo/component-token.tsx correctly 1`]
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -1486,6 +1489,7 @@ exports[`renders components/descriptions/demo/size.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="default"
         />
@@ -1505,6 +1509,7 @@ exports[`renders components/descriptions/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -1524,6 +1529,7 @@ exports[`renders components/descriptions/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -1908,6 +1914,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="horizontal"
         />
@@ -1927,6 +1934,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="vertical"
         />
diff --git a/components/descriptions/__tests__/index.test.tsx b/components/descriptions/__tests__/index.test.tsx
index 5cc45f49d5..d982c912e6 100644
--- a/components/descriptions/__tests__/index.test.tsx
+++ b/components/descriptions/__tests__/index.test.tsx
@@ -415,4 +415,83 @@ describe('Descriptions', () => {
     expect(wrapper.container.querySelectorAll('.ant-descriptions-item-label')).toHaveLength(1);
     expect(wrapper.container.querySelectorAll('.ant-descriptions-item-content')).toHaveLength(1);
   });
+
+  it('should apply custom styles to Descriptions', () => {
+    const customClassNames = {
+      root: 'custom-root',
+      header: 'custom-header',
+      title: 'custom-title',
+      extra: 'custom-extra',
+      label: 'custom-label',
+      content: 'custom-content',
+    };
+
+    const customStyles = {
+      root: { backgroundColor: 'red' },
+      header: { backgroundColor: 'black' },
+      title: { backgroundColor: 'yellow' },
+      extra: { backgroundColor: 'purple' },
+      label: { backgroundColor: 'blue' },
+      content: { backgroundColor: 'green' },
+    };
+
+    const { container } = render(
+      <Descriptions
+        classNames={customClassNames}
+        styles={customStyles}
+        extra={'extra'}
+        title="User Info"
+        items={[
+          {
+            key: '1',
+            label: 'UserName',
+            children: '1',
+          },
+          {
+            key: '2',
+            label: 'UserName',
+            children: '2',
+            styles: {
+              content: { color: 'yellow' },
+              label: { color: 'orange' },
+            },
+          },
+        ]}
+      />,
+    );
+
+    const rootElement = container.querySelector('.ant-descriptions') as HTMLElement;
+    const headerElement = container.querySelector('.ant-descriptions-header') as HTMLElement;
+    const titleElement = container.querySelector('.ant-descriptions-title') as HTMLElement;
+    const extraElement = container.querySelector('.ant-descriptions-extra') as HTMLElement;
+    const labelElement = container.querySelector('.ant-descriptions-item-label') as HTMLElement;
+    const contentElement = container.querySelector('.ant-descriptions-item-content') as HTMLElement;
+    const labelElements = container.querySelectorAll(
+      '.ant-descriptions-item-label',
+    ) as NodeListOf<HTMLElement>;
+    const contentElements = container.querySelectorAll(
+      '.ant-descriptions-item-content',
+    ) as NodeListOf<HTMLElement>;
+
+    // check classNames
+    expect(rootElement.classList).toContain('custom-root');
+    expect(headerElement.classList).toContain('custom-header');
+    expect(titleElement.classList).toContain('custom-title');
+    expect(extraElement.classList).toContain('custom-extra');
+    expect(labelElement.classList).toContain('custom-label');
+    expect(contentElement.classList).toContain('custom-content');
+
+    // check styles
+    expect(rootElement.style.backgroundColor).toBe('red');
+    expect(headerElement.style.backgroundColor).toBe('black');
+    expect(titleElement.style.backgroundColor).toBe('yellow');
+    expect(extraElement.style.backgroundColor).toBe('purple');
+    expect(labelElement.style.backgroundColor).toBe('blue');
+    expect(contentElement.style.backgroundColor).toBe('green');
+
+    expect(labelElements[1].style.color).toBe('orange');
+    expect(contentElements[1].style.color).toBe('yellow');
+    expect(labelElements[0].style.color).not.toBe('orange');
+    expect(contentElements[0].style.color).not.toBe('yellow');
+  });
 });
diff --git a/components/descriptions/demo/_semantic.tsx b/components/descriptions/demo/_semantic.tsx
new file mode 100644
index 0000000000..444071b70b
--- /dev/null
+++ b/components/descriptions/demo/_semantic.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Button, Descriptions, DescriptionsProps, Divider, Switch } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    root: '根节点',
+    header: '头部元素',
+    title: '标题元素',
+    extra: '额外内容',
+    label: '标签元素',
+    content: '内容元素',
+  },
+  en: {
+    root: 'root element',
+    header: 'header element',
+    title: 'title element',
+    extra: 'extra element',
+    label: 'label element',
+    content: 'content element',
+  },
+};
+
+const items: DescriptionsProps['items'] = [
+  {
+    key: '1',
+    label: 'Telephone',
+    children: '1810000000',
+  },
+];
+
+const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+  const divRef = React.useRef<HTMLDivElement>(null);
+  const [bordered, setBordered] = React.useState(false);
+
+  const handleBorderChange = (checked: boolean) => {
+    setBordered(checked);
+  };
+
+  return (
+    <div ref={divRef} style={{ width: '100%', height: '100%' }}>
+      <Switch checked={bordered} onChange={handleBorderChange} /> Toggle Border
+      <Divider />
+      <Descriptions
+        title="User Info"
+        items={items}
+        extra={<Button type="primary">Edit</Button>}
+        bordered={bordered}
+        {...props}
+      />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      semantics={[
+        { name: 'root', desc: locale.root, version: '5.23.0' },
+        { name: 'header', desc: locale.header, version: '5.23.0' },
+        { name: 'title', desc: locale.title, version: '5.23.0' },
+        { name: 'extra', desc: locale.extra, version: '5.23.0' },
+        { name: 'label', desc: locale.label, version: '5.23.0' },
+        { name: 'content', desc: locale.content, version: '5.23.0' },
+      ]}
+    >
+      <BlockList />
+    </SemanticPreview>
+  );
+};
+
+export default App;
diff --git a/components/descriptions/demo/style.tsx b/components/descriptions/demo/style.tsx
index ee1d0fd9ce..14b67eda82 100644
--- a/components/descriptions/demo/style.tsx
+++ b/components/descriptions/demo/style.tsx
@@ -12,8 +12,10 @@ const items: DescriptionsProps['items'] = [
     key: '1',
     label: 'Product',
     children: 'Cloud Database',
-    labelStyle,
-    contentStyle,
+    styles: {
+      label: labelStyle,
+      content: contentStyle,
+    },
   },
   {
     key: '2',
@@ -42,8 +44,10 @@ const rootStyleItems: DescriptionsProps['items'] = [
     key: '3',
     label: 'Automatic Renewal',
     children: 'YES',
-    labelStyle: { color: 'orange' },
-    contentStyle: { color: 'blue' },
+    styles: {
+      label: { color: 'orange' },
+      content: { color: 'blue' },
+    },
   },
 ];
 
@@ -69,8 +73,10 @@ const App: React.FC = () => {
       <Divider />
       <Descriptions
         title="Root style"
-        labelStyle={labelStyle}
-        contentStyle={contentStyle}
+        styles={{
+          label: labelStyle,
+          content: contentStyle,
+        }}
         bordered={border}
         layout={layout}
         items={rootStyleItems}
diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md
index c8d28b6e38..9585585061 100644
--- a/components/descriptions/index.en-US.md
+++ b/components/descriptions/index.en-US.md
@@ -103,6 +103,10 @@ Common props ref：[Common props](/docs/react/common-props)
 
 > The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both `style` and `labelStyle`(or `contentStyle`) configured, both of them will work. And next one will overwrite first when conflict.
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## Design Token
 
 <ComponentTokenTable component="Descriptions"></ComponentTokenTable>
diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
index 72b941415d..28a6378742 100644
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import type { Breakpoint } from '../_util/responsiveObserver';
 import { matchScreen } from '../_util/responsiveObserver';
+import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import useSize from '../config-provider/hooks/useSize';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
@@ -48,6 +49,22 @@ export interface DescriptionsProps {
   colon?: boolean;
   labelStyle?: React.CSSProperties;
   contentStyle?: React.CSSProperties;
+  styles?: {
+    root?: React.CSSProperties;
+    header?: React.CSSProperties;
+    title?: React.CSSProperties;
+    extra?: React.CSSProperties;
+    label?: React.CSSProperties;
+    content?: React.CSSProperties;
+  };
+  classNames?: {
+    root?: string;
+    header?: string;
+    title?: string;
+    extra?: string;
+    label?: string;
+    content?: string;
+  };
   items?: DescriptionsItemType[];
   id?: string;
 }
@@ -68,13 +85,25 @@ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props)
     size: customizeSize,
     labelStyle,
     contentStyle,
+    styles,
     items,
+    classNames: descriptionsClassNames,
     ...restProps
   } = props;
   const { getPrefixCls, direction, descriptions } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
   const screens = useBreakpoint();
 
+  // ============================== Warn ==============================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Descriptions');
+    [
+      ['labelStyle', 'styles={{ label: {} }}'],
+      ['contentStyle', 'styles={{ content: {} }}'],
+    ].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
+  }
   // Column count
   const mergedColumn = React.useMemo(() => {
     if (typeof column === 'number') {
@@ -99,8 +128,19 @@ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props)
 
   // ======================== Render ========================
   const contextValue = React.useMemo(
-    () => ({ labelStyle, contentStyle }),
-    [labelStyle, contentStyle],
+    () => ({
+      labelStyle,
+      contentStyle,
+      styles: {
+        content: { ...descriptions?.styles?.content, ...styles?.content },
+        label: { ...descriptions?.styles?.label, ...styles?.label },
+      },
+      classNames: {
+        label: classNames(descriptions?.classNames?.label, descriptionsClassNames?.label),
+        content: classNames(descriptions?.classNames?.content, descriptionsClassNames?.content),
+      },
+    }),
+    [labelStyle, contentStyle, styles, descriptionsClassNames, descriptions],
   );
 
   return wrapCSSVar(
@@ -109,6 +149,8 @@ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props)
         className={classNames(
           prefixCls,
           descriptions?.className,
+          descriptions?.classNames?.root,
+          descriptionsClassNames?.root,
           {
             [`${prefixCls}-${mergedSize}`]: mergedSize && mergedSize !== 'default',
             [`${prefixCls}-bordered`]: !!bordered,
@@ -119,13 +161,45 @@ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props)
           hashId,
           cssVarCls,
         )}
-        style={{ ...descriptions?.style, ...style }}
+        style={{ ...descriptions?.style, ...descriptions?.styles?.root, ...styles?.root, ...style }}
         {...restProps}
       >
         {(title || extra) && (
-          <div className={`${prefixCls}-header`}>
-            {title && <div className={`${prefixCls}-title`}>{title}</div>}
-            {extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
+          <div
+            className={classNames(
+              `${prefixCls}-header`,
+              descriptions?.classNames?.header,
+              descriptionsClassNames?.header,
+            )}
+            style={{ ...descriptions?.styles?.header, ...styles?.header }}
+          >
+            {title && (
+              <div
+                className={classNames(
+                  `${prefixCls}-title`,
+                  descriptions?.classNames?.title,
+                  descriptionsClassNames?.title,
+                )}
+                style={{
+                  ...descriptions?.styles?.title,
+                  ...styles?.title,
+                }}
+              >
+                {title}
+              </div>
+            )}
+            {extra && (
+              <div
+                className={classNames(
+                  `${prefixCls}-extra`,
+                  descriptions?.classNames?.extra,
+                  descriptionsClassNames?.extra,
+                )}
+                style={{ ...descriptions?.styles?.extra, ...styles?.extra }}
+              >
+                {extra}
+              </div>
+            )}
           </div>
         )}
 
diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md
index 68d37c6496..8f05519a9a 100644
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@@ -104,6 +104,10 @@ const items: DescriptionsProps['items'] = [
 
 > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Descriptions"></ComponentTokenTable>
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index 8db6c7b085..684c3af207 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -500,6 +500,7 @@ Array [
           >
             <input
               class="ant-radio-input"
+              name="test-id"
               type="radio"
               value="top"
             />
@@ -520,6 +521,7 @@ Array [
             <input
               checked=""
               class="ant-radio-input"
+              name="test-id"
               type="radio"
               value="right"
             />
@@ -539,6 +541,7 @@ Array [
           >
             <input
               class="ant-radio-input"
+              name="test-id"
               type="radio"
               value="bottom"
             />
@@ -558,6 +561,7 @@ Array [
           >
             <input
               class="ant-radio-input"
+              name="test-id"
               type="radio"
               value="left"
             />
@@ -3150,6 +3154,7 @@ Array [
           >
             <input
               class="ant-radio-input"
+              name="test-id"
               type="radio"
               value="top"
             />
@@ -3169,6 +3174,7 @@ Array [
           >
             <input
               class="ant-radio-input"
+              name="test-id"
               type="radio"
               value="right"
             />
@@ -3188,6 +3194,7 @@ Array [
           >
             <input
               class="ant-radio-input"
+              name="test-id"
               type="radio"
               value="bottom"
             />
@@ -3208,6 +3215,7 @@ Array [
             <input
               checked=""
               class="ant-radio-input"
+              name="test-id"
               type="radio"
               value="left"
             />
diff --git a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
index f656c8d563..d7da3b91ba 100644
--- a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
@@ -136,6 +136,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="top"
           />
@@ -156,6 +157,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="right"
           />
@@ -175,6 +177,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="bottom"
           />
@@ -194,6 +197,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="left"
           />
@@ -310,6 +314,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="top"
           />
@@ -329,6 +334,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="right"
           />
@@ -348,6 +354,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="bottom"
           />
@@ -368,6 +375,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="left"
           />
@@ -398,7 +406,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = `
 
 exports[`renders components/drawer/demo/render-in-current.tsx correctly 1`] = `
 <div
-  style="position:relative;height:200px;padding:48px;overflow:hidden;background:rgba(0, 0, 0, 0.02);border:1px solid #f0f0f0;border-radius:8px"
+  style="position:relative;height:200px;padding:48px;overflow:hidden;background:rgba(0,0,0,0.02);border:1px solid #f0f0f0;border-radius:8px"
 >
   Render in this
   <div
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap b/components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap
index 8d9b88bdac..b389a60a27 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap
@@ -236,7 +236,7 @@ exports[`renders components/dropdown/demo/basic.tsx correctly 1`] = `
 exports[`renders components/dropdown/demo/context-menu.tsx correctly 1`] = `
 <div
   class="ant-dropdown-trigger"
-  style="color:rgba(0, 0, 0, 0.45);background:#f5f5f5;height:200px;text-align:center;line-height:200px"
+  style="color:rgba(0,0,0,0.45);background:#f5f5f5;height:200px;text-align:center;line-height:200px"
 >
   Right Click on here
 </div>
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index ec8cf0467c..f813f73743 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -66,7 +66,7 @@ Same props from Dropdown. And includes additional props:
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | buttonsRender | Custom buttons inside Dropdown.Button | (buttons: ReactNode\[]) => ReactNode\[] | - |  |
-| loading | Set the loading status of button | boolean \| { delay: number } | false |  |
+| loading | Set the loading status of button, the same as [Button](/components/button/#api) | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
 | danger | Set the danger status of button | boolean | - | 4.23.0 |
 | icon | Icon (appears on the right) | ReactNode | - |  |
 | size | Size of the button, the same as [Button](/components/button/#api) | string | `default` |  |
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index d198bb0380..04d8e025a6 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -70,7 +70,7 @@ demo:
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode\[]) => ReactNode\[] | - |  |
-| loading | 设置按钮载入状态 | boolean \| { delay: number } | false |  |
+| loading | 设置按钮载入状态，和 [Button](/components/button-cn#api) 一致 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
 | danger | 设置危险按钮 | boolean | - | 4.23.0 |
 | icon | 右侧的 icon | ReactNode | - |  |
 | size | 按钮大小，和 [Button](/components/button-cn#api) 一致 | string | `default` |  |
diff --git a/components/empty/__tests__/index.test.tsx b/components/empty/__tests__/index.test.tsx
index 550cc10159..90e3e321e8 100644
--- a/components/empty/__tests__/index.test.tsx
+++ b/components/empty/__tests__/index.test.tsx
@@ -12,7 +12,7 @@ describe('Empty', () => {
   rtlTest(Empty);
 
   it('image size should change', () => {
-    const { container } = render(<Empty imageStyle={{ height: 20 }} />);
+    const { container } = render(<Empty styles={{ image: { height: 20 } }} />);
     expect(container.querySelector<HTMLDivElement>('.ant-empty-image')?.style.height).toBe('20px');
   });
 
@@ -45,4 +45,50 @@ describe('Empty', () => {
       opacity: 0.65,
     });
   });
+
+  it('should apply custom styles to Empty', () => {
+    const customClassNames = {
+      root: 'custom-root',
+      description: 'custom-description',
+      footer: 'custom-footer',
+      image: 'custom-image',
+    };
+
+    const customStyles = {
+      root: { color: 'red' },
+      description: { color: 'green' },
+      footer: { color: 'yellow' },
+      image: { backgroundColor: 'black' },
+    };
+
+    const { container } = render(
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        classNames={customClassNames}
+        styles={customStyles}
+        description={'Description'}
+      >
+        <div>Create Now</div>
+      </Empty>,
+    );
+
+    const emptyElement = container.querySelector('.ant-empty') as HTMLElement;
+    const emptyFooterElement = container.querySelector('.ant-empty-footer') as HTMLElement;
+    const emptyDescriptionElement = container.querySelector(
+      '.ant-empty-description',
+    ) as HTMLElement;
+    const emptyImageElement = container.querySelector('.ant-empty-image') as HTMLElement;
+
+    // check classNames
+    expect(emptyElement.classList).toContain('custom-root');
+    expect(emptyFooterElement.classList).toContain('custom-footer');
+    expect(emptyDescriptionElement.classList).toContain('custom-description');
+    expect(emptyImageElement.classList).toContain('custom-image');
+
+    // check styles
+    expect(emptyElement.style.color).toBe('red');
+    expect(emptyDescriptionElement.style.color).toBe('green');
+    expect(emptyFooterElement.style.color).toBe('yellow');
+    expect(emptyImageElement.style.backgroundColor).toBe('black');
+  });
 });
diff --git a/components/empty/demo/_semantic.tsx b/components/empty/demo/_semantic.tsx
new file mode 100644
index 0000000000..0b3245a4d6
--- /dev/null
+++ b/components/empty/demo/_semantic.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Button, Empty, Typography } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    root: '根元素',
+    image: '图标元素',
+    description: '描述元素',
+    footer: '底部元素',
+  },
+  en: {
+    root: 'Root element',
+    image: 'Image element',
+    description: 'Description element',
+    footer: 'Footer element',
+  },
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      semantics={[
+        { name: 'root', desc: locale.root, version: '5.23.0' },
+        { name: 'image', desc: locale.image, version: '5.23.0' },
+        { name: 'description', desc: locale.description, version: '5.23.0' },
+        { name: 'footer', desc: locale.footer, version: '5.23.0' },
+      ]}
+    >
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        styles={{ image: { height: 60 } }}
+        description={
+          <Typography.Text>
+            Customize <a href="#API">Description</a>
+          </Typography.Text>
+        }
+      >
+        <Button type="primary">Create Now</Button>
+      </Empty>
+    </SemanticPreview>
+  );
+};
+
+export default App;
diff --git a/components/empty/demo/customize.tsx b/components/empty/demo/customize.tsx
index fab55e70ea..3eb1a4573b 100644
--- a/components/empty/demo/customize.tsx
+++ b/components/empty/demo/customize.tsx
@@ -4,7 +4,7 @@ import { Button, Empty, Typography } from 'antd';
 const App: React.FC = () => (
   <Empty
     image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
-    imageStyle={{ height: 60 }}
+    styles={{ image: { height: 60 } }}
     description={
       <Typography.Text>
         Customize <a href="#API">Description</a>
diff --git a/components/empty/empty.tsx b/components/empty/empty.tsx
index 70f21fb6f9..e765ebf566 100644
--- a/components/empty/empty.tsx
+++ b/components/empty/empty.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { useLocale } from '../locale';
 import { useToken } from '../theme/internal';
@@ -8,7 +8,7 @@ const Empty: React.FC = () => {
   const [, token] = useToken();
   const [locale] = useLocale('Empty');
 
-  const bgColor = new TinyColor(token.colorBgBase);
+  const bgColor = new FastColor(token.colorBgBase);
 
   // Dark Theme need more dark of this
   const themeStyle: React.CSSProperties = bgColor.toHsl().l < 0.5 ? { opacity: 0.65 } : {};
diff --git a/components/empty/index.en-US.md b/components/empty/index.en-US.md
index 98a270feec..be8c84e5de 100644
--- a/components/empty/index.en-US.md
+++ b/components/empty/index.en-US.md
@@ -64,6 +64,10 @@ Common props ref：[Common props](/docs/react/common-props)
   }
 </style>
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## Design Token
 
 <ComponentTokenTable component="Empty"></ComponentTokenTable>
diff --git a/components/empty/index.tsx b/components/empty/index.tsx
index e6d5a7fb31..2cc4b97963 100644
--- a/components/empty/index.tsx
+++ b/components/empty/index.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
+import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import { useLocale } from '../locale';
 import DefaultEmptyImg from './empty';
@@ -14,16 +15,19 @@ export interface TransferLocale {
   description: string;
 }
 
+export type SemanticName = 'root' | 'image' | 'description' | 'footer';
 export interface EmptyProps {
   prefixCls?: string;
   className?: string;
   rootClassName?: string;
   style?: React.CSSProperties;
-  /** @since 3.16.0 */
+  /** @deprecated Please use `styles={{ image: {} }}` instead */
   imageStyle?: React.CSSProperties;
   image?: React.ReactNode;
   description?: React.ReactNode;
   children?: React.ReactNode;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 type CompoundedComponent = React.FC<EmptyProps> & {
@@ -31,17 +35,20 @@ type CompoundedComponent = React.FC<EmptyProps> & {
   PRESENTED_IMAGE_SIMPLE: React.ReactNode;
 };
 
-const Empty: CompoundedComponent = ({
-  className,
-  rootClassName,
-  prefixCls: customizePrefixCls,
-  image = defaultEmptyImg,
-  description,
-  children,
-  imageStyle,
-  style,
-  ...restProps
-}) => {
+const Empty: CompoundedComponent = (props) => {
+  const {
+    className,
+    rootClassName,
+    prefixCls: customizePrefixCls,
+    image = defaultEmptyImg,
+    description,
+    children,
+    imageStyle,
+    style,
+    classNames: emptyClassNames,
+    styles,
+    ...restProps
+  } = props;
   const { getPrefixCls, direction, empty } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('empty', customizePrefixCls);
@@ -60,6 +67,15 @@ const Empty: CompoundedComponent = ({
     imageNode = image;
   }
 
+  // ============================= Warning ==============================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Empty');
+
+    [['imageStyle', 'styles: { image: {} }']].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
+  }
+
   return wrapCSSVar(
     <div
       className={classNames(
@@ -73,15 +89,49 @@ const Empty: CompoundedComponent = ({
         },
         className,
         rootClassName,
+        empty?.classNames?.root,
+        emptyClassNames?.root,
       )}
-      style={{ ...empty?.style, ...style }}
+      style={{ ...empty?.styles?.root, ...empty?.style, ...styles?.root, ...style }}
       {...restProps}
     >
-      <div className={`${prefixCls}-image`} style={imageStyle}>
+      <div
+        className={classNames(
+          `${prefixCls}-image`,
+          empty?.classNames?.image,
+          emptyClassNames?.image,
+        )}
+        style={{ ...imageStyle, ...empty?.styles?.image, ...styles?.image }}
+      >
         {imageNode}
       </div>
-      {des && <div className={`${prefixCls}-description`}>{des}</div>}
-      {children && <div className={`${prefixCls}-footer`}>{children}</div>}
+      {des && (
+        <div
+          className={classNames(
+            `${prefixCls}-description`,
+            empty?.classNames?.description,
+            emptyClassNames?.description,
+          )}
+          style={{ ...empty?.styles?.description, ...styles?.description }}
+        >
+          {des}
+        </div>
+      )}
+      {children && (
+        <div
+          className={classNames(
+            `${prefixCls}-footer`,
+            empty?.classNames?.footer,
+            emptyClassNames?.footer,
+          )}
+          style={{
+            ...empty?.styles?.footer,
+            ...styles?.footer,
+          }}
+        >
+          {children}
+        </div>
+      )}
     </div>,
   );
 };
diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md
index 9f00af9f42..16c162b433 100644
--- a/components/empty/index.zh-CN.md
+++ b/components/empty/index.zh-CN.md
@@ -65,6 +65,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAA
   }
 </style>
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Empty"></ComponentTokenTable>
diff --git a/components/empty/simple.tsx b/components/empty/simple.tsx
index e28fa52963..869bfee6dd 100644
--- a/components/empty/simple.tsx
+++ b/components/empty/simple.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { useToken } from '../theme/internal';
 import { useLocale } from '../locale';
@@ -13,13 +13,9 @@ const Simple: React.FC = () => {
 
   const { borderColor, shadowColor, contentColor } = useMemo(
     () => ({
-      borderColor: new TinyColor(colorFill).onBackground(colorBgContainer).toHexShortString(),
-      shadowColor: new TinyColor(colorFillTertiary)
-        .onBackground(colorBgContainer)
-        .toHexShortString(),
-      contentColor: new TinyColor(colorFillQuaternary)
-        .onBackground(colorBgContainer)
-        .toHexShortString(),
+      borderColor: new FastColor(colorFill).onBackground(colorBgContainer).toHexString(),
+      shadowColor: new FastColor(colorFillTertiary).onBackground(colorBgContainer).toHexString(),
+      contentColor: new FastColor(colorFillQuaternary).onBackground(colorBgContainer).toHexString(),
     }),
     [colorFill, colorFillTertiary, colorFillQuaternary, colorBgContainer],
   );
diff --git a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
index 28269eef86..8d3d4f769f 100644
--- a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -10,7 +10,8 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -21,12 +22,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="flex-start"
         >
           flex-start
@@ -37,12 +38,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="center"
         >
           center
@@ -53,12 +54,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="flex-end"
         >
           flex-end
@@ -69,12 +70,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="space-between"
         >
           space-between
@@ -85,12 +86,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="space-around"
         >
           space-around
@@ -101,12 +102,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="space-evenly"
         >
           space-evenly
@@ -120,7 +121,8 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -131,12 +133,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="flex-start"
         >
           flex-start
@@ -147,12 +149,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="center"
         >
           center
@@ -163,12 +165,12 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="flex-end"
         >
           flex-end
@@ -234,6 +236,7 @@ exports[`renders components/flex/demo/basic.tsx extend context correctly 1`] = `
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="horizontal"
         />
@@ -253,6 +256,7 @@ exports[`renders components/flex/demo/basic.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="vertical"
         />
@@ -386,6 +390,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -405,6 +410,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -424,6 +430,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -443,6 +450,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="customize"
         />
diff --git a/components/flex/__tests__/__snapshots__/demo.test.ts.snap b/components/flex/__tests__/__snapshots__/demo.test.ts.snap
index 2834493b42..fc09c0e0ab 100644
--- a/components/flex/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/flex/__tests__/__snapshots__/demo.test.ts.snap
@@ -10,7 +10,8 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -21,12 +22,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="flex-start"
         >
           flex-start
@@ -37,12 +38,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="center"
         >
           center
@@ -53,12 +54,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="flex-end"
         >
           flex-end
@@ -69,12 +70,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="space-between"
         >
           space-between
@@ -85,12 +86,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="space-around"
         >
           space-around
@@ -101,12 +102,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="space-evenly"
         >
           space-evenly
@@ -120,7 +121,8 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -131,12 +133,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="flex-start"
         >
           flex-start
@@ -147,12 +149,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="center"
         >
           center
@@ -163,12 +165,12 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="flex-end"
         >
           flex-end
@@ -232,6 +234,7 @@ exports[`renders components/flex/demo/basic.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="horizontal"
         />
@@ -251,6 +254,7 @@ exports[`renders components/flex/demo/basic.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="vertical"
         />
@@ -378,6 +382,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -397,6 +402,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -416,6 +422,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -435,6 +442,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="customize"
         />
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 40208dfa52..87f47f2cd2 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2469,6 +2469,7 @@ Array [
                     <input
                       class="ant-radio-input"
                       disabled=""
+                      name="test-id"
                       type="radio"
                       value="apple"
                     />
@@ -2489,6 +2490,7 @@ Array [
                     <input
                       class="ant-radio-input"
                       disabled=""
+                      name="test-id"
                       type="radio"
                       value="pear"
                     />
@@ -2757,7 +2759,6 @@ Array [
                     <div>
                       <div
                         class="ant-select-tree"
-                        role="tree"
                       >
                         <div>
                           <input
@@ -2782,6 +2783,7 @@ Array [
                         </div>
                         <div
                           class="ant-select-tree-list"
+                          role="tree"
                           style="position: relative;"
                         >
                           <div
@@ -2794,9 +2796,10 @@ Array [
                                 style="display: flex; flex-direction: column;"
                               >
                                 <div
-                                  aria-grabbed="false"
+                                  aria-expanded="false"
                                   class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                                   draggable="false"
+                                  role="treeitem"
                                 >
                                   <span
                                     aria-hidden="true"
@@ -8875,6 +8878,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
                   <input
                     checked=""
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="horizontal"
                   />
@@ -8894,6 +8898,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="vertical"
                   />
@@ -8913,6 +8918,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="inline"
                   />
@@ -11367,6 +11373,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="true"
                   />
@@ -11387,6 +11394,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly
                   <input
                     checked=""
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="optional"
                   />
@@ -11406,6 +11414,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="false"
                   />
@@ -11425,6 +11434,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="customize"
                   />
@@ -11680,6 +11690,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="small"
                   />
@@ -11700,6 +11711,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
                   <input
                     checked=""
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="default"
                   />
@@ -11719,6 +11731,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="large"
                   />
@@ -11984,7 +11997,6 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
                   <div>
                     <div
                       class="ant-select-tree"
-                      role="tree"
                     >
                       <div>
                         <input
@@ -12009,6 +12021,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
                       </div>
                       <div
                         class="ant-select-tree-list"
+                        role="tree"
                         style="position: relative;"
                       >
                         <div
@@ -12021,9 +12034,10 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
                               style="display: flex; flex-direction: column;"
                             >
                               <div
-                                aria-grabbed="false"
+                                aria-expanded="false"
                                 class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                                 draggable="false"
+                                role="treeitem"
                               >
                                 <span
                                   aria-hidden="true"
@@ -22224,6 +22238,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                 >
                   <input
                     class="ant-radio-input"
+                    name="test-id"
                     type="radio"
                     value="a"
                   />
@@ -22243,6 +22258,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                 >
                   <input
                     class="ant-radio-input"
+                    name="test-id"
                     type="radio"
                     value="b"
                   />
@@ -22262,6 +22278,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                 >
                   <input
                     class="ant-radio-input"
+                    name="test-id"
                     type="radio"
                     value="c"
                   />
@@ -22318,6 +22335,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="a"
                   />
@@ -22337,6 +22355,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="b"
                   />
@@ -22356,6 +22375,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="c"
                   />
@@ -28334,7 +28354,6 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                   <div>
                     <div
                       class="ant-select-tree"
-                      role="tree"
                     >
                       <div>
                         <input
@@ -28359,6 +28378,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                       </div>
                       <div
                         class="ant-select-tree-list"
+                        role="tree"
                         style="position: relative;"
                       >
                         <div
@@ -28371,9 +28391,10 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                               style="display: flex; flex-direction: column;"
                             >
                               <div
-                                aria-grabbed="false"
+                                aria-expanded="false"
                                 class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                                 draggable="false"
+                                role="treeitem"
                               >
                                 <span
                                   aria-hidden="true"
@@ -29972,10 +29993,9 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
               <span
                 class="ant-input-suffix"
               >
-                <span
+                <button
                   class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
-                  role="button"
-                  tabindex="-1"
+                  type="button"
                 >
                   <span
                     aria-label="close-circle"
@@ -29997,7 +30017,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                       />
                     </svg>
                   </span>
-                </span>
+                </button>
                 <span
                   class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
                 >
@@ -30155,10 +30175,9 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
               <span
                 class="ant-input-suffix"
               >
-                <span
+                <button
                   class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
-                  role="button"
-                  tabindex="-1"
+                  type="button"
                 >
                   <span
                     aria-label="close-circle"
@@ -30180,7 +30199,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                       />
                     </svg>
                   </span>
-                </span>
+                </button>
                 <span
                   aria-label="eye-invisible"
                   class="anticon anticon-eye-invisible ant-input-password-icon"
@@ -30550,10 +30569,9 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
               <span
                 class="ant-input-suffix"
               >
-                <span
+                <button
                   class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
-                  role="button"
-                  tabindex="-1"
+                  type="button"
                 >
                   <span
                     aria-label="close-circle"
@@ -30575,7 +30593,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                       />
                     </svg>
                   </span>
-                </span>
+                </button>
                 <span
                   class="ant-input-textarea-suffix"
                 >
@@ -30838,7 +30856,8 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
               aria-label="segmented control"
               class="ant-segmented"
               id="variant"
-              role="listbox"
+              role="radiogroup"
+              tabindex="0"
             >
               <div
                 class="ant-segmented-group"
@@ -30848,12 +30867,12 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
                 >
                   <input
                     class="ant-segmented-item-input"
+                    name="test-id"
                     type="radio"
                   />
                   <div
                     aria-selected="false"
                     class="ant-segmented-item-label"
-                    role="option"
                     title="outlined"
                   >
                     outlined
@@ -30865,12 +30884,12 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
                   <input
                     checked=""
                     class="ant-segmented-item-input"
+                    name="test-id"
                     type="radio"
                   />
                   <div
                     aria-selected="true"
                     class="ant-segmented-item-label"
-                    role="option"
                     title="filled"
                   >
                     filled
@@ -30881,12 +30900,12 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
                 >
                   <input
                     class="ant-segmented-item-input"
+                    name="test-id"
                     type="radio"
                   />
                   <div
                     aria-selected="false"
                     class="ant-segmented-item-label"
-                    role="option"
                     title="borderless"
                   >
                     borderless
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
index 9dc70c7578..abbd3370e2 100644
--- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -5,7 +5,7 @@ Array [
   <form
     class="ant-form ant-form-horizontal"
     id="advanced_search"
-    style="max-width:none;background:rgba(0, 0, 0, 0.02);border-radius:8px;padding:24px"
+    style="max-width:none;background:rgba(0,0,0,0.02);border-radius:8px;padding:24px"
   >
     <div
       class="ant-row"
@@ -454,7 +454,7 @@ Array [
     </div>
   </form>,
   <div
-    style="line-height:200px;text-align:center;background:rgba(0, 0, 0, 0.02);border-radius:8px;margin-top:16px"
+    style="line-height:200px;text-align:center;background:rgba(0,0,0,0.02);border-radius:8px;margin-top:16px"
   >
     Search Result List
   </div>,
@@ -1871,6 +1871,7 @@ Array [
                     <input
                       class="ant-radio-input"
                       disabled=""
+                      name="test-id"
                       type="radio"
                       value="apple"
                     />
@@ -1891,6 +1892,7 @@ Array [
                     <input
                       class="ant-radio-input"
                       disabled=""
+                      name="test-id"
                       type="radio"
                       value="pear"
                     />
@@ -5219,6 +5221,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
                   <input
                     checked=""
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="horizontal"
                   />
@@ -5238,6 +5241,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="vertical"
                   />
@@ -5257,6 +5261,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="inline"
                   />
@@ -7321,6 +7326,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="true"
                   />
@@ -7341,6 +7347,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = `
                   <input
                     checked=""
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="optional"
                   />
@@ -7360,6 +7367,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="false"
                   />
@@ -7379,6 +7387,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="customize"
                   />
@@ -7594,6 +7603,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="small"
                   />
@@ -7614,6 +7624,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
                   <input
                     checked=""
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="default"
                   />
@@ -7633,6 +7644,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="large"
                   />
@@ -9644,6 +9656,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-input"
+                    name="test-id"
                     type="radio"
                     value="a"
                   />
@@ -9663,6 +9676,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-input"
+                    name="test-id"
                     type="radio"
                     value="b"
                   />
@@ -9682,6 +9696,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-input"
+                    name="test-id"
                     type="radio"
                     value="c"
                   />
@@ -9738,6 +9753,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="a"
                   />
@@ -9757,6 +9773,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="b"
                   />
@@ -9776,6 +9793,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-radio-button-input"
+                    name="test-id"
                     type="radio"
                     value="c"
                   />
@@ -12241,10 +12259,9 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
               <span
                 class="ant-input-suffix"
               >
-                <span
+                <button
                   class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
-                  role="button"
-                  tabindex="-1"
+                  type="button"
                 >
                   <span
                     aria-label="close-circle"
@@ -12266,7 +12283,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
                       />
                     </svg>
                   </span>
-                </span>
+                </button>
                 <span
                   class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
                 >
@@ -12424,10 +12441,9 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
               <span
                 class="ant-input-suffix"
               >
-                <span
+                <button
                   class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
-                  role="button"
-                  tabindex="-1"
+                  type="button"
                 >
                   <span
                     aria-label="close-circle"
@@ -12449,7 +12465,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
                       />
                     </svg>
                   </span>
-                </span>
+                </button>
                 <span
                   aria-label="eye-invisible"
                   class="anticon anticon-eye-invisible ant-input-password-icon"
@@ -12819,10 +12835,9 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
               <span
                 class="ant-input-suffix"
               >
-                <span
+                <button
                   class="ant-input-clear-icon ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix"
-                  role="button"
-                  tabindex="-1"
+                  type="button"
                 >
                   <span
                     aria-label="close-circle"
@@ -12844,7 +12859,7 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
                       />
                     </svg>
                   </span>
-                </span>
+                </button>
                 <span
                   class="ant-input-textarea-suffix"
                 >
@@ -13083,7 +13098,8 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
               aria-label="segmented control"
               class="ant-segmented"
               id="variant"
-              role="listbox"
+              role="radiogroup"
+              tabindex="0"
             >
               <div
                 class="ant-segmented-group"
@@ -13093,12 +13109,12 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-segmented-item-input"
+                    name="test-id"
                     type="radio"
                   />
                   <div
                     aria-selected="false"
                     class="ant-segmented-item-label"
-                    role="option"
                     title="outlined"
                   >
                     outlined
@@ -13110,12 +13126,12 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
                   <input
                     checked=""
                     class="ant-segmented-item-input"
+                    name="test-id"
                     type="radio"
                   />
                   <div
                     aria-selected="true"
                     class="ant-segmented-item-label"
-                    role="option"
                     title="filled"
                   >
                     filled
@@ -13126,12 +13142,12 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
                 >
                   <input
                     class="ant-segmented-item-input"
+                    name="test-id"
                     type="radio"
                   />
                   <div
                     aria-selected="false"
                     class="ant-segmented-item-label"
-                    role="option"
                     title="borderless"
                   >
                     borderless
diff --git a/components/form/__tests__/__snapshots__/index.test.tsx.snap b/components/form/__tests__/__snapshots__/index.test.tsx.snap
index 87c7445620..81f75f574e 100644
--- a/components/form/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/index.test.tsx.snap
@@ -189,6 +189,7 @@ exports[`Form form should support disabled 1`] = `
                   <input
                     class="ant-radio-input"
                     disabled=""
+                    name="test-id"
                     type="radio"
                     value="apple"
                   />
@@ -209,6 +210,7 @@ exports[`Form form should support disabled 1`] = `
                   <input
                     class="ant-radio-input"
                     disabled=""
+                    name="test-id"
                     type="radio"
                     value="pear"
                   />
diff --git a/components/grid/col.tsx b/components/grid/col.tsx
index fc82d268e7..95063d5150 100644
--- a/components/grid/col.tsx
+++ b/components/grid/col.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
+import type { Breakpoint } from '../_util/responsiveObserver';
 import type { LiteralUnion } from '../_util/type';
 import { ConfigContext } from '../config-provider';
 import RowContext from './RowContext';
@@ -20,19 +21,15 @@ export interface ColSize {
   pull?: ColSpanType;
 }
 
-export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ColProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Partial<Record<Breakpoint, ColSpanType | ColSize>> {
   flex?: FlexType;
   span?: ColSpanType;
   order?: ColSpanType;
   offset?: ColSpanType;
   push?: ColSpanType;
   pull?: ColSpanType;
-  xs?: ColSpanType | ColSize;
-  sm?: ColSpanType | ColSize;
-  md?: ColSpanType | ColSize;
-  lg?: ColSpanType | ColSize;
-  xl?: ColSpanType | ColSize;
-  xxl?: ColSpanType | ColSize;
   prefixCls?: string;
 }
 
diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts
index 1f2c16c29a..3103ff0e99 100644
--- a/components/grid/style/index.ts
+++ b/components/grid/style/index.ts
@@ -1,7 +1,7 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
 
-import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import type { AliasToken, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 // biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
@@ -183,26 +183,34 @@ export const prepareColComponentToken: GetDefaultToken<'Grid'> = () => ({});
 // ============================== Export ==============================
 export const useRowStyle = genStyleHooks('Grid', genGridRowStyle, prepareRowComponentToken);
 
+export const getMediaSize = (token: AliasToken) => {
+  const mediaSizesMap = {
+    xs: token.screenXSMin,
+    sm: token.screenSMMin,
+    md: token.screenMDMin,
+    lg: token.screenLGMin,
+    xl: token.screenXLMin,
+    xxl: token.screenXXLMin,
+  } as const;
+
+  return mediaSizesMap;
+};
+
 export const useColStyle = genStyleHooks(
   'Grid',
   (token) => {
     const gridToken: GridColToken = mergeToken<GridColToken>(token, {
       gridColumns: 24, // Row is divided into 24 parts in Grid
     });
-    const gridMediaSizesMap = {
-      '-sm': gridToken.screenSMMin,
-      '-md': gridToken.screenMDMin,
-      '-lg': gridToken.screenLGMin,
-      '-xl': gridToken.screenXLMin,
-      '-xxl': gridToken.screenXXLMin,
-    } as const;
-    type GridMediaSize = keyof typeof gridMediaSizesMap;
+    const gridMediaSizesMap: Record<string, number> = getMediaSize(gridToken);
+    delete gridMediaSizesMap.xs;
+
     return [
       genGridColStyle(gridToken),
       genGridStyle(gridToken, ''),
       genGridStyle(gridToken, '-xs'),
       Object.keys(gridMediaSizesMap)
-        .map((key) => genGridMediaStyle(gridToken, gridMediaSizesMap[key as GridMediaSize], key))
+        .map((key) => genGridMediaStyle(gridToken, gridMediaSizesMap[key], `-${key}`))
         .reduce((pre, cur) => ({ ...pre, ...cur }), {}),
     ];
   },
diff --git a/components/image/style/index.ts b/components/image/style/index.ts
index 1aa08c8e02..8c38514091 100644
--- a/components/image/style/index.ts
+++ b/components/image/style/index.ts
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { genModalMaskStyle } from '../../modal/style';
 import { textEllipsis } from '../../style';
@@ -75,7 +75,7 @@ export const genImageMaskStyle = (token: ImageToken): CSSObject => {
     alignItems: 'center',
     justifyContent: 'center',
     color: colorTextLightSolid,
-    background: new TinyColor('#000').setAlpha(0.5).toRgbString(),
+    background: new FastColor('#000').setA(0.5).toRgbString(),
     cursor: 'pointer',
     opacity: 0,
     transition: `opacity ${motionDurationSlow}`,
@@ -108,8 +108,8 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
     colorTextLightSolid,
   } = token;
 
-  const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
-  const operationBgHover = operationBg.clone().setAlpha(0.2);
+  const operationBg = new FastColor(modalMaskBg).setA(0.1);
+  const operationBgHover = operationBg.clone().setA(0.2);
 
   return {
     [`${previewCls}-footer`]: {
@@ -198,8 +198,8 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
     motionDurationSlow,
   } = token;
 
-  const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
-  const operationBgHover = operationBg.clone().setAlpha(0.2);
+  const operationBg = new FastColor(modalMaskBg).setA(0.1);
+  const operationBgHover = operationBg.clone().setA(0.2);
 
   return {
     [`${previewCls}-switch-left, ${previewCls}-switch-right`]: {
@@ -376,11 +376,9 @@ const genPreviewMotion: GenerateStyle<ImageToken> = (token) => {
 // ============================== Export ==============================
 export const prepareComponentToken: GetDefaultToken<'Image'> = (token) => ({
   zIndexPopup: token.zIndexPopupBase + 80,
-  previewOperationColor: new TinyColor(token.colorTextLightSolid).setAlpha(0.65).toRgbString(),
-  previewOperationHoverColor: new TinyColor(token.colorTextLightSolid).setAlpha(0.85).toRgbString(),
-  previewOperationColorDisabled: new TinyColor(token.colorTextLightSolid)
-    .setAlpha(0.25)
-    .toRgbString(),
+  previewOperationColor: new FastColor(token.colorTextLightSolid).setA(0.65).toRgbString(),
+  previewOperationHoverColor: new FastColor(token.colorTextLightSolid).setA(0.85).toRgbString(),
+  previewOperationColorDisabled: new FastColor(token.colorTextLightSolid).setA(0.25).toRgbString(),
   previewOperationSize: token.fontSizeIcon * 1.5, // FIXME: fontSizeIconLG
 });
 
@@ -391,7 +389,7 @@ export default genStyleHooks(
 
     const imageToken = mergeToken<ImageToken>(token, {
       previewCls,
-      modalMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(), // FIXME: Shared Token
+      modalMaskBg: new FastColor('#000').setA(0.45).toRgbString(), // FIXME: Shared Token
       imagePreviewSwitchSize: token.controlHeightLG,
     });
 
diff --git a/components/index.ts b/components/index.ts
index c4410ce792..b081087cdd 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -21,7 +21,7 @@ export type { BreadcrumbItemProps, BreadcrumbProps } from './breadcrumb';
 export { default as Button } from './button';
 export type { ButtonProps } from './button';
 export { default as Calendar } from './calendar';
-export type { CalendarProps } from './calendar';
+export type { CalendarMode, CalendarProps } from './calendar';
 export { default as Card } from './card';
 export type { CardProps } from './card';
 export { default as Carousel } from './carousel';
diff --git a/components/input-number/style/token.ts b/components/input-number/style/token.ts
index 75bf39ef52..baabf69b8d 100644
--- a/components/input-number/style/token.ts
+++ b/components/input-number/style/token.ts
@@ -1,4 +1,4 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
 import { initComponentToken } from '../../input/style/token';
@@ -75,7 +75,7 @@ export const prepareComponentToken: GetDefaultToken<'InputNumber'> = (token) =>
     handleVisible,
     handleActiveBg: token.colorFillAlter,
     handleBg: token.colorBgContainer,
-    filledHandleBg: new TinyColor(token.colorFillSecondary)
+    filledHandleBg: new FastColor(token.colorFillSecondary)
       .onBackground(token.colorBgContainer)
       .toHexString(),
     handleHoverColor: token.colorPrimary,
diff --git a/components/input/Search.tsx b/components/input/Search.tsx
index a3ae1dae06..51167c74a2 100644
--- a/components/input/Search.tsx
+++ b/components/input/Search.tsx
@@ -150,6 +150,13 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
     className,
   );
 
+  const newProps: InputProps = {
+    ...restProps,
+    className: cls,
+    prefixCls: inputPrefixCls,
+    type: 'search',
+  };
+
   const handleOnCompositionStart: React.CompositionEventHandler<HTMLInputElement> = (e) => {
     composedRef.current = true;
     onCompositionStart?.(e);
@@ -164,15 +171,13 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
     <Input
       ref={composeRef<InputRef>(inputRef, ref)}
       onPressEnter={onPressEnter}
-      {...restProps}
+      {...newProps}
       size={size}
       onCompositionStart={handleOnCompositionStart}
       onCompositionEnd={handleOnCompositionEnd}
-      prefixCls={inputPrefixCls}
       addonAfter={button}
       suffix={suffix}
       onChange={onChange}
-      className={cls}
       disabled={disabled}
     />
   );
diff --git a/components/input/__tests__/__snapshots__/Search.test.tsx.snap b/components/input/__tests__/__snapshots__/Search.test.tsx.snap
index b2309a885e..1225315584 100644
--- a/components/input/__tests__/__snapshots__/Search.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/Search.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Input.Search rtl render component should be rendered correctly in RTL d
   >
     <input
       class="ant-input ant-input-rtl ant-input-outlined"
-      type="text"
+      type="search"
       value=""
     />
     <span
@@ -60,7 +60,7 @@ exports[`Input.Search should support ReactNode suffix without error 1`] = `
     >
       <input
         class="ant-input"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -116,7 +116,7 @@ exports[`Input.Search should support addonAfter 1`] = `
   >
     <input
       class="ant-input ant-input-outlined"
-      type="text"
+      type="search"
       value=""
     />
     <span
@@ -167,7 +167,7 @@ exports[`Input.Search should support addonAfter 2`] = `
   >
     <input
       class="ant-input ant-input-outlined"
-      type="text"
+      type="search"
       value=""
     />
     <span
@@ -221,7 +221,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
     >
       <input
         class="ant-input"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -279,7 +279,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
     >
       <input
         class="ant-input"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -334,7 +334,7 @@ exports[`Input.Search should support custom Button 1`] = `
   >
     <input
       class="ant-input ant-input-outlined"
-      type="text"
+      type="search"
       value=""
     />
     <span
@@ -362,7 +362,7 @@ exports[`Input.Search should support custom button 1`] = `
   >
     <input
       class="ant-input ant-input-outlined"
-      type="text"
+      type="search"
       value=""
     />
     <span
@@ -387,7 +387,7 @@ exports[`Input.Search should support invalid addonAfter 1`] = `
   >
     <input
       class="ant-input ant-input-outlined"
-      type="text"
+      type="search"
       value=""
     />
     <span
@@ -438,7 +438,7 @@ exports[`Input.Search should support invalid suffix 1`] = `
     >
       <input
         class="ant-input"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -490,7 +490,7 @@ exports[`Input.Search should support loading 1`] = `
   >
     <input
       class="ant-input ant-input-outlined"
-      type="text"
+      type="search"
       value=""
     />
     <span
@@ -538,7 +538,7 @@ exports[`Input.Search should support loading 2`] = `
   >
     <input
       class="ant-input ant-input-outlined"
-      type="text"
+      type="search"
       value=""
     />
     <span
diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
index f3583ba31e..3a0b04d19f 100644
--- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -5245,6 +5245,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -5264,6 +5265,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -5411,10 +5413,9 @@ Array [
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -5436,7 +5437,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
   <br />,
@@ -5451,10 +5452,9 @@ Array [
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -5476,7 +5476,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
 ]
@@ -5553,10 +5553,9 @@ exports[`renders components/input/demo/borderless-debug.tsx extend context corre
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -5578,7 +5577,7 @@ exports[`renders components/input/demo/borderless-debug.tsx extend context corre
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>
   <span
@@ -5593,10 +5592,9 @@ exports[`renders components/input/demo/borderless-debug.tsx extend context corre
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -5618,7 +5616,7 @@ exports[`renders components/input/demo/borderless-debug.tsx extend context corre
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>
   <span
@@ -5670,10 +5668,9 @@ exports[`renders components/input/demo/borderless-debug.tsx extend context corre
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -5695,7 +5692,7 @@ exports[`renders components/input/demo/borderless-debug.tsx extend context corre
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>
   <input
@@ -5801,16 +5798,15 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
             <input
               class="ant-input"
               placeholder="input search text"
-              type="text"
+              type="search"
               value=""
             />
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -5832,7 +5828,7 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
           <span
@@ -6542,10 +6538,9 @@ exports[`renders components/input/demo/filled-debug.tsx extend context correctly
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -6567,7 +6562,7 @@ exports[`renders components/input/demo/filled-debug.tsx extend context correctly
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>
   <span
@@ -7021,16 +7016,15 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
         >
           <input
             class="ant-input"
-            type="text"
+            type="search"
             value="0571"
           />
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -7052,7 +7046,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
         <span
@@ -7101,16 +7095,15 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
         >
           <input
             class="ant-input"
-            type="text"
+            type="search"
             value="26888888"
           />
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -7132,7 +7125,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
         <span
@@ -10869,7 +10862,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
         <input
           class="ant-input ant-input-outlined"
           placeholder="input search text"
-          type="text"
+          type="search"
           value=""
         />
         <span
@@ -10923,16 +10916,15 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
           <input
             class="ant-input"
             placeholder="input search text"
-            type="text"
+            type="search"
             value=""
           />
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -10954,7 +10946,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
         <span
@@ -11013,16 +11005,15 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
           <input
             class="ant-input"
             placeholder="input search text"
-            type="text"
+            type="search"
             value=""
           />
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -11044,7 +11035,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
         <span
@@ -11094,7 +11085,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
         <input
           class="ant-input ant-input-outlined"
           placeholder="input search text"
-          type="text"
+          type="search"
           value=""
         />
         <span
@@ -11147,16 +11138,15 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
           <input
             class="ant-input ant-input-lg"
             placeholder="input search text"
-            type="text"
+            type="search"
             value=""
           />
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -11178,7 +11168,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
         <span
@@ -11211,7 +11201,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
           <input
             class="ant-input ant-input-lg"
             placeholder="input search text"
-            type="text"
+            type="search"
             value=""
           />
           <span
@@ -11270,7 +11260,7 @@ Array [
       <input
         class="ant-input ant-input-outlined"
         placeholder="input search loading default"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -11318,7 +11308,7 @@ Array [
       <input
         class="ant-input ant-input-outlined"
         placeholder="input search loading with enterButton"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -11366,7 +11356,7 @@ Array [
       <input
         class="ant-input ant-input-lg ant-input-outlined"
         placeholder="input search text"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -11746,10 +11736,9 @@ Array [
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -11771,7 +11760,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
 ]
diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
index ed9d73e438..706e73ce87 100644
--- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1153,6 +1153,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -1172,6 +1173,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -1304,10 +1306,9 @@ Array [
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -1329,7 +1330,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
   <br />,
@@ -1344,10 +1345,9 @@ Array [
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -1369,7 +1369,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
 ]
@@ -1437,10 +1437,9 @@ exports[`renders components/input/demo/borderless-debug.tsx correctly 1`] = `
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -1462,7 +1461,7 @@ exports[`renders components/input/demo/borderless-debug.tsx correctly 1`] = `
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>
   <span
@@ -1477,10 +1476,9 @@ exports[`renders components/input/demo/borderless-debug.tsx correctly 1`] = `
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -1502,7 +1500,7 @@ exports[`renders components/input/demo/borderless-debug.tsx correctly 1`] = `
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>
   <span
@@ -1554,10 +1552,9 @@ exports[`renders components/input/demo/borderless-debug.tsx correctly 1`] = `
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -1579,7 +1576,7 @@ exports[`renders components/input/demo/borderless-debug.tsx correctly 1`] = `
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>
   <input
@@ -1683,16 +1680,15 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
             <input
               class="ant-input"
               placeholder="input search text"
-              type="text"
+              type="search"
               value=""
             />
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -1714,7 +1710,7 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
           <span
@@ -2339,10 +2335,9 @@ exports[`renders components/input/demo/filled-debug.tsx correctly 1`] = `
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -2364,7 +2359,7 @@ exports[`renders components/input/demo/filled-debug.tsx correctly 1`] = `
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>
   <span
@@ -2714,16 +2709,15 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
         >
           <input
             class="ant-input"
-            type="text"
+            type="search"
             value="0571"
           />
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -2745,7 +2739,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
         <span
@@ -2794,16 +2788,15 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
         >
           <input
             class="ant-input"
-            type="text"
+            type="search"
             value="26888888"
           />
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -2825,7 +2818,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
         <span
@@ -4192,7 +4185,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
         <input
           class="ant-input ant-input-outlined"
           placeholder="input search text"
-          type="text"
+          type="search"
           value=""
         />
         <span
@@ -4246,16 +4239,15 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
           <input
             class="ant-input"
             placeholder="input search text"
-            type="text"
+            type="search"
             value=""
           />
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -4277,7 +4269,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
         <span
@@ -4336,16 +4328,15 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
           <input
             class="ant-input"
             placeholder="input search text"
-            type="text"
+            type="search"
             value=""
           />
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -4367,7 +4358,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
         <span
@@ -4417,7 +4408,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
         <input
           class="ant-input ant-input-outlined"
           placeholder="input search text"
-          type="text"
+          type="search"
           value=""
         />
         <span
@@ -4470,16 +4461,15 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
           <input
             class="ant-input ant-input-lg"
             placeholder="input search text"
-            type="text"
+            type="search"
             value=""
           />
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -4501,7 +4491,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
         <span
@@ -4534,7 +4524,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
           <input
             class="ant-input ant-input-lg"
             placeholder="input search text"
-            type="text"
+            type="search"
             value=""
           />
           <span
@@ -4591,7 +4581,7 @@ Array [
       <input
         class="ant-input ant-input-outlined"
         placeholder="input search loading default"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -4639,7 +4629,7 @@ Array [
       <input
         class="ant-input ant-input-outlined"
         placeholder="input search loading with enterButton"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -4687,7 +4677,7 @@ Array [
       <input
         class="ant-input ant-input-lg ant-input-outlined"
         placeholder="input search text"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -5057,10 +5047,9 @@ Array [
     <span
       class="ant-input-suffix"
     >
-      <span
+      <button
         class="ant-input-clear-icon ant-input-clear-icon-hidden"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -5082,7 +5071,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
 ]
diff --git a/components/input/__tests__/__snapshots__/index.test.tsx.snap b/components/input/__tests__/__snapshots__/index.test.tsx.snap
index 23fd563fdf..4989d8fc04 100644
--- a/components/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -12,10 +12,9 @@ exports[`Input allowClear should change type when click 1`] = `
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -37,7 +36,7 @@ exports[`Input allowClear should change type when click 1`] = `
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -54,10 +53,9 @@ exports[`Input allowClear should change type when click 2`] = `
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -79,7 +77,7 @@ exports[`Input allowClear should change type when click 2`] = `
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -96,10 +94,9 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -121,7 +118,7 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -138,10 +135,9 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -163,7 +159,7 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -180,10 +176,9 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -205,7 +200,7 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -222,10 +217,9 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -247,7 +241,7 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -264,10 +258,9 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -289,7 +282,7 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -306,10 +299,9 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -331,7 +323,7 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
diff --git a/components/input/__tests__/__snapshots__/textarea.test.tsx.snap b/components/input/__tests__/__snapshots__/textarea.test.tsx.snap
index 227b447715..f7ed268ed9 100644
--- a/components/input/__tests__/__snapshots__/textarea.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/textarea.test.tsx.snap
@@ -41,10 +41,9 @@ exports[`TextArea allowClear should change type when click 1`] = `
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -66,7 +65,7 @@ exports[`TextArea allowClear should change type when click 1`] = `
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -81,10 +80,9 @@ exports[`TextArea allowClear should change type when click 2`] = `
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -106,7 +104,7 @@ exports[`TextArea allowClear should change type when click 2`] = `
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -121,10 +119,9 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -146,7 +143,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -161,10 +158,9 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -186,7 +182,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -201,10 +197,9 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -226,7 +221,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -241,10 +236,9 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -266,7 +260,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -281,10 +275,9 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -306,7 +299,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -321,10 +314,9 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -346,7 +338,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
diff --git a/components/input/demo/tooltip.tsx b/components/input/demo/tooltip.tsx
index baa05b10a7..f812c37624 100644
--- a/components/input/demo/tooltip.tsx
+++ b/components/input/demo/tooltip.tsx
@@ -36,7 +36,12 @@ const NumericInput = (props: NumericInputProps) => {
   );
 
   return (
-    <Tooltip trigger={['focus']} title={title} placement="topLeft" overlayClassName="numeric-input">
+    <Tooltip
+      trigger={['focus']}
+      title={title}
+      placement="topLeft"
+      classNames={{ root: 'numeric-input' }}
+    >
       <Input
         {...props}
         onChange={handleChange}
diff --git a/components/input/style/index.ts b/components/input/style/index.ts
index 6e9c80dab2..4ac3c73c5e 100644
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@@ -429,7 +429,9 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
       // https://codesandbox.io/s/wizardly-sun-u10br
       cursor: 'pointer',
       transition: `color ${token.motionDurationSlow}`,
-
+      border: 'none',
+      outline: 'none',
+      backgroundColor: 'transparent',
       '&:hover': {
         color: token.colorTextTertiary,
       },
diff --git a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2930ce244b..02c1f1b1b9 100644
--- a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1872,6 +1872,7 @@ Array [
               >
                 <input
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="top"
                 />
@@ -1892,6 +1893,7 @@ Array [
                 <input
                   checked=""
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="bottom"
                 />
@@ -1911,6 +1913,7 @@ Array [
               >
                 <input
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="both"
                 />
@@ -1953,6 +1956,7 @@ Array [
               >
                 <input
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="start"
                 />
@@ -1973,6 +1977,7 @@ Array [
                 <input
                   checked=""
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="center"
                 />
@@ -1992,6 +1997,7 @@ Array [
               >
                 <input
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="end"
                 />
diff --git a/components/list/__tests__/__snapshots__/demo.test.ts.snap b/components/list/__tests__/__snapshots__/demo.test.ts.snap
index 44cec7d7a0..caeac6807c 100644
--- a/components/list/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/list/__tests__/__snapshots__/demo.test.ts.snap
@@ -1865,6 +1865,7 @@ Array [
               >
                 <input
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="top"
                 />
@@ -1885,6 +1886,7 @@ Array [
                 <input
                   checked=""
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="bottom"
                 />
@@ -1904,6 +1906,7 @@ Array [
               >
                 <input
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="both"
                 />
@@ -1946,6 +1949,7 @@ Array [
               >
                 <input
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="start"
                 />
@@ -1966,6 +1970,7 @@ Array [
                 <input
                   checked=""
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="center"
                 />
@@ -1985,6 +1990,7 @@ Array [
               >
                 <input
                   class="ant-radio-button-input"
+                  name="test-id"
                   type="radio"
                   value="end"
                 />
diff --git a/components/locale/__tests__/__snapshots__/index.test.tsx.snap b/components/locale/__tests__/__snapshots__/index.test.tsx.snap
index 339a02196b..35dfe291f6 100644
--- a/components/locale/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/locale/__tests__/__snapshots__/index.test.tsx.snap
@@ -5728,10 +5728,9 @@ exports[`Locale Provider should display the text as ar 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -5753,7 +5752,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -5965,10 +5964,9 @@ exports[`Locale Provider should display the text as ar 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -5990,7 +5988,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -6195,6 +6193,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -6214,6 +6213,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -11041,10 +11041,9 @@ exports[`Locale Provider should display the text as az 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -11066,7 +11065,7 @@ exports[`Locale Provider should display the text as az 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -11278,10 +11277,9 @@ exports[`Locale Provider should display the text as az 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -11303,7 +11301,7 @@ exports[`Locale Provider should display the text as az 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -11508,6 +11506,7 @@ exports[`Locale Provider should display the text as az 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -11527,6 +11526,7 @@ exports[`Locale Provider should display the text as az 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -16354,10 +16354,9 @@ exports[`Locale Provider should display the text as bg 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -16379,7 +16378,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -16591,10 +16590,9 @@ exports[`Locale Provider should display the text as bg 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -16616,7 +16614,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -16821,6 +16819,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -16840,6 +16839,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -21667,10 +21667,9 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -21692,7 +21691,7 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -21904,10 +21903,9 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -21929,7 +21927,7 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -22134,6 +22132,7 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -22153,6 +22152,7 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -26980,10 +26980,9 @@ exports[`Locale Provider should display the text as by 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -27005,7 +27004,7 @@ exports[`Locale Provider should display the text as by 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -27217,10 +27216,9 @@ exports[`Locale Provider should display the text as by 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -27242,7 +27240,7 @@ exports[`Locale Provider should display the text as by 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -27447,6 +27445,7 @@ exports[`Locale Provider should display the text as by 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -27466,6 +27465,7 @@ exports[`Locale Provider should display the text as by 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -32293,10 +32293,9 @@ exports[`Locale Provider should display the text as ca 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -32318,7 +32317,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -32530,10 +32529,9 @@ exports[`Locale Provider should display the text as ca 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -32555,7 +32553,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -32760,6 +32758,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -32779,6 +32778,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -37606,10 +37606,9 @@ exports[`Locale Provider should display the text as cs 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -37631,7 +37630,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -37843,10 +37842,9 @@ exports[`Locale Provider should display the text as cs 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -37868,7 +37866,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -38073,6 +38071,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -38092,6 +38091,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -42919,10 +42919,9 @@ exports[`Locale Provider should display the text as da 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -42944,7 +42943,7 @@ exports[`Locale Provider should display the text as da 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -43156,10 +43155,9 @@ exports[`Locale Provider should display the text as da 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -43181,7 +43179,7 @@ exports[`Locale Provider should display the text as da 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -43386,6 +43384,7 @@ exports[`Locale Provider should display the text as da 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -43405,6 +43404,7 @@ exports[`Locale Provider should display the text as da 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -48232,10 +48232,9 @@ exports[`Locale Provider should display the text as de 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -48257,7 +48256,7 @@ exports[`Locale Provider should display the text as de 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -48469,10 +48468,9 @@ exports[`Locale Provider should display the text as de 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -48494,7 +48492,7 @@ exports[`Locale Provider should display the text as de 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -48699,6 +48697,7 @@ exports[`Locale Provider should display the text as de 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -48718,6 +48717,7 @@ exports[`Locale Provider should display the text as de 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -53545,10 +53545,9 @@ exports[`Locale Provider should display the text as el 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -53570,7 +53569,7 @@ exports[`Locale Provider should display the text as el 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -53782,10 +53781,9 @@ exports[`Locale Provider should display the text as el 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -53807,7 +53805,7 @@ exports[`Locale Provider should display the text as el 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -54012,6 +54010,7 @@ exports[`Locale Provider should display the text as el 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -54031,6 +54030,7 @@ exports[`Locale Provider should display the text as el 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -58858,10 +58858,9 @@ exports[`Locale Provider should display the text as en 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -58883,7 +58882,7 @@ exports[`Locale Provider should display the text as en 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -59095,10 +59094,9 @@ exports[`Locale Provider should display the text as en 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -59120,7 +59118,7 @@ exports[`Locale Provider should display the text as en 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -59325,6 +59323,7 @@ exports[`Locale Provider should display the text as en 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -59344,6 +59343,7 @@ exports[`Locale Provider should display the text as en 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -64171,10 +64171,9 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -64196,7 +64195,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -64408,10 +64407,9 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -64433,7 +64431,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -64638,6 +64636,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -64657,6 +64656,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -69484,10 +69484,9 @@ exports[`Locale Provider should display the text as es 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -69509,7 +69508,7 @@ exports[`Locale Provider should display the text as es 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -69721,10 +69720,9 @@ exports[`Locale Provider should display the text as es 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -69746,7 +69744,7 @@ exports[`Locale Provider should display the text as es 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -69951,6 +69949,7 @@ exports[`Locale Provider should display the text as es 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -69970,6 +69969,7 @@ exports[`Locale Provider should display the text as es 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -74797,10 +74797,9 @@ exports[`Locale Provider should display the text as et 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -74822,7 +74821,7 @@ exports[`Locale Provider should display the text as et 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -75034,10 +75033,9 @@ exports[`Locale Provider should display the text as et 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -75059,7 +75057,7 @@ exports[`Locale Provider should display the text as et 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -75264,6 +75262,7 @@ exports[`Locale Provider should display the text as et 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -75283,6 +75282,7 @@ exports[`Locale Provider should display the text as et 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -80110,10 +80110,9 @@ exports[`Locale Provider should display the text as eu 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -80135,7 +80134,7 @@ exports[`Locale Provider should display the text as eu 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -80347,10 +80346,9 @@ exports[`Locale Provider should display the text as eu 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -80372,7 +80370,7 @@ exports[`Locale Provider should display the text as eu 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -80577,6 +80575,7 @@ exports[`Locale Provider should display the text as eu 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -80596,6 +80595,7 @@ exports[`Locale Provider should display the text as eu 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -85423,10 +85423,9 @@ exports[`Locale Provider should display the text as fa 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -85448,7 +85447,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -85660,10 +85659,9 @@ exports[`Locale Provider should display the text as fa 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -85685,7 +85683,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -85890,6 +85888,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -85909,6 +85908,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -90736,10 +90736,9 @@ exports[`Locale Provider should display the text as fi 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -90761,7 +90760,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -90973,10 +90972,9 @@ exports[`Locale Provider should display the text as fi 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -90998,7 +90996,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -91203,6 +91201,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -91222,6 +91221,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -96049,10 +96049,9 @@ exports[`Locale Provider should display the text as fr 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -96074,7 +96073,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -96286,10 +96285,9 @@ exports[`Locale Provider should display the text as fr 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -96311,7 +96309,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -96516,6 +96514,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -96535,6 +96534,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -101362,10 +101362,9 @@ exports[`Locale Provider should display the text as fr 2`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -101387,7 +101386,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -101599,10 +101598,9 @@ exports[`Locale Provider should display the text as fr 2`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -101624,7 +101622,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -101829,6 +101827,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -101848,6 +101847,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -106675,10 +106675,9 @@ exports[`Locale Provider should display the text as fr 3`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -106700,7 +106699,7 @@ exports[`Locale Provider should display the text as fr 3`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -106912,10 +106911,9 @@ exports[`Locale Provider should display the text as fr 3`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -106937,7 +106935,7 @@ exports[`Locale Provider should display the text as fr 3`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -107142,6 +107140,7 @@ exports[`Locale Provider should display the text as fr 3`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -107161,6 +107160,7 @@ exports[`Locale Provider should display the text as fr 3`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -111988,10 +111988,9 @@ exports[`Locale Provider should display the text as ga 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -112013,7 +112012,7 @@ exports[`Locale Provider should display the text as ga 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -112225,10 +112224,9 @@ exports[`Locale Provider should display the text as ga 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -112250,7 +112248,7 @@ exports[`Locale Provider should display the text as ga 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -112455,6 +112453,7 @@ exports[`Locale Provider should display the text as ga 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -112474,6 +112473,7 @@ exports[`Locale Provider should display the text as ga 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -117301,10 +117301,9 @@ exports[`Locale Provider should display the text as gl 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -117326,7 +117325,7 @@ exports[`Locale Provider should display the text as gl 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -117538,10 +117537,9 @@ exports[`Locale Provider should display the text as gl 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -117563,7 +117561,7 @@ exports[`Locale Provider should display the text as gl 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -117768,6 +117766,7 @@ exports[`Locale Provider should display the text as gl 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -117787,6 +117786,7 @@ exports[`Locale Provider should display the text as gl 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -122614,10 +122614,9 @@ exports[`Locale Provider should display the text as he 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -122639,7 +122638,7 @@ exports[`Locale Provider should display the text as he 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -122851,10 +122850,9 @@ exports[`Locale Provider should display the text as he 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -122876,7 +122874,7 @@ exports[`Locale Provider should display the text as he 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -123081,6 +123079,7 @@ exports[`Locale Provider should display the text as he 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -123100,6 +123099,7 @@ exports[`Locale Provider should display the text as he 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -127927,10 +127927,9 @@ exports[`Locale Provider should display the text as hi 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -127952,7 +127951,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -128164,10 +128163,9 @@ exports[`Locale Provider should display the text as hi 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -128189,7 +128187,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -128394,6 +128392,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -128413,6 +128412,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -133240,10 +133240,9 @@ exports[`Locale Provider should display the text as hr 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -133265,7 +133264,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -133477,10 +133476,9 @@ exports[`Locale Provider should display the text as hr 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -133502,7 +133500,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -133707,6 +133705,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -133726,6 +133725,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -138553,10 +138553,9 @@ exports[`Locale Provider should display the text as hu 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -138578,7 +138577,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -138790,10 +138789,9 @@ exports[`Locale Provider should display the text as hu 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -138815,7 +138813,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -139020,6 +139018,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -139039,6 +139038,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -143866,10 +143866,9 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -143891,7 +143890,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -144103,10 +144102,9 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -144128,7 +144126,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -144333,6 +144331,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -144352,6 +144351,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -149179,10 +149179,9 @@ exports[`Locale Provider should display the text as id 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -149204,7 +149203,7 @@ exports[`Locale Provider should display the text as id 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -149416,10 +149415,9 @@ exports[`Locale Provider should display the text as id 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -149441,7 +149439,7 @@ exports[`Locale Provider should display the text as id 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -149646,6 +149644,7 @@ exports[`Locale Provider should display the text as id 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -149665,6 +149664,7 @@ exports[`Locale Provider should display the text as id 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -154492,10 +154492,9 @@ exports[`Locale Provider should display the text as is 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -154517,7 +154516,7 @@ exports[`Locale Provider should display the text as is 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -154729,10 +154728,9 @@ exports[`Locale Provider should display the text as is 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -154754,7 +154752,7 @@ exports[`Locale Provider should display the text as is 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -154959,6 +154957,7 @@ exports[`Locale Provider should display the text as is 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -154978,6 +154977,7 @@ exports[`Locale Provider should display the text as is 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -159805,10 +159805,9 @@ exports[`Locale Provider should display the text as it 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -159830,7 +159829,7 @@ exports[`Locale Provider should display the text as it 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -160042,10 +160041,9 @@ exports[`Locale Provider should display the text as it 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -160067,7 +160065,7 @@ exports[`Locale Provider should display the text as it 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -160272,6 +160270,7 @@ exports[`Locale Provider should display the text as it 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -160291,6 +160290,7 @@ exports[`Locale Provider should display the text as it 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -165118,10 +165118,9 @@ exports[`Locale Provider should display the text as ja 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -165143,7 +165142,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -165355,10 +165354,9 @@ exports[`Locale Provider should display the text as ja 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -165380,7 +165378,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -165585,6 +165583,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -165604,6 +165603,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -170431,10 +170431,9 @@ exports[`Locale Provider should display the text as ka 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -170456,7 +170455,7 @@ exports[`Locale Provider should display the text as ka 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -170668,10 +170667,9 @@ exports[`Locale Provider should display the text as ka 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -170693,7 +170691,7 @@ exports[`Locale Provider should display the text as ka 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -170898,6 +170896,7 @@ exports[`Locale Provider should display the text as ka 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -170917,6 +170916,7 @@ exports[`Locale Provider should display the text as ka 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -175744,10 +175744,9 @@ exports[`Locale Provider should display the text as kk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -175769,7 +175768,7 @@ exports[`Locale Provider should display the text as kk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -175981,10 +175980,9 @@ exports[`Locale Provider should display the text as kk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -176006,7 +176004,7 @@ exports[`Locale Provider should display the text as kk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -176211,6 +176209,7 @@ exports[`Locale Provider should display the text as kk 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -176230,6 +176229,7 @@ exports[`Locale Provider should display the text as kk 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -181056,10 +181056,9 @@ exports[`Locale Provider should display the text as km 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -181081,7 +181080,7 @@ exports[`Locale Provider should display the text as km 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -181292,10 +181291,9 @@ exports[`Locale Provider should display the text as km 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -181317,7 +181315,7 @@ exports[`Locale Provider should display the text as km 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -181522,6 +181520,7 @@ exports[`Locale Provider should display the text as km 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -181541,6 +181540,7 @@ exports[`Locale Provider should display the text as km 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -186368,10 +186368,9 @@ exports[`Locale Provider should display the text as kn 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -186393,7 +186392,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -186605,10 +186604,9 @@ exports[`Locale Provider should display the text as kn 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -186630,7 +186628,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -186835,6 +186833,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -186854,6 +186853,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -191681,10 +191681,9 @@ exports[`Locale Provider should display the text as ko 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -191706,7 +191705,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -191918,10 +191917,9 @@ exports[`Locale Provider should display the text as ko 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -191943,7 +191941,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -192148,6 +192146,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -192167,6 +192166,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -196994,10 +196994,9 @@ exports[`Locale Provider should display the text as ku 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -197019,7 +197018,7 @@ exports[`Locale Provider should display the text as ku 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -197231,10 +197230,9 @@ exports[`Locale Provider should display the text as ku 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -197256,7 +197254,7 @@ exports[`Locale Provider should display the text as ku 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -197461,6 +197459,7 @@ exports[`Locale Provider should display the text as ku 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -197480,6 +197479,7 @@ exports[`Locale Provider should display the text as ku 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -202307,10 +202307,9 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -202332,7 +202331,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -202544,10 +202543,9 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -202569,7 +202567,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -202774,6 +202772,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -202793,6 +202792,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -207620,10 +207620,9 @@ exports[`Locale Provider should display the text as lt 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -207645,7 +207644,7 @@ exports[`Locale Provider should display the text as lt 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -207857,10 +207856,9 @@ exports[`Locale Provider should display the text as lt 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -207882,7 +207880,7 @@ exports[`Locale Provider should display the text as lt 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -208087,6 +208085,7 @@ exports[`Locale Provider should display the text as lt 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -208106,6 +208105,7 @@ exports[`Locale Provider should display the text as lt 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -212933,10 +212933,9 @@ exports[`Locale Provider should display the text as lv 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -212958,7 +212957,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -213170,10 +213169,9 @@ exports[`Locale Provider should display the text as lv 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -213195,7 +213193,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -213400,6 +213398,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -213419,6 +213418,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -218246,10 +218246,9 @@ exports[`Locale Provider should display the text as mk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -218271,7 +218270,7 @@ exports[`Locale Provider should display the text as mk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -218483,10 +218482,9 @@ exports[`Locale Provider should display the text as mk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -218508,7 +218506,7 @@ exports[`Locale Provider should display the text as mk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -218713,6 +218711,7 @@ exports[`Locale Provider should display the text as mk 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -218732,6 +218731,7 @@ exports[`Locale Provider should display the text as mk 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -223559,10 +223559,9 @@ exports[`Locale Provider should display the text as ml 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -223584,7 +223583,7 @@ exports[`Locale Provider should display the text as ml 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -223796,10 +223795,9 @@ exports[`Locale Provider should display the text as ml 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -223821,7 +223819,7 @@ exports[`Locale Provider should display the text as ml 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -224026,6 +224024,7 @@ exports[`Locale Provider should display the text as ml 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -224045,6 +224044,7 @@ exports[`Locale Provider should display the text as ml 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -228872,10 +228872,9 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -228897,7 +228896,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -229109,10 +229108,9 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -229134,7 +229132,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -229339,6 +229337,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -229358,6 +229357,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -234185,10 +234185,9 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -234210,7 +234209,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -234422,10 +234421,9 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -234447,7 +234445,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -234652,6 +234650,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -234671,6 +234670,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -239498,10 +239498,9 @@ exports[`Locale Provider should display the text as my 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -239523,7 +239522,7 @@ exports[`Locale Provider should display the text as my 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -239735,10 +239734,9 @@ exports[`Locale Provider should display the text as my 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -239760,7 +239758,7 @@ exports[`Locale Provider should display the text as my 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -239965,6 +239963,7 @@ exports[`Locale Provider should display the text as my 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -239984,6 +239983,7 @@ exports[`Locale Provider should display the text as my 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -244811,10 +244811,9 @@ exports[`Locale Provider should display the text as nb 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -244836,7 +244835,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -245048,10 +245047,9 @@ exports[`Locale Provider should display the text as nb 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -245073,7 +245071,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -245278,6 +245276,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -245297,6 +245296,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -250124,10 +250124,9 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -250149,7 +250148,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -250361,10 +250360,9 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -250386,7 +250384,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -250591,6 +250589,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -250610,6 +250609,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -255437,10 +255437,9 @@ exports[`Locale Provider should display the text as nl 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -255462,7 +255461,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -255674,10 +255673,9 @@ exports[`Locale Provider should display the text as nl 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -255699,7 +255697,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -255904,6 +255902,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -255923,6 +255922,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -260750,10 +260750,9 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -260775,7 +260774,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -260987,10 +260986,9 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -261012,7 +261010,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -261217,6 +261215,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -261236,6 +261235,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -266063,10 +266063,9 @@ exports[`Locale Provider should display the text as pl 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -266088,7 +266087,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -266300,10 +266299,9 @@ exports[`Locale Provider should display the text as pl 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -266325,7 +266323,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -266530,6 +266528,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -266549,6 +266548,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -271376,10 +271376,9 @@ exports[`Locale Provider should display the text as pt 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -271401,7 +271400,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -271613,10 +271612,9 @@ exports[`Locale Provider should display the text as pt 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -271638,7 +271636,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -271843,6 +271841,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -271862,6 +271861,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -276689,10 +276689,9 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -276714,7 +276713,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -276926,10 +276925,9 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -276951,7 +276949,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -277156,6 +277154,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -277175,6 +277174,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -282002,10 +282002,9 @@ exports[`Locale Provider should display the text as ro 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -282027,7 +282026,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -282239,10 +282238,9 @@ exports[`Locale Provider should display the text as ro 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -282264,7 +282262,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -282469,6 +282467,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -282488,6 +282487,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -287315,10 +287315,9 @@ exports[`Locale Provider should display the text as ru 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -287340,7 +287339,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -287552,10 +287551,9 @@ exports[`Locale Provider should display the text as ru 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -287577,7 +287575,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -287782,6 +287780,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -287801,6 +287800,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -292628,10 +292628,9 @@ exports[`Locale Provider should display the text as si 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -292653,7 +292652,7 @@ exports[`Locale Provider should display the text as si 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -292865,10 +292864,9 @@ exports[`Locale Provider should display the text as si 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -292890,7 +292888,7 @@ exports[`Locale Provider should display the text as si 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -293095,6 +293093,7 @@ exports[`Locale Provider should display the text as si 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -293114,6 +293113,7 @@ exports[`Locale Provider should display the text as si 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -297941,10 +297941,9 @@ exports[`Locale Provider should display the text as sk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -297966,7 +297965,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -298178,10 +298177,9 @@ exports[`Locale Provider should display the text as sk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -298203,7 +298201,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -298408,6 +298406,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -298427,6 +298426,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -303254,10 +303254,9 @@ exports[`Locale Provider should display the text as sl 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -303279,7 +303278,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -303491,10 +303490,9 @@ exports[`Locale Provider should display the text as sl 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -303516,7 +303514,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -303721,6 +303719,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -303740,6 +303739,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -308567,10 +308567,9 @@ exports[`Locale Provider should display the text as sr 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -308592,7 +308591,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -308804,10 +308803,9 @@ exports[`Locale Provider should display the text as sr 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -308829,7 +308827,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -309034,6 +309032,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -309053,6 +309052,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -313880,10 +313880,9 @@ exports[`Locale Provider should display the text as sv 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -313905,7 +313904,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -314117,10 +314116,9 @@ exports[`Locale Provider should display the text as sv 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -314142,7 +314140,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -314347,6 +314345,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -314366,6 +314365,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -319193,10 +319193,9 @@ exports[`Locale Provider should display the text as ta 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -319218,7 +319217,7 @@ exports[`Locale Provider should display the text as ta 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -319430,10 +319429,9 @@ exports[`Locale Provider should display the text as ta 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -319455,7 +319453,7 @@ exports[`Locale Provider should display the text as ta 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -319660,6 +319658,7 @@ exports[`Locale Provider should display the text as ta 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -319679,6 +319678,7 @@ exports[`Locale Provider should display the text as ta 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -324506,10 +324506,9 @@ exports[`Locale Provider should display the text as th 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -324531,7 +324530,7 @@ exports[`Locale Provider should display the text as th 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -324743,10 +324742,9 @@ exports[`Locale Provider should display the text as th 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -324768,7 +324766,7 @@ exports[`Locale Provider should display the text as th 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -324973,6 +324971,7 @@ exports[`Locale Provider should display the text as th 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -324992,6 +324991,7 @@ exports[`Locale Provider should display the text as th 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -329819,10 +329819,9 @@ exports[`Locale Provider should display the text as tk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -329844,7 +329843,7 @@ exports[`Locale Provider should display the text as tk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -330056,10 +330055,9 @@ exports[`Locale Provider should display the text as tk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -330081,7 +330079,7 @@ exports[`Locale Provider should display the text as tk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -330286,6 +330284,7 @@ exports[`Locale Provider should display the text as tk 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -330305,6 +330304,7 @@ exports[`Locale Provider should display the text as tk 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -335132,10 +335132,9 @@ exports[`Locale Provider should display the text as tr 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -335157,7 +335156,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -335369,10 +335368,9 @@ exports[`Locale Provider should display the text as tr 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -335394,7 +335392,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -335599,6 +335597,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -335618,6 +335617,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -340445,10 +340445,9 @@ exports[`Locale Provider should display the text as uk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -340470,7 +340469,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -340682,10 +340681,9 @@ exports[`Locale Provider should display the text as uk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -340707,7 +340705,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -340912,6 +340910,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -340931,6 +340930,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -345758,10 +345758,9 @@ exports[`Locale Provider should display the text as ur 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -345783,7 +345782,7 @@ exports[`Locale Provider should display the text as ur 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -345995,10 +345994,9 @@ exports[`Locale Provider should display the text as ur 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -346020,7 +346018,7 @@ exports[`Locale Provider should display the text as ur 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -346225,6 +346223,7 @@ exports[`Locale Provider should display the text as ur 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -346244,6 +346243,7 @@ exports[`Locale Provider should display the text as ur 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -351071,10 +351071,9 @@ exports[`Locale Provider should display the text as uz-latn 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -351096,7 +351095,7 @@ exports[`Locale Provider should display the text as uz-latn 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -351308,10 +351307,9 @@ exports[`Locale Provider should display the text as uz-latn 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -351333,7 +351331,7 @@ exports[`Locale Provider should display the text as uz-latn 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -351538,6 +351536,7 @@ exports[`Locale Provider should display the text as uz-latn 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -351557,6 +351556,7 @@ exports[`Locale Provider should display the text as uz-latn 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -356384,10 +356384,9 @@ exports[`Locale Provider should display the text as vi 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -356409,7 +356408,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -356621,10 +356620,9 @@ exports[`Locale Provider should display the text as vi 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -356646,7 +356644,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -356851,6 +356849,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -356870,6 +356869,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -361697,10 +361697,9 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -361722,7 +361721,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -361934,10 +361933,9 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -361959,7 +361957,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -362164,6 +362162,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -362183,6 +362182,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -367010,10 +367010,9 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -367035,7 +367034,7 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -367247,10 +367246,9 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -367272,7 +367270,7 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -367477,6 +367475,7 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -367496,6 +367495,7 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
@@ -372323,10 +372323,9 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -372348,7 +372347,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -372560,10 +372559,9 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -372585,7 +372583,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -372790,6 +372788,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="month"
             />
@@ -372809,6 +372808,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="year"
             />
diff --git a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
index 1d3acc0fee..6e73c5b381 100644
--- a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -18,10 +18,9 @@ Array [
     <span
       class="ant-mentions-suffix"
     >
-      <span
+      <button
         class="ant-mentions-clear-icon"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -43,7 +42,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
   <br />,
@@ -64,10 +63,9 @@ Array [
     <span
       class="ant-mentions-suffix"
     >
-      <span
+      <button
         class="ant-mentions-clear-icon"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-square"
@@ -89,7 +87,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
   <br />,
@@ -110,10 +108,9 @@ Array [
     <span
       class="ant-mentions-suffix"
     >
-      <span
+      <button
         class="ant-mentions-clear-icon"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -135,7 +132,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
 ]
diff --git a/components/mentions/__tests__/__snapshots__/demo.test.tsx.snap b/components/mentions/__tests__/__snapshots__/demo.test.tsx.snap
index 8eef233cb6..3d18e5a013 100644
--- a/components/mentions/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/mentions/__tests__/__snapshots__/demo.test.tsx.snap
@@ -18,10 +18,9 @@ Array [
     <span
       class="ant-mentions-suffix"
     >
-      <span
+      <button
         class="ant-mentions-clear-icon"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -43,7 +42,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
   <br />,
@@ -64,10 +63,9 @@ Array [
     <span
       class="ant-mentions-suffix"
     >
-      <span
+      <button
         class="ant-mentions-clear-icon"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-square"
@@ -89,7 +87,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
   <br />,
@@ -110,10 +108,9 @@ Array [
     <span
       class="ant-mentions-suffix"
     >
-      <span
+      <button
         class="ant-mentions-clear-icon"
-        role="button"
-        tabindex="-1"
+        type="button"
       >
         <span
           aria-label="close-circle"
@@ -135,7 +132,7 @@ Array [
             />
           </svg>
         </span>
-      </span>
+      </button>
     </span>
   </span>,
 ]
diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md
index 10b50ef784..aeed53f00d 100644
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@@ -79,6 +79,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - |  |
 | onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |  |
 | onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |  |
+| onPopupScroll | Trigger when mentions scroll | (e: Event) => void | - | 5.23.0 |
 | options | Option Configuration | [Options](#option) | \[] | 5.1.0 |
 
 ### Mention methods
diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md
index efadfd3b37..f3eef8cd36 100644
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@@ -80,6 +80,7 @@ return (
 | onResize | resize 回调 | function({ width, height }) | - |  |
 | onSearch | 搜索时触发 | (text: string, prefix: string) => void | - |  |
 | onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - |  |
+| onPopupScroll | 滚动时触发 | (event: Event) => void | - | 5.23.0 |
 | options | 选项配置 | [Options](#option) | [] | 5.1.0 |
 
 ### Mentions 方法
diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts
index 46ca2db5d7..ad3472db10 100644
--- a/components/mentions/style/index.ts
+++ b/components/mentions/style/index.ts
@@ -134,6 +134,10 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
           cursor: 'pointer',
           transition: `color ${motionDurationSlow}`,
 
+          border: 'none',
+          outline: 'none',
+          backgroundColor: 'transparent',
+
           '&:hover': {
             color: colorTextTertiary,
           },
diff --git a/components/menu/MenuItem.tsx b/components/menu/MenuItem.tsx
index 60b44af953..51b0c6af09 100644
--- a/components/menu/MenuItem.tsx
+++ b/components/menu/MenuItem.tsx
@@ -116,7 +116,7 @@ const MenuItem: GenericComponent = (props) => {
       <Tooltip
         {...tooltipProps}
         placement={direction === 'rtl' ? 'left' : 'right'}
-        overlayClassName={`${prefixCls}-inline-collapsed-tooltip`}
+        classNames={{ root: `${prefixCls}-inline-collapsed-tooltip` }}
       >
         {returnNode}
       </Tooltip>
diff --git a/components/menu/style/index.ts b/components/menu/style/index.ts
index cf965730c8..5322192945 100644
--- a/components/menu/style/index.ts
+++ b/components/menu/style/index.ts
@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import type { CssUtil } from 'antd-style';
 
 import { clearFix, resetComponent, resetIcon } from '../../style';
@@ -95,6 +95,11 @@ export interface ComponentToken {
    * @descEN Color of selected menu item text
    */
   itemSelectedColor: string;
+  /**
+   * @desc 子菜单内有选中项时，子菜单标题色
+   * @descEN Color of submenu title when submenu has selected item
+   */
+  subMenuItemSelectedColor: string;
 
   /** @deprecated Use `horizontalItemSelectedColor` instead */
   colorItemTextSelectedHorizontal: string;
@@ -871,7 +876,7 @@ export const prepareComponentToken: GetDefaultToken<'Menu'> = (token) => {
   const activeBarBorderWidth = token.activeBarBorderWidth ?? lineWidth;
   const itemMarginInline = token.itemMarginInline ?? token.marginXXS;
 
-  const colorTextDark = new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString();
+  const colorTextDark = new FastColor(colorTextLightSolid).setA(0.65).toRgbString();
 
   return {
     dropdownWidth: 160,
@@ -890,6 +895,7 @@ export const prepareComponentToken: GetDefaultToken<'Menu'> = (token) => {
     groupTitleColor: colorTextDescription,
     colorItemTextSelected: colorPrimary,
     itemSelectedColor: colorPrimary,
+    subMenuItemSelectedColor: colorPrimary,
     colorItemTextSelectedHorizontal: colorPrimary,
     horizontalItemSelectedColor: colorPrimary,
     colorItemBg: colorBgContainer,
@@ -944,7 +950,7 @@ export const prepareComponentToken: GetDefaultToken<'Menu'> = (token) => {
     groupTitleFontSize: fontSize,
 
     // Disabled
-    darkItemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
+    darkItemDisabledColor: new FastColor(colorTextLightSolid).setA(0.25).toRgbString(),
 
     // Dark
     darkItemColor: colorTextDark,
diff --git a/components/menu/style/theme.ts b/components/menu/style/theme.ts
index b73961e511..98f482bf4c 100644
--- a/components/menu/style/theme.ts
+++ b/components/menu/style/theme.ts
@@ -13,6 +13,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     componentCls,
     itemColor,
     itemSelectedColor,
+    subMenuItemSelectedColor,
     groupTitleColor,
     itemBg,
     subMenuItemBg,
@@ -67,10 +68,8 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
         },
       },
 
-      [`${componentCls}-submenu-selected`]: {
-        [`> ${componentCls}-submenu-title`]: {
-          color: itemSelectedColor,
-        },
+      [`${componentCls}-submenu-selected > ${componentCls}-submenu-title`]: {
+        color: subMenuItemSelectedColor,
       },
 
       [`${componentCls}-item, ${componentCls}-submenu-title`]: {
diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
index 973d450f11..097a40b8b6 100644
--- a/components/modal/ConfirmDialog.tsx
+++ b/components/modal/ConfirmDialog.tsx
@@ -173,11 +173,6 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
   const {
     close,
     zIndex,
-    afterClose,
-    open,
-    keyboard,
-    centered,
-    getContainer,
     maskStyle,
     direction,
     prefixCls,
@@ -185,9 +180,6 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
     rootPrefixCls,
     bodyStyle,
     closable = false,
-    closeIcon,
-    modalRender,
-    focusTriggerAfterClose,
     onConfirm,
     styles,
   } = props;
@@ -234,7 +226,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
   // ========================= Render =========================
   return (
     <Modal
-      prefixCls={prefixCls}
+      {...props}
       className={classString}
       wrapClassName={classNames(
         { [`${confirmPrefixCls}-centered`]: !!props.centered },
@@ -244,7 +236,6 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
         close?.({ triggerCancel: true });
         onConfirm?.(false);
       }}
-      open={open}
       title=""
       footer={null}
       transitionName={getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName)}
@@ -255,14 +246,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
       styles={{ body: bodyStyle, mask: maskStyle, ...styles }}
       width={width}
       zIndex={mergedZIndex}
-      afterClose={afterClose}
-      keyboard={keyboard}
-      centered={centered}
-      getContainer={getContainer}
       closable={closable}
-      closeIcon={closeIcon}
-      modalRender={modalRender}
-      focusTriggerAfterClose={focusTriggerAfterClose}
     >
       <ConfirmContent {...props} confirmPrefixCls={confirmPrefixCls} />
     </Modal>
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index 3533c01568..367fceb15d 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -7,6 +7,7 @@ import ContextIsolator from '../_util/ContextIsolator';
 import useClosable, { pickClosable } from '../_util/hooks/useClosable';
 import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
+import { Breakpoint } from '../_util/responsiveObserver';
 import { canUseDocElement } from '../_util/styleChecker';
 import { devUseWarning } from '../_util/warning';
 import zIndexContext from '../_util/zindexContext';
@@ -124,12 +125,36 @@ const Modal: React.FC<ModalProps> = (props) => {
   // ============================ zIndex ============================
   const [zIndex, contextZIndex] = useZIndex('Modal', restProps.zIndex);
 
+  // =========================== Width ============================
+  const [numWidth, responsiveWidth] = React.useMemo<
+    [string | number | undefined, Partial<Record<Breakpoint, string | number>> | undefined]
+  >(() => {
+    if (width && typeof width === 'object') {
+      return [undefined, width];
+    }
+    return [width, undefined];
+  }, [width]);
+
+  const responsiveWidthVars = React.useMemo(() => {
+    const vars: Record<string, string> = {};
+    if (responsiveWidth) {
+      Object.keys(responsiveWidth).forEach((breakpoint) => {
+        const breakpointWidth = responsiveWidth[breakpoint as Breakpoint];
+        if (breakpointWidth !== undefined) {
+          vars[`--${prefixCls}-${breakpoint}-width`] =
+            typeof breakpointWidth === 'number' ? `${breakpointWidth}px` : breakpointWidth;
+        }
+      });
+    }
+    return vars;
+  }, [responsiveWidth]);
+
   // =========================== Render ===========================
   return wrapCSSVar(
     <ContextIsolator form space>
       <zIndexContext.Provider value={contextZIndex}>
         <Dialog
-          width={width}
+          width={numWidth}
           {...restProps}
           zIndex={zIndex}
           getContainer={getContainer === undefined ? getContextPopupContainer : getContainer}
@@ -149,7 +174,7 @@ const Modal: React.FC<ModalProps> = (props) => {
           transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
           maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
           className={classNames(hashId, className, modalContext?.className)}
-          style={{ ...modalContext?.style, ...style }}
+          style={{ ...modalContext?.style, ...style, ...responsiveWidthVars }}
           classNames={{
             ...modalContext?.classNames,
             ...modalClassNames,
diff --git a/components/modal/__tests__/Modal.test.tsx b/components/modal/__tests__/Modal.test.tsx
index c432b9446c..134d126bd2 100644
--- a/components/modal/__tests__/Modal.test.tsx
+++ b/components/modal/__tests__/Modal.test.tsx
@@ -192,4 +192,20 @@ describe('Modal', () => {
     expect(document.querySelector('.first-origin')).toMatchSnapshot();
     expect(document.querySelector('.second-props-origin')).toMatchSnapshot();
   });
+
+  it('responsive width', () => {
+    render(
+      <Modal open width={{ xs: '90%', sm: '80%', md: '70%', lg: '60%', xl: '50%', xxl: '40%' }} />,
+    );
+
+    const modalEle = document.querySelector<HTMLDivElement>('.ant-modal')!;
+    expect(modalEle).toHaveStyle({
+      '--ant-modal-xs-width': '90%',
+      '--ant-modal-sm-width': '80%',
+      '--ant-modal-md-width': '70%',
+      '--ant-modal-lg-width': '60%',
+      '--ant-modal-xl-width': '50%',
+      '--ant-modal-xxl-width': '40%',
+    });
+  });
 });
diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
index f4a9d63ee1..0235718a76 100644
--- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1228,14 +1228,26 @@ exports[`renders components/modal/demo/static-info.tsx extend context correctly
 exports[`renders components/modal/demo/static-info.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/modal/demo/width.tsx extend context correctly 1`] = `
-<button
-  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-  type="button"
+<div
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
 >
-  <span>
-    Open Modal of 1000px width
-  </span>
-</button>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Open Modal of 1000px width
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Open Modal of responsive width
+    </span>
+  </button>
+</div>
 `;
 
 exports[`renders components/modal/demo/width.tsx extend context correctly 2`] = `[]`;
diff --git a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
index f2c84908be..17817d8707 100644
--- a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1188,14 +1188,26 @@ exports[`renders components/modal/demo/static-info.tsx correctly 1`] = `
 `;
 
 exports[`renders components/modal/demo/width.tsx correctly 1`] = `
-<button
-  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-  type="button"
+<div
+  class="ant-flex ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
 >
-  <span>
-    Open Modal of 1000px width
-  </span>
-</button>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Open Modal of 1000px width
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      Open Modal of responsive width
+    </span>
+  </button>
+</div>
 `;
 
 exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
diff --git a/components/modal/demo/width.tsx b/components/modal/demo/width.tsx
index 9a353f98ee..f492e4194c 100644
--- a/components/modal/demo/width.tsx
+++ b/components/modal/demo/width.tsx
@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
-import { Button, Modal } from 'antd';
+import { Button, Flex, Modal } from 'antd';
 
 const App: React.FC = () => {
   const [open, setOpen] = useState(false);
+  const [openResponsive, setOpenResponsive] = useState(false);
 
   return (
-    <>
+    <Flex vertical gap="middle" align="flex-start">
+      {/* Basic */}
       <Button type="primary" onClick={() => setOpen(true)}>
         Open Modal of 1000px width
       </Button>
@@ -21,7 +23,31 @@ const App: React.FC = () => {
         <p>some contents...</p>
         <p>some contents...</p>
       </Modal>
-    </>
+
+      {/* Responsive */}
+      <Button type="primary" onClick={() => setOpenResponsive(true)}>
+        Open Modal of responsive width
+      </Button>
+      <Modal
+        title="Modal responsive width"
+        centered
+        open={openResponsive}
+        onOk={() => setOpenResponsive(false)}
+        onCancel={() => setOpenResponsive(false)}
+        width={{
+          xs: '90%',
+          sm: '80%',
+          md: '70%',
+          lg: '60%',
+          xl: '50%',
+          xxl: '40%',
+        }}
+      >
+        <p>some contents...</p>
+        <p>some contents...</p>
+        <p>some contents...</p>
+      </Modal>
+    </Flex>
   );
 };
 
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
index b27d6e714f..bd04d5c6d5 100644
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@@ -72,7 +72,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | loading | Show the skeleton | boolean |  | 5.18.0 |
 | title | The modal dialog's title | ReactNode | - |  |
 | open | Whether the modal dialog is visible or not | boolean | false |  |
-| width | Width of the modal dialog | string \| number | 520 |  |
+| width | Width of the modal dialog | string \| number \| [Breakpoint](/components/grid-cn#col) | 520 | Breakpoint: 5.23.0 |
 | wrapClassName | The class name of the container of the modal dialog | string | - |  |
 | zIndex | The `z-index` of the Modal | number | 1000 |  |
 | onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - |  |
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
index 4fbac6ecc6..7f2446217e 100644
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -73,7 +73,7 @@ demo:
 | loading | 显示骨架屏 | boolean |  | 5.18.0 |
 | title | 标题 | ReactNode | - |  |
 | open | 对话框是否可见 | boolean | - |  |
-| width | 宽度 | string \| number | 520 |  |
+| width | 宽度 | string \| number \| [Breakpoint](/components/grid-cn#col) | 520 | Breakpoint: 5.23.0 |
 | wrapClassName | 对话框外层容器的类名 | string | - |  |
 | zIndex | 设置 Modal 的 `z-index` | number | 1000 |  |
 | onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |  |
diff --git a/components/modal/interface.ts b/components/modal/interface.ts
index 6064820d41..c37268ca7b 100644
--- a/components/modal/interface.ts
+++ b/components/modal/interface.ts
@@ -1,10 +1,11 @@
 import type React from 'react';
 import type { DialogProps } from 'rc-dialog';
 
+import { Breakpoint } from '../_util/responsiveObserver';
 import type { ButtonProps, LegacyButtonType } from '../button/button';
 import type { DirectionType } from '../config-provider';
 
-interface ModalCommonProps extends Omit<DialogProps, 'footer'> {
+interface ModalCommonProps extends Omit<DialogProps, 'footer' | 'width'> {
   footer?:
     | React.ReactNode
     | ((
@@ -30,7 +31,7 @@ export interface ModalProps extends ModalCommonProps {
   /** Centered Modal */
   centered?: boolean;
   /** Width of the modal dialog */
-  width?: string | number;
+  width?: string | number | Partial<Record<Breakpoint, string | number>>;
   /** Text of the OK button */
   okText?: React.ReactNode;
   /** Button `type` of the OK button */
diff --git a/components/modal/style/index.ts b/components/modal/style/index.ts
index 1c37558a6b..602779d1dd 100644
--- a/components/modal/style/index.ts
+++ b/components/modal/style/index.ts
@@ -1,6 +1,7 @@
 import type React from 'react';
 import { unit } from '@ant-design/cssinjs';
 
+import { getMediaSize } from '../../grid/style';
 import { genFocusStyle, resetComponent } from '../../style';
 import { initFadeMotion, initZoomMotion } from '../../style/motion';
 import type {
@@ -386,6 +387,30 @@ const genRTLStyle: GenerateStyle<ModalToken> = (token) => {
   };
 };
 
+const genResponsiveWidthStyle: GenerateStyle<ModalToken> = (token) => {
+  const { componentCls } = token;
+
+  const gridMediaSizesMap: Record<string, number> = getMediaSize(token);
+  delete gridMediaSizesMap.xs;
+
+  const responsiveStyles = Object.keys(gridMediaSizesMap).map((key) => ({
+    [`@media (min-width: ${unit(gridMediaSizesMap[key])})`]: {
+      width: `var(--${componentCls.replace('.', '')}-${key}-width)`,
+    },
+  }));
+
+  return {
+    [`${componentCls}-root`]: {
+      [componentCls]: [
+        {
+          width: `var(--${componentCls.replace('.', '')}-xs-width)`,
+        },
+        ...responsiveStyles,
+      ],
+    },
+  };
+};
+
 // ============================== Export ==============================
 export const prepareToken: (token: Parameters<GenStyleFn<'Modal'>>[0]) => ModalToken = (token) => {
   const headerPaddingVertical = token.padding;
@@ -453,6 +478,7 @@ export default genStyleHooks(
       genRTLStyle(modalToken),
       genModalMaskStyle(modalToken),
       initZoomMotion(modalToken, 'zoom'),
+      genResponsiveWidthStyle(modalToken),
     ];
   },
   prepareComponentToken,
diff --git a/components/popconfirm/__tests__/index.test.tsx b/components/popconfirm/__tests__/index.test.tsx
index ff217efd02..0b5107a1ce 100644
--- a/components/popconfirm/__tests__/index.test.tsx
+++ b/components/popconfirm/__tests__/index.test.tsx
@@ -378,4 +378,33 @@ describe('Popconfirm', () => {
     expect(document.body.querySelectorAll('.ant-btn')[0].textContent).toBe('Cancel');
     expect(document.body.querySelectorAll('.ant-btn')[1].textContent).toBe('OK');
   });
+
+  it('should apply custom styles to Popconfirm', () => {
+    const customClassNames = {
+      body: 'custom-body',
+      root: 'custom-root',
+    };
+
+    const customStyles = {
+      body: { color: 'red' },
+      root: { backgroundColor: 'blue' },
+    };
+
+    const { container } = render(
+      <Popconfirm classNames={customClassNames} title="" styles={customStyles} open>
+        <span />
+      </Popconfirm>,
+    );
+
+    const popconfirmElement = container.querySelector('.ant-popconfirm') as HTMLElement;
+    const popconfirmBodyElement = container.querySelector('.ant-popover-inner') as HTMLElement;
+
+    // 验证 classNames
+    expect(popconfirmElement.classList).toContain('custom-root');
+    expect(popconfirmBodyElement.classList).toContain('custom-body');
+
+    // 验证 styles
+    expect(popconfirmElement.style.backgroundColor).toBe('blue');
+    expect(popconfirmBodyElement.style.color).toBe('red');
+  });
 });
diff --git a/components/popconfirm/demo/_semantic.tsx b/components/popconfirm/demo/_semantic.tsx
new file mode 100644
index 0000000000..d56e2eb1fa
--- /dev/null
+++ b/components/popconfirm/demo/_semantic.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Popconfirm } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    root: '根节点 (包含箭头、内容元素)',
+    body: '内容元素',
+  },
+  en: {
+    root: 'Root element (including arrows, content elements)',
+    body: 'Body element',
+  },
+};
+
+const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+  const divRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
+      <Popconfirm
+        title="prompt text"
+        open
+        placement="top"
+        autoAdjustOverflow={false}
+        getPopupContainer={() => divRef.current}
+        {...props}
+      />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      semantics={[
+        { name: 'root', desc: locale.root, version: '5.23.0' },
+        { name: 'body', desc: locale.body, version: '5.23.0' },
+      ]}
+    >
+      <BlockList />
+    </SemanticPreview>
+  );
+};
+
+export default App;
diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md
index d03f2b1fa5..42e7ba04d5 100644
--- a/components/popconfirm/index.en-US.md
+++ b/components/popconfirm/index.en-US.md
@@ -53,6 +53,10 @@ Common props ref：[Common props](/docs/react/common-props)
 
 <embed src="../tooltip/shared/sharedProps.en-US.md"></embed>
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## Design Token
 
 <ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx
index fa53d36383..0f0bc32569 100644
--- a/components/popconfirm/index.tsx
+++ b/components/popconfirm/index.tsx
@@ -48,10 +48,13 @@ const InternalPopconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props,
     overlayClassName,
     onOpenChange,
     onVisibleChange,
+    overlayStyle,
+    styles,
+    classNames: popconfirmClassNames,
     ...restProps
   } = props;
 
-  const { getPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls, popconfirm } = React.useContext(ConfigContext);
   const [open, setOpen] = useMergedState(false, {
     value: props.open ?? props.visible,
     defaultValue: props.defaultOpen ?? props.defaultVisible,
@@ -83,7 +86,13 @@ const InternalPopconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props,
   };
 
   const prefixCls = getPrefixCls('popconfirm', customizePrefixCls);
-  const overlayClassNames = classNames(prefixCls, overlayClassName);
+  const rootClassNames = classNames(
+    prefixCls,
+    overlayClassName,
+    popconfirm?.classNames?.root,
+    popconfirmClassNames?.root,
+  );
+  const bodyClassNames = classNames(popconfirm?.classNames?.body, popconfirmClassNames?.body);
 
   const [wrapCSSVar] = useStyle(prefixCls);
 
@@ -95,7 +104,19 @@ const InternalPopconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props,
       onOpenChange={onInternalOpenChange}
       open={open}
       ref={ref}
-      overlayClassName={overlayClassNames}
+      classNames={{ root: rootClassNames, body: bodyClassNames }}
+      styles={{
+        root: {
+          ...popconfirm?.styles?.root,
+          ...popconfirm?.style,
+          ...overlayStyle,
+          ...styles?.root,
+        },
+        body: {
+          ...popconfirm?.styles?.body,
+          ...styles?.body,
+        },
+      }}
       content={
         <Overlay
           okType={okType}
diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md
index b94c40cc1e..a9bd628e29 100644
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@@ -54,6 +54,10 @@ demo:
 
 <embed src="../tooltip/shared/sharedProps.zh-CN.md"></embed>
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
index b58dcb581e..7bf4407597 100644
--- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -5,8 +5,9 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
     style="margin-bottom: 24px;"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -17,12 +18,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Show"
         >
           Show
@@ -33,12 +34,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Hide"
         >
           Hide
@@ -49,12 +50,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Center"
         >
           Center
diff --git a/components/popover/__tests__/__snapshots__/demo.test.tsx.snap b/components/popover/__tests__/__snapshots__/demo.test.tsx.snap
index 0404d1b67f..5156a56924 100644
--- a/components/popover/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/popover/__tests__/__snapshots__/demo.test.tsx.snap
@@ -5,8 +5,9 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
     style="margin-bottom:24px"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -17,12 +18,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Show"
         >
           Show
@@ -33,12 +34,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Hide"
         >
           Hide
@@ -49,12 +50,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Center"
         >
           Center
diff --git a/components/popover/__tests__/index.test.tsx b/components/popover/__tests__/index.test.tsx
index 2764ef002c..a5846bc279 100644
--- a/components/popover/__tests__/index.test.tsx
+++ b/components/popover/__tests__/index.test.tsx
@@ -137,4 +137,33 @@ describe('Popover', () => {
       expect(popup).toBe(null);
     });
   });
+
+  it('should apply custom styles to Popover', () => {
+    const customClassNames = {
+      body: 'custom-body',
+      root: 'custom-root',
+    };
+
+    const customStyles = {
+      body: { color: 'red' },
+      root: { backgroundColor: 'blue' },
+    };
+
+    const { container } = render(
+      <Popover classNames={customClassNames} overlay={<div />} styles={customStyles} open>
+        <button type="button">button</button>
+      </Popover>,
+    );
+
+    const popoverElement = container.querySelector('.ant-popover') as HTMLElement;
+    const popoverBodyElement = container.querySelector('.ant-popover-inner') as HTMLElement;
+
+    // 验证 classNames
+    expect(popoverElement.classList).toContain('custom-root');
+    expect(popoverBodyElement.classList).toContain('custom-body');
+
+    // 验证 styles
+    expect(popoverElement.style.backgroundColor).toBe('blue');
+    expect(popoverBodyElement.style.color).toBe('red');
+  });
 });
diff --git a/components/popover/demo/_semantic.tsx b/components/popover/demo/_semantic.tsx
new file mode 100644
index 0000000000..18a3ed98cf
--- /dev/null
+++ b/components/popover/demo/_semantic.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Popover } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    root: '根节点 (包含箭头、内容元素)',
+    body: '内容元素',
+  },
+  en: {
+    root: 'Root element (including arrows, content elements)',
+    body: 'Body element',
+  },
+};
+
+const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+  const divRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
+      <Popover
+        title="prompt text"
+        open
+        placement="top"
+        autoAdjustOverflow={false}
+        getPopupContainer={() => divRef.current}
+        {...props}
+      />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      semantics={[
+        { name: 'root', desc: locale.root, version: '5.23.0' },
+        { name: 'body', desc: locale.body, version: '5.23.0' },
+      ]}
+    >
+      <BlockList />
+    </SemanticPreview>
+  );
+};
+
+export default App;
diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md
index 6cdbce7bcb..176d551342 100644
--- a/components/popover/index.en-US.md
+++ b/components/popover/index.en-US.md
@@ -47,6 +47,10 @@ Common props ref：[Common props](/docs/react/common-props)
 
 Please ensure that the child node of `Popover` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## Design Token
 
 <ComponentTokenTable component="Popover"></ComponentTokenTable>
diff --git a/components/popover/index.tsx b/components/popover/index.tsx
index 9d9de31591..d3d279f1f1 100644
--- a/components/popover/index.tsx
+++ b/components/popover/index.tsx
@@ -36,15 +36,25 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
     mouseLeaveDelay = 0.1,
     onOpenChange,
     overlayStyle = {},
+    styles,
+    classNames: popoverClassNames,
     ...otherProps
   } = props;
-  const { getPrefixCls } = React.useContext(ConfigContext);
+  const { popover, getPrefixCls } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('popover', customizePrefixCls);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
   const rootPrefixCls = getPrefixCls();
 
-  const overlayCls = classNames(overlayClassName, hashId, cssVarCls);
+  const rootClassNames = classNames(
+    overlayClassName,
+    hashId,
+    cssVarCls,
+    popover?.classNames?.root,
+    popoverClassNames?.root,
+  );
+  const bodyClassNames = classNames(popover?.classNames?.body, popoverClassNames?.body);
+
   const [open, setOpen] = useMergedState(false, {
     value: props.open ?? props.visible,
     defaultValue: props.defaultOpen ?? props.defaultVisible,
@@ -77,10 +87,21 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
       trigger={trigger}
       mouseEnterDelay={mouseEnterDelay}
       mouseLeaveDelay={mouseLeaveDelay}
-      overlayStyle={overlayStyle}
       {...otherProps}
       prefixCls={prefixCls}
-      overlayClassName={overlayCls}
+      classNames={{ root: rootClassNames, body: bodyClassNames }}
+      styles={{
+        root: {
+          ...popover?.styles?.root,
+          ...popover?.style,
+          ...overlayStyle,
+          ...styles?.root,
+        },
+        body: {
+          ...popover?.styles?.body,
+          ...styles?.body,
+        },
+      }}
       ref={ref}
       open={open}
       onOpenChange={onInternalOpenChange}
diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md
index 291c51bcc5..1400be912f 100644
--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@@ -48,6 +48,10 @@ demo:
 
 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Popover"></ComponentTokenTable>
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index 21908bde71..268aaf1e00 100644
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -3,7 +3,7 @@ import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CheckOutlined from '@ant-design/icons/CheckOutlined';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 
@@ -92,7 +92,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
         typeof strokeColorNotArray === 'string'
           ? strokeColorNotArray
           : Object.values(strokeColorNotArray)[0];
-      return new TinyColor(color).isLight();
+      return new FastColor(color).isLight();
     }
     return false;
   }, [strokeColor]);
diff --git a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
index db44c8a9ee..f21535ec98 100644
--- a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -389,7 +389,8 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
     <div
       aria-label="segmented control"
       class="ant-segmented"
-      role="listbox"
+      role="radiogroup"
+      tabindex="0"
     >
       <div
         class="ant-segmented-group"
@@ -400,12 +401,12 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
           <input
             checked=""
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="true"
             class="ant-segmented-item-label"
-            role="option"
             title="canvas"
           >
             canvas
@@ -416,12 +417,12 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="svg"
           >
             svg
@@ -479,7 +480,8 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -490,12 +492,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="L"
         >
           L
@@ -506,12 +508,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="M"
         >
           M
@@ -522,12 +524,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Q"
         >
           Q
@@ -538,12 +540,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="H"
         >
           H
@@ -732,7 +734,7 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
         />
         <path
           d="M0 0h7v1H0zM8 0h2v1H8zM11 0h5v1H11zM18,0 h7v1H18zM0 1h1v1H0zM6 1h1v1H6zM10 1h6v1H10zM18 1h1v1H18zM24,1 h1v1H24zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h1v1H8zM10 2h1v1H10zM12 2h1v1H12zM15 2h1v1H15zM18 2h1v1H18zM20 2h3v1H20zM24,2 h1v1H24zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM8 3h2v1H8zM15 3h1v1H15zM18 3h1v1H18zM20 3h3v1H20zM24,3 h1v1H24zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM10 4h1v1H10zM12 4h1v1H12zM14 4h3v1H14zM18 4h1v1H18zM20 4h3v1H20zM24,4 h1v1H24zM0 5h1v1H0zM6 5h1v1H6zM8 5h1v1H8zM11 5h1v1H11zM15 5h2v1H15zM18 5h1v1H18zM24,5 h1v1H24zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18,6 h7v1H18zM8 7h1v1H8zM14 7h3v1H14zM1 8h1v1H1zM3 8h1v1H3zM5 8h8v1H5zM15 8h5v1H15zM21 8h2v1H21zM24,8 h1v1H24zM0 9h3v1H0zM7 9h1v1H7zM9 9h2v1H9zM16 9h3v1H16zM24,9 h1v1H24zM4 10h1v1H4zM6 10h2v1H6zM16 10h2v1H16zM20 10h1v1H20zM23,10 h2v1H23zM0 11h1v1H0zM2 11h2v1H2zM8 11h1v1H8zM11 11h2v1H11zM14 11h1v1H14zM18 11h3v1H18zM0 12h2v1H0zM4 12h4v1H4zM10 12h3v1H10zM17 12h2v1H17zM21 12h1v1H21zM23,12 h2v1H23zM1 13h2v1H1zM5 13h1v1H5zM7 13h1v1H7zM9 13h1v1H9zM11 13h1v1H11zM18 13h2v1H18zM21 13h2v1H21zM24,13 h1v1H24zM0 14h1v1H0zM2 14h2v1H2zM6 14h2v1H6zM9 14h1v1H9zM11 14h1v1H11zM18 14h3v1H18zM22 14h1v1H22zM24,14 h1v1H24zM1 15h1v1H1zM3 15h3v1H3zM7 15h1v1H7zM9 15h2v1H9zM13 15h1v1H13zM15 15h3v1H15zM20 15h1v1H20zM23 15h1v1H23zM0 16h3v1H0zM4 16h1v1H4zM6 16h1v1H6zM9 16h1v1H9zM12 16h1v1H12zM14 16h1v1H14zM16 16h7v1H16zM8 17h1v1H8zM10 17h1v1H10zM12 17h5v1H12zM20 17h2v1H20zM24,17 h1v1H24zM0 18h7v1H0zM8 18h3v1H8zM14 18h3v1H14zM18 18h1v1H18zM20 18h2v1H20zM23,18 h2v1H23zM0 19h1v1H0zM6 19h1v1H6zM8 19h2v1H8zM13 19h1v1H13zM16 19h1v1H16zM20 19h3v1H20zM24,19 h1v1H24zM0 20h1v1H0zM2 20h3v1H2zM6 20h1v1H6zM9 20h1v1H9zM11 20h3v1H11zM16 20h6v1H16zM23,20 h2v1H23zM0 21h1v1H0zM2 21h3v1H2zM6 21h1v1H6zM8 21h2v1H8zM11 21h1v1H11zM15 21h1v1H15zM17 21h1v1H17zM19 21h4v1H19zM0 22h1v1H0zM2 22h3v1H2zM6 22h1v1H6zM9 22h5v1H9zM15 22h1v1H15zM19 22h2v1H19zM22 22h1v1H22zM24,22 h1v1H24zM0 23h1v1H0zM6 23h1v1H6zM8 23h1v1H8zM10 23h1v1H10zM13 23h1v1H13zM15 23h4v1H15zM21 23h1v1H21zM0 24h7v1H0zM14 24h3v1H14zM19 24h1v1H19zM23,24 h2v1H23z"
-          fill="rgba(0, 0, 0, 0.88)"
+          fill="rgba(0,0,0,0.88)"
           shape-rendering="crispEdges"
         />
       </svg>
diff --git a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
index f3accc9587..e849374bba 100644
--- a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
@@ -347,7 +347,8 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
     <div
       aria-label="segmented control"
       class="ant-segmented"
-      role="listbox"
+      role="radiogroup"
+      tabindex="0"
     >
       <div
         class="ant-segmented-group"
@@ -358,12 +359,12 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="true"
             class="ant-segmented-item-label"
-            role="option"
             title="canvas"
           >
             canvas
@@ -374,12 +375,12 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="svg"
           >
             svg
@@ -435,7 +436,8 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -446,12 +448,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="L"
         >
           L
@@ -462,12 +464,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="M"
         >
           M
@@ -478,12 +480,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Q"
         >
           Q
@@ -494,12 +496,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="H"
         >
           H
@@ -682,7 +684,7 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
         />
         <path
           d="M0 0h7v1H0zM8 0h2v1H8zM11 0h5v1H11zM18,0 h7v1H18zM0 1h1v1H0zM6 1h1v1H6zM10 1h6v1H10zM18 1h1v1H18zM24,1 h1v1H24zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h1v1H8zM10 2h1v1H10zM12 2h1v1H12zM15 2h1v1H15zM18 2h1v1H18zM20 2h3v1H20zM24,2 h1v1H24zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM8 3h2v1H8zM15 3h1v1H15zM18 3h1v1H18zM20 3h3v1H20zM24,3 h1v1H24zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM10 4h1v1H10zM12 4h1v1H12zM14 4h3v1H14zM18 4h1v1H18zM20 4h3v1H20zM24,4 h1v1H24zM0 5h1v1H0zM6 5h1v1H6zM8 5h1v1H8zM11 5h1v1H11zM15 5h2v1H15zM18 5h1v1H18zM24,5 h1v1H24zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18,6 h7v1H18zM8 7h1v1H8zM14 7h3v1H14zM1 8h1v1H1zM3 8h1v1H3zM5 8h8v1H5zM15 8h5v1H15zM21 8h2v1H21zM24,8 h1v1H24zM0 9h3v1H0zM7 9h1v1H7zM9 9h2v1H9zM16 9h3v1H16zM24,9 h1v1H24zM4 10h1v1H4zM6 10h2v1H6zM16 10h2v1H16zM20 10h1v1H20zM23,10 h2v1H23zM0 11h1v1H0zM2 11h2v1H2zM8 11h1v1H8zM11 11h2v1H11zM14 11h1v1H14zM18 11h3v1H18zM0 12h2v1H0zM4 12h4v1H4zM10 12h3v1H10zM17 12h2v1H17zM21 12h1v1H21zM23,12 h2v1H23zM1 13h2v1H1zM5 13h1v1H5zM7 13h1v1H7zM9 13h1v1H9zM11 13h1v1H11zM18 13h2v1H18zM21 13h2v1H21zM24,13 h1v1H24zM0 14h1v1H0zM2 14h2v1H2zM6 14h2v1H6zM9 14h1v1H9zM11 14h1v1H11zM18 14h3v1H18zM22 14h1v1H22zM24,14 h1v1H24zM1 15h1v1H1zM3 15h3v1H3zM7 15h1v1H7zM9 15h2v1H9zM13 15h1v1H13zM15 15h3v1H15zM20 15h1v1H20zM23 15h1v1H23zM0 16h3v1H0zM4 16h1v1H4zM6 16h1v1H6zM9 16h1v1H9zM12 16h1v1H12zM14 16h1v1H14zM16 16h7v1H16zM8 17h1v1H8zM10 17h1v1H10zM12 17h5v1H12zM20 17h2v1H20zM24,17 h1v1H24zM0 18h7v1H0zM8 18h3v1H8zM14 18h3v1H14zM18 18h1v1H18zM20 18h2v1H20zM23,18 h2v1H23zM0 19h1v1H0zM6 19h1v1H6zM8 19h2v1H8zM13 19h1v1H13zM16 19h1v1H16zM20 19h3v1H20zM24,19 h1v1H24zM0 20h1v1H0zM2 20h3v1H2zM6 20h1v1H6zM9 20h1v1H9zM11 20h3v1H11zM16 20h6v1H16zM23,20 h2v1H23zM0 21h1v1H0zM2 21h3v1H2zM6 21h1v1H6zM8 21h2v1H8zM11 21h1v1H11zM15 21h1v1H15zM17 21h1v1H17zM19 21h4v1H19zM0 22h1v1H0zM2 22h3v1H2zM6 22h1v1H6zM9 22h5v1H9zM15 22h1v1H15zM19 22h2v1H19zM22 22h1v1H22zM24,22 h1v1H24zM0 23h1v1H0zM6 23h1v1H6zM8 23h1v1H8zM10 23h1v1H10zM13 23h1v1H13zM15 23h4v1H15zM21 23h1v1H21zM0 24h7v1H0zM14 24h3v1H14zM19 24h1v1H19zM23,24 h2v1H23z"
-          fill="rgba(0, 0, 0, 0.88)"
+          fill="rgba(0,0,0,0.88)"
           shape-rendering="crispEdges"
         />
       </svg>
diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts
index 8bc0a78a1b..5ce1ccae67 100644
--- a/components/qr-code/style/index.ts
+++ b/components/qr-code/style/index.ts
@@ -1,5 +1,5 @@
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@@ -80,7 +80,7 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
 };
 
 export const prepareComponentToken: GetDefaultToken<'QRCode'> = (token) => ({
-  QRCodeMaskBackgroundColor: new TinyColor(token.colorBgContainer).setAlpha(0.96).toRgbString(),
+  QRCodeMaskBackgroundColor: new FastColor(token.colorBgContainer).setA(0.96).toRgbString(),
 });
 
 export default genStyleHooks<'QRCode'>(
diff --git a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
index e57e46a5f9..66c9ed7385 100644
--- a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -15,6 +15,7 @@ exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] =
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="1"
         />
@@ -56,6 +57,7 @@ exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] =
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="2"
         />
@@ -180,6 +182,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="a"
           />
@@ -199,6 +202,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="b"
           />
@@ -218,6 +222,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="c"
           />
@@ -237,6 +242,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="d"
           />
@@ -266,6 +272,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
             checked=""
             class="ant-radio-button-input"
             disabled=""
+            name="test-id"
             type="radio"
             value="a"
           />
@@ -286,6 +293,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
           <input
             class="ant-radio-button-input"
             disabled=""
+            name="test-id"
             type="radio"
             value="b"
           />
@@ -306,6 +314,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
           <input
             class="ant-radio-button-input"
             disabled=""
+            name="test-id"
             type="radio"
             value="c"
           />
@@ -326,6 +335,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
           <input
             class="ant-radio-button-input"
             disabled=""
+            name="test-id"
             type="radio"
             value="d"
           />
@@ -354,6 +364,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="a"
           />
@@ -373,6 +384,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="b"
           />
@@ -392,6 +404,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="c"
           />
@@ -411,6 +424,7 @@ exports[`renders components/radio/demo/component-token.tsx extend context correc
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="d"
           />
@@ -596,6 +610,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -615,6 +630,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -634,6 +650,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -653,6 +670,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -677,6 +695,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -697,6 +716,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -716,6 +736,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -735,6 +756,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -760,6 +782,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
           checked=""
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -780,6 +803,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -800,6 +824,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -820,6 +845,7 @@ exports[`renders components/radio/demo/radiobutton.tsx extend context correctly
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -853,6 +879,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -872,6 +899,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -891,6 +919,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -910,6 +939,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -933,6 +963,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -953,6 +984,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -973,6 +1005,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -992,6 +1025,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx extend context corr
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -1022,6 +1056,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
       <input
         checked=""
         class="ant-radio-input"
+        name="test-id"
         type="radio"
         value="1"
       />
@@ -1041,6 +1076,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
     >
       <input
         class="ant-radio-input"
+        name="test-id"
         type="radio"
         value="2"
       />
@@ -1060,6 +1096,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
     >
       <input
         class="ant-radio-input"
+        name="test-id"
         type="radio"
         value="3"
       />
@@ -1079,6 +1116,7 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
     >
       <input
         class="ant-radio-input"
+        name="test-id"
         type="radio"
         value="4"
       />
@@ -1111,6 +1149,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1130,6 +1169,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1149,6 +1189,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1173,6 +1214,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1192,6 +1234,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1211,6 +1254,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1234,6 +1278,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1254,6 +1299,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1273,6 +1319,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1309,6 +1356,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc
           <input
             checked=""
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="1"
           />
@@ -1332,6 +1380,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="2"
           />
@@ -1355,6 +1404,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="3"
           />
@@ -1378,6 +1428,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx extend context correc
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="4"
           />
@@ -1410,6 +1461,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1429,6 +1481,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1448,6 +1501,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1473,6 +1527,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1492,6 +1547,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1512,6 +1568,7 @@ Array [
         <input
           class="ant-radio-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1538,6 +1595,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1557,6 +1615,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1577,6 +1636,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1603,6 +1663,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1622,6 +1683,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1642,6 +1704,7 @@ Array [
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1765,6 +1828,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -1784,6 +1848,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -1803,6 +1868,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -1822,6 +1888,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -1846,6 +1913,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -1865,6 +1933,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -1884,6 +1953,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -1903,6 +1973,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -1927,6 +1998,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -1946,6 +2018,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -1965,6 +2038,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -1984,6 +2058,7 @@ exports[`renders components/radio/demo/size.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -2015,6 +2090,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="1"
         />
@@ -2034,6 +2110,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="2"
         />
@@ -2053,6 +2130,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="3"
         />
@@ -2072,6 +2150,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="4"
         />
@@ -2098,6 +2177,7 @@ Array [
           checked=""
           class="ant-radio-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="1"
         />
@@ -2118,6 +2198,7 @@ Array [
         <input
           class="ant-radio-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="2"
         />
@@ -2138,6 +2219,7 @@ Array [
         <input
           class="ant-radio-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="3"
         />
@@ -2158,6 +2240,7 @@ Array [
         <input
           class="ant-radio-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="4"
         />
diff --git a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
index 0af63668bb..737bfc7187 100644
--- a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`renders components/radio/demo/badge.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="1"
         />
@@ -56,6 +57,7 @@ exports[`renders components/radio/demo/badge.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="2"
         />
@@ -176,6 +178,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="a"
           />
@@ -195,6 +198,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="b"
           />
@@ -214,6 +218,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="c"
           />
@@ -233,6 +238,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="d"
           />
@@ -262,6 +268,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
             checked=""
             class="ant-radio-button-input"
             disabled=""
+            name="test-id"
             type="radio"
             value="a"
           />
@@ -282,6 +289,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
           <input
             class="ant-radio-button-input"
             disabled=""
+            name="test-id"
             type="radio"
             value="b"
           />
@@ -302,6 +310,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
           <input
             class="ant-radio-button-input"
             disabled=""
+            name="test-id"
             type="radio"
             value="c"
           />
@@ -322,6 +331,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
           <input
             class="ant-radio-button-input"
             disabled=""
+            name="test-id"
             type="radio"
             value="d"
           />
@@ -350,6 +360,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="a"
           />
@@ -369,6 +380,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="b"
           />
@@ -388,6 +400,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="c"
           />
@@ -407,6 +420,7 @@ exports[`renders components/radio/demo/component-token.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="d"
           />
@@ -586,6 +600,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -605,6 +620,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -624,6 +640,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -643,6 +660,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -667,6 +685,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -687,6 +706,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -706,6 +726,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -725,6 +746,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -750,6 +772,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
           checked=""
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -770,6 +793,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -790,6 +814,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -810,6 +835,7 @@ exports[`renders components/radio/demo/radiobutton.tsx correctly 1`] = `
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -841,6 +867,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -860,6 +887,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -879,6 +907,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -898,6 +927,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -921,6 +951,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -941,6 +972,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -961,6 +993,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -980,6 +1013,7 @@ exports[`renders components/radio/demo/radiobutton-solid.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -1008,6 +1042,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
       <input
         checked=""
         class="ant-radio-input"
+        name="test-id"
         type="radio"
         value="1"
       />
@@ -1027,6 +1062,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
     >
       <input
         class="ant-radio-input"
+        name="test-id"
         type="radio"
         value="2"
       />
@@ -1046,6 +1082,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
     >
       <input
         class="ant-radio-input"
+        name="test-id"
         type="radio"
         value="3"
       />
@@ -1065,6 +1102,7 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
     >
       <input
         class="ant-radio-input"
+        name="test-id"
         type="radio"
         value="4"
       />
@@ -1095,6 +1133,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1114,6 +1153,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1133,6 +1173,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1157,6 +1198,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1176,6 +1218,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1195,6 +1238,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1218,6 +1262,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1238,6 +1283,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1257,6 +1303,7 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1291,6 +1338,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="1"
           />
@@ -1314,6 +1362,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="2"
           />
@@ -1337,6 +1386,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="3"
           />
@@ -1360,6 +1410,7 @@ exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="4"
           />
@@ -1390,6 +1441,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1409,6 +1461,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1428,6 +1481,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1453,6 +1507,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1472,6 +1527,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1492,6 +1548,7 @@ Array [
         <input
           class="ant-radio-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1518,6 +1575,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1537,6 +1595,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1557,6 +1616,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1583,6 +1643,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Apple"
         />
@@ -1602,6 +1663,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="Pear"
         />
@@ -1622,6 +1684,7 @@ Array [
         <input
           class="ant-radio-button-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="Orange"
         />
@@ -1741,6 +1804,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -1760,6 +1824,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -1779,6 +1844,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -1798,6 +1864,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -1822,6 +1889,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -1841,6 +1909,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -1860,6 +1929,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -1879,6 +1949,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -1903,6 +1974,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="a"
         />
@@ -1922,6 +1994,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="b"
         />
@@ -1941,6 +2014,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="c"
         />
@@ -1960,6 +2034,7 @@ exports[`renders components/radio/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="d"
         />
@@ -1989,6 +2064,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="1"
         />
@@ -2008,6 +2084,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="2"
         />
@@ -2027,6 +2104,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="3"
         />
@@ -2046,6 +2124,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="4"
         />
@@ -2072,6 +2151,7 @@ Array [
           checked=""
           class="ant-radio-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="1"
         />
@@ -2092,6 +2172,7 @@ Array [
         <input
           class="ant-radio-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="2"
         />
@@ -2112,6 +2193,7 @@ Array [
         <input
           class="ant-radio-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="3"
         />
@@ -2132,6 +2214,7 @@ Array [
         <input
           class="ant-radio-input"
           disabled=""
+          name="test-id"
           type="radio"
           value="4"
         />
diff --git a/components/radio/__tests__/__snapshots__/group.test.tsx.snap b/components/radio/__tests__/__snapshots__/group.test.tsx.snap
index f6975f15fd..1b26b9c947 100644
--- a/components/radio/__tests__/__snapshots__/group.test.tsx.snap
+++ b/components/radio/__tests__/__snapshots__/group.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`Radio Group passes prefixCls down to radio 1`] = `
     >
       <input
         class="my-radio-input"
+        name="test-id"
         type="radio"
         value="Apple"
       />
@@ -32,6 +33,7 @@ exports[`Radio Group passes prefixCls down to radio 1`] = `
     >
       <input
         class="my-radio-input"
+        name="test-id"
         type="radio"
         value="Orange"
       />
diff --git a/components/radio/__tests__/__snapshots__/radio-button.test.tsx.snap b/components/radio/__tests__/__snapshots__/radio-button.test.tsx.snap
index 384f28e528..b472c87601 100644
--- a/components/radio/__tests__/__snapshots__/radio-button.test.tsx.snap
+++ b/components/radio/__tests__/__snapshots__/radio-button.test.tsx.snap
@@ -51,6 +51,7 @@ exports[`Radio Group passes prefixCls down to radio 1`] = `
     >
       <input
         class="my-radio-input"
+        name="test-id"
         type="radio"
         value="Apple"
       />
@@ -71,6 +72,7 @@ exports[`Radio Group passes prefixCls down to radio 1`] = `
     >
       <input
         class="my-radio-input"
+        name="test-id"
         type="radio"
         value="Orange"
       />
diff --git a/components/radio/group.tsx b/components/radio/group.tsx
index c8c72f562e..f66ab52f22 100644
--- a/components/radio/group.tsx
+++ b/components/radio/group.tsx
@@ -15,10 +15,13 @@ import type {
 } from './interface';
 import Radio from './radio';
 import useStyle from './style';
+import useId from 'rc-util/lib/hooks/useId';
 
 const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
 
+  const defaultName = useId();
+
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -31,7 +34,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
     style,
     id,
     optionType,
-    name,
+    name = defaultName,
     defaultValue,
     value: customizedValue,
     block = false,
diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md
index 8a348ed5da..a688b2818f 100644
--- a/components/radio/index.en-US.md
+++ b/components/radio/index.en-US.md
@@ -56,7 +56,7 @@ Radio group can wrap a group of `Radio`。
 | buttonStyle | The style type of radio button | `outline` \| `solid` | `outline` |  |
 | defaultValue | Default selected value | any | - |  |
 | disabled | Disable all radio buttons | boolean | false |  |
-| name | The `name` property of all `input[type="radio"]` children | string | - |  |
+| name | The `name` property of all `input[type="radio"]` children. If not set, it will fallback to a randomly generated name | string | - |  |
 | options | Set children optional | string\[] \| number\[] \| Array&lt;[CheckboxOptionType](#checkboxoptiontype)> | - |  |
 | optionType | Set Radio optionType | `default` \| `button` | `default` | 4.4.0 |
 | size | The size of radio button style | `large` \| `middle` \| `small` | - |  |
diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md
index 74c1d1d22f..bd4e44a838 100644
--- a/components/radio/index.zh-CN.md
+++ b/components/radio/index.zh-CN.md
@@ -59,7 +59,7 @@ demo:
 | buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \| `solid` | `outline` |  |  |
 | defaultValue | 默认选中的值 | any | - |  |  |
 | disabled | 禁选所有子单选器 | boolean | false |  |  |
-| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | - |  |  |
+| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性。若未设置，则将回退到随机生成的名称 | string | - |  |  |
 | options | 以配置形式设置子元素 | string\[] \| number\[] \| Array&lt;[CheckboxOptionType](#checkboxoptiontype)> | - |  |  |
 | optionType | 用于设置 Radio `options` 类型 | `default` \| `button` | `default` | 4.4.0 |  |
 | size | 大小，只对按钮样式生效 | `large` \| `middle` \| `small` | - |  |  |
diff --git a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
index 49c12e8a1c..80f643fe8e 100644
--- a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -4,7 +4,8 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -15,12 +16,12 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -31,12 +32,12 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -47,12 +48,12 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -63,12 +64,12 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Quarterly"
       >
         Quarterly
@@ -79,12 +80,12 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Yearly"
       >
         Yearly
@@ -100,7 +101,8 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1`
 <div
   aria-label="segmented control"
   class="ant-segmented ant-segmented-block"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -111,12 +113,12 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1`
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="123"
       >
         123
@@ -127,12 +129,12 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1`
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="456"
       >
         456
@@ -143,12 +145,12 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1`
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="longtext-longtext-longtext-longtext"
       >
         longtext-longtext-longtext-longtext
@@ -164,7 +166,8 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -175,12 +178,12 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -191,12 +194,12 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -207,12 +210,12 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -223,12 +226,12 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Quarterly"
       >
         Quarterly
@@ -239,12 +242,12 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Yearly"
       >
         Yearly
@@ -260,7 +263,8 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -271,12 +275,12 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Map"
       >
         Map
@@ -287,12 +291,12 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Transit"
       >
         Transit
@@ -303,12 +307,12 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Satellite"
       >
         Satellite
@@ -325,7 +329,8 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -336,12 +341,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="AND"
         >
           AND
@@ -352,12 +357,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="OR"
         >
           OR
@@ -368,12 +373,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="NOT"
         >
           NOT
@@ -385,7 +390,8 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -396,12 +402,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="AND"
         >
           AND
@@ -412,12 +418,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="OR"
         >
           OR
@@ -428,12 +434,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="NOT"
         >
           NOT
@@ -453,7 +459,8 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -464,12 +471,12 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding: 4px;"
@@ -492,12 +499,12 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding: 4px;"
@@ -524,12 +531,12 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding: 4px;"
@@ -569,7 +576,8 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -580,12 +588,12 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding: 4px;"
@@ -604,12 +612,12 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding: 4px;"
@@ -628,12 +636,12 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding: 4px;"
@@ -652,12 +660,12 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding: 4px;"
@@ -685,7 +693,7 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
   <div
     aria-label="segmented control"
     class="ant-segmented ant-segmented-disabled"
-    role="listbox"
+    role="radiogroup"
   >
     <div
       class="ant-segmented-group"
@@ -697,12 +705,12 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
           checked=""
           class="ant-segmented-item-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Map"
         >
           Map
@@ -714,12 +722,12 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
         <input
           class="ant-segmented-item-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Transit"
         >
           Transit
@@ -731,12 +739,12 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
         <input
           class="ant-segmented-item-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Satellite"
         >
           Satellite
@@ -747,7 +755,8 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -758,12 +767,12 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Daily"
         >
           Daily
@@ -775,12 +784,12 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
         <input
           class="ant-segmented-item-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Weekly"
         >
           Weekly
@@ -791,12 +800,12 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Monthly"
         >
           Monthly
@@ -808,12 +817,12 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
         <input
           class="ant-segmented-item-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Quarterly"
         >
           Quarterly
@@ -824,12 +833,12 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Yearly"
         >
           Yearly
@@ -849,7 +858,8 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -860,12 +870,12 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Daily"
         >
           Daily
@@ -876,12 +886,12 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Weekly"
         >
           Weekly
@@ -892,12 +902,12 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Monthly"
         >
           Monthly
@@ -922,7 +932,8 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -933,12 +944,12 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -970,12 +981,12 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -1015,7 +1026,8 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
   <div
     aria-label="segmented control"
     class="ant-segmented ant-segmented-lg"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -1026,12 +1038,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Daily"
         >
           Daily
@@ -1042,12 +1054,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Weekly"
         >
           Weekly
@@ -1058,12 +1070,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Monthly"
         >
           Monthly
@@ -1074,12 +1086,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Quarterly"
         >
           Quarterly
@@ -1090,12 +1102,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Yearly"
         >
           Yearly
@@ -1106,7 +1118,8 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -1117,12 +1130,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Daily"
         >
           Daily
@@ -1133,12 +1146,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Weekly"
         >
           Weekly
@@ -1149,12 +1162,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Monthly"
         >
           Monthly
@@ -1165,12 +1178,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Quarterly"
         >
           Quarterly
@@ -1181,12 +1194,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Yearly"
         >
           Yearly
@@ -1197,7 +1210,8 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
   <div
     aria-label="segmented control"
     class="ant-segmented ant-segmented-sm"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -1208,12 +1222,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Daily"
         >
           Daily
@@ -1224,12 +1238,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Weekly"
         >
           Weekly
@@ -1240,12 +1254,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Monthly"
         >
           Monthly
@@ -1256,12 +1270,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Quarterly"
         >
           Quarterly
@@ -1272,12 +1286,12 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Yearly"
         >
           Yearly
@@ -1298,8 +1312,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
     <div
       aria-label="segmented control"
       class="ant-segmented ant-segmented-lg"
-      role="listbox"
+      role="radiogroup"
       style="margin-inline-end: 6px;"
+      tabindex="0"
     >
       <div
         class="ant-segmented-group"
@@ -1310,12 +1325,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
           <input
             checked=""
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="true"
             class="ant-segmented-item-label"
-            role="option"
             title="Daily"
           >
             Daily
@@ -1326,12 +1341,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Weekly"
           >
             Weekly
@@ -1342,12 +1357,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Monthly"
           >
             Monthly
@@ -1368,8 +1383,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
     <div
       aria-label="segmented control"
       class="ant-segmented"
-      role="listbox"
+      role="radiogroup"
       style="margin-inline-end: 6px;"
+      tabindex="0"
     >
       <div
         class="ant-segmented-group"
@@ -1380,12 +1396,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
           <input
             checked=""
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="true"
             class="ant-segmented-item-label"
-            role="option"
             title="Daily"
           >
             Daily
@@ -1396,12 +1412,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Weekly"
           >
             Weekly
@@ -1412,12 +1428,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Monthly"
           >
             Monthly
@@ -1437,8 +1453,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
     <div
       aria-label="segmented control"
       class="ant-segmented ant-segmented-sm"
-      role="listbox"
+      role="radiogroup"
       style="margin-inline-end: 6px;"
+      tabindex="0"
     >
       <div
         class="ant-segmented-group"
@@ -1449,12 +1466,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
           <input
             checked=""
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="true"
             class="ant-segmented-item-label"
-            role="option"
             title="Daily"
           >
             Daily
@@ -1465,12 +1482,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Weekly"
           >
             Weekly
@@ -1481,12 +1498,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Monthly"
           >
             Monthly
@@ -1624,7 +1641,8 @@ exports[`renders components/segmented/demo/vertical.tsx extend context correctly
 <div
   aria-label="segmented control"
   class="ant-segmented ant-segmented-vertical ant-segmented-vertical"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -1635,12 +1653,12 @@ exports[`renders components/segmented/demo/vertical.tsx extend context correctly
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -1672,12 +1690,12 @@ exports[`renders components/segmented/demo/vertical.tsx extend context correctly
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -1714,7 +1732,8 @@ exports[`renders components/segmented/demo/with-icon.tsx extend context correctl
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -1725,12 +1744,12 @@ exports[`renders components/segmented/demo/with-icon.tsx extend context correctl
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -1765,12 +1784,12 @@ exports[`renders components/segmented/demo/with-icon.tsx extend context correctl
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -1805,3 +1824,100 @@ exports[`renders components/segmented/demo/with-icon.tsx extend context correctl
 `;
 
 exports[`renders components/segmented/demo/with-icon.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/segmented/demo/with-name.tsx extend context correctly 1`] = `
+<div
+  aria-label="segmented control"
+  class="ant-segmented"
+  role="radiogroup"
+  tabindex="0"
+>
+  <div
+    class="ant-segmented-group"
+  >
+    <label
+      class="ant-segmented-item ant-segmented-item-selected"
+    >
+      <input
+        checked=""
+        class="ant-segmented-item-input"
+        name="group"
+        type="radio"
+      />
+      <div
+        aria-selected="true"
+        class="ant-segmented-item-label"
+        title="Daily"
+      >
+        Daily
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        name="group"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="ant-segmented-item-label"
+        title="Weekly"
+      >
+        Weekly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        name="group"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="ant-segmented-item-label"
+        title="Monthly"
+      >
+        Monthly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        name="group"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="ant-segmented-item-label"
+        title="Quarterly"
+      >
+        Quarterly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        name="group"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="ant-segmented-item-label"
+        title="Yearly"
+      >
+        Yearly
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`renders components/segmented/demo/with-name.tsx extend context correctly 2`] = `[]`;
diff --git a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
index 9e24cc69c7..2c3f156683 100644
--- a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
@@ -4,7 +4,8 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -15,12 +16,12 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -31,12 +32,12 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -47,12 +48,12 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -63,12 +64,12 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Quarterly"
       >
         Quarterly
@@ -79,12 +80,12 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Yearly"
       >
         Yearly
@@ -98,7 +99,8 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented ant-segmented-block"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -109,12 +111,12 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="123"
       >
         123
@@ -125,12 +127,12 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="456"
       >
         456
@@ -141,12 +143,12 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="longtext-longtext-longtext-longtext"
       >
         longtext-longtext-longtext-longtext
@@ -160,7 +162,8 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -171,12 +174,12 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -187,12 +190,12 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -203,12 +206,12 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -219,12 +222,12 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Quarterly"
       >
         Quarterly
@@ -235,12 +238,12 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Yearly"
       >
         Yearly
@@ -254,7 +257,8 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -265,12 +269,12 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Map"
       >
         Map
@@ -281,12 +285,12 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Transit"
       >
         Transit
@@ -297,12 +301,12 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Satellite"
       >
         Satellite
@@ -317,7 +321,8 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -328,12 +333,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="AND"
         >
           AND
@@ -344,12 +349,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="OR"
         >
           OR
@@ -360,12 +365,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="NOT"
         >
           NOT
@@ -377,7 +382,8 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -388,12 +394,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="AND"
         >
           AND
@@ -404,12 +410,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="OR"
         >
           OR
@@ -420,12 +426,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="NOT"
         >
           NOT
@@ -443,7 +449,8 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -454,12 +461,12 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding:4px"
@@ -482,12 +489,12 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding:4px"
@@ -514,12 +521,12 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding:4px"
@@ -559,7 +566,8 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -570,12 +578,12 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding:4px"
@@ -594,12 +602,12 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding:4px"
@@ -618,12 +626,12 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding:4px"
@@ -642,12 +650,12 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
         >
           <div
             style="padding:4px"
@@ -673,7 +681,7 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented ant-segmented-disabled"
-    role="listbox"
+    role="radiogroup"
   >
     <div
       class="ant-segmented-group"
@@ -685,12 +693,12 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
           checked=""
           class="ant-segmented-item-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Map"
         >
           Map
@@ -702,12 +710,12 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
         <input
           class="ant-segmented-item-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Transit"
         >
           Transit
@@ -719,12 +727,12 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
         <input
           class="ant-segmented-item-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Satellite"
         >
           Satellite
@@ -735,7 +743,8 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -746,12 +755,12 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Daily"
         >
           Daily
@@ -763,12 +772,12 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
         <input
           class="ant-segmented-item-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Weekly"
         >
           Weekly
@@ -779,12 +788,12 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Monthly"
         >
           Monthly
@@ -796,12 +805,12 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
         <input
           class="ant-segmented-item-input"
           disabled=""
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Quarterly"
         >
           Quarterly
@@ -812,12 +821,12 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Yearly"
         >
           Yearly
@@ -835,7 +844,8 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -846,12 +856,12 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Daily"
         >
           Daily
@@ -862,12 +872,12 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Weekly"
         >
           Weekly
@@ -878,12 +888,12 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Monthly"
         >
           Monthly
@@ -906,7 +916,8 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -917,12 +928,12 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -954,12 +965,12 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -997,7 +1008,8 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented ant-segmented-lg"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -1008,12 +1020,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Daily"
         >
           Daily
@@ -1024,12 +1036,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Weekly"
         >
           Weekly
@@ -1040,12 +1052,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Monthly"
         >
           Monthly
@@ -1056,12 +1068,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Quarterly"
         >
           Quarterly
@@ -1072,12 +1084,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Yearly"
         >
           Yearly
@@ -1088,7 +1100,8 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -1099,12 +1112,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Daily"
         >
           Daily
@@ -1115,12 +1128,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Weekly"
         >
           Weekly
@@ -1131,12 +1144,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Monthly"
         >
           Monthly
@@ -1147,12 +1160,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Quarterly"
         >
           Quarterly
@@ -1163,12 +1176,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Yearly"
         >
           Yearly
@@ -1179,7 +1192,8 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
   <div
     aria-label="segmented control"
     class="ant-segmented ant-segmented-sm"
-    role="listbox"
+    role="radiogroup"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -1190,12 +1204,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Daily"
         >
           Daily
@@ -1206,12 +1220,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Weekly"
         >
           Weekly
@@ -1222,12 +1236,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Monthly"
         >
           Monthly
@@ -1238,12 +1252,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Quarterly"
         >
           Quarterly
@@ -1254,12 +1268,12 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Yearly"
         >
           Yearly
@@ -1278,8 +1292,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
     <div
       aria-label="segmented control"
       class="ant-segmented ant-segmented-lg"
-      role="listbox"
+      role="radiogroup"
       style="margin-inline-end:6px"
+      tabindex="0"
     >
       <div
         class="ant-segmented-group"
@@ -1290,12 +1305,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="true"
             class="ant-segmented-item-label"
-            role="option"
             title="Daily"
           >
             Daily
@@ -1306,12 +1321,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Weekly"
           >
             Weekly
@@ -1322,12 +1337,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Monthly"
           >
             Monthly
@@ -1348,8 +1363,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
     <div
       aria-label="segmented control"
       class="ant-segmented"
-      role="listbox"
+      role="radiogroup"
       style="margin-inline-end:6px"
+      tabindex="0"
     >
       <div
         class="ant-segmented-group"
@@ -1360,12 +1376,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="true"
             class="ant-segmented-item-label"
-            role="option"
             title="Daily"
           >
             Daily
@@ -1376,12 +1392,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Weekly"
           >
             Weekly
@@ -1392,12 +1408,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Monthly"
           >
             Monthly
@@ -1417,8 +1433,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
     <div
       aria-label="segmented control"
       class="ant-segmented ant-segmented-sm"
-      role="listbox"
+      role="radiogroup"
       style="margin-inline-end:6px"
+      tabindex="0"
     >
       <div
         class="ant-segmented-group"
@@ -1429,12 +1446,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="true"
             class="ant-segmented-item-label"
-            role="option"
             title="Daily"
           >
             Daily
@@ -1445,12 +1462,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Weekly"
           >
             Weekly
@@ -1461,12 +1478,12 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Monthly"
           >
             Monthly
@@ -1546,7 +1563,8 @@ exports[`renders components/segmented/demo/vertical.tsx correctly 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented ant-segmented-vertical ant-segmented-vertical"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -1557,12 +1575,12 @@ exports[`renders components/segmented/demo/vertical.tsx correctly 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -1594,12 +1612,12 @@ exports[`renders components/segmented/demo/vertical.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -1634,7 +1652,8 @@ exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -1645,12 +1664,12 @@ exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -1685,12 +1704,12 @@ exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -1723,3 +1742,98 @@ exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders components/segmented/demo/with-name.tsx correctly 1`] = `
+<div
+  aria-label="segmented control"
+  class="ant-segmented"
+  role="radiogroup"
+  tabindex="0"
+>
+  <div
+    class="ant-segmented-group"
+  >
+    <label
+      class="ant-segmented-item ant-segmented-item-selected"
+    >
+      <input
+        checked=""
+        class="ant-segmented-item-input"
+        name="group"
+        type="radio"
+      />
+      <div
+        aria-selected="true"
+        class="ant-segmented-item-label"
+        title="Daily"
+      >
+        Daily
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        name="group"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="ant-segmented-item-label"
+        title="Weekly"
+      >
+        Weekly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        name="group"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="ant-segmented-item-label"
+        title="Monthly"
+      >
+        Monthly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        name="group"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="ant-segmented-item-label"
+        title="Quarterly"
+      >
+        Quarterly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        name="group"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="ant-segmented-item-label"
+        title="Yearly"
+      >
+        Yearly
+      </div>
+    </label>
+  </div>
+</div>
+`;
diff --git a/components/segmented/__tests__/__snapshots__/index.test.tsx.snap b/components/segmented/__tests__/__snapshots__/index.test.tsx.snap
index 4e55403f85..7f22d6664c 100644
--- a/components/segmented/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/segmented/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,8 @@ exports[`Segmented render empty segmented 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -16,7 +17,8 @@ exports[`Segmented render label with ReactNode 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -27,12 +29,12 @@ exports[`Segmented render label with ReactNode 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -43,12 +45,12 @@ exports[`Segmented render label with ReactNode 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
       >
         <div
           id="weekly"
@@ -62,12 +64,12 @@ exports[`Segmented render label with ReactNode 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
       >
         <div
           class="little"
@@ -84,7 +86,8 @@ exports[`Segmented render segmented ok 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -95,12 +98,12 @@ exports[`Segmented render segmented ok 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -111,12 +114,12 @@ exports[`Segmented render segmented ok 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -127,12 +130,12 @@ exports[`Segmented render segmented ok 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -146,7 +149,8 @@ exports[`Segmented render segmented with \`block\` 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented ant-segmented-block"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -157,12 +161,12 @@ exports[`Segmented render segmented with \`block\` 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -173,12 +177,12 @@ exports[`Segmented render segmented with \`block\` 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -189,12 +193,12 @@ exports[`Segmented render segmented with \`block\` 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -208,7 +212,8 @@ exports[`Segmented render segmented with \`size#large\` 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented ant-segmented-lg"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -219,12 +224,12 @@ exports[`Segmented render segmented with \`size#large\` 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -235,12 +240,12 @@ exports[`Segmented render segmented with \`size#large\` 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -251,12 +256,12 @@ exports[`Segmented render segmented with \`size#large\` 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -270,7 +275,8 @@ exports[`Segmented render segmented with \`size#small\` 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented ant-segmented-sm"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -281,12 +287,12 @@ exports[`Segmented render segmented with \`size#small\` 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -297,12 +303,12 @@ exports[`Segmented render segmented with \`size#small\` 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -313,12 +319,12 @@ exports[`Segmented render segmented with \`size#small\` 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -332,7 +338,8 @@ exports[`Segmented render segmented with mixed options 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -343,12 +350,12 @@ exports[`Segmented render segmented with mixed options 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -359,12 +366,12 @@ exports[`Segmented render segmented with mixed options 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -375,12 +382,12 @@ exports[`Segmented render segmented with mixed options 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -394,7 +401,8 @@ exports[`Segmented render segmented with numeric options 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -405,12 +413,12 @@ exports[`Segmented render segmented with numeric options 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="1"
       >
         1
@@ -421,12 +429,12 @@ exports[`Segmented render segmented with numeric options 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="2"
       >
         2
@@ -437,12 +445,12 @@ exports[`Segmented render segmented with numeric options 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="3"
       >
         3
@@ -453,12 +461,12 @@ exports[`Segmented render segmented with numeric options 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="4"
       >
         4
@@ -469,12 +477,12 @@ exports[`Segmented render segmented with numeric options 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="5"
       >
         5
@@ -488,7 +496,7 @@ exports[`Segmented render segmented with options null/undefined 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented ant-segmented-disabled"
-  role="listbox"
+  role="radiogroup"
 >
   <div
     class="ant-segmented-group"
@@ -500,12 +508,12 @@ exports[`Segmented render segmented with options null/undefined 1`] = `
         checked=""
         class="ant-segmented-item-input"
         disabled=""
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
       />
     </label>
     <label
@@ -514,12 +522,12 @@ exports[`Segmented render segmented with options null/undefined 1`] = `
       <input
         class="ant-segmented-item-input"
         disabled=""
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
       />
     </label>
     <label
@@ -528,12 +536,12 @@ exports[`Segmented render segmented with options null/undefined 1`] = `
       <input
         class="ant-segmented-item-input"
         disabled=""
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title=""
       />
     </label>
@@ -545,7 +553,8 @@ exports[`Segmented render segmented with options: disabled 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -556,12 +565,12 @@ exports[`Segmented render segmented with options: disabled 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -573,12 +582,12 @@ exports[`Segmented render segmented with options: disabled 1`] = `
       <input
         class="ant-segmented-item-input"
         disabled=""
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -589,12 +598,12 @@ exports[`Segmented render segmented with options: disabled 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -608,7 +617,8 @@ exports[`Segmented render segmented with string options 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -619,12 +629,12 @@ exports[`Segmented render segmented with string options 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -635,12 +645,12 @@ exports[`Segmented render segmented with string options 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -651,12 +661,12 @@ exports[`Segmented render segmented with string options 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -670,7 +680,8 @@ exports[`Segmented render segmented with thumb 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -681,12 +692,12 @@ exports[`Segmented render segmented with thumb 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Map"
       >
         Map
@@ -697,12 +708,12 @@ exports[`Segmented render segmented with thumb 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Transit"
       >
         Transit
@@ -713,12 +724,12 @@ exports[`Segmented render segmented with thumb 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Satellite"
       >
         Satellite
@@ -732,7 +743,7 @@ exports[`Segmented render segmented: disabled 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented ant-segmented-disabled"
-  role="listbox"
+  role="radiogroup"
 >
   <div
     class="ant-segmented-group"
@@ -744,12 +755,12 @@ exports[`Segmented render segmented: disabled 1`] = `
         checked=""
         class="ant-segmented-item-input"
         disabled=""
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
         title="Daily"
       >
         Daily
@@ -761,12 +772,12 @@ exports[`Segmented render segmented: disabled 1`] = `
       <input
         class="ant-segmented-item-input"
         disabled=""
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Weekly"
       >
         Weekly
@@ -778,12 +789,12 @@ exports[`Segmented render segmented: disabled 1`] = `
       <input
         class="ant-segmented-item-input"
         disabled=""
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
         title="Monthly"
       >
         Monthly
@@ -797,7 +808,8 @@ exports[`Segmented render with icons 1`] = `
 <div
   aria-label="segmented control"
   class="ant-segmented"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
@@ -808,12 +820,12 @@ exports[`Segmented render with icons 1`] = `
       <input
         checked=""
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="true"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -845,12 +857,12 @@ exports[`Segmented render with icons 1`] = `
     >
       <input
         class="ant-segmented-item-input"
+        name="test-id"
         type="radio"
       />
       <div
         aria-selected="false"
         class="ant-segmented-item-label"
-        role="option"
       >
         <span
           class="ant-segmented-item-icon"
@@ -888,7 +900,8 @@ exports[`Segmented rtl render component should be rendered correctly in RTL dire
 <div
   aria-label="segmented control"
   class="ant-segmented ant-segmented-rtl"
-  role="listbox"
+  role="radiogroup"
+  tabindex="0"
 >
   <div
     class="ant-segmented-group"
diff --git a/components/segmented/__tests__/index.test.tsx b/components/segmented/__tests__/index.test.tsx
index c80948ce62..5de419790f 100644
--- a/components/segmented/__tests__/index.test.tsx
+++ b/components/segmented/__tests__/index.test.tsx
@@ -346,4 +346,15 @@ describe('Segmented', () => {
         .textContent?.includes('KanbanYes'),
     ).toBeTruthy();
   });
+
+  it('all children should have a name property', () => {
+    const GROUP_NAME = 'GROUP_NAME';
+    const { container } = render(
+      <Segmented options={['iOS', 'Android', 'Web']} name={GROUP_NAME} />,
+    );
+
+    container.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach((el) => {
+      expect(el.name).toEqual(GROUP_NAME);
+    });
+  });
 });
diff --git a/components/segmented/demo/with-name.md b/components/segmented/demo/with-name.md
new file mode 100644
index 0000000000..b0654a9512
--- /dev/null
+++ b/components/segmented/demo/with-name.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+可以为 Segmented 配置 `name` 参数，为组合内的 input 元素赋予相同的 `name` 属性，使浏览器把 Segmented 下的 input 真正看作是一组（例如可以通过方向键始终**在同一组内**更改选项）。
+
+## en-US
+
+Passing the `name` property to all `input[type="radio"]` that are in the same Segmented. It is usually used to let the browser see your Segmented as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Segmented.
diff --git a/components/segmented/demo/with-name.tsx b/components/segmented/demo/with-name.tsx
new file mode 100644
index 0000000000..14e88df9d7
--- /dev/null
+++ b/components/segmented/demo/with-name.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Segmented } from 'antd';
+
+const Demo: React.FC = () => (
+  <Segmented<string> options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} name="group" />
+);
+
+export default Demo;
diff --git a/components/segmented/index.en-US.md b/components/segmented/index.en-US.md
index 4384777bf2..9d33cb6ad4 100644
--- a/components/segmented/index.en-US.md
+++ b/components/segmented/index.en-US.md
@@ -29,6 +29,7 @@ This component is available since `antd@4.20.0`.
 <code src="./demo/size.tsx">Three sizes of Segmented</code>
 <code src="./demo/with-icon.tsx">With Icon</code>
 <code src="./demo/icon-only.tsx">With Icon only</code>
+<code src="./demo/with-name.tsx" version="5.23.0">With name</code>
 <code src="./demo/controlled-two.tsx" debug>Controlled Synced mode</code>
 <code src="./demo/size-consistent.tsx" debug>Consistent height</code>
 <code src="./demo/componentToken.tsx" debug>Custom component token</code>
@@ -49,17 +50,17 @@ Common props ref：[Common props](/docs/react/common-props)
 | size | The size of the Segmented. | `large` \| `middle` \| `small` | `middle` |  |
 | vertical | Orientation | boolean | `false` | 5.21.0 |
 | value | Currently selected value | string \| number |  |  |
+| name | The `name` property of all `input[type="radio"]` children. if not set, it will fallback to a randomly generated name | string |  | 5.23.0 |
 
 ### SegmentedItemType
 
-
-| Property  | Description  | Type  | Default | Version |
-| --- | --- | --- | --- | --- |
-| label | Display text for Segmented item  | ReactNode | - |  |
-| value | Value for Segmented item  | string \| number | - |  |
-| icon  | Display icon for Segmented item  | ReactNode | - |  |
-| disabled | Disabled state of segmented item | boolean | false |  |
-| className | The additional css class | string | - |  |
+| Property  | Description                      | Type             | Default | Version |
+| --------- | -------------------------------- | ---------------- | ------- | ------- |
+| label     | Display text for Segmented item  | ReactNode        | -       |         |
+| value     | Value for Segmented item         | string \| number | -       |         |
+| icon      | Display icon for Segmented item  | ReactNode        | -       |         |
+| disabled  | Disabled state of segmented item | boolean          | false   |         |
+| className | The additional css class         | string           | -       |         |
 
 ## Design Token
 
diff --git a/components/segmented/index.tsx b/components/segmented/index.tsx
index aa75221e80..184498081d 100644
--- a/components/segmented/index.tsx
+++ b/components/segmented/index.tsx
@@ -12,6 +12,7 @@ import { ConfigContext } from '../config-provider';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import useStyle from './style';
+import useId from 'rc-util/lib/hooks/useId';
 
 export type { SegmentedValue } from 'rc-segmented';
 
@@ -51,6 +52,8 @@ export interface SegmentedProps<ValueType = RcSegmentedValue>
 }
 
 const InternalSegmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref) => {
+  const defaultName = useId();
+
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -60,6 +63,7 @@ const InternalSegmented = React.forwardRef<HTMLDivElement, SegmentedProps>((prop
     size: customSize = 'middle',
     style,
     vertical,
+    name = defaultName,
     ...restProps
   } = props;
 
@@ -111,6 +115,7 @@ const InternalSegmented = React.forwardRef<HTMLDivElement, SegmentedProps>((prop
   return wrapCSSVar(
     <RcSegmented
       {...restProps}
+      name={name}
       className={cls}
       style={mergedStyle}
       options={extendedOptions}
diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md
index f0f84e65b2..b2da01b00f 100644
--- a/components/segmented/index.zh-CN.md
+++ b/components/segmented/index.zh-CN.md
@@ -30,6 +30,7 @@ demo:
 <code src="./demo/size.tsx">三种大小</code>
 <code src="./demo/with-icon.tsx">设置图标</code>
 <code src="./demo/icon-only.tsx">只设置图标</code>
+<code src="./demo/with-name.tsx" version="5.23.0">配合 name 使用</code>
 <code src="./demo/controlled-two.tsx" debug>受控同步模式</code>
 <code src="./demo/size-consistent.tsx" debug>统一高度</code>
 <code src="./demo/componentToken.tsx" debug>自定义组件 Token</code>
@@ -52,6 +53,7 @@ demo:
 | size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` |  |
 | vertical | 排列方向 | boolean | `false` | 5.21.0 |
 | value | 当前选中的值 | string \| number |  |  |
+| name | Segmented 下所有 `input[type="radio"]` 的 `name` 属性。若未设置，则将回退到随机生成的名称 | string |  | 5.23.0 |
 
 ### SegmentedItemType
 
diff --git a/components/segmented/style/index.ts b/components/segmented/style/index.ts
index 7e0ca5e494..9bffe934a7 100644
--- a/components/segmented/style/index.ts
+++ b/components/segmented/style/index.ts
@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
 
-import { resetComponent, textEllipsis } from '../../style';
+import { genFocusOutline, genFocusStyle, resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
@@ -103,6 +103,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
       background: token.trackBg,
       borderRadius: token.borderRadius,
       transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
+      ...genFocusStyle(token),
 
       [`${componentCls}-group`]: {
         position: 'relative',
@@ -156,6 +157,10 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
           color: token.itemSelectedColor,
         },
 
+        '&-focused': {
+          ...genFocusOutline(token),
+        },
+
         '&::after': {
           content: '""',
           position: 'absolute',
diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 39fdbb33ec..f85a629818 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -8507,7 +8507,6 @@ Array [
             <div>
               <div
                 class="ant-select-tree"
-                role="tree"
               >
                 <div>
                   <input
@@ -8532,6 +8531,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-tree-list"
+                  role="tree"
                   style="position: relative;"
                 >
                   <div
@@ -8544,9 +8544,10 @@ Array [
                         style="display: flex; flex-direction: column;"
                       >
                         <div
-                          aria-grabbed="false"
+                          aria-expanded="true"
                           class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                           draggable="false"
+                          role="treeitem"
                         >
                           <span
                             aria-hidden="true"
@@ -8587,9 +8588,10 @@ Array [
                           </span>
                         </div>
                         <div
-                          aria-grabbed="false"
+                          aria-expanded="false"
                           class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                           draggable="false"
+                          role="treeitem"
                         >
                           <span
                             aria-hidden="true"
@@ -8618,9 +8620,10 @@ Array [
                           </span>
                         </div>
                         <div
-                          aria-grabbed="false"
+                          aria-expanded="false"
                           class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                           draggable="false"
+                          role="treeitem"
                         >
                           <span
                             aria-hidden="true"
@@ -8649,9 +8652,10 @@ Array [
                           </span>
                         </div>
                         <div
-                          aria-grabbed="false"
+                          aria-expanded="false"
                           class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                           draggable="false"
+                          role="treeitem"
                         >
                           <span
                             aria-hidden="true"
@@ -10161,10 +10165,9 @@ Array [
       <span
         class="ant-input-suffix"
       >
-        <span
+        <button
           class="ant-input-clear-icon ant-input-clear-icon-hidden"
-          role="button"
-          tabindex="-1"
+          type="button"
         >
           <span
             aria-label="close-circle"
@@ -10186,7 +10189,7 @@ Array [
               />
             </svg>
           </span>
-        </span>
+        </button>
       </span>
     </span>
     <div
@@ -11670,6 +11673,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topLeft"
         />
@@ -11689,6 +11693,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topRight"
         />
@@ -11708,6 +11713,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomLeft"
         />
@@ -11727,6 +11733,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomRight"
         />
@@ -11917,6 +11924,7 @@ exports[`renders components/select/demo/placement-debug.tsx extend context corre
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="topLeft"
             />
@@ -11936,6 +11944,7 @@ exports[`renders components/select/demo/placement-debug.tsx extend context corre
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="topRight"
             />
@@ -11955,6 +11964,7 @@ exports[`renders components/select/demo/placement-debug.tsx extend context corre
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="bottomLeft"
             />
@@ -11974,6 +11984,7 @@ exports[`renders components/select/demo/placement-debug.tsx extend context corre
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="bottomRight"
             />
@@ -14445,6 +14456,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -14465,6 +14477,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -14484,6 +14497,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="small"
         />
diff --git a/components/select/__tests__/__snapshots__/demo.test.tsx.snap b/components/select/__tests__/__snapshots__/demo.test.tsx.snap
index 8786b5a7d1..5bf6777cde 100644
--- a/components/select/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.tsx.snap
@@ -3758,10 +3758,9 @@ Array [
       <span
         class="ant-input-suffix"
       >
-        <span
+        <button
           class="ant-input-clear-icon ant-input-clear-icon-hidden"
-          role="button"
-          tabindex="-1"
+          type="button"
         >
           <span
             aria-label="close-circle"
@@ -3783,7 +3782,7 @@ Array [
               />
             </svg>
           </span>
-        </span>
+        </button>
       </span>
     </span>
     <div
@@ -4524,6 +4523,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topLeft"
         />
@@ -4543,6 +4543,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topRight"
         />
@@ -4562,6 +4563,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomLeft"
         />
@@ -4581,6 +4583,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomRight"
         />
@@ -4685,6 +4688,7 @@ exports[`renders components/select/demo/placement-debug.tsx correctly 1`] = `
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="topLeft"
             />
@@ -4704,6 +4708,7 @@ exports[`renders components/select/demo/placement-debug.tsx correctly 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="topRight"
             />
@@ -4723,6 +4728,7 @@ exports[`renders components/select/demo/placement-debug.tsx correctly 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="bottomLeft"
             />
@@ -4742,6 +4748,7 @@ exports[`renders components/select/demo/placement-debug.tsx correctly 1`] = `
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="bottomRight"
             />
@@ -5452,6 +5459,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -5472,6 +5480,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -5491,6 +5500,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="small"
         />
diff --git a/components/select/demo/responsive.tsx b/components/select/demo/responsive.tsx
index 0e2e0536f3..6939d39c68 100644
--- a/components/select/demo/responsive.tsx
+++ b/components/select/demo/responsive.tsx
@@ -42,7 +42,7 @@ const App: React.FC = () => {
         {...selectProps}
         maxTagPlaceholder={(omittedValues) => (
           <Tooltip
-            overlayStyle={{ pointerEvents: 'none' }}
+            styles={{ root: { pointerEvents: 'none' } }}
             title={omittedValues.map(({ label }) => label).join(', ')}
           >
             <span>Hover Me</span>
diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
index fb4cdd1c26..97976c755f 100644
--- a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -432,6 +432,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1
                         <input
                           checked=""
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="default"
                         />
@@ -451,6 +452,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="large"
                         />
@@ -470,6 +472,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="small"
                         />
@@ -528,6 +531,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1
                         <input
                           checked=""
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="default"
                         />
@@ -547,6 +551,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="square"
                         />
@@ -566,6 +571,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="round"
                         />
@@ -585,6 +591,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="circle"
                         />
@@ -642,6 +649,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="square"
                         />
@@ -662,6 +670,7 @@ exports[`renders components/skeleton/demo/element.tsx extend context correctly 1
                         <input
                           checked=""
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="circle"
                         />
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.tsx.snap b/components/skeleton/__tests__/__snapshots__/demo.test.tsx.snap
index 95029ca234..f242d8b647 100644
--- a/components/skeleton/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.tsx.snap
@@ -422,6 +422,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
                         <input
                           checked=""
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="default"
                         />
@@ -441,6 +442,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="large"
                         />
@@ -460,6 +462,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="small"
                         />
@@ -518,6 +521,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
                         <input
                           checked=""
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="default"
                         />
@@ -537,6 +541,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="square"
                         />
@@ -556,6 +561,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="round"
                         />
@@ -575,6 +581,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="circle"
                         />
@@ -632,6 +639,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
                       >
                         <input
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="square"
                         />
@@ -652,6 +660,7 @@ exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
                         <input
                           checked=""
                           class="ant-radio-button-input"
+                          name="test-id"
                           type="radio"
                           value="circle"
                         />
diff --git a/components/slider/__tests__/__snapshots__/index.test.tsx.snap b/components/slider/__tests__/__snapshots__/index.test.tsx.snap
index abbe2a629f..c9bd4c2137 100644
--- a/components/slider/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/slider/__tests__/__snapshots__/index.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`Slider should render in RTL direction 1`] = `
       tabindex="0"
     />
     <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-rtl ant-tooltip-placement-top"
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-rtl ant-slider-tooltip ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
     >
       <div
diff --git a/components/slider/__tests__/index.test.tsx b/components/slider/__tests__/index.test.tsx
index 1cf6afe969..58f9ed0748 100644
--- a/components/slider/__tests__/index.test.tsx
+++ b/components/slider/__tests__/index.test.tsx
@@ -225,4 +225,51 @@ describe('Slider', () => {
 
     errSpy.mockRestore();
   });
+  it('should apply custom styles to Descriptions', () => {
+    const customClassNames = {
+      root: 'custom-root',
+      track: 'custom-track',
+      tracks: 'custom-tracks',
+      rail: 'custom-rail',
+      handle: 'custom-handle',
+    };
+
+    const customStyles = {
+      root: { backgroundColor: 'red' },
+      track: { backgroundColor: 'black' },
+      tracks: { backgroundColor: 'yellow' },
+      rail: { backgroundColor: 'purple' },
+      handle: { backgroundColor: 'blue' },
+    };
+
+    const { container } = render(
+      <Slider
+        range
+        defaultValue={[20, 30, 50]}
+        style={{ width: '100%' }}
+        classNames={customClassNames}
+        styles={customStyles}
+      />,
+    );
+
+    const rootElement = container.querySelector('.ant-slider') as HTMLElement;
+    const trackElement = container.querySelector('.ant-slider-track') as HTMLElement;
+    const tracksElement = container.querySelector('.ant-slider-tracks') as HTMLElement;
+    const railElement = container.querySelector('.ant-slider-rail') as HTMLElement;
+    const handleElement = container.querySelector('.ant-slider-handle') as HTMLElement;
+
+    // check classNames
+    expect(rootElement.classList).toContain('custom-root');
+    expect(trackElement.classList).toContain('custom-track');
+    expect(tracksElement.classList).toContain('custom-tracks');
+    expect(railElement.classList).toContain('custom-rail');
+    expect(handleElement.classList).toContain('custom-handle');
+
+    // check styles
+    expect(rootElement.style.backgroundColor).toBe('red');
+    expect(trackElement.style.backgroundColor).toBe('black');
+    expect(tracksElement.style.backgroundColor).toBe('yellow');
+    expect(railElement.style.backgroundColor).toBe('purple');
+    expect(handleElement.style.backgroundColor).toBe('blue');
+  });
 });
diff --git a/components/slider/demo/_semantic.tsx b/components/slider/demo/_semantic.tsx
index be5af92d77..d2c9f7553d 100644
--- a/components/slider/demo/_semantic.tsx
+++ b/components/slider/demo/_semantic.tsx
@@ -6,12 +6,14 @@ import useLocale from '../../../.dumi/hooks/useLocale';
 
 const locales = {
   cn: {
+    root: '根元素',
     track: '范围选择下，点和点之间单个选取条',
     tracks: '范围选择下，整个范围选取条',
     rail: '背景条元素',
     handle: '抓取点元素',
   },
   en: {
+    root: 'Root element',
     track: 'The selection bar between points and points under the range selection',
     tracks: 'The entire range selection bar under the range selection',
     rail: 'Background rail element',
@@ -24,6 +26,7 @@ const App: React.FC = () => {
   return (
     <SemanticPreview
       semantics={[
+        { name: 'root', desc: locale.root, version: '5.23.0' },
         { name: 'track', desc: locale.track, version: '5.10.0' },
         { name: 'tracks', desc: locale.tracks, version: '5.10.0' },
         { name: 'rail', desc: locale.rail, version: '5.10.0' },
diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index 8ba9442258..072e5231fb 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import type { SliderProps as RcSliderProps } from 'rc-slider';
 import RcSlider from 'rc-slider';
-import type { SliderProps, SliderRef } from 'rc-slider/lib/Slider';
+import type { SliderRef } from 'rc-slider/lib/Slider';
 import raf from 'rc-util/lib/raf';
 
 import type { GetProp } from '../_util/type';
@@ -10,13 +10,21 @@ import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import type { AbstractTooltipProps, TooltipPlacement } from '../tooltip';
+import SliderInternalContext from './Context';
 import SliderTooltip from './SliderTooltip';
 import useStyle from './style';
-import SliderInternalContext from './Context';
 import useRafLock from './useRafLock';
 
 export type SliderMarks = RcSliderProps['marks'];
 
+export type SemanticName = 'root' | 'tracks' | 'track' | 'rail' | 'handle';
+export type SliderClassNames = Partial<Record<SemanticName, string>>;
+export type SliderStyles = Partial<Record<SemanticName, React.CSSProperties>>;
+export interface SliderProps extends RcSliderProps {
+  classNames?: SliderClassNames;
+  styles?: SliderStyles;
+}
+
 interface HandleGeneratorInfo {
   value?: number;
   dragging?: boolean;
@@ -59,8 +67,8 @@ export interface SliderBaseProps {
   tooltip?: SliderTooltipProps;
   autoFocus?: boolean;
 
-  styles?: RcSliderProps['styles'];
-  classNames?: RcSliderProps['classNames'];
+  styles?: SliderProps['styles'];
+  classNames?: SliderProps['classNames'];
   onFocus?: React.FocusEventHandler<HTMLDivElement>;
   onBlur?: React.FocusEventHandler<HTMLDivElement>;
 
@@ -142,6 +150,8 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
     tooltipPlacement: legacyTooltipPlacement,
     tooltip = {},
     onChangeComplete,
+    classNames: sliderClassNames,
+    styles,
     ...restProps
   } = props;
 
@@ -207,9 +217,11 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
-  const cls = classNames(
+  const rootClassNames = classNames(
     className,
     slider?.className,
+    slider?.classNames?.root,
+    sliderClassNames?.root,
     rootClassName,
     {
       [`${prefixCls}-rtl`]: isRTL,
@@ -319,7 +331,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
             open={open}
             placement={getTooltipPlacement(tooltipPlacement ?? legacyTooltipPlacement, vertical)}
             key={index}
-            overlayClassName={`${prefixCls}-tooltip`}
+            classNames={{ root: `${prefixCls}-tooltip` }}
             getPopupContainer={
               getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer
             }
@@ -350,7 +362,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
             open={mergedTipFormatter !== null && activeOpen}
             placement={getTooltipPlacement(tooltipPlacement ?? legacyTooltipPlacement, vertical)}
             key="tooltip"
-            overlayClassName={`${prefixCls}-tooltip`}
+            classNames={{ root: `${prefixCls}-tooltip` }}
             getPopupContainer={
               getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer
             }
@@ -363,16 +375,49 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
     : undefined;
 
   // ============================== Render ==============================
-  const mergedStyle: React.CSSProperties = { ...slider?.style, ...style };
+  const rootStyle: React.CSSProperties = {
+    ...slider?.styles?.root,
+    ...slider?.style,
+    ...styles?.root,
+    ...style,
+  };
+
+  const mergedTracks = {
+    ...slider?.styles?.tracks,
+    ...styles?.tracks,
+  };
+
+  const mergedTracksClassNames = classNames(slider?.classNames?.tracks, sliderClassNames?.tracks);
 
   return wrapCSSVar(
     // @ts-ignore
     <RcSlider
       {...restProps}
+      classNames={{
+        handle: classNames(slider?.classNames?.handle, sliderClassNames?.handle),
+        rail: classNames(slider?.classNames?.rail, sliderClassNames?.rail),
+        track: classNames(slider?.classNames?.track, sliderClassNames?.track),
+        ...(mergedTracksClassNames ? { tracks: mergedTracksClassNames } : {}),
+      }}
+      styles={{
+        handle: {
+          ...slider?.styles?.handle,
+          ...styles?.handle,
+        },
+        rail: {
+          ...slider?.styles?.rail,
+          ...styles?.rail,
+        },
+        track: {
+          ...slider?.styles?.track,
+          ...styles?.track,
+        },
+        ...(Object.keys(mergedTracks).length ? { tracks: mergedTracks } : {}),
+      }}
       step={restProps.step}
       range={range}
-      className={cls}
-      style={mergedStyle}
+      className={rootClassNames}
+      style={rootStyle}
       disabled={mergedDisabled}
       ref={ref}
       prefixCls={prefixCls}
diff --git a/components/slider/style/index.ts b/components/slider/style/index.ts
index c631c76af2..ebe69f9a34 100644
--- a/components/slider/style/index.ts
+++ b/components/slider/style/index.ts
@@ -1,7 +1,7 @@
 import type * as React from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@@ -466,7 +466,7 @@ export const prepareComponentToken: GetDefaultToken<'Slider'> = (token) => {
   const handleLineWidth = token.lineWidth + increaseHandleWidth;
   const handleLineWidthHover = token.lineWidth + increaseHandleWidth * 1.5;
   const handleActiveColor = token.colorPrimary;
-  const handleActiveOutlineColor = new TinyColor(handleActiveColor).setAlpha(0.2).toRgbString();
+  const handleActiveOutlineColor = new FastColor(handleActiveColor).setA(0.2).toRgbString();
 
   return {
     controlSize,
@@ -483,9 +483,9 @@ export const prepareComponentToken: GetDefaultToken<'Slider'> = (token) => {
     handleColor: token.colorPrimaryBorder,
     handleActiveColor,
     handleActiveOutlineColor,
-    handleColorDisabled: new TinyColor(token.colorTextDisabled)
+    handleColorDisabled: new FastColor(token.colorTextDisabled)
       .onBackground(token.colorBgContainer)
-      .toHexShortString(),
+      .toHexString(),
     dotBorderColor: token.colorBorderSecondary,
     dotActiveBorderColor: token.colorPrimaryBorder,
     trackBgDisabled: token.colorBgContainerDisabled,
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index ca044a09f4..927a109c1b 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -901,7 +901,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         >
           <input
             class="ant-input ant-input-outlined"
-            type="text"
+            type="search"
             value="0571"
           />
           <span
@@ -950,16 +950,15 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
           >
             <input
               class="ant-input"
-              type="text"
+              type="search"
               value="26888888"
             />
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -981,7 +980,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
           <span
@@ -1027,7 +1026,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         >
           <input
             class="ant-input ant-input-outlined"
-            type="text"
+            type="search"
             value="+1"
           />
           <span
@@ -8452,7 +8451,6 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
             <div>
               <div
                 class="ant-select-tree"
-                role="tree"
               >
                 <div>
                   <input
@@ -8477,6 +8475,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                 </div>
                 <div
                   class="ant-select-tree-list"
+                  role="tree"
                   style="position: relative;"
                 >
                   <div
@@ -8489,9 +8488,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                         style="display: flex; flex-direction: column;"
                       >
                         <div
-                          aria-grabbed="false"
+                          aria-expanded="true"
                           class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                           draggable="false"
+                          role="treeitem"
                         >
                           <span
                             aria-hidden="true"
@@ -8532,9 +8532,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                           </span>
                         </div>
                         <div
-                          aria-grabbed="false"
+                          aria-expanded="true"
                           class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
                           draggable="false"
+                          role="treeitem"
                         >
                           <span
                             aria-hidden="true"
@@ -8579,9 +8580,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                           </span>
                         </div>
                         <div
-                          aria-grabbed="false"
+                          aria-expanded="false"
                           class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-selected"
                           draggable="false"
+                          role="treeitem"
                         >
                           <span
                             aria-hidden="true"
@@ -8609,9 +8611,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                           </span>
                         </div>
                         <div
-                          aria-grabbed="false"
+                          aria-expanded="false"
                           class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                           draggable="false"
+                          role="treeitem"
                         >
                           <span
                             aria-hidden="true"
@@ -8639,9 +8642,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                           </span>
                         </div>
                         <div
-                          aria-grabbed="false"
+                          aria-expanded="true"
                           class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                           draggable="false"
+                          role="treeitem"
                         >
                           <span
                             aria-hidden="true"
@@ -8686,9 +8690,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                           </span>
                         </div>
                         <div
-                          aria-grabbed="false"
+                          aria-expanded="false"
                           class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                           draggable="false"
+                          role="treeitem"
                         >
                           <span
                             aria-hidden="true"
@@ -10918,7 +10923,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
         >
           <input
             class="ant-input ant-input-outlined"
-            type="text"
+            type="search"
             value=""
           />
           <span
@@ -10963,7 +10968,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
         >
           <input
             class="ant-input ant-input-outlined"
-            type="text"
+            type="search"
             value=""
           />
           <span
@@ -14524,7 +14529,7 @@ Array [
             <input
               class="ant-input ant-input-outlined"
               placeholder="Search"
-              type="text"
+              type="search"
               value=""
             />
             <span
@@ -16659,6 +16664,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -16678,6 +16684,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -16697,6 +16704,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -16716,6 +16724,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="customize"
         />
diff --git a/components/space/__tests__/__snapshots__/demo.test.tsx.snap b/components/space/__tests__/__snapshots__/demo.test.tsx.snap
index 424634161f..a48bc8e107 100644
--- a/components/space/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.tsx.snap
@@ -620,7 +620,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         >
           <input
             class="ant-input ant-input-outlined"
-            type="text"
+            type="search"
             value="0571"
           />
           <span
@@ -669,16 +669,15 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
           >
             <input
               class="ant-input"
-              type="text"
+              type="search"
               value="26888888"
             />
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -700,7 +699,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
           <span
@@ -746,7 +745,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         >
           <input
             class="ant-input ant-input-outlined"
-            type="text"
+            type="search"
             value="+1"
           />
           <span
@@ -2910,7 +2909,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
         >
           <input
             class="ant-input ant-input-outlined"
-            type="text"
+            type="search"
             value=""
           />
           <span
@@ -2955,7 +2954,7 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
         >
           <input
             class="ant-input ant-input-outlined"
-            type="text"
+            type="search"
             value=""
           />
           <span
@@ -4145,7 +4144,7 @@ Array [
             <input
               class="ant-input ant-input-outlined"
               placeholder="Search"
-              type="text"
+              type="search"
               value=""
             />
             <span
@@ -4505,6 +4504,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -4524,6 +4524,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -4543,6 +4544,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -4562,6 +4564,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="customize"
         />
diff --git a/components/spin/index.tsx b/components/spin/index.tsx
index c2e56728b4..71d772d7d5 100644
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -48,7 +48,7 @@ export type SpinType = React.FC<SpinProps> & {
 let defaultIndicator: React.ReactNode | undefined;
 
 function shouldDelay(spinning?: boolean, delay?: number): boolean {
-  return !!spinning && !!delay && !isNaN(Number(delay));
+  return !!spinning && !!delay && !Number.isNaN(Number(delay));
 }
 
 const Spin: SpinType = (props) => {
diff --git a/components/splitter/SplitBar.tsx b/components/splitter/SplitBar.tsx
index 32f30c0e78..2319a948f7 100644
--- a/components/splitter/SplitBar.tsx
+++ b/components/splitter/SplitBar.tsx
@@ -4,6 +4,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import UpOutlined from '@ant-design/icons/UpOutlined';
 import classNames from 'classnames';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 
 export interface SplitBarProps {
   index: number;
@@ -20,6 +21,8 @@ export interface SplitBarProps {
   ariaNow: number;
   ariaMin: number;
   ariaMax: number;
+  lazy?: boolean;
+  containerSize: number;
 }
 
 function getValidNumber(num: number | undefined): number {
@@ -42,12 +45,18 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
     onOffsetUpdate,
     onOffsetEnd,
     onCollapse,
+    lazy,
+    containerSize,
   } = props;
 
   const splitBarPrefixCls = `${prefixCls}-bar`;
 
   // ======================== Resize ========================
   const [startPos, setStartPos] = useState<[x: number, y: number] | null>(null);
+  const [constrainedOffset, setConstrainedOffset] = useState<number>(0);
+
+  const constrainedOffsetX = vertical ? 0 : constrainedOffset;
+  const constrainedOffsetY = vertical ? constrainedOffset : 0;
 
   const onMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
     if (resizable && e.currentTarget) {
@@ -64,6 +73,30 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
     }
   };
 
+  // Updated constraint calculation
+  const getConstrainedOffset = (rawOffset: number) => {
+    const currentPos = (containerSize * ariaNow) / 100;
+    const newPos = currentPos + rawOffset;
+
+    // Calculate available space
+    const minAllowed = Math.max(0, (containerSize * ariaMin) / 100);
+    const maxAllowed = Math.min(containerSize, (containerSize * ariaMax) / 100);
+
+    // Constrain new position within bounds
+    const clampedPos = Math.max(minAllowed, Math.min(maxAllowed, newPos));
+    return clampedPos - currentPos;
+  };
+
+  const handleLazyMove = useEvent((offsetX: number, offsetY: number) => {
+    const constrainedOffsetValue = getConstrainedOffset(vertical ? offsetY : offsetX);
+    setConstrainedOffset(constrainedOffsetValue);
+  });
+
+  const handleLazyEnd = useEvent(() => {
+    onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY);
+    setConstrainedOffset(0);
+  });
+
   React.useEffect(() => {
     if (startPos) {
       const onMouseMove = (e: MouseEvent) => {
@@ -71,10 +104,17 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
         const offsetX = pageX - startPos[0];
         const offsetY = pageY - startPos[1];
 
-        onOffsetUpdate(index, offsetX, offsetY);
+        if (lazy) {
+          handleLazyMove(offsetX, offsetY);
+        } else {
+          onOffsetUpdate(index, offsetX, offsetY);
+        }
       };
 
       const onMouseUp = () => {
+        if (lazy) {
+          handleLazyEnd();
+        }
         setStartPos(null);
         onOffsetEnd();
       };
@@ -85,11 +125,18 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
           const offsetX = touch.pageX - startPos[0];
           const offsetY = touch.pageY - startPos[1];
 
-          onOffsetUpdate(index, offsetX, offsetY);
+          if (lazy) {
+            handleLazyMove(offsetX, offsetY);
+          } else {
+            onOffsetUpdate(index, offsetX, offsetY);
+          }
         }
       };
 
       const handleTouchEnd = () => {
+        if (lazy) {
+          handleLazyEnd();
+        }
         setStartPos(null);
         onOffsetEnd();
       };
@@ -106,7 +153,11 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
         window.removeEventListener('touchend', handleTouchEnd);
       };
     }
-  }, [startPos]);
+  }, [startPos, lazy, vertical, index, containerSize, ariaNow, ariaMin, ariaMax]);
+
+  const transformStyle = {
+    [`--${splitBarPrefixCls}-preview-offset`]: `${constrainedOffset}px`,
+  };
 
   // ======================== Render ========================
   const StartIcon = vertical ? UpOutlined : LeftOutlined;
@@ -120,6 +171,15 @@ const SplitBar: React.FC<SplitBarProps> = (props) => {
       aria-valuemin={getValidNumber(ariaMin)}
       aria-valuemax={getValidNumber(ariaMax)}
     >
+      {lazy && (
+        <div
+          className={classNames(`${splitBarPrefixCls}-preview`, {
+            [`${splitBarPrefixCls}-preview-active`]: !!constrainedOffset,
+          })}
+          style={transformStyle}
+        />
+      )}
+
       <div
         className={classNames(`${splitBarPrefixCls}-dragger`, {
           [`${splitBarPrefixCls}-dragger-disabled`]: !resizable,
diff --git a/components/splitter/Splitter.tsx b/components/splitter/Splitter.tsx
index 25b0aca782..036c6a46b0 100644
--- a/components/splitter/Splitter.tsx
+++ b/components/splitter/Splitter.tsx
@@ -28,6 +28,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
     onResizeStart,
     onResize,
     onResizeEnd,
+    lazy,
   } = props;
 
   const { getPrefixCls, direction, splitter } = React.useContext(ConfigContext);
@@ -170,6 +171,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
 
             splitBar = (
               <SplitBar
+                lazy={lazy}
                 index={idx}
                 active={movingIndex === idx}
                 prefixCls={prefixCls}
@@ -190,6 +192,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
                 }}
                 onOffsetEnd={onInternalResizeEnd}
                 onCollapse={onInternalCollapse}
+                containerSize={containerSize || 0}
               />
             );
           }
diff --git a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9ebbbd18c7..6e1bae7f45 100644
--- a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -562,6 +562,128 @@ exports[`renders components/splitter/demo/group.tsx extend context correctly 1`]
 
 exports[`renders components/splitter/demo/group.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/splitter/demo/lazy.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  style="width: 100%;"
+>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-splitter ant-splitter-horizontal"
+      style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);"
+    >
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis: 40%; flex-grow: 0;"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height: 100%;"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space: nowrap;"
+          >
+            First
+          </h5>
+        </div>
+      </div>
+      <div
+        aria-valuemax="0"
+        aria-valuemin="0"
+        aria-valuenow="40"
+        class="ant-splitter-bar"
+        role="separator"
+      >
+        <div
+          class="ant-splitter-bar-preview"
+          style="--ant-splitter-bar-preview-offset: 0px;"
+        />
+        <div
+          class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
+        />
+      </div>
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis: auto; flex-grow: 1;"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height: 100%;"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space: nowrap;"
+          >
+            Second
+          </h5>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-splitter ant-splitter-vertical"
+      style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);"
+    >
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis: 40%; flex-grow: 0;"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height: 100%;"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space: nowrap;"
+          >
+            First
+          </h5>
+        </div>
+      </div>
+      <div
+        aria-valuemax="0"
+        aria-valuemin="0"
+        aria-valuenow="40"
+        class="ant-splitter-bar"
+        role="separator"
+      >
+        <div
+          class="ant-splitter-bar-preview"
+          style="--ant-splitter-bar-preview-offset: 0px;"
+        />
+        <div
+          class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
+        />
+      </div>
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis: auto; flex-grow: 1;"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height: 100%;"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space: nowrap;"
+          >
+            Second
+          </h5>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/splitter/demo/lazy.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/splitter/demo/multiple.tsx extend context correctly 1`] = `
 <div
   class="ant-splitter ant-splitter-horizontal"
@@ -647,6 +769,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx extend context corr
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -682,7 +805,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx extend context corr
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Splitter Tab
           </div>
diff --git a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
index 9616b87496..12cf7a134b 100644
--- a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
@@ -574,6 +574,126 @@ exports[`renders components/splitter/demo/group.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/splitter/demo/lazy.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+  style="width:100%"
+>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-splitter ant-splitter-horizontal"
+      style="height:200px;box-shadow:0 0 10px rgba(0, 0, 0, 0.1)"
+    >
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis:40%;flex-grow:0"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height:100%"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space:nowrap"
+          >
+            First
+          </h5>
+        </div>
+      </div>
+      <div
+        aria-valuemax="0"
+        aria-valuemin="0"
+        aria-valuenow="40"
+        class="ant-splitter-bar"
+        role="separator"
+      >
+        <div
+          class="ant-splitter-bar-preview"
+          style="--ant-splitter-bar-preview-offset:0px"
+        />
+        <div
+          class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
+        />
+      </div>
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis:auto;flex-grow:1"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height:100%"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space:nowrap"
+          >
+            Second
+          </h5>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-splitter ant-splitter-vertical"
+      style="height:200px;box-shadow:0 0 10px rgba(0, 0, 0, 0.1)"
+    >
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis:40%;flex-grow:0"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height:100%"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space:nowrap"
+          >
+            First
+          </h5>
+        </div>
+      </div>
+      <div
+        aria-valuemax="0"
+        aria-valuemin="0"
+        aria-valuenow="40"
+        class="ant-splitter-bar"
+        role="separator"
+      >
+        <div
+          class="ant-splitter-bar-preview"
+          style="--ant-splitter-bar-preview-offset:0px"
+        />
+        <div
+          class="ant-splitter-bar-dragger ant-splitter-bar-dragger-disabled"
+        />
+      </div>
+      <div
+        class="ant-splitter-panel"
+        style="flex-basis:auto;flex-grow:1"
+      >
+        <div
+          class="ant-flex ant-flex-align-center ant-flex-justify-center"
+          style="height:100%"
+        >
+          <h5
+            class="ant-typography ant-typography-secondary"
+            style="white-space:nowrap"
+          >
+            Second
+          </h5>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/splitter/demo/multiple.tsx correctly 1`] = `
 <div
   class="ant-splitter ant-splitter-horizontal"
@@ -663,6 +783,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -694,7 +815,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Splitter Tab
           </div>
diff --git a/components/splitter/__tests__/lazy.test.tsx b/components/splitter/__tests__/lazy.test.tsx
new file mode 100644
index 0000000000..7ab4201ee1
--- /dev/null
+++ b/components/splitter/__tests__/lazy.test.tsx
@@ -0,0 +1,208 @@
+import React from 'react';
+import { createEvent, fireEvent, render } from '@testing-library/react';
+import { Splitter } from 'antd';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { resetWarned } from 'rc-util/lib/warning';
+
+import { triggerResize, waitFakeTimer } from '../../../tests/utils';
+import { PanelProps, SplitterProps } from '../interface';
+
+const SplitterDemo = ({ items = [{}, {}], ...props }: { items?: PanelProps[] } & SplitterProps) => (
+  <Splitter {...props}>
+    {items?.map((item, idx) => {
+      const key = `panel-${idx}`;
+      return <Splitter.Panel key={key} {...item} />;
+    })}
+  </Splitter>
+);
+
+const resizeSplitter = async () => {
+  triggerResize(document.body.querySelector('.ant-splitter')!);
+  await waitFakeTimer();
+};
+
+describe('Splitter lazy', () => {
+  const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  let containerSize = 100;
+
+  beforeAll(() => {
+    spyElementPrototypes(HTMLElement, {
+      offsetWidth: {
+        get: () => containerSize,
+      },
+      offsetHeight: {
+        get: () => containerSize,
+      },
+    });
+  });
+
+  beforeEach(() => {
+    containerSize = 100;
+    errSpy.mockReset();
+    resetWarned();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  const mockDrag = (draggerEle: HTMLElement, onResize: jest.Mock, offset: number) => {
+    // Down
+    const downEvent = createEvent.mouseDown(draggerEle);
+    (downEvent as any).pageX = 0;
+    (downEvent as any).pageY = 0;
+
+    fireEvent(draggerEle, downEvent);
+
+    // Move
+    const moveEvent = createEvent.mouseMove(window);
+    (moveEvent as any).pageX = offset;
+    (moveEvent as any).pageY = offset;
+    fireEvent(window, moveEvent);
+
+    expect(onResize).not.toHaveBeenCalled();
+
+    // Up
+    fireEvent.mouseUp(window);
+  };
+
+  const mockTouchDrag = (draggerEle: HTMLElement, onResize: jest.Mock, offset: number) => {
+    const touchStart = createEvent.touchStart(draggerEle, {
+      touches: [{ pageX: 0, pageY: 0 }],
+    });
+    fireEvent(draggerEle, touchStart);
+
+    // Touch Move
+    const touchMove = createEvent.touchMove(window, {
+      touches: [{ pageX: offset, pageY: offset }],
+    });
+    fireEvent(window, touchMove);
+
+    // onResize should not be called during drag
+    expect(onResize).not.toHaveBeenCalled();
+
+    // Touch End
+    fireEvent.touchEnd(window);
+  };
+
+  it('should only update after mouse up when lazy is true', async () => {
+    const onResize = jest.fn();
+    const onResizeEnd = jest.fn();
+
+    const { container } = render(
+      <SplitterDemo
+        items={[
+          {
+            defaultSize: '50%',
+            min: '30%',
+            max: '70%',
+          },
+          {
+            defaultSize: '50%',
+            min: '30%',
+            max: '70%',
+          },
+        ]}
+        onResize={onResize}
+        onResizeEnd={onResizeEnd}
+        lazy
+      />,
+    );
+
+    await resizeSplitter();
+
+    // Right
+    mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000);
+    expect(onResize).toHaveBeenCalledWith([70, 30]);
+
+    // Left
+    onResize.mockReset();
+    mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, -1000);
+    expect(onResize).toHaveBeenCalledWith([30, 70]);
+  });
+
+  it('should work with touch events when lazy', async () => {
+    const onResize = jest.fn();
+    const onResizeEnd = jest.fn();
+
+    const { container } = render(
+      <SplitterDemo
+        items={[
+          {
+            defaultSize: '50%',
+            min: '20%',
+            max: '70%',
+          },
+          {
+            defaultSize: '50%',
+            min: '20%',
+            max: '70%',
+          },
+        ]}
+        onResize={onResize}
+        onResizeEnd={onResizeEnd}
+        lazy
+      />,
+    );
+
+    await resizeSplitter();
+
+    // Right
+    mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000);
+    expect(onResize).toHaveBeenCalledWith([70, 30]);
+
+    // Left
+    onResize.mockReset();
+    mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, -1000);
+    expect(onResize).toHaveBeenCalledWith([30, 70]);
+  });
+
+  it('should work with vertical splitter', async () => {
+    const onResize = jest.fn();
+    const onResizeEnd = jest.fn();
+
+    const { container } = render(
+      <SplitterDemo
+        items={[
+          {
+            defaultSize: '50%',
+            min: '30%',
+            max: '70%',
+          },
+          {
+            defaultSize: '50%',
+            min: '30%',
+            max: '70%',
+          },
+        ]}
+        onResize={onResize}
+        onResizeEnd={onResizeEnd}
+        layout="vertical"
+        lazy
+      />,
+    );
+
+    await resizeSplitter();
+
+    // Drag Down
+    mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000);
+    expect(onResize).toHaveBeenCalledWith([70, 30]);
+
+    // Drag Up
+    onResize.mockReset();
+    mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, -1000);
+    expect(onResize).toHaveBeenCalledWith([30, 70]);
+
+    // Touch Drag Down
+    onResize.mockReset();
+    mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000);
+    expect(onResize).toHaveBeenCalledWith([70, 30]);
+
+    // Touch Drag Up
+    onResize.mockReset();
+    mockTouchDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, -1000);
+    expect(onResize).toHaveBeenCalledWith([30, 70]);
+  });
+});
diff --git a/components/splitter/demo/lazy.md b/components/splitter/demo/lazy.md
new file mode 100644
index 0000000000..61a9ba34d5
--- /dev/null
+++ b/components/splitter/demo/lazy.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+延迟渲染模式，拖拽时不会立即更新大小，而是等到松手时才更新。
+
+## en-US
+
+Lazy mode, dragging does not update the size immediately, but updates when released.
diff --git a/components/splitter/demo/lazy.tsx b/components/splitter/demo/lazy.tsx
new file mode 100644
index 0000000000..368c81d4f6
--- /dev/null
+++ b/components/splitter/demo/lazy.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Flex, Space, Splitter, Typography } from 'antd';
+
+const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (
+  <Flex justify="center" align="center" style={{ height: '100%' }}>
+    <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+      {props.text}
+    </Typography.Title>
+  </Flex>
+);
+
+const App: React.FC = () => (
+  <Space direction="vertical" style={{ width: '100%' }}>
+    <Splitter lazy style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
+      <Splitter.Panel defaultSize="40%" min="20%" max="70%">
+        <Desc text="First" />
+      </Splitter.Panel>
+      <Splitter.Panel>
+        <Desc text="Second" />
+      </Splitter.Panel>
+    </Splitter>
+    <Splitter
+      lazy
+      layout="vertical"
+      style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}
+    >
+      <Splitter.Panel defaultSize="40%" min="30%" max="70%">
+        <Desc text="First" />
+      </Splitter.Panel>
+      <Splitter.Panel>
+        <Desc text="Second" />
+      </Splitter.Panel>
+    </Splitter>
+  </Space>
+);
+
+export default App;
diff --git a/components/splitter/index.en-US.md b/components/splitter/index.en-US.md
index a006539b02..e116db937c 100644
--- a/components/splitter/index.en-US.md
+++ b/components/splitter/index.en-US.md
@@ -24,6 +24,7 @@ Can be used to separate areas horizontally or vertically. When you need to freel
 <code src="./demo/multiple.tsx">Multiple panels</code>
 <code src="./demo/group.tsx">Complex combination</code>
 <code src="./demo/nested-in-tabs.tsx" debug>Nested in tabs</code>
+<code src="./demo/lazy.tsx" version="5.23.0">Lazy</code>
 <code src="./demo/debug.tsx" debug>Debug</code>
 
 ## API
@@ -40,6 +41,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | onResizeStart | Callback before dragging starts | `(sizes: number[]) => void` | - | - |
 | onResize | Panel size change callback | `(sizes: number[]) => void` | - | - |
 | onResizeEnd | Drag end callback | `(sizes: number[]) => void` | - | - |
+| lazy | Lazy mode | `boolean` | `false` | 5.23.0 |
 
 ### Panel
 
diff --git a/components/splitter/index.zh-CN.md b/components/splitter/index.zh-CN.md
index 3f79bfc14d..5234aa2244 100644
--- a/components/splitter/index.zh-CN.md
+++ b/components/splitter/index.zh-CN.md
@@ -27,6 +27,7 @@ tag: 5.21.0
 <code src="./demo/multiple.tsx">多面板</code>
 <code src="./demo/group.tsx">复杂组合</code>
 <code src="./demo/nested-in-tabs.tsx" debug>标签页中嵌套</code>
+<code src="./demo/lazy.tsx" version="5.23.0">延迟渲染模式</code>
 <code src="./demo/debug.tsx" debug>调试</code>
 
 ## API
@@ -37,12 +38,13 @@ tag: 5.21.0
 
 ### Splitter
 
-| 参数          | 说明             | 类型                        | 默认值       | 版本 |
-| ------------- | ---------------- | --------------------------- | ------------ | ---- |
-| layout        | 布局方向         | `horizontal` \| `vertical`  | `horizontal` | -    |
-| onResizeStart | 开始拖拽之前回调 | `(sizes: number[]) => void` | -            | -    |
-| onResize      | 面板大小变化回调 | `(sizes: number[]) => void` | -            | -    |
-| onResizeEnd   | 拖拽结束回调     | `(sizes: number[]) => void` | -            | -    |
+| 参数          | 说明             | 类型                        | 默认值       | 版本   |
+| ------------- | ---------------- | --------------------------- | ------------ | ------ |
+| layout        | 布局方向         | `horizontal` \| `vertical`  | `horizontal` | -      |
+| onResizeStart | 开始拖拽之前回调 | `(sizes: number[]) => void` | -            | -      |
+| onResize      | 面板大小变化回调 | `(sizes: number[]) => void` | -            | -      |
+| onResizeEnd   | 拖拽结束回调     | `(sizes: number[]) => void` | -            | -      |
+| lazy          | 延迟渲染模式     | `boolean`                   | `false`      | 5.23.0 |
 
 ### Panel
 
diff --git a/components/splitter/interface.ts b/components/splitter/interface.ts
index aeada36424..4f5bc2ec79 100644
--- a/components/splitter/interface.ts
+++ b/components/splitter/interface.ts
@@ -8,6 +8,7 @@ export interface SplitterProps {
   onResizeStart?: (sizes: number[]) => void;
   onResize?: (sizes: number[]) => void;
   onResizeEnd?: (sizes: number[]) => void;
+  lazy?: boolean;
 }
 
 export interface PanelProps {
diff --git a/components/splitter/style/index.ts b/components/splitter/style/index.ts
index 2bced699a7..1cb7b9d07f 100644
--- a/components/splitter/style/index.ts
+++ b/components/splitter/style/index.ts
@@ -83,6 +83,7 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
     controlItemBgHover,
     controlItemBgActive,
     controlItemBgActiveHover,
+    prefixCls,
   } = token;
 
   const splitBarCls = `${componentCls}-bar`;
@@ -91,6 +92,18 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
 
   const halfTriggerSize = token.calc(splitTriggerSize).div(2).equal();
 
+  const splitterBarPreviewOffsetVar = `${prefixCls}-bar-preview-offset`;
+
+  const splitterBarPreviewStyle: CSSObject = {
+    position: 'absolute',
+    background: token.colorPrimary,
+    opacity: 0.2,
+    pointerEvents: 'none',
+    transition: 'none',
+    zIndex: 1,
+    display: 'none',
+  };
+
   return {
     [componentCls]: {
       ...resetComponent(token),
@@ -217,6 +230,18 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
         [`> ${splitBarCls}`]: {
           width: 0,
 
+          // ======================= Preview =======================
+          [`${splitBarCls}-preview`]: {
+            height: '100%',
+            width: splitBarSize,
+            ...splitterBarPreviewStyle,
+
+            [`&${splitBarCls}-preview-active`]: {
+              display: 'block',
+              transform: `translateX(var(--${splitterBarPreviewOffsetVar}))`,
+            },
+          },
+
           // ======================= Dragger =======================
           [`${splitBarCls}-dragger`]: {
             cursor: 'col-resize',
@@ -272,6 +297,18 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
         [`> ${splitBarCls}`]: {
           height: 0,
 
+          // ======================= Preview =======================
+          [`${splitBarCls}-preview`]: {
+            height: splitBarSize,
+            width: '100%',
+            ...splitterBarPreviewStyle,
+
+            [`&${splitBarCls}-preview-active`]: {
+              display: 'block',
+              transform: `translateY(var(--${splitterBarPreviewOffsetVar}))`,
+            },
+          },
+
           // ======================= Dragger =======================
           [`${splitBarCls}-dragger`]: {
             cursor: 'row-resize',
diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
index b0abb84c8b..4ea9c04e7a 100644
--- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -5341,6 +5341,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -5361,6 +5362,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="default"
         />
diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
index 776aafb607..763afc2a60 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -4950,7 +4950,7 @@ Array [
     </div>
   </div>,
   <div
-    style="line-height:260px;text-align:center;color:rgba(0, 0, 0, 0.45);background-color:rgba(0, 0, 0, 0.02);border-radius:8px;border:1px dashed #d9d9d9;margin-top:16px"
+    style="line-height:260px;text-align:center;color:rgba(0,0,0,0.45);background-color:rgba(0,0,0,0.02);border-radius:8px;border:1px dashed #d9d9d9;margin-top:16px"
   >
     First-content
   </div>,
@@ -4983,6 +4983,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -5003,6 +5004,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="default"
         />
diff --git a/components/style/index.tsx b/components/style/index.tsx
index b79230410a..528665324a 100644
--- a/components/style/index.tsx
+++ b/components/style/index.tsx
@@ -1,5 +1,6 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { AliasToken } from '../theme/internal';
 
 export const textEllipsis: CSSObject = {
@@ -131,15 +132,15 @@ export const genCommonStyle = (
   };
 };
 
-export const genFocusOutline = (token: AliasToken): CSSObject => ({
+export const genFocusOutline = (token: AliasToken, offset?: number): CSSObject => ({
   outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`,
-  outlineOffset: 1,
+  outlineOffset: offset ?? 1,
   transition: 'outline-offset 0s, outline 0s',
 });
 
-export const genFocusStyle = (token: AliasToken): CSSObject => ({
+export const genFocusStyle = (token: AliasToken, offset?: number): CSSObject => ({
   '&:focus-visible': {
-    ...genFocusOutline(token),
+    ...genFocusOutline(token, offset),
   },
 });
 
diff --git a/components/switch/style/index.ts b/components/switch/style/index.ts
index b722e91626..f7745c8c95 100644
--- a/components/switch/style/index.ts
+++ b/components/switch/style/index.ts
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { genFocusStyle, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@@ -394,7 +394,7 @@ export const prepareComponentToken: GetDefaultToken<'Switch'> = (token) => {
     handleBg: colorWhite,
     handleSize,
     handleSizeSM,
-    handleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`,
+    handleShadow: `0 2px 4px 0 ${new FastColor('#00230b').setA(0.2).toRgbString()}`,
     innerMinMargin: handleSize / 2,
     innerMaxMargin: handleSize + padding + padding * 2,
     innerMinMarginSM: handleSizeSM / 2,
diff --git a/components/table/__tests__/Table.sorter.test.tsx b/components/table/__tests__/Table.sorter.test.tsx
index db07969222..534fefd403 100644
--- a/components/table/__tests__/Table.sorter.test.tsx
+++ b/components/table/__tests__/Table.sorter.test.tsx
@@ -514,7 +514,7 @@ describe('Table.sorter', () => {
     rerender(
       createTable({
         showSorterTooltip: {
-          overlayClassName: 'custom-tooltip',
+          classNames: { root: 'custom-tooltip' },
         },
       }),
     );
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index 597eaf6d27..7c7f1df51c 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1407,6 +1407,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="large"
                     />
@@ -1426,6 +1427,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="middle"
                     />
@@ -1445,6 +1447,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="small"
                     />
@@ -1499,6 +1502,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="unset"
                     />
@@ -1518,6 +1522,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="scroll"
                     />
@@ -1537,6 +1542,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="fixed"
                     />
@@ -1591,6 +1597,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="unset"
                     />
@@ -1610,6 +1617,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="fixed"
                     />
@@ -1663,6 +1671,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topLeft"
                     />
@@ -1682,6 +1691,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topCenter"
                     />
@@ -1701,6 +1711,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topRight"
                     />
@@ -1721,6 +1732,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="none"
                     />
@@ -1774,6 +1786,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomLeft"
                     />
@@ -1793,6 +1806,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomCenter"
                     />
@@ -1813,6 +1827,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomRight"
                     />
@@ -1832,6 +1847,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="none"
                     />
@@ -5956,6 +5972,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="large"
                     />
@@ -5975,6 +5992,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="middle"
                     />
@@ -5994,6 +6012,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="small"
                     />
@@ -6048,6 +6067,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="unset"
                     />
@@ -6067,6 +6087,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="scroll"
                     />
@@ -6086,6 +6107,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="fixed"
                     />
@@ -6140,6 +6162,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="unset"
                     />
@@ -6159,6 +6182,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="fixed"
                     />
@@ -6212,6 +6236,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topLeft"
                     />
@@ -6231,6 +6256,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topCenter"
                     />
@@ -6250,6 +6276,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topRight"
                     />
@@ -6270,6 +6297,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="none"
                     />
@@ -6323,6 +6351,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomLeft"
                     />
@@ -6342,6 +6371,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomCenter"
                     />
@@ -6362,6 +6392,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomRight"
                     />
@@ -6381,6 +6412,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="none"
                     />
@@ -10291,7 +10323,6 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                             </label>
                             <div
                               class="ant-tree ant-tree-icon-hide ant-tree-block-node ant-tree-unselectable ant-dropdown-menu"
-                              role="tree"
                             >
                               <div>
                                 <input
@@ -10316,6 +10347,7 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                               </div>
                               <div
                                 class="ant-tree-list"
+                                role="tree"
                                 style="position: relative;"
                               >
                                 <div
@@ -10327,9 +10359,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                       style="display: flex; flex-direction: column;"
                                     >
                                       <div
-                                        aria-grabbed="false"
+                                        aria-expanded="false"
                                         class="ant-tree-treenode ant-tree-treenode-switcher-close"
                                         draggable="false"
+                                        role="treeitem"
                                       >
                                         <span
                                           aria-hidden="true"
@@ -10339,7 +10372,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                           class="ant-tree-switcher ant-tree-switcher-noop"
                                         />
                                         <span
+                                          aria-checked="false"
+                                          aria-label="Select Joe"
                                           class="ant-tree-checkbox"
+                                          role="checkbox"
                                         >
                                           <span
                                             class="ant-tree-checkbox-inner"
@@ -10357,9 +10393,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                         </span>
                                       </div>
                                       <div
-                                        aria-grabbed="false"
+                                        aria-expanded="true"
                                         class="ant-tree-treenode ant-tree-treenode-switcher-open"
                                         draggable="false"
+                                        role="treeitem"
                                       >
                                         <span
                                           aria-hidden="true"
@@ -10389,7 +10426,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                           </span>
                                         </span>
                                         <span
+                                          aria-checked="false"
+                                          aria-label="Select Category 1"
                                           class="ant-tree-checkbox"
+                                          role="checkbox"
                                         >
                                           <span
                                             class="ant-tree-checkbox-inner"
@@ -10407,9 +10447,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                         </span>
                                       </div>
                                       <div
-                                        aria-grabbed="false"
+                                        aria-expanded="false"
                                         class="ant-tree-treenode ant-tree-treenode-switcher-close"
                                         draggable="false"
+                                        role="treeitem"
                                       >
                                         <span
                                           aria-hidden="true"
@@ -10423,7 +10464,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                           class="ant-tree-switcher ant-tree-switcher-noop"
                                         />
                                         <span
+                                          aria-checked="false"
+                                          aria-label="Select Yellow"
                                           class="ant-tree-checkbox"
+                                          role="checkbox"
                                         >
                                           <span
                                             class="ant-tree-checkbox-inner"
@@ -10441,9 +10485,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                         </span>
                                       </div>
                                       <div
-                                        aria-grabbed="false"
+                                        aria-expanded="false"
                                         class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
                                         draggable="false"
+                                        role="treeitem"
                                       >
                                         <span
                                           aria-hidden="true"
@@ -10457,7 +10502,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                           class="ant-tree-switcher ant-tree-switcher-noop"
                                         />
                                         <span
+                                          aria-checked="false"
+                                          aria-label="Select Pink"
                                           class="ant-tree-checkbox"
+                                          role="checkbox"
                                         >
                                           <span
                                             class="ant-tree-checkbox-inner"
@@ -10475,9 +10523,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                         </span>
                                       </div>
                                       <div
-                                        aria-grabbed="false"
+                                        aria-expanded="true"
                                         class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
                                         draggable="false"
+                                        role="treeitem"
                                       >
                                         <span
                                           aria-hidden="true"
@@ -10507,7 +10556,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                           </span>
                                         </span>
                                         <span
+                                          aria-checked="false"
+                                          aria-label="Select Category 2"
                                           class="ant-tree-checkbox"
+                                          role="checkbox"
                                         >
                                           <span
                                             class="ant-tree-checkbox-inner"
@@ -10525,9 +10577,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                         </span>
                                       </div>
                                       <div
-                                        aria-grabbed="false"
+                                        aria-expanded="false"
                                         class="ant-tree-treenode ant-tree-treenode-switcher-close"
                                         draggable="false"
+                                        role="treeitem"
                                       >
                                         <span
                                           aria-hidden="true"
@@ -10541,7 +10594,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                           class="ant-tree-switcher ant-tree-switcher-noop"
                                         />
                                         <span
+                                          aria-checked="false"
+                                          aria-label="Select Green"
                                           class="ant-tree-checkbox"
+                                          role="checkbox"
                                         >
                                           <span
                                             class="ant-tree-checkbox-inner"
@@ -10559,9 +10615,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                         </span>
                                       </div>
                                       <div
-                                        aria-grabbed="false"
+                                        aria-expanded="false"
                                         class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
                                         draggable="false"
+                                        role="treeitem"
                                       >
                                         <span
                                           aria-hidden="true"
@@ -10575,7 +10632,10 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
                                           class="ant-tree-switcher ant-tree-switcher-noop"
                                         />
                                         <span
+                                          aria-checked="false"
+                                          aria-label="Select Black"
                                           class="ant-tree-checkbox"
+                                          role="checkbox"
                                         >
                                           <span
                                             class="ant-tree-checkbox-inner"
@@ -11231,7 +11291,6 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
                             </label>
                             <div
                               class="ant-tree ant-tree-icon-hide ant-tree-block-node ant-tree-unselectable ant-dropdown-menu"
-                              role="tree"
                             >
                               <div>
                                 <input
@@ -11256,6 +11315,7 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
                               </div>
                               <div
                                 class="ant-tree-list"
+                                role="tree"
                                 style="position: relative;"
                               >
                                 <div
@@ -11267,9 +11327,10 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
                                       style="display: flex; flex-direction: column;"
                                     >
                                       <div
-                                        aria-grabbed="false"
+                                        aria-expanded="false"
                                         class="ant-tree-treenode ant-tree-treenode-switcher-close"
                                         draggable="false"
+                                        role="treeitem"
                                       >
                                         <span
                                           aria-hidden="true"
@@ -11279,7 +11340,10 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
                                           class="ant-tree-switcher ant-tree-switcher-noop"
                                         />
                                         <span
+                                          aria-checked="false"
+                                          aria-label="Select Joe"
                                           class="ant-tree-checkbox"
+                                          role="checkbox"
                                         >
                                           <span
                                             class="ant-tree-checkbox-inner"
@@ -11297,9 +11361,10 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
                                         </span>
                                       </div>
                                       <div
-                                        aria-grabbed="false"
+                                        aria-expanded="false"
                                         class="ant-tree-treenode ant-tree-treenode-switcher-close"
                                         draggable="false"
+                                        role="treeitem"
                                       >
                                         <span
                                           aria-hidden="true"
@@ -11309,7 +11374,10 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
                                           class="ant-tree-switcher ant-tree-switcher-noop"
                                         />
                                         <span
+                                          aria-checked="false"
+                                          aria-label="Select Category 1"
                                           class="ant-tree-checkbox"
+                                          role="checkbox"
                                         >
                                           <span
                                             class="ant-tree-checkbox-inner"
@@ -11327,9 +11395,10 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
                                         </span>
                                       </div>
                                       <div
-                                        aria-grabbed="false"
+                                        aria-expanded="false"
                                         class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
                                         draggable="false"
+                                        role="treeitem"
                                       >
                                         <span
                                           aria-hidden="true"
@@ -11339,7 +11408,10 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl
                                           class="ant-tree-switcher ant-tree-switcher-noop"
                                         />
                                         <span
+                                          aria-checked="false"
+                                          aria-label="Select Category 2"
                                           class="ant-tree-checkbox"
+                                          role="checkbox"
                                         >
                                           <span
                                             class="ant-tree-checkbox-inner"
@@ -20752,6 +20824,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
           <input
             checked=""
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="topLeft"
           />
@@ -20771,6 +20844,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="topCenter"
           />
@@ -20790,6 +20864,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="topRight"
           />
@@ -20809,6 +20884,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="none"
           />
@@ -20834,6 +20910,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="bottomLeft"
         />
@@ -20853,6 +20930,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="bottomCenter"
         />
@@ -20873,6 +20951,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="bottomRight"
         />
@@ -20892,6 +20971,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="none"
         />
@@ -22655,6 +22735,7 @@ exports[`renders components/table/demo/row-selection.tsx extend context correctl
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="checkbox"
         />
@@ -22674,6 +22755,7 @@ exports[`renders components/table/demo/row-selection.tsx extend context correctl
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="radio"
         />
diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
index 998a5cd3d5..0edce1dc59 100644
--- a/components/table/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap
@@ -1407,6 +1407,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="large"
                     />
@@ -1426,6 +1427,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="middle"
                     />
@@ -1445,6 +1447,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="small"
                     />
@@ -1499,6 +1502,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="unset"
                     />
@@ -1518,6 +1522,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="scroll"
                     />
@@ -1537,6 +1542,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="fixed"
                     />
@@ -1591,6 +1597,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="unset"
                     />
@@ -1610,6 +1617,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="fixed"
                     />
@@ -1663,6 +1671,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topLeft"
                     />
@@ -1682,6 +1691,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topCenter"
                     />
@@ -1701,6 +1711,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topRight"
                     />
@@ -1721,6 +1732,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="none"
                     />
@@ -1774,6 +1786,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomLeft"
                     />
@@ -1793,6 +1806,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomCenter"
                     />
@@ -1813,6 +1827,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomRight"
                     />
@@ -1832,6 +1847,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="none"
                     />
@@ -5279,6 +5295,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="large"
                     />
@@ -5298,6 +5315,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="middle"
                     />
@@ -5317,6 +5335,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="small"
                     />
@@ -5371,6 +5390,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="unset"
                     />
@@ -5390,6 +5410,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="scroll"
                     />
@@ -5409,6 +5430,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="fixed"
                     />
@@ -5463,6 +5485,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="unset"
                     />
@@ -5482,6 +5505,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="fixed"
                     />
@@ -5535,6 +5559,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topLeft"
                     />
@@ -5554,6 +5579,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topCenter"
                     />
@@ -5573,6 +5599,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="topRight"
                     />
@@ -5593,6 +5620,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="none"
                     />
@@ -5646,6 +5674,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomLeft"
                     />
@@ -5665,6 +5694,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomCenter"
                     />
@@ -5685,6 +5715,7 @@ Array [
                     <input
                       checked=""
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="bottomRight"
                     />
@@ -5704,6 +5735,7 @@ Array [
                   >
                     <input
                       class="ant-radio-button-input"
+                      name="test-id"
                       type="radio"
                       value="none"
                     />
@@ -20090,6 +20122,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="topLeft"
           />
@@ -20109,6 +20142,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="topCenter"
           />
@@ -20128,6 +20162,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="topRight"
           />
@@ -20147,6 +20182,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-input"
+            name="test-id"
             type="radio"
             value="none"
           />
@@ -20172,6 +20208,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="bottomLeft"
         />
@@ -20191,6 +20228,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="bottomCenter"
         />
@@ -20211,6 +20249,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="bottomRight"
         />
@@ -20230,6 +20269,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="none"
         />
@@ -21649,6 +21689,7 @@ exports[`renders components/table/demo/row-selection.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="checkbox"
         />
@@ -21668,6 +21709,7 @@ exports[`renders components/table/demo/row-selection.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="radio"
         />
diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
index ed8ee10d29..3627a79039 100644
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -381,8 +381,10 @@ const FilterDropdown = <RecordType extends AnyObject = AnyObject>(
         <Empty
           image={Empty.PRESENTED_IMAGE_SIMPLE}
           description={locale.filterEmptyText}
-          imageStyle={{
-            height: 24,
+          styles={{
+            image: {
+              height: 24,
+            },
           }}
           style={{
             margin: 0,
diff --git a/components/table/style/index.ts b/components/table/style/index.ts
index 22e75f5951..c96e31eb14 100644
--- a/components/table/style/index.ts
+++ b/components/table/style/index.ts
@@ -1,6 +1,6 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { clearFix, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
@@ -416,18 +416,18 @@ export const prepareComponentToken: GetDefaultToken<'Table'> = (token) => {
     controlInteractiveSize,
   } = token;
 
-  const colorFillSecondarySolid = new TinyColor(colorFillSecondary)
+  const colorFillSecondarySolid = new FastColor(colorFillSecondary)
     .onBackground(colorBgContainer)
-    .toHexShortString();
-  const colorFillContentSolid = new TinyColor(colorFillContent)
+    .toHexString();
+  const colorFillContentSolid = new FastColor(colorFillContent)
     .onBackground(colorBgContainer)
-    .toHexShortString();
-  const colorFillAlterSolid = new TinyColor(colorFillAlter)
+    .toHexString();
+  const colorFillAlterSolid = new FastColor(colorFillAlter)
     .onBackground(colorBgContainer)
-    .toHexShortString();
+    .toHexString();
 
-  const baseColorAction = new TinyColor(colorIcon);
-  const baseColorActionHover = new TinyColor(colorIconHover);
+  const baseColorAction = new FastColor(colorIcon);
+  const baseColorActionHover = new FastColor(colorIconHover);
 
   const expandIconHalfInner = controlInteractiveSize / 2 - lineWidth;
   const expandIconSize = expandIconHalfInner * 2 + lineWidth * 3;
@@ -469,11 +469,11 @@ export const prepareComponentToken: GetDefaultToken<'Table'> = (token) => {
       Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
     headerIconColor: baseColorAction
       .clone()
-      .setAlpha(baseColorAction.getAlpha() * opacityLoading)
+      .setA(baseColorAction.a * opacityLoading)
       .toRgbString(),
     headerIconHoverColor: baseColorActionHover
       .clone()
-      .setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
+      .setA(baseColorActionHover.a * opacityLoading)
       .toRgbString(),
     expandIconHalfInner,
     expandIconSize,
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index df1ee0acd4..753db983e3 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -66,6 +66,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -101,7 +102,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Little
             </div>
@@ -116,7 +117,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Light
             </div>
@@ -209,6 +210,7 @@ exports[`renders components/tabs/demo/basic.tsx extend context correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -244,7 +246,7 @@ exports[`renders components/tabs/demo/basic.tsx extend context correctly 1`] = `
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -259,7 +261,7 @@ exports[`renders components/tabs/demo/basic.tsx extend context correctly 1`] = `
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -350,6 +352,7 @@ exports[`renders components/tabs/demo/card.tsx extend context correctly 1`] = `
   class="ant-tabs ant-tabs-top ant-tabs-card"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -385,7 +388,7 @@ exports[`renders components/tabs/demo/card.tsx extend context correctly 1`] = `
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -400,7 +403,7 @@ exports[`renders components/tabs/demo/card.tsx extend context correctly 1`] = `
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -494,6 +497,7 @@ exports[`renders components/tabs/demo/card-top.tsx extend context correctly 1`]
     class="ant-tabs ant-tabs-top ant-tabs-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -529,7 +533,7 @@ exports[`renders components/tabs/demo/card-top.tsx extend context correctly 1`]
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab Title 2
             </div>
@@ -544,7 +548,7 @@ exports[`renders components/tabs/demo/card-top.tsx extend context correctly 1`]
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab Title 3
             </div>
@@ -644,6 +648,7 @@ exports[`renders components/tabs/demo/centered.tsx extend context correctly 1`]
   class="ant-tabs ant-tabs-top ant-tabs-centered"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -679,7 +684,7 @@ exports[`renders components/tabs/demo/centered.tsx extend context correctly 1`]
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -694,7 +699,7 @@ exports[`renders components/tabs/demo/centered.tsx extend context correctly 1`]
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -787,6 +792,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -822,7 +828,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -837,7 +843,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -936,6 +942,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="vertical"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -971,7 +978,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -986,7 +993,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1085,6 +1092,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1120,7 +1128,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1135,7 +1143,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1234,6 +1242,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1269,7 +1278,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1284,7 +1293,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1382,6 +1391,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1419,7 +1429,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1520,6 +1530,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1557,7 +1568,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1658,6 +1669,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1695,7 +1707,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1815,6 +1827,7 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx extend context corr
     class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1877,14 +1890,14 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx extend context corr
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -1996,8 +2009,9 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
     style="margin-bottom: 8px;"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -2007,12 +2021,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="start"
         >
           start
@@ -2024,12 +2038,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="center"
         >
           center
@@ -2040,12 +2054,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="end"
         >
           end
@@ -2057,6 +2071,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -2092,7 +2107,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -2107,7 +2122,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -2202,6 +2217,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx extend context correctl
     style="z-index: 1;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
       style="background: rgb(255, 255, 255);"
@@ -2238,7 +2254,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx extend context correctl
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -2253,7 +2269,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx extend context correctl
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -2347,6 +2363,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx extend context cor
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2394,7 +2411,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx extend context cor
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -2415,7 +2432,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx extend context cor
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2521,6 +2538,7 @@ exports[`renders components/tabs/demo/disabled.tsx extend context correctly 1`]
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2571,7 +2589,7 @@ exports[`renders components/tabs/demo/disabled.tsx extend context correctly 1`]
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2662,6 +2680,7 @@ exports[`renders components/tabs/demo/editable-card.tsx extend context correctly
   class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2724,14 +2743,14 @@ exports[`renders components/tabs/demo/editable-card.tsx extend context correctly
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
           <button
             aria-label="remove"
             class="ant-tabs-tab-remove"
-            tabindex="0"
+            tabindex="-1"
             type="button"
           >
             <span
@@ -2766,7 +2785,7 @@ exports[`renders components/tabs/demo/editable-card.tsx extend context correctly
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2914,6 +2933,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -2949,7 +2969,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -2964,7 +2984,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -3118,6 +3138,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -3165,7 +3186,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -3180,7 +3201,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -3284,6 +3305,7 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -3304,7 +3326,7 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-1"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             <span
               class="ant-tabs-tab-icon"
@@ -4119,6 +4141,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -4154,7 +4177,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -4236,6 +4259,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
             style="height: 300px;"
           >
             <div
+              aria-orientation="horizontal"
               class="ant-tabs-nav"
               role="tablist"
             >
@@ -4256,7 +4280,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-0"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 0
                     </div>
@@ -4286,7 +4310,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-2"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 2
                     </div>
@@ -4301,7 +4325,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-3"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 3
                     </div>
@@ -4316,7 +4340,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-4"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 4
                     </div>
@@ -4331,7 +4355,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-5"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 5
                     </div>
@@ -4346,7 +4370,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-6"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 6
                     </div>
@@ -4361,7 +4385,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-7"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 7
                     </div>
@@ -4376,7 +4400,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-8"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 8
                     </div>
@@ -4391,7 +4415,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-9"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 9
                     </div>
@@ -4406,7 +4430,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-10"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 10
                     </div>
@@ -4421,7 +4445,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-11"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 11
                     </div>
@@ -4436,7 +4460,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-12"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 12
                     </div>
@@ -4451,7 +4475,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-13"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 13
                     </div>
@@ -4466,7 +4490,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-14"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 14
                     </div>
@@ -4481,7 +4505,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-15"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 15
                     </div>
@@ -4496,7 +4520,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-16"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 16
                     </div>
@@ -4511,7 +4535,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-17"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 17
                     </div>
@@ -4526,7 +4550,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-18"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 18
                     </div>
@@ -4541,7 +4565,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-19"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 19
                     </div>
@@ -4657,6 +4681,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="top"
             />
@@ -4676,6 +4701,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="bottom"
             />
@@ -4696,6 +4722,7 @@ Array [
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="left"
             />
@@ -4715,6 +4742,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="right"
             />
@@ -4733,6 +4761,7 @@ Array [
     class="ant-tabs ant-tabs-left"
   >
     <div
+      aria-orientation="vertical"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -4768,7 +4797,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -4783,7 +4812,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -4885,6 +4914,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -4904,6 +4934,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -4923,6 +4954,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -4940,6 +4972,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -4975,7 +5008,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -4990,7 +5023,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -5077,6 +5110,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -5112,7 +5146,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Card Tab 2
             </div>
@@ -5127,7 +5161,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Card Tab 3
             </div>
@@ -5213,6 +5247,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-small ant-tabs-card ant-tabs-editable-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -5275,14 +5310,14 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -5317,14 +5352,14 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -5502,6 +5537,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="top"
         />
@@ -5521,6 +5557,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="left"
         />
@@ -5538,6 +5575,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
     style="height: 220px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -5559,7 +5597,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-0"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-0
             </div>
@@ -5591,7 +5629,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-2
             </div>
@@ -5607,7 +5645,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-3
             </div>
@@ -5623,7 +5661,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-4"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-4
             </div>
@@ -5639,7 +5677,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-5"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-5
             </div>
@@ -5655,7 +5693,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-6"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-6
             </div>
@@ -5671,7 +5709,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-7"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-7
             </div>
@@ -5687,7 +5725,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-8"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-8
             </div>
@@ -5703,7 +5741,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-9"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-9
             </div>
@@ -5719,7 +5757,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-10"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-10
             </div>
@@ -5735,7 +5773,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-11"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-11
             </div>
@@ -5751,7 +5789,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-12"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-12
             </div>
@@ -5767,7 +5805,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-13"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-13
             </div>
@@ -5783,7 +5821,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-14"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-14
             </div>
@@ -5799,7 +5837,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-15"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-15
             </div>
@@ -5815,7 +5853,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-16"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-16
             </div>
@@ -5831,7 +5869,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-17"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-17
             </div>
@@ -5847,7 +5885,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-18"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-18
             </div>
@@ -5863,7 +5901,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-19"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-19
             </div>
@@ -5879,7 +5917,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-20"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-20
             </div>
@@ -5895,7 +5933,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-21"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-21
             </div>
@@ -5911,7 +5949,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-22"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-22
             </div>
@@ -5927,7 +5965,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-23"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-23
             </div>
@@ -5943,7 +5981,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-24"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-24
             </div>
@@ -5959,7 +5997,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-25"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-25
             </div>
@@ -5975,7 +6013,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-26"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-26
             </div>
@@ -5991,7 +6029,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-27"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-27
             </div>
@@ -6022,7 +6060,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-29"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-29
             </div>
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
index 0ee7f4734b..306022d4c7 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
@@ -66,6 +66,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -97,7 +98,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Little
             </div>
@@ -110,7 +111,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Light
             </div>
@@ -182,6 +183,7 @@ exports[`renders components/tabs/demo/basic.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -213,7 +215,7 @@ exports[`renders components/tabs/demo/basic.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -226,7 +228,7 @@ exports[`renders components/tabs/demo/basic.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -296,6 +298,7 @@ exports[`renders components/tabs/demo/card.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top ant-tabs-card"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -327,7 +330,7 @@ exports[`renders components/tabs/demo/card.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -340,7 +343,7 @@ exports[`renders components/tabs/demo/card.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -413,6 +416,7 @@ exports[`renders components/tabs/demo/card-top.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -444,7 +448,7 @@ exports[`renders components/tabs/demo/card-top.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab Title 2
             </div>
@@ -457,7 +461,7 @@ exports[`renders components/tabs/demo/card-top.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab Title 3
             </div>
@@ -542,6 +546,7 @@ exports[`renders components/tabs/demo/centered.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top ant-tabs-centered"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -573,7 +578,7 @@ exports[`renders components/tabs/demo/centered.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -586,7 +591,7 @@ exports[`renders components/tabs/demo/centered.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -658,6 +663,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -689,7 +695,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -702,7 +708,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -782,6 +788,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="vertical"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -813,7 +820,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -826,7 +833,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -906,6 +913,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -937,7 +945,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -950,7 +958,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1030,6 +1038,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1061,7 +1070,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1074,7 +1083,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1153,6 +1162,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1186,7 +1196,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1266,6 +1276,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1299,7 +1310,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1379,6 +1390,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1412,7 +1424,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1509,6 +1521,7 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1567,14 +1580,14 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -1665,8 +1678,9 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
     style="margin-bottom:8px"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -1676,12 +1690,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="start"
         >
           start
@@ -1693,12 +1707,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="center"
         >
           center
@@ -1709,12 +1723,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="end"
         >
           end
@@ -1726,6 +1740,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1757,7 +1772,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1770,7 +1785,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1844,6 +1859,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
     style="z-index:1"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
       style="background:#ffffff"
@@ -1876,7 +1892,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1889,7 +1905,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1962,6 +1978,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2005,7 +2022,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -2024,7 +2041,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2094,6 +2111,7 @@ exports[`renders components/tabs/demo/disabled.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2138,7 +2156,7 @@ exports[`renders components/tabs/demo/disabled.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2208,6 +2226,7 @@ exports[`renders components/tabs/demo/editable-card.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2266,14 +2285,14 @@ exports[`renders components/tabs/demo/editable-card.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
           <button
             aria-label="remove"
             class="ant-tabs-tab-remove"
-            tabindex="0"
+            tabindex="-1"
             type="button"
           >
             <span
@@ -2306,7 +2325,7 @@ exports[`renders components/tabs/demo/editable-card.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2433,6 +2452,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -2464,7 +2484,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -2477,7 +2497,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -2612,6 +2632,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -2655,7 +2676,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -2668,7 +2689,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -2751,6 +2772,7 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2769,7 +2791,7 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             <span
               class="ant-tabs-tab-icon"
@@ -3147,6 +3169,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -3178,7 +3201,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -3241,6 +3264,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
             style="height:300px"
           >
             <div
+              aria-orientation="horizontal"
               class="ant-tabs-nav"
               role="tablist"
             >
@@ -3259,7 +3283,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 0
                     </div>
@@ -3285,7 +3309,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 2
                     </div>
@@ -3298,7 +3322,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 3
                     </div>
@@ -3311,7 +3335,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 4
                     </div>
@@ -3324,7 +3348,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 5
                     </div>
@@ -3337,7 +3361,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 6
                     </div>
@@ -3350,7 +3374,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 7
                     </div>
@@ -3363,7 +3387,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 8
                     </div>
@@ -3376,7 +3400,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 9
                     </div>
@@ -3389,7 +3413,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 10
                     </div>
@@ -3402,7 +3426,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 11
                     </div>
@@ -3415,7 +3439,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 12
                     </div>
@@ -3428,7 +3452,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 13
                     </div>
@@ -3441,7 +3465,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 14
                     </div>
@@ -3454,7 +3478,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 15
                     </div>
@@ -3467,7 +3491,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 16
                     </div>
@@ -3480,7 +3504,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 17
                     </div>
@@ -3493,7 +3517,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 18
                     </div>
@@ -3506,7 +3530,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 19
                     </div>
@@ -3601,6 +3625,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="top"
             />
@@ -3620,6 +3645,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="bottom"
             />
@@ -3640,6 +3666,7 @@ Array [
             <input
               checked=""
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="left"
             />
@@ -3659,6 +3686,7 @@ Array [
           >
             <input
               class="ant-radio-button-input"
+              name="test-id"
               type="radio"
               value="right"
             />
@@ -3677,6 +3705,7 @@ Array [
     class="ant-tabs ant-tabs-left"
   >
     <div
+      aria-orientation="vertical"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -3708,7 +3737,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -3721,7 +3750,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -3802,6 +3831,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="small"
         />
@@ -3821,6 +3851,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="middle"
         />
@@ -3840,6 +3871,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="large"
         />
@@ -3857,6 +3889,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -3888,7 +3921,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -3901,7 +3934,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -3969,6 +4002,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -4000,7 +4034,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Card Tab 2
             </div>
@@ -4013,7 +4047,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Card Tab 3
             </div>
@@ -4080,6 +4114,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-small ant-tabs-card ant-tabs-editable-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -4138,14 +4173,14 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -4178,14 +4213,14 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -4342,6 +4377,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="top"
         />
@@ -4361,6 +4397,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="left"
         />
@@ -4378,6 +4415,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
     style="height:220px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -4397,7 +4435,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-0
             </div>
@@ -4425,7 +4463,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-2
             </div>
@@ -4439,7 +4477,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-3
             </div>
@@ -4453,7 +4491,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-4
             </div>
@@ -4467,7 +4505,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-5
             </div>
@@ -4481,7 +4519,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-6
             </div>
@@ -4495,7 +4533,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-7
             </div>
@@ -4509,7 +4547,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-8
             </div>
@@ -4523,7 +4561,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-9
             </div>
@@ -4537,7 +4575,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-10
             </div>
@@ -4551,7 +4589,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-11
             </div>
@@ -4565,7 +4603,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-12
             </div>
@@ -4579,7 +4617,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-13
             </div>
@@ -4593,7 +4631,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-14
             </div>
@@ -4607,7 +4645,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-15
             </div>
@@ -4621,7 +4659,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-16
             </div>
@@ -4635,7 +4673,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-17
             </div>
@@ -4649,7 +4687,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-18
             </div>
@@ -4663,7 +4701,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-19
             </div>
@@ -4677,7 +4715,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-20
             </div>
@@ -4691,7 +4729,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-21
             </div>
@@ -4705,7 +4743,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-22
             </div>
@@ -4719,7 +4757,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-23
             </div>
@@ -4733,7 +4771,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-24
             </div>
@@ -4747,7 +4785,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-25
             </div>
@@ -4761,7 +4799,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-26
             </div>
@@ -4775,7 +4813,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-27
             </div>
@@ -4802,7 +4840,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-29
             </div>
diff --git a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
index 5610da2e8e..afe523590d 100644
--- a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
@@ -33,6 +33,7 @@ exports[`Tabs rtl render component should be rendered correctly in RTL direction
   class="ant-tabs ant-tabs-top ant-tabs-rtl"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -123,6 +124,7 @@ exports[`Tabs tabBarGutter should work 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -255,6 +257,7 @@ exports[`Tabs tabBarGutter should work 2`] = `
   class="ant-tabs ant-tabs-left"
 >
   <div
+    aria-orientation="vertical"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -387,6 +390,7 @@ exports[`Tabs tabPosition remove card 1`] = `
   class="ant-tabs ant-tabs-left"
 >
   <div
+    aria-orientation="vertical"
     class="ant-tabs-nav"
     role="tablist"
   >
diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts
index 7ad2af0414..0f120de1fa 100644
--- a/components/tabs/style/index.ts
+++ b/components/tabs/style/index.ts
@@ -1,7 +1,7 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
 
-import { genFocusStyle, resetComponent, textEllipsis } from '../../style';
+import { genFocusOutline, genFocusStyle, resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genMotionStyle from './motion';
@@ -165,9 +165,17 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
           background: token.colorBgContainer,
         },
 
+        [`${componentCls}-tab-focus`]: {
+          ...genFocusOutline(token, -3),
+        },
+
         [`${componentCls}-ink-bar`]: {
           visibility: 'hidden',
         },
+
+        [`& ${componentCls}-tab${componentCls}-tab-focus ${componentCls}-tab-btn`]: {
+          outline: 'none',
+        },
       },
 
       // ========================== Top & Bottom ==========================
@@ -687,7 +695,6 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
         '&:focus:not(:focus-visible), &:active': {
           color: itemActiveColor,
         },
-        ...genFocusStyle(token),
       },
       '&-btn': {
         outline: 'none',
@@ -716,6 +723,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
         '&:hover': {
           color: token.colorTextHeading,
         },
+        ...genFocusStyle(token),
       },
       '&:hover': {
         color: itemHoverColor,
@@ -726,6 +734,10 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
         textShadow: token.tabsActiveTextShadow,
       },
 
+      [`&${tabCls}-focus ${tabCls}-btn`]: {
+        ...genFocusOutline(token),
+      },
+
       [`&${tabCls}-disabled`]: {
         color: token.colorTextDisabled,
         cursor: 'not-allowed',
@@ -961,7 +973,7 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
             color: itemActiveColor,
           },
 
-          ...genFocusStyle(token),
+          ...genFocusStyle(token, -3),
         },
       },
 
@@ -992,7 +1004,7 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
       },
 
       [`${componentCls}-tabpane`]: {
-        outline: 'none',
+        ...genFocusStyle(token),
         '&-hidden': {
           display: 'none',
         },
diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts
index 11f169e73f..6d6b57664d 100644
--- a/components/tag/style/index.ts
+++ b/components/tag/style/index.ts
@@ -1,7 +1,7 @@
 import type React from 'react';
 import { unit } from '@ant-design/cssinjs';
 import type { CSSInterpolation } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GetDefaultToken, GenStyleFn } from '../../theme/internal';
@@ -140,7 +140,7 @@ export const prepareToken: (token: Parameters<GenStyleFn<'Tag'>>[0]) => TagToken
 };
 
 export const prepareComponentToken: GetDefaultToken<'Tag'> = (token) => ({
-  defaultBg: new TinyColor(token.colorFillQuaternary)
+  defaultBg: new FastColor(token.colorFillQuaternary)
     .onBackground(token.colorBgContainer)
     .toHexString(),
   defaultColor: token.colorText,
diff --git a/components/theme/themes/dark/colorAlgorithm.ts b/components/theme/themes/dark/colorAlgorithm.ts
index cf395bc0ab..c88c22ebb3 100644
--- a/components/theme/themes/dark/colorAlgorithm.ts
+++ b/components/theme/themes/dark/colorAlgorithm.ts
@@ -1,9 +1,9 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 export const getAlphaColor = (baseColor: string, alpha: number) =>
-  new TinyColor(baseColor).setAlpha(alpha).toRgbString();
+  new FastColor(baseColor).setA(alpha).toRgbString();
 
 export const getSolidColor = (baseColor: string, brightness: number) => {
-  const instance = new TinyColor(baseColor);
+  const instance = new FastColor(baseColor);
   return instance.lighten(brightness).toHexString();
 };
diff --git a/components/theme/themes/default/colorAlgorithm.ts b/components/theme/themes/default/colorAlgorithm.ts
index 5ab75e6b1f..043d007312 100644
--- a/components/theme/themes/default/colorAlgorithm.ts
+++ b/components/theme/themes/default/colorAlgorithm.ts
@@ -1,9 +1,9 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 export const getAlphaColor = (baseColor: string, alpha: number) =>
-  new TinyColor(baseColor).setAlpha(alpha).toRgbString();
+  new FastColor(baseColor).setA(alpha).toRgbString();
 
 export const getSolidColor = (baseColor: string, brightness: number) => {
-  const instance = new TinyColor(baseColor);
+  const instance = new FastColor(baseColor);
   return instance.darken(brightness).toHexString();
 };
diff --git a/components/theme/themes/shared/genColorMapToken.ts b/components/theme/themes/shared/genColorMapToken.ts
index 955980dcdf..bfc96efb3a 100644
--- a/components/theme/themes/shared/genColorMapToken.ts
+++ b/components/theme/themes/shared/genColorMapToken.ts
@@ -1,4 +1,4 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import type { ColorMapToken, SeedToken } from '../../interface';
 import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
@@ -33,8 +33,8 @@ export default function genColorMapToken(
   const colorLink = seed.colorLink || seed.colorInfo;
   const linkColors = generateColorPalettes(colorLink);
 
-  const colorErrorBgFilledHover = new TinyColor(errorColors[1])
-    .mix(new TinyColor(errorColors[3]), 50)
+  const colorErrorBgFilledHover = new FastColor(errorColors[1])
+    .mix(new FastColor(errorColors[3]), 50)
     .toHexString();
 
   return {
@@ -101,7 +101,7 @@ export default function genColorMapToken(
     colorLink: linkColors[6],
     colorLinkActive: linkColors[7],
 
-    colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
+    colorBgMask: new FastColor('#000').setA(0.45).toRgbString(),
     colorWhite: '#fff',
   };
 }
diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts
index 90f72f87e3..32d48e92ca 100644
--- a/components/theme/util/alias.ts
+++ b/components/theme/util/alias.ts
@@ -1,4 +1,4 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../interface';
 import seedToken from '../themes/seed';
@@ -167,9 +167,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
 
     boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)',
     boxShadowCard: `
-      0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
-      0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
-      0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
+      0 1px 2px -2px ${new FastColor('rgba(0, 0, 0, 0.16)').toRgbString()},
+      0 3px 6px 0 ${new FastColor('rgba(0, 0, 0, 0.12)').toRgbString()},
+      0 5px 12px 4px ${new FastColor('rgba(0, 0, 0, 0.09)').toRgbString()}
     `,
     boxShadowDrawerRight: `
       -6px 0 16px 0 rgba(0, 0, 0, 0.08),
diff --git a/components/theme/util/getAlphaColor.ts b/components/theme/util/getAlphaColor.ts
index 7cd1d3fdbb..5333877ae1 100644
--- a/components/theme/util/getAlphaColor.ts
+++ b/components/theme/util/getAlphaColor.ts
@@ -1,29 +1,29 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 function isStableColor(color: number): boolean {
   return color >= 0 && color <= 255;
 }
 
 function getAlphaColor(frontColor: string, backgroundColor: string): string {
-  const { r: fR, g: fG, b: fB, a: originAlpha } = new TinyColor(frontColor).toRgb();
+  const { r: fR, g: fG, b: fB, a: originAlpha } = new FastColor(frontColor).toRgb();
   if (originAlpha < 1) {
     return frontColor;
   }
 
-  const { r: bR, g: bG, b: bB } = new TinyColor(backgroundColor).toRgb();
+  const { r: bR, g: bG, b: bB } = new FastColor(backgroundColor).toRgb();
 
   for (let fA = 0.01; fA <= 1; fA += 0.01) {
     const r = Math.round((fR - bR * (1 - fA)) / fA);
     const g = Math.round((fG - bG * (1 - fA)) / fA);
     const b = Math.round((fB - bB * (1 - fA)) / fA);
     if (isStableColor(r) && isStableColor(g) && isStableColor(b)) {
-      return new TinyColor({ r, g, b, a: Math.round(fA * 100) / 100 }).toRgbString();
+      return new FastColor({ r, g, b, a: Math.round(fA * 100) / 100 }).toRgbString();
     }
   }
 
   // fallback
   /* istanbul ignore next */
-  return new TinyColor({ r: fR, g: fG, b: fB, a: 1 }).toRgbString();
+  return new FastColor({ r: fR, g: fG, b: fB, a: 1 }).toRgbString();
 }
 
 export default getAlphaColor;
diff --git a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
index d795481cc1..cf09a4b560 100644
--- a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -561,6 +561,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="left"
         />
@@ -580,6 +581,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="right"
         />
@@ -599,6 +601,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="alternate"
         />
diff --git a/components/timeline/__tests__/__snapshots__/demo.test.ts.snap b/components/timeline/__tests__/__snapshots__/demo.test.ts.snap
index b93bb135f4..0e48dccf76 100644
--- a/components/timeline/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/timeline/__tests__/__snapshots__/demo.test.ts.snap
@@ -551,6 +551,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="left"
         />
@@ -570,6 +571,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="right"
         />
@@ -589,6 +591,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="alternate"
         />
diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
index 51016ed388..92227c5832 100644
--- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -5,8 +5,9 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
     style="margin-bottom: 24px;"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -17,12 +18,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Show"
         >
           Show
@@ -33,12 +34,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Hide"
         >
           Hide
@@ -49,12 +50,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Center"
         >
           Center
diff --git a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
index 4f9b7c8a3a..ef1ec35bfb 100644
--- a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
@@ -5,8 +5,9 @@ Array [
   <div
     aria-label="segmented control"
     class="ant-segmented"
-    role="listbox"
+    role="radiogroup"
     style="margin-bottom:24px"
+    tabindex="0"
   >
     <div
       class="ant-segmented-group"
@@ -17,12 +18,12 @@ Array [
         <input
           checked=""
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="true"
           class="ant-segmented-item-label"
-          role="option"
           title="Show"
         >
           Show
@@ -33,12 +34,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Hide"
         >
           Hide
@@ -49,12 +50,12 @@ Array [
       >
         <input
           class="ant-segmented-item-input"
+          name="test-id"
           type="radio"
         />
         <div
           aria-selected="false"
           class="ant-segmented-item-label"
-          role="option"
           title="Center"
         >
           Center
diff --git a/components/tooltip/__tests__/tooltip.test.tsx b/components/tooltip/__tests__/tooltip.test.tsx
index 39523c16b9..2143203902 100644
--- a/components/tooltip/__tests__/tooltip.test.tsx
+++ b/components/tooltip/__tests__/tooltip.test.tsx
@@ -215,7 +215,7 @@ describe('Tooltip', () => {
         mouseLeaveDelay={0}
         placement="bottomLeft"
         arrowPointAtCenter
-        overlayClassName="point-center-element"
+        classNames={{ root: 'point-center-element' }}
       >
         <button type="button">Hello world!</button>
       </Tooltip>,
@@ -232,7 +232,7 @@ describe('Tooltip', () => {
         mouseLeaveDelay={0}
         placement="bottomLeft"
         arrow={{ arrowPointAtCenter: true }}
-        overlayClassName="point-center-element"
+        classNames={{ root: 'point-center-element' }}
       >
         <button type="button">Hello world!</button>
       </Tooltip>,
@@ -402,9 +402,9 @@ describe('Tooltip', () => {
     expect(document.querySelector('.ant-tooltip')).not.toBeNull();
   });
 
-  it('should pass overlayInnerStyle through to the inner component', () => {
+  it('should pass styles={{ body: {} }} through to the inner component', () => {
     const { container } = render(
-      <Tooltip overlayInnerStyle={{ color: 'red' }} title="xxxxx" open>
+      <Tooltip styles={{ body: { color: 'red' } }} title="xxxxx" open>
         <div />
       </Tooltip>,
     );
@@ -601,4 +601,33 @@ describe('Tooltip', () => {
     expect(error).toHaveBeenCalled();
     error.mockRestore();
   });
+
+  it('should apply custom styles to Tooltip', () => {
+    const customClassNames = {
+      body: 'custom-body',
+      root: 'custom-root',
+    };
+
+    const customStyles = {
+      body: { color: 'red' },
+      root: { backgroundColor: 'blue' },
+    };
+
+    const { container } = render(
+      <Tooltip classNames={customClassNames} overlay={<div />} styles={customStyles} visible>
+        <button type="button">button</button>
+      </Tooltip>,
+    );
+
+    const tooltipElement = container.querySelector('.ant-tooltip') as HTMLElement;
+    const tooltipBodyElement = container.querySelector('.ant-tooltip-inner') as HTMLElement;
+
+    // 验证 classNames
+    expect(tooltipElement.classList).toContain('custom-root');
+    expect(tooltipBodyElement.classList).toContain('custom-body');
+
+    // 验证 styles
+    expect(tooltipElement.style.backgroundColor).toBe('blue');
+    expect(tooltipBodyElement.style.color).toBe('red');
+  });
 });
diff --git a/components/tooltip/demo/_semantic.tsx b/components/tooltip/demo/_semantic.tsx
new file mode 100644
index 0000000000..bcf321e703
--- /dev/null
+++ b/components/tooltip/demo/_semantic.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    root: '根节点 (包含箭头、内容元素)',
+    body: '内容元素',
+  },
+  en: {
+    root: 'Root element (including arrows, content elements)',
+    body: 'Body element',
+  },
+};
+
+const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+  const divRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
+      <Tooltip
+        title="prompt text"
+        open
+        placement="top"
+        autoAdjustOverflow={false}
+        getPopupContainer={() => divRef.current}
+        {...props}
+      />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      semantics={[
+        { name: 'root', desc: locale.root, version: '5.23.0' },
+        { name: 'body', desc: locale.body, version: '5.23.0' },
+      ]}
+    >
+      <BlockList />
+    </SemanticPreview>
+  );
+};
+
+export default App;
diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md
index 7637dcdc12..40b4ff75ed 100644
--- a/components/tooltip/index.en-US.md
+++ b/components/tooltip/index.en-US.md
@@ -41,6 +41,10 @@ Common props ref：[Common props](/docs/react/common-props)
 
 <embed src="./shared/sharedProps.en-US.md"></embed>
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## Design Token
 
 <ComponentTokenTable component="Tooltip"></ComponentTokenTable>
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index 55c63a139f..39f6d00381 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -91,6 +91,14 @@ interface LegacyTooltipProps
 }
 
 export interface AbstractTooltipProps extends LegacyTooltipProps {
+  styles?: {
+    root?: React.CSSProperties;
+    body?: React.CSSProperties;
+  };
+  classNames?: {
+    root?: string;
+    body?: string;
+  };
   style?: React.CSSProperties;
   className?: string;
   rootClassName?: string;
@@ -130,7 +138,6 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
     prefixCls: customizePrefixCls,
     openClassName,
     getTooltipContainer,
-    overlayClassName,
     color,
     overlayInnerStyle,
     children,
@@ -153,6 +160,7 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
     getPopupContainer: getContextPopupContainer,
     getPrefixCls,
     direction,
+    tooltip,
   } = React.useContext(ConfigContext);
 
   // ============================== Ref ===============================
@@ -181,6 +189,9 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
       ['onVisibleChange', 'onOpenChange'],
       ['afterVisibleChange', 'afterOpenChange'],
       ['arrowPointAtCenter', 'arrow={{ pointAtCenter: true }}'],
+      ['overlayStyle', 'styles={{ root: {} }}'],
+      ['overlayInnerStyle', 'styles={{ body: {} }}'],
+      ['overlayClassName', 'classNames={{ root: {} }}'],
     ].forEach(([deprecatedName, newName]) => {
       warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
     });
@@ -253,6 +264,9 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
     mouseLeaveDelay = 0.1,
     overlayStyle,
     rootClassName,
+    overlayClassName,
+    styles,
+    classNames: tooltipClassNames,
     ...otherProps
   } = props;
 
@@ -282,12 +296,8 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
   // Color
   const colorInfo = parseColor(prefixCls, color);
   const arrowContentStyle = colorInfo.arrowStyle;
-  const formattedOverlayInnerStyle: React.CSSProperties = {
-    ...overlayInnerStyle,
-    ...colorInfo.overlayStyle,
-  };
 
-  const customOverlayClassName = classNames(
+  const rootClassNames = classNames(
     overlayClassName,
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -296,8 +306,13 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
     rootClassName,
     hashId,
     cssVarCls,
+    tooltip?.className,
+    tooltip?.classNames?.root,
+    tooltipClassNames?.root,
   );
 
+  const bodyClassNames = classNames(tooltip?.classNames?.body, tooltipClassNames?.body);
+
   // ============================ zIndex ============================
   const [zIndex, contextZIndex] = useZIndex('Tooltip', otherProps.zIndex);
 
@@ -310,8 +325,22 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
       mouseEnterDelay={mouseEnterDelay}
       mouseLeaveDelay={mouseLeaveDelay}
       prefixCls={prefixCls}
-      overlayClassName={customOverlayClassName}
-      overlayStyle={{ ...arrowContentStyle, ...overlayStyle }}
+      classNames={{ root: rootClassNames, body: bodyClassNames }}
+      styles={{
+        root: {
+          ...arrowContentStyle,
+          ...tooltip?.styles?.root,
+          ...tooltip?.style,
+          ...overlayStyle,
+          ...styles?.root,
+        },
+        body: {
+          ...tooltip?.styles?.body,
+          ...overlayInnerStyle,
+          ...styles?.body,
+          ...colorInfo.overlayStyle,
+        },
+      }}
       getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer}
       ref={tooltipRef}
       builtinPlacements={tooltipPlacements}
@@ -319,7 +348,6 @@ const InternalTooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref)
       visible={tempOpen}
       onVisibleChange={onOpenChange}
       afterVisibleChange={afterOpenChange ?? afterVisibleChange}
-      overlayInnerStyle={formattedOverlayInnerStyle}
       arrowContent={<span className={`${prefixCls}-arrow-content`} />}
       motion={{
         motionName: getTransitionName(rootPrefixCls, 'zoom-big-fast', props.transitionName),
diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md
index 9f97a65c8b..b9ba9c3c0e 100644
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@@ -43,6 +43,10 @@ demo:
 
 <embed src="./shared/sharedProps.zh-CN.md"></embed>
 
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tooltip"></ComponentTokenTable>
diff --git a/components/tour/style/index.ts b/components/tour/style/index.ts
index 3feda6117b..f265ffaf68 100644
--- a/components/tour/style/index.ts
+++ b/components/tour/style/index.ts
@@ -1,5 +1,5 @@
 import { unit } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 
 import { genFocusStyle, resetComponent } from '../../style';
 import type { ArrowOffsetToken } from '../../style/placementArrow';
@@ -267,8 +267,8 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
 export const prepareComponentToken: GetDefaultToken<'Tour'> = (token) => ({
   zIndexPopup: token.zIndexPopupBase + 70,
   closeBtnSize: token.fontSize * token.lineHeight,
-  primaryPrevBtnBg: new TinyColor(token.colorTextLightSolid).setAlpha(0.15).toRgbString(),
-  primaryNextBtnHoverBg: new TinyColor(token.colorBgTextHover)
+  primaryPrevBtnBg: new FastColor(token.colorTextLightSolid).setA(0.15).toRgbString(),
+  primaryNextBtnHoverBg: new FastColor(token.colorBgTextHover)
     .onBackground(token.colorWhite)
     .toRgbString(),
   ...getArrowOffsetToken({
diff --git a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
index 6871e5bd0b..9df6ce1f09 100644
--- a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -169,10 +169,9 @@ exports[`renders components/transfer/demo/advanced.tsx extend context correctly
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -194,7 +193,7 @@ exports[`renders components/transfer/demo/advanced.tsx extend context correctly
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
       </div>
@@ -700,10 +699,9 @@ exports[`renders components/transfer/demo/advanced.tsx extend context correctly
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -725,7 +723,7 @@ exports[`renders components/transfer/demo/advanced.tsx extend context correctly
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
       </div>
@@ -3279,10 +3277,9 @@ Array [
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -3304,7 +3301,7 @@ Array [
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -3589,10 +3586,9 @@ Array [
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -3614,7 +3610,7 @@ Array [
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -8680,10 +8676,9 @@ exports[`renders components/transfer/demo/search.tsx extend context correctly 1`
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -8705,7 +8700,7 @@ exports[`renders components/transfer/demo/search.tsx extend context correctly 1`
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
       </div>
@@ -9191,10 +9186,9 @@ exports[`renders components/transfer/demo/search.tsx extend context correctly 1`
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -9216,7 +9210,7 @@ exports[`renders components/transfer/demo/search.tsx extend context correctly 1`
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
       </div>
@@ -10081,10 +10075,9 @@ exports[`renders components/transfer/demo/status.tsx extend context correctly 1`
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -10106,7 +10099,7 @@ exports[`renders components/transfer/demo/status.tsx extend context correctly 1`
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -10391,10 +10384,9 @@ exports[`renders components/transfer/demo/status.tsx extend context correctly 1`
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -10416,7 +10408,7 @@ exports[`renders components/transfer/demo/status.tsx extend context correctly 1`
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -10544,10 +10536,9 @@ exports[`renders components/transfer/demo/table-transfer.tsx extend context corr
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -10569,7 +10560,7 @@ exports[`renders components/transfer/demo/table-transfer.tsx extend context corr
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -11443,10 +11434,9 @@ exports[`renders components/transfer/demo/table-transfer.tsx extend context corr
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -11468,7 +11458,7 @@ exports[`renders components/transfer/demo/table-transfer.tsx extend context corr
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -11812,7 +11802,6 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
         >
           <div
             class="ant-tree ant-tree-icon-hide ant-tree-block-node"
-            role="tree"
           >
             <div>
               <input
@@ -11837,6 +11826,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
             </div>
             <div
               class="ant-tree-list"
+              role="tree"
               style="position: relative;"
             >
               <div
@@ -11848,9 +11838,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                     style="display: flex; flex-direction: column;"
                   >
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -11860,7 +11851,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-0"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -11878,9 +11872,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="true"
                       class="ant-tree-treenode ant-tree-treenode-switcher-open"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -11910,7 +11905,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                         </span>
                       </span>
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-1"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -11928,9 +11926,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -11944,7 +11943,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-1-0"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -11962,9 +11964,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -11978,7 +11981,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-1-1"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -11996,9 +12002,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -12008,7 +12015,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-2"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -12026,9 +12036,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -12038,7 +12049,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-3"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -12056,9 +12070,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -12068,7 +12083,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx extend context corre
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-4"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
diff --git a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
index 541f1423aa..63585c595e 100644
--- a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
@@ -99,10 +99,9 @@ exports[`renders components/transfer/demo/advanced.tsx correctly 1`] = `
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -124,7 +123,7 @@ exports[`renders components/transfer/demo/advanced.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
       </div>
@@ -358,10 +357,9 @@ exports[`renders components/transfer/demo/advanced.tsx correctly 1`] = `
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -383,7 +381,7 @@ exports[`renders components/transfer/demo/advanced.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
       </div>
@@ -2234,10 +2232,9 @@ Array [
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -2259,7 +2256,7 @@ Array [
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -2473,10 +2470,9 @@ Array [
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -2498,7 +2494,7 @@ Array [
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -5687,10 +5683,9 @@ exports[`renders components/transfer/demo/search.tsx correctly 1`] = `
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -5712,7 +5707,7 @@ exports[`renders components/transfer/demo/search.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
       </div>
@@ -5926,10 +5921,9 @@ exports[`renders components/transfer/demo/search.tsx correctly 1`] = `
           <span
             class="ant-input-suffix"
           >
-            <span
+            <button
               class="ant-input-clear-icon ant-input-clear-icon-hidden"
-              role="button"
-              tabindex="-1"
+              type="button"
             >
               <span
                 aria-label="close-circle"
@@ -5951,7 +5945,7 @@ exports[`renders components/transfer/demo/search.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
           </span>
         </span>
       </div>
@@ -6399,10 +6393,9 @@ exports[`renders components/transfer/demo/status.tsx correctly 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -6424,7 +6417,7 @@ exports[`renders components/transfer/demo/status.tsx correctly 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -6638,10 +6631,9 @@ exports[`renders components/transfer/demo/status.tsx correctly 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -6663,7 +6655,7 @@ exports[`renders components/transfer/demo/status.tsx correctly 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -6792,10 +6784,9 @@ exports[`renders components/transfer/demo/table-transfer.tsx correctly 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -6817,7 +6808,7 @@ exports[`renders components/transfer/demo/table-transfer.tsx correctly 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -7591,10 +7582,9 @@ exports[`renders components/transfer/demo/table-transfer.tsx correctly 1`] = `
             <span
               class="ant-input-suffix"
             >
-              <span
+              <button
                 class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
+                type="button"
               >
                 <span
                   aria-label="close-circle"
@@ -7616,7 +7606,7 @@ exports[`renders components/transfer/demo/table-transfer.tsx correctly 1`] = `
                     />
                   </svg>
                 </span>
-              </span>
+              </button>
             </span>
           </span>
         </div>
@@ -7858,7 +7848,6 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
         >
           <div
             class="ant-tree ant-tree-icon-hide ant-tree-block-node"
-            role="tree"
           >
             <div>
               <input
@@ -7883,6 +7872,7 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
             </div>
             <div
               class="ant-tree-list"
+              role="tree"
               style="position:relative"
             >
               <div
@@ -7894,9 +7884,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                     style="display:flex;flex-direction:column"
                   >
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -7906,7 +7897,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-0"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -7924,9 +7918,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="true"
                       class="ant-tree-treenode ant-tree-treenode-switcher-open"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -7956,7 +7951,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                         </span>
                       </span>
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-1"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -7974,9 +7972,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -7990,7 +7989,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-1-0"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -8008,9 +8010,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -8024,7 +8027,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-1-1"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -8042,9 +8048,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -8054,7 +8061,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-2"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -8072,9 +8082,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -8084,7 +8095,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-3"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
@@ -8102,9 +8116,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -8114,7 +8129,10 @@ exports[`renders components/transfer/demo/tree-transfer.tsx correctly 1`] = `
                         class="ant-tree-switcher ant-tree-switcher-noop"
                       />
                       <span
+                        aria-checked="false"
+                        aria-label="Select 0-4"
                         class="ant-tree-checkbox"
+                        role="checkbox"
                       >
                         <span
                           class="ant-tree-checkbox-inner"
diff --git a/components/transfer/__tests__/__snapshots__/search.test.tsx.snap b/components/transfer/__tests__/__snapshots__/search.test.tsx.snap
index 1898dc39bf..f6119a9073 100644
--- a/components/transfer/__tests__/__snapshots__/search.test.tsx.snap
+++ b/components/transfer/__tests__/__snapshots__/search.test.tsx.snap
@@ -36,10 +36,9 @@ exports[`Transfer.Search should show cross icon when input value exists 1`] = `
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon ant-input-clear-icon-hidden"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -61,7 +60,7 @@ exports[`Transfer.Search should show cross icon when input value exists 1`] = `
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
@@ -102,10 +101,9 @@ exports[`Transfer.Search should show cross icon when input value exists 2`] = `
   <span
     class="ant-input-suffix"
   >
-    <span
+    <button
       class="ant-input-clear-icon"
-      role="button"
-      tabindex="-1"
+      type="button"
     >
       <span
         aria-label="close-circle"
@@ -127,7 +125,7 @@ exports[`Transfer.Search should show cross icon when input value exists 2`] = `
           />
         </svg>
       </span>
-    </span>
+    </button>
   </span>
 </span>
 `;
diff --git a/components/transfer/__tests__/index.test.tsx b/components/transfer/__tests__/index.test.tsx
index 8f92f42047..50850d7930 100644
--- a/components/transfer/__tests__/index.test.tsx
+++ b/components/transfer/__tests__/index.test.tsx
@@ -6,8 +6,8 @@ import type { SelectAllLabel, TransferProps } from '..';
 import Transfer from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import Button from '../../button';
 import { waitFakeTimer } from '../../../tests/utils';
+import Button from '../../button';
 
 const listCommonProps: {
   dataSource: { key: string; title: string; disabled?: boolean }[];
@@ -843,6 +843,25 @@ describe('Transfer', () => {
       ).toBeChecked();
     });
   });
+
+  it('showSearch with single object', () => {
+    const emptyProps = { dataSource: [], selectedKeys: [], targetKeys: [] };
+    const locale = { itemUnit: 'Person', notFoundContent: 'Nothing' };
+    const { container } = render(
+      <Transfer
+        {...listCommonProps}
+        {...emptyProps}
+        showSearch={{ placeholder: 'Search placeholder', defaultValue: 'values' }}
+        locale={locale}
+      />,
+    );
+    const searchInputs = container.querySelectorAll('.ant-transfer-list-search input');
+    expect(searchInputs).toHaveLength(2);
+    searchInputs.forEach((input) => {
+      expect(input.getAttribute('placeholder')).toBe('Search placeholder');
+      expect(input).toHaveValue('values');
+    });
+  });
 });
 
 describe('immutable data', () => {
diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md
index fe48855c88..6368ad197c 100644
--- a/components/transfer/index.en-US.md
+++ b/components/transfer/index.en-US.md
@@ -53,7 +53,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a React element and `value` is for title | (record) => ReactNode | - |  |
 | selectAllLabels | A set of customized labels for select all checkboxes on the header | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)\[] | - |  |
 | selectedKeys | A set of keys of selected items | string\[] \| number\[] | \[] |  |
-| showSearch | If included, a search box is shown on each column | boolean | false |  |
+| showSearch | If included, a search box is shown on each column | boolean \| { placeholder:string,defaultValue:string } | false |  |
 | showSelectAll | Show select all checkbox on the header | boolean | true |  |
 | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
 | targetKeys | A set of keys of elements that are listed on the right column | string\[] \| number\[] | \[] |  |
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
index a4100db003..341c3ca4c9 100644
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@@ -74,6 +74,11 @@ export interface TransferLocale {
   removeCurrent?: string;
 }
 
+export interface TransferSearchOption {
+  placeholder?: string;
+  defaultValue?: string;
+}
+
 export interface TransferProps<RecordType = any> {
   prefixCls?: string;
   className?: string;
@@ -94,7 +99,7 @@ export interface TransferProps<RecordType = any> {
   operationStyle?: CSSProperties;
   titles?: React.ReactNode[];
   operations?: string[];
-  showSearch?: boolean;
+  showSearch?: boolean | TransferSearchOption;
   filterOption?: (inputValue: string, item: RecordType, direction: TransferDirection) => boolean;
   locale?: Partial<TransferLocale>;
   footer?: (
diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md
index 4327af91eb..c283591d81 100644
--- a/components/transfer/index.zh-CN.md
+++ b/components/transfer/index.zh-CN.md
@@ -56,7 +56,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*g9vUQq2nkpEAAA
 | render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 `label` 字段为 ReactElement，`value` 字段为 title | (record) => ReactNode | - |  |
 | selectAllLabels | 自定义顶部多选框标题的集合 | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)\[] | - |  |
 | selectedKeys | 设置哪些项应该被选中 | string\[] \| number\[] | \[] |  |
-| showSearch | 是否显示搜索框 | boolean | false |  |
+| showSearch | 是否显示搜索框，或可对两侧搜索框进行配置 | boolean \| { placeholder:string,defaultValue:string } | false |  |
 | showSelectAll | 是否展示全选勾选框 | boolean | true |  |
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
 | targetKeys | 显示在右侧框数据的 key 集合 | string\[] \| number\[] | \[] |  |
diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
index 56fffbfceb..0adf1397b3 100644
--- a/components/transfer/list.tsx
+++ b/components/transfer/list.tsx
@@ -14,6 +14,7 @@ import type {
   SelectAllLabel,
   TransferDirection,
   TransferLocale,
+  TransferSearchOption,
 } from './index';
 import type { PaginationType, TransferKey } from './interface';
 import type { ListBodyRef, TransferListBodyProps } from './ListBody';
@@ -62,7 +63,7 @@ export interface TransferListProps<RecordType> extends TransferLocale {
   handleClear: () => void;
   /** Render item */
   render?: (item: RecordType) => RenderResult;
-  showSearch?: boolean;
+  showSearch?: boolean | TransferSearchOption;
   searchPlaceholder: string;
   itemUnit: string;
   itemsUnit: string;
@@ -83,6 +84,19 @@ export interface TransferListProps<RecordType> extends TransferLocale {
 
 export interface TransferCustomListBodyProps<T> extends TransferListBodyProps<T> {}
 
+const useShowSearchOption = (showSearch: boolean | TransferSearchOption) => {
+  if (showSearch && typeof showSearch === 'object') {
+    return {
+      ...showSearch,
+      defaultValue: showSearch.defaultValue || '',
+    };
+  }
+  return {
+    defaultValue: '',
+    placeholder: '',
+  };
+};
+
 const TransferList = <RecordType extends KeyWiseTransferItem>(
   props: TransferListProps<RecordType>,
 ) => {
@@ -119,8 +133,8 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
     filterOption,
     render = defaultRender,
   } = props;
-
-  const [filterValue, setFilterValue] = useState<string>('');
+  const searchOptions = useShowSearchOption(showSearch);
+  const [filterValue, setFilterValue] = useState<string>(searchOptions.defaultValue);
   const listBodyRef = useRef<ListBodyRef<RecordType>>({});
 
   const internalHandleFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -209,7 +223,7 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
           prefixCls={`${prefixCls}-search`}
           onChange={internalHandleFilter}
           handleClear={internalHandleClear}
-          placeholder={searchPlaceholder}
+          placeholder={searchOptions.placeholder || searchPlaceholder}
           value={filterValue}
           disabled={disabled}
         />
diff --git a/components/transfer/search.tsx b/components/transfer/search.tsx
index ab496d531e..6ea9ec3a89 100644
--- a/components/transfer/search.tsx
+++ b/components/transfer/search.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
-
 import Input from '../input';
 
 export interface TransferSearchProps {
@@ -13,7 +12,14 @@ export interface TransferSearchProps {
 }
 
 const Search: React.FC<TransferSearchProps> = (props) => {
-  const { placeholder = '', value, prefixCls, disabled, onChange, handleClear } = props;
+  const {
+    placeholder = '',
+    value,
+    prefixCls,
+    disabled,
+    onChange,
+    handleClear,
+  } = props;
 
   const handleChange = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 6698876601..675c9abb67 100644
--- a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -46,7 +46,6 @@ exports[`renders components/tree-select/demo/async.tsx extend context correctly
       <div>
         <div
           class="ant-select-tree"
-          role="tree"
         >
           <div>
             <input
@@ -71,6 +70,7 @@ exports[`renders components/tree-select/demo/async.tsx extend context correctly
           </div>
           <div
             class="ant-select-tree-list"
+            role="tree"
             style="position: relative;"
           >
             <div
@@ -83,9 +83,10 @@ exports[`renders components/tree-select/demo/async.tsx extend context correctly
                   style="display: flex; flex-direction: column;"
                 >
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -126,9 +127,10 @@ exports[`renders components/tree-select/demo/async.tsx extend context correctly
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -169,9 +171,9 @@ exports[`renders components/tree-select/demo/async.tsx extend context correctly
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -273,7 +275,6 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
       <div>
         <div
           class="ant-select-tree"
-          role="tree"
         >
           <div>
             <input
@@ -298,6 +299,7 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
           </div>
           <div
             class="ant-select-tree-list"
+            role="tree"
             style="position: relative;"
           >
             <div
@@ -310,9 +312,10 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                   style="display: flex; flex-direction: column;"
                 >
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="true"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -353,9 +356,10 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="true"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -400,9 +404,10 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -430,9 +435,10 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -460,9 +466,10 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -490,9 +497,10 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -520,9 +528,10 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -550,9 +559,10 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -580,9 +590,10 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="true"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -627,9 +638,10 @@ exports[`renders components/tree-select/demo/basic.tsx extend context correctly
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -797,7 +809,6 @@ exports[`renders components/tree-select/demo/checkable.tsx extend context correc
       <div>
         <div
           class="ant-select-tree"
-          role="tree"
         >
           <div>
             <input
@@ -822,6 +833,7 @@ exports[`renders components/tree-select/demo/checkable.tsx extend context correc
           </div>
           <div
             class="ant-select-tree-list"
+            role="tree"
             style="position: relative;"
           >
             <div
@@ -834,9 +846,10 @@ exports[`renders components/tree-select/demo/checkable.tsx extend context correc
                   style="display: flex; flex-direction: column;"
                 >
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-checkbox-checked"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -866,7 +879,10 @@ exports[`renders components/tree-select/demo/checkable.tsx extend context correc
                       </span>
                     </span>
                     <span
+                      aria-checked="true"
+                      aria-label="Select Node1"
                       class="ant-select-tree-checkbox ant-select-tree-checkbox-checked"
+                      role="checkbox"
                     >
                       <span
                         class="ant-select-tree-checkbox-inner"
@@ -884,9 +900,10 @@ exports[`renders components/tree-select/demo/checkable.tsx extend context correc
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -916,7 +933,10 @@ exports[`renders components/tree-select/demo/checkable.tsx extend context correc
                       </span>
                     </span>
                     <span
+                      aria-checked="false"
+                      aria-label="Select Node2"
                       class="ant-select-tree-checkbox"
+                      role="checkbox"
                     >
                       <span
                         class="ant-select-tree-checkbox-inner"
@@ -972,6 +992,537 @@ exports[`renders components/tree-select/demo/checkable.tsx extend context correc
 
 exports[`renders components/tree-select/demo/checkable.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/tree-select/demo/maxCount.tsx extend context correctly 1`] = `
+<div
+  class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-show-arrow ant-select-show-search"
+  style="width: 100%;"
+>
+  <div
+    class="ant-select-selector"
+  >
+    <span
+      class="ant-select-selection-wrap"
+    >
+      <div
+        class="ant-select-selection-overflow"
+      >
+        <div
+          class="ant-select-selection-overflow-item"
+          style="opacity: 1;"
+        >
+          <span
+            class="ant-select-selection-item"
+            title="Child 1-1"
+          >
+            <span
+              class="ant-select-selection-item-content"
+            >
+              Child 1-1
+            </span>
+            <span
+              aria-hidden="true"
+              class="ant-select-selection-item-remove"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                aria-label="close"
+                class="anticon anticon-close"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="close"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+          style="opacity: 1;"
+        >
+          <div
+            class="ant-select-selection-search"
+            style="width: 0px;"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+            <span
+              aria-hidden="true"
+              class="ant-select-selection-search-mirror"
+            >
+            </span>
+          </div>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div>
+      <div>
+        <div
+          class="ant-select-tree"
+        >
+          <div>
+            <input
+              aria-label="for screen reader"
+              disabled=""
+              style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+              value=""
+            />
+          </div>
+          <div
+            aria-hidden="true"
+            class="ant-select-tree-treenode"
+            style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+          >
+            <div
+              class="ant-select-tree-indent"
+            >
+              <div
+                class="ant-select-tree-indent-unit"
+              />
+            </div>
+          </div>
+          <div
+            class="ant-select-tree-list"
+            role="tree"
+            style="position: relative;"
+          >
+            <div
+              class="ant-select-tree-list-holder"
+              style="max-height: 256px; overflow-y: auto;"
+            >
+              <div>
+                <div
+                  class="ant-select-tree-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
+                >
+                  <div
+                    aria-expanded="false"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-checkbox-indeterminate"
+                    draggable="false"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-tree-indent"
+                    />
+                    <span
+                      class="ant-select-tree-switcher ant-select-tree-switcher_close"
+                    >
+                      <span
+                        aria-label="caret-down"
+                        class="anticon anticon-caret-down ant-select-tree-switcher-icon"
+                        role="img"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="caret-down"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="0 0 1024 1024"
+                          width="1em"
+                        >
+                          <path
+                            d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                    <span
+                      aria-checked="mixed"
+                      aria-label="Select Parent 1"
+                      class="ant-select-tree-checkbox ant-select-tree-checkbox-indeterminate"
+                      role="checkbox"
+                    >
+                      <span
+                        class="ant-select-tree-checkbox-inner"
+                      />
+                    </span>
+                    <span
+                      class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-close"
+                      title="Parent 1"
+                    >
+                      <span
+                        class="ant-select-tree-title"
+                      >
+                        Parent 1
+                      </span>
+                    </span>
+                  </div>
+                  <div
+                    aria-expanded="false"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                    draggable="false"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-tree-indent"
+                    />
+                    <span
+                      class="ant-select-tree-switcher ant-select-tree-switcher_close"
+                    >
+                      <span
+                        aria-label="caret-down"
+                        class="anticon anticon-caret-down ant-select-tree-switcher-icon"
+                        role="img"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="caret-down"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="0 0 1024 1024"
+                          width="1em"
+                        >
+                          <path
+                            d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                    <span
+                      aria-checked="false"
+                      aria-label="Select Parent 2"
+                      class="ant-select-tree-checkbox"
+                      role="checkbox"
+                    >
+                      <span
+                        class="ant-select-tree-checkbox-inner"
+                      />
+                    </span>
+                    <span
+                      class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-close"
+                      title="Parent 2"
+                    >
+                      <span
+                        class="ant-select-tree-title"
+                      >
+                        Parent 2
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select: none;"
+    unselectable="on"
+  >
+    <span>
+      1 / 3
+    </span>
+    <span
+      aria-label="down"
+      class="anticon anticon-down"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`renders components/tree-select/demo/maxCount.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/tree-select/demo/maxCountNoEffect.tsx extend context correctly 1`] = `
+<div
+  class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-show-arrow ant-select-show-search"
+  style="width: 100%;"
+>
+  <div
+    class="ant-select-selector"
+  >
+    <span
+      class="ant-select-selection-wrap"
+    >
+      <div
+        class="ant-select-selection-overflow"
+      >
+        <div
+          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+          style="opacity: 1;"
+        >
+          <div
+            class="ant-select-selection-search"
+            style="width: 0px;"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+            <span
+              aria-hidden="true"
+              class="ant-select-selection-search-mirror"
+            >
+            </span>
+          </div>
+        </div>
+      </div>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        please select
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-placement-bottomLeft"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
+    <div>
+      <div>
+        <div
+          class="ant-select-tree"
+        >
+          <div>
+            <input
+              aria-label="for screen reader"
+              disabled=""
+              style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+              value=""
+            />
+          </div>
+          <div
+            aria-hidden="true"
+            class="ant-select-tree-treenode"
+            style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+          >
+            <div
+              class="ant-select-tree-indent"
+            >
+              <div
+                class="ant-select-tree-indent-unit"
+              />
+            </div>
+          </div>
+          <div
+            class="ant-select-tree-list"
+            role="tree"
+            style="position: relative;"
+          >
+            <div
+              class="ant-select-tree-list-holder"
+              style="max-height: 256px; overflow-y: auto;"
+            >
+              <div>
+                <div
+                  class="ant-select-tree-list-holder-inner"
+                  style="display: flex; flex-direction: column;"
+                >
+                  <div
+                    aria-expanded="false"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
+                    draggable="false"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-tree-indent"
+                    />
+                    <span
+                      class="ant-select-tree-switcher ant-select-tree-switcher_close"
+                    >
+                      <span
+                        aria-label="caret-down"
+                        class="anticon anticon-caret-down ant-select-tree-switcher-icon"
+                        role="img"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="caret-down"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="0 0 1024 1024"
+                          width="1em"
+                        >
+                          <path
+                            d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                    <span
+                      aria-checked="false"
+                      aria-label="Select Node1"
+                      class="ant-select-tree-checkbox"
+                      role="checkbox"
+                    >
+                      <span
+                        class="ant-select-tree-checkbox-inner"
+                      />
+                    </span>
+                    <span
+                      class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-close"
+                      title="Node1"
+                    >
+                      <span
+                        class="ant-select-tree-title"
+                      >
+                        Node1
+                      </span>
+                    </span>
+                  </div>
+                  <div
+                    aria-expanded="false"
+                    class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
+                    draggable="false"
+                    role="treeitem"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-tree-indent"
+                    />
+                    <span
+                      class="ant-select-tree-switcher ant-select-tree-switcher_close"
+                    >
+                      <span
+                        aria-label="caret-down"
+                        class="anticon anticon-caret-down ant-select-tree-switcher-icon"
+                        role="img"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          data-icon="caret-down"
+                          fill="currentColor"
+                          focusable="false"
+                          height="1em"
+                          viewBox="0 0 1024 1024"
+                          width="1em"
+                        >
+                          <path
+                            d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                    <span
+                      aria-checked="false"
+                      aria-label="Select Node2"
+                      class="ant-select-tree-checkbox"
+                      role="checkbox"
+                    >
+                      <span
+                        class="ant-select-tree-checkbox-inner"
+                      />
+                    </span>
+                    <span
+                      class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-close"
+                      title="Node2"
+                    >
+                      <span
+                        class="ant-select-tree-title"
+                      >
+                        Node2
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select: none;"
+    unselectable="on"
+  >
+    <span>
+      0 / 2
+    </span>
+    <span
+      aria-label="down"
+      class="anticon anticon-down"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`renders components/tree-select/demo/maxCountNoEffect.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/tree-select/demo/multiple.tsx extend context correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
@@ -1033,7 +1584,6 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
       <div>
         <div
           class="ant-select-tree"
-          role="tree"
         >
           <div>
             <input
@@ -1058,6 +1608,7 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
           </div>
           <div
             class="ant-select-tree-list"
+            role="tree"
             style="position: relative;"
           >
             <div
@@ -1070,9 +1621,10 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
                   style="display: flex; flex-direction: column;"
                 >
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="true"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -1113,9 +1665,10 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="true"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -1160,9 +1713,10 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -1190,9 +1744,10 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -1220,9 +1775,10 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="true"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -1267,9 +1823,10 @@ exports[`renders components/tree-select/demo/multiple.tsx extend context correct
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -1353,6 +1910,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topLeft"
         />
@@ -1372,6 +1930,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topRight"
         />
@@ -1391,6 +1950,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomLeft"
         />
@@ -1410,6 +1970,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomRight"
         />
@@ -1465,7 +2026,6 @@ Array [
         <div>
           <div
             class="ant-select-tree"
-            role="tree"
           >
             <div>
               <input
@@ -1490,6 +2050,7 @@ Array [
             </div>
             <div
               class="ant-select-tree-list"
+              role="tree"
               style="position: relative;"
             >
               <div
@@ -1502,9 +2063,10 @@ Array [
                     style="display: flex; flex-direction: column;"
                   >
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="true"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -1545,9 +2107,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="true"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -1592,9 +2155,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -1622,9 +2186,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -1652,9 +2217,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="true"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -1699,9 +2265,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -1822,7 +2389,6 @@ exports[`renders components/tree-select/demo/render-panel.tsx extend context cor
         <div>
           <div
             class="ant-select-tree ant-select-tree-active-focused"
-            role="tree"
           >
             <div>
               <input
@@ -1847,6 +2413,7 @@ exports[`renders components/tree-select/demo/render-panel.tsx extend context cor
             </div>
             <div
               class="ant-select-tree-list"
+              role="tree"
               style="position: relative;"
             >
               <div
@@ -1859,9 +2426,10 @@ exports[`renders components/tree-select/demo/render-panel.tsx extend context cor
                     style="display: flex; flex-direction: column;"
                   >
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -1902,9 +2470,10 @@ exports[`renders components/tree-select/demo/render-panel.tsx extend context cor
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2289,7 +2858,6 @@ Array [
         <div>
           <div
             class="ant-select-tree"
-            role="tree"
           >
             <div>
               <input
@@ -2314,6 +2882,7 @@ Array [
             </div>
             <div
               class="ant-select-tree-list"
+              role="tree"
               style="position: relative;"
             >
               <div
@@ -2326,9 +2895,10 @@ Array [
                     style="display: flex; flex-direction: column;"
                   >
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="true"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2369,9 +2939,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="true"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2416,9 +2987,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2446,9 +3018,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2476,9 +3049,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="true"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2523,9 +3097,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2640,7 +3215,6 @@ Array [
         <div>
           <div
             class="ant-select-tree"
-            role="tree"
           >
             <div>
               <input
@@ -2665,6 +3239,7 @@ Array [
             </div>
             <div
               class="ant-select-tree-list"
+              role="tree"
               style="position: relative;"
             >
               <div
@@ -2677,9 +3252,10 @@ Array [
                     style="display: flex; flex-direction: column;"
                   >
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="true"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2720,9 +3296,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="true"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2767,9 +3344,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2797,9 +3375,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2827,9 +3406,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="true"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2874,9 +3454,10 @@ Array [
                       </span>
                     </div>
                     <div
-                      aria-grabbed="false"
+                      aria-expanded="false"
                       class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                       draggable="false"
+                      role="treeitem"
                     >
                       <span
                         aria-hidden="true"
@@ -2993,7 +3574,6 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
       <div>
         <div
           class="ant-select-tree"
-          role="tree"
         >
           <div>
             <input
@@ -3018,6 +3598,7 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
           </div>
           <div
             class="ant-select-tree-list"
+            role="tree"
             style="position: relative;"
           >
             <div
@@ -3030,9 +3611,10 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
                   style="display: flex; flex-direction: column;"
                 >
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="true"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -3073,9 +3655,10 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -3100,9 +3683,10 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -3127,9 +3711,10 @@ exports[`renders components/tree-select/demo/treeData.tsx extend context correct
                     </span>
                   </div>
                   <div
-                    aria-grabbed="false"
+                    aria-expanded="false"
                     class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                     draggable="false"
+                    role="treeitem"
                   >
                     <span
                       aria-hidden="true"
@@ -3322,7 +3907,6 @@ exports[`renders components/tree-select/demo/treeLine.tsx extend context correct
           <div>
             <div
               class="ant-select-tree ant-select-tree-show-line"
-              role="tree"
             >
               <div>
                 <input
@@ -3347,6 +3931,7 @@ exports[`renders components/tree-select/demo/treeLine.tsx extend context correct
               </div>
               <div
                 class="ant-select-tree-list"
+                role="tree"
                 style="position: relative;"
               >
                 <div
@@ -3359,9 +3944,10 @@ exports[`renders components/tree-select/demo/treeLine.tsx extend context correct
                       style="display: flex; flex-direction: column;"
                     >
                       <div
-                        aria-grabbed="false"
+                        aria-expanded="false"
                         class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-leaf-last"
                         draggable="false"
+                        role="treeitem"
                       >
                         <span
                           aria-hidden="true"
diff --git a/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap b/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap
index 82b5a88ccd..607c6e1f78 100644
--- a/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap
@@ -247,6 +247,219 @@ exports[`renders components/tree-select/demo/checkable.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/tree-select/demo/maxCount.tsx correctly 1`] = `
+<div
+  class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-show-arrow ant-select-show-search"
+  style="width:100%"
+>
+  <div
+    class="ant-select-selector"
+  >
+    <span
+      class="ant-select-selection-wrap"
+    >
+      <div
+        class="ant-select-selection-overflow"
+      >
+        <div
+          class="ant-select-selection-overflow-item"
+          style="opacity:1"
+        >
+          <span
+            class="ant-select-selection-item"
+            title="Child 1-1"
+          >
+            <span
+              class="ant-select-selection-item-content"
+            >
+              Child 1-1
+            </span>
+            <span
+              aria-hidden="true"
+              class="ant-select-selection-item-remove"
+              style="user-select:none;-webkit-user-select:none"
+              unselectable="on"
+            >
+              <span
+                aria-label="close"
+                class="anticon anticon-close"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="close"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+          style="opacity:1"
+        >
+          <div
+            class="ant-select-selection-search"
+            style="width:0"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+            <span
+              aria-hidden="true"
+              class="ant-select-selection-search-mirror"
+            >
+            </span>
+          </div>
+        </div>
+      </div>
+    </span>
+  </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span>
+      1
+      <!-- -->
+       / 
+      <!-- -->
+      3
+    </span>
+    <span
+      aria-label="down"
+      class="anticon anticon-down"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`renders components/tree-select/demo/maxCountNoEffect.tsx correctly 1`] = `
+<div
+  class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-show-arrow ant-select-show-search"
+  style="width:100%"
+>
+  <div
+    class="ant-select-selector"
+  >
+    <span
+      class="ant-select-selection-wrap"
+    >
+      <div
+        class="ant-select-selection-overflow"
+      >
+        <div
+          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
+          style="opacity:1"
+        >
+          <div
+            class="ant-select-selection-search"
+            style="width:0"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+            <span
+              aria-hidden="true"
+              class="ant-select-selection-search-mirror"
+            >
+            </span>
+          </div>
+        </div>
+      </div>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        please select
+      </span>
+    </span>
+  </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span>
+      0
+      <!-- -->
+       / 
+      <!-- -->
+      2
+    </span>
+    <span
+      aria-label="down"
+      class="anticon anticon-down"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
+</div>
+`;
+
 exports[`renders components/tree-select/demo/multiple.tsx correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-outlined ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
@@ -342,6 +555,7 @@ Array [
         <input
           checked=""
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topLeft"
         />
@@ -361,6 +575,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="topRight"
         />
@@ -380,6 +595,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomLeft"
         />
@@ -399,6 +615,7 @@ Array [
       >
         <input
           class="ant-radio-button-input"
+          name="test-id"
           type="radio"
           value="bottomRight"
         />
diff --git a/components/tree-select/demo/maxCount.md b/components/tree-select/demo/maxCount.md
new file mode 100644
index 0000000000..117341e530
--- /dev/null
+++ b/components/tree-select/demo/maxCount.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+你可以通过设置 `maxCount` 约束最多可选中的数量，当超出限制时会变成禁止选中状态。
+
+## en-US
+
+You can set the `maxCount` prop to control the max number of items can be selected. When the limit is exceeded, the options will become disabled.
diff --git a/components/tree-select/demo/maxCount.tsx b/components/tree-select/demo/maxCount.tsx
new file mode 100644
index 0000000000..1d7d0f8351
--- /dev/null
+++ b/components/tree-select/demo/maxCount.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { DownOutlined } from '@ant-design/icons';
+import { TreeSelect } from 'antd';
+
+const MAX_COUNT = 3;
+
+const treeData = [
+  {
+    title: 'Parent 1',
+    value: 'parent1',
+    children: [
+      {
+        title: 'Child 1-1',
+        value: 'child1-1',
+      },
+      {
+        title: 'Child 1-2',
+        value: 'child1-2',
+      },
+    ],
+  },
+  {
+    title: 'Parent 2',
+    value: 'parent2',
+    children: [
+      {
+        title: 'Child 2-1',
+        value: 'child2-1',
+      },
+      {
+        title: 'Child 2-2',
+        value: 'child2-2',
+      },
+    ],
+  },
+];
+
+const App: React.FC = () => {
+  const [value, setValue] = React.useState<string[]>(['child1-1']);
+
+  const onChange = (newValue: string[]) => {
+    setValue(newValue);
+  };
+
+  const suffix = (
+    <>
+      <span>
+        {value.length} / {MAX_COUNT}
+      </span>
+      <DownOutlined />
+    </>
+  );
+
+  return (
+    <TreeSelect
+      treeData={treeData}
+      value={value}
+      onChange={onChange}
+      multiple
+      maxCount={MAX_COUNT}
+      style={{ width: '100%' }}
+      suffixIcon={suffix}
+      treeCheckable
+      placeholder="Please select"
+      showCheckedStrategy={TreeSelect.SHOW_CHILD}
+    />
+  );
+};
+
+export default App;
diff --git a/components/tree-select/demo/maxCountNoEffect.md b/components/tree-select/demo/maxCountNoEffect.md
new file mode 100644
index 0000000000..dffa3ded86
--- /dev/null
+++ b/components/tree-select/demo/maxCountNoEffect.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+当 `showCheckedStrategy='SHOW_PARENT'` 或 `showCheckedStrategy='SHOW_ALL'` 且 `treeCheckStrictly=false` 时，`maxCount` 就不会生效。
+
+## en-US
+
+When `showCheckedStrategy=SHOW_PARENT` or `showCheckedStrategy=SHOW_ALL` and `treeCheckStrictly=false`, `maxCount` will not take effect.
diff --git a/components/tree-select/demo/maxCountNoEffect.tsx b/components/tree-select/demo/maxCountNoEffect.tsx
new file mode 100644
index 0000000000..89958aa71d
--- /dev/null
+++ b/components/tree-select/demo/maxCountNoEffect.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { TreeSelect } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+
+const treeData = [
+  {
+    title: 'Node1',
+    value: '0-0',
+    key: '0-0',
+    children: [
+      {
+        title: 'Child Node1',
+        value: '0-0-1',
+        key: '0-0-1',
+      },
+      {
+        title: 'Child Node2',
+        value: '0-0-2',
+        key: '0-0-2',
+      },
+    ],
+  },
+  {
+    title: 'Node2',
+    value: '0-1',
+    key: '0-1',
+    children: [
+      {
+        title: 'Child Node3',
+        value: '0-1-1',
+        key: '0-1-1',
+      },
+      {
+        title: 'Child Node4',
+        value: '0-1-2',
+        key: '0-1-2',
+      },
+    ],
+  },
+];
+
+const MAX_COUNT = 2;
+
+function MaxCountNoEffectDemo() {
+  const [value, setValue] = useState<string[]>([]);
+
+  const suffix = (
+    <>
+      <span>
+        {value.length} / {MAX_COUNT}
+      </span>
+      <DownOutlined />
+    </>
+  );
+
+  return (
+    <TreeSelect
+      treeCheckable
+      showCheckedStrategy={TreeSelect.SHOW_PARENT}
+      maxCount={MAX_COUNT}
+      suffixIcon={suffix}
+      placeholder="please select"
+      value={value}
+      onChange={(val) => setValue(val as string[])}
+      style={{ width: '100%' }}
+      treeData={treeData}
+    />
+  );
+}
+
+export default MaxCountNoEffectDemo;
diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md
index f075602663..c4defa4f7e 100644
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@@ -24,6 +24,7 @@ demo:
 <code src="./demo/treeLine.tsx">Show Tree Line</code>
 <code src="./demo/placement.tsx">Placement</code>
 <code src="./demo/status.tsx">Status</code>
+<code src="./demo/maxCount.tsx" version="5.23.0">Max Count</code>
 <code src="./demo/suffix.tsx" version="5.22.0">Prefix and Suffix</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
@@ -51,6 +52,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | listHeight | Config popup height | number | 256 |  |
 | loadData | Load data asynchronously. Will not load when filtering. Check FAQ for more info | function(node) | - |  |
 | maxTagCount | Max tag count to show. `responsive` will cost render performance | number \| `responsive` | - | responsive: 4.10 |
+| maxCount | The maximum number of items that can be selected. Only takes effect when `multiple=true`. If (`showCheckedStrategy = 'SHOW_ALL'` and `treeCheckStrictly` is disabled) or `showCheckedStrategy = 'SHOW_PARENT'` is used, `maxCount` will not take effect. | number | - | 5.23.0 |
 | maxTagPlaceholder | Placeholder for not showing tags | ReactNode \| function(omittedValues) | - |  |
 | maxTagTextLength | Max tag text length to show | number | - |  |
 | multiple | Support multiple or not, will be `true` when enable `treeCheckable` | boolean | false |  |
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 8189ab7526..93d36b707d 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -118,6 +118,9 @@ const InternalTreeSelect = <ValueType = any, OptionType extends DataNode = DataN
     variant: customVariant,
     dropdownStyle,
     tagRender,
+    maxCount,
+    showCheckedStrategy,
+    treeCheckStrictly,
     ...restProps
   } = props;
   const {
@@ -187,6 +190,17 @@ const InternalTreeSelect = <ValueType = any, OptionType extends DataNode = DataN
 
   const isMultiple = !!(treeCheckable || multiple);
 
+  const mergedMaxCount = React.useMemo(() => {
+    if (
+      maxCount &&
+      ((showCheckedStrategy === 'SHOW_ALL' && !treeCheckStrictly) ||
+        showCheckedStrategy === 'SHOW_PARENT')
+    ) {
+      return undefined;
+    }
+    return maxCount;
+  }, [maxCount, showCheckedStrategy, treeCheckStrictly]);
+
   const showSuffixIcon = useShowArrow(props.suffixIcon, props.showArrow);
 
   const mergedPopupMatchSelectWidth =
@@ -308,6 +322,9 @@ const InternalTreeSelect = <ValueType = any, OptionType extends DataNode = DataN
       transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
       treeExpandAction={treeExpandAction}
       tagRender={isMultiple ? tagRender : undefined}
+      maxCount={mergedMaxCount}
+      showCheckedStrategy={showCheckedStrategy}
+      treeCheckStrictly={treeCheckStrictly}
     />
   );
 
diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md
index 3b0098d7a3..2b6b505c12 100644
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@@ -25,6 +25,7 @@ demo:
 <code src="./demo/treeLine.tsx">线性样式</code>
 <code src="./demo/placement.tsx">弹出位置</code>
 <code src="./demo/status.tsx">自定义状态</code>
+<code src="./demo/maxCount.tsx" version="5.23.0">最大选中数量</code>
 <code src="./demo/suffix.tsx" version="5.22.0">前后缀</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
@@ -51,6 +52,7 @@ demo:
 | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string\[] } 的格式 | boolean | false |  |
 | listHeight | 设置弹窗滚动高度 | number | 256 |  |
 | loadData | 异步加载数据。在过滤时不会调用以防止网络堵塞，可参考 FAQ 获得更多内容 | function(node) | - |  |
+| maxCount | 指定可选中的最多 items 数量，仅在 `multiple=true` 时生效。如果此时 (`showCheckedStrategy = 'SHOW_ALL'` 且未开启 `treeCheckStrictly`)，或使用 `showCheckedStrategy = 'SHOW_PARENT'`，则maxCount无效。 | number | - | 5.23.0 |
 | maxTagCount | 最多显示多少个 tag，响应式模式会对性能产生损耗 | number \| `responsive` | - | responsive: 4.10 |
 | maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode \| function(omittedValues) | - |  |
 | maxTagTextLength | 最大显示的 tag 文本长度 | number | - |  |
diff --git a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0932e06cc4..94d50a9847 100644
--- a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3,7 +3,6 @@
 exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
-  role="tree"
 >
   <div>
     <input
@@ -28,6 +27,7 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -39,9 +39,10 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -71,7 +72,10 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-label="Select parent 1"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -89,9 +93,10 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -125,7 +130,11 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-disabled="true"
+              aria-label="Select parent 1-0"
               class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -143,9 +152,10 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -162,7 +172,11 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-disabled="true"
+              aria-label="Select leaf"
               class="ant-tree-checkbox ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -180,9 +194,10 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -199,7 +214,10 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select leaf"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -217,9 +235,10 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -253,7 +272,10 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-label="Select parent 1-1"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -271,9 +293,10 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -290,7 +313,10 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="true"
+              aria-label="Select tree node"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -323,7 +349,6 @@ exports[`renders components/tree/demo/basic.tsx extend context correctly 2`] = `
 exports[`renders components/tree/demo/basic-controlled.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
-  role="tree"
 >
   <div>
     <input
@@ -348,6 +373,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -359,9 +385,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-indeterminate"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -391,7 +418,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               </span>
             </span>
             <span
+              aria-checked="mixed"
+              aria-label="Select 0-0"
               class="ant-tree-checkbox ant-tree-checkbox-indeterminate"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -409,9 +439,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -445,7 +476,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-label="Select 0-0-0"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -463,9 +497,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -482,7 +517,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="true"
+              aria-label="Select 0-0-0-0"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -500,9 +538,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -519,7 +558,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="true"
+              aria-label="Select 0-0-0-1"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -537,9 +579,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -556,7 +599,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="true"
+              aria-label="Select 0-0-0-2"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -574,9 +620,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -610,7 +657,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               </span>
             </span>
             <span
+              aria-checked="false"
+              aria-label="Select 0-0-1"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -628,9 +678,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -647,7 +698,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select 0-0-1-0"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -665,9 +719,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -684,7 +739,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select 0-0-1-1"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -702,9 +760,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -721,7 +780,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select 0-0-1-2"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -739,9 +801,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -755,7 +818,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select 0-0-2"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -773,9 +839,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -805,7 +872,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               </span>
             </span>
             <span
+              aria-checked="false"
+              aria-label="Select 0-1"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -823,9 +893,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -835,7 +906,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select 0-2"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -864,7 +938,6 @@ exports[`renders components/tree/demo/basic-controlled.tsx extend context correc
 exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-block-node"
-  role="tree"
 >
   <div>
     <input
@@ -889,6 +962,7 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -900,9 +974,10 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -932,7 +1007,10 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`
               </span>
             </span>
             <span
+              aria-checked="false"
+              aria-label="Select parent"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -950,9 +1028,10 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -966,7 +1045,11 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-disabled="true"
+              aria-label="Select child 1"
               class="ant-tree-checkbox ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -984,9 +1067,10 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1000,7 +1084,11 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 1`
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-disabled="true"
+              aria-label="Select child 2"
               class="ant-tree-checkbox ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -1029,7 +1117,6 @@ exports[`renders components/tree/demo/block-node.tsx extend context correctly 2`
 exports[`renders components/tree/demo/customized-icon.tsx extend context correctly 1`] = `
 <div
   class="ant-tree"
-  role="tree"
 >
   <div>
     <input
@@ -1054,6 +1141,7 @@ exports[`renders components/tree/demo/customized-icon.tsx extend context correct
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -1065,9 +1153,10 @@ exports[`renders components/tree/demo/customized-icon.tsx extend context correct
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1131,9 +1220,10 @@ exports[`renders components/tree/demo/customized-icon.tsx extend context correct
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1181,9 +1271,10 @@ exports[`renders components/tree/demo/customized-icon.tsx extend context correct
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1242,7 +1333,6 @@ exports[`renders components/tree/demo/customized-icon.tsx extend context correct
 exports[`renders components/tree/demo/directory.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
-  role="tree"
 >
   <div>
     <input
@@ -1267,6 +1357,7 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -1278,9 +1369,10 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1367,9 +1459,9 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
             class="ant-tree-treenode ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1440,9 +1532,9 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
             class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1513,9 +1605,10 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1602,9 +1695,9 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
             class="ant-tree-treenode ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1675,9 +1768,9 @@ exports[`renders components/tree/demo/directory.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
             class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1831,7 +1924,6 @@ Array [
   </div>,
   <div
     class="ant-tree ant-tree-block-node draggable-tree ant-tree-show-line"
-    role="tree"
   >
     <div>
       <input
@@ -1856,6 +1948,7 @@ Array [
     </div>
     <div
       class="ant-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -1867,9 +1960,10 @@ Array [
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="true"
               class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -1959,9 +2053,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="true"
               class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2055,9 +2150,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="true"
               class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2135,9 +2231,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2215,9 +2312,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2295,9 +2393,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2391,9 +2490,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2468,9 +2568,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2560,9 +2661,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2645,7 +2747,6 @@ exports[`renders components/tree/demo/drag-debug.tsx extend context correctly 2`
 exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-block-node draggable-tree"
-  role="tree"
 >
   <div>
     <input
@@ -2670,6 +2771,7 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -2681,9 +2783,10 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2747,9 +2850,10 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2817,9 +2921,10 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2870,9 +2975,10 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2923,9 +3029,10 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2976,9 +3083,10 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3046,9 +3154,10 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3096,9 +3205,10 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3162,9 +3272,10 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 1`]
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3219,7 +3330,6 @@ exports[`renders components/tree/demo/draggable.tsx extend context correctly 2`]
 exports[`renders components/tree/demo/dynamic.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
-  role="tree"
 >
   <div>
     <input
@@ -3244,6 +3354,7 @@ exports[`renders components/tree/demo/dynamic.tsx extend context correctly 1`] =
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -3255,9 +3366,10 @@ exports[`renders components/tree/demo/dynamic.tsx extend context correctly 1`] =
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3298,9 +3410,10 @@ exports[`renders components/tree/demo/dynamic.tsx extend context correctly 1`] =
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3341,9 +3454,9 @@ exports[`renders components/tree/demo/dynamic.tsx extend context correctly 1`] =
             </span>
           </div>
           <div
-            aria-grabbed="false"
             class="ant-tree-treenode ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3588,7 +3701,6 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
   </div>
   <div
     class="ant-tree ant-tree-icon-hide ant-tree-show-line"
-    role="tree"
   >
     <div>
       <input
@@ -3613,6 +3725,7 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
     </div>
     <div
       class="ant-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -3624,9 +3737,10 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="true"
               class="ant-tree-treenode ant-tree-treenode-switcher-open"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3670,9 +3784,10 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="true"
               class="ant-tree-treenode ant-tree-treenode-switcher-open"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3720,9 +3835,10 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3770,9 +3886,10 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3825,9 +3942,10 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3875,9 +3993,10 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3925,9 +4044,10 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3975,9 +4095,10 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -4033,7 +4154,6 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 2`] = `[
 exports[`renders components/tree/demo/multiple-line.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
-  role="tree"
 >
   <div>
     <input
@@ -4058,6 +4178,7 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="width: 200px; position: relative;"
   >
     <div
@@ -4069,9 +4190,10 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4101,7 +4223,10 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-label="Select parent 1"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4119,9 +4244,10 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4155,7 +4281,11 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-disabled="true"
+              aria-label="Select parent 1-0"
               class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4173,9 +4303,10 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4192,7 +4323,11 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-disabled="true"
+              aria-label="Select This is a very very very very long text"
               class="ant-tree-checkbox ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4210,9 +4345,10 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4229,7 +4365,10 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select This is also a very very very very very long text"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4247,9 +4386,10 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4283,7 +4423,10 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-label="Select parent 1-1"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4301,9 +4444,10 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4320,7 +4464,10 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="true"
+              aria-label="Select tree node"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4362,7 +4509,7 @@ exports[`renders components/tree/demo/search.tsx extend context correctly 1`] =
       <input
         class="ant-input ant-input-outlined"
         placeholder="Search"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -4401,7 +4548,6 @@ exports[`renders components/tree/demo/search.tsx extend context correctly 1`] =
   </span>
   <div
     class="ant-tree ant-tree-icon-hide"
-    role="tree"
   >
     <div>
       <input
@@ -4426,6 +4572,7 @@ exports[`renders components/tree/demo/search.tsx extend context correctly 1`] =
     </div>
     <div
       class="ant-tree-list"
+      role="tree"
       style="position: relative;"
     >
       <div
@@ -4437,9 +4584,10 @@ exports[`renders components/tree/demo/search.tsx extend context correctly 1`] =
             style="display: flex; flex-direction: column;"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -4485,9 +4633,10 @@ exports[`renders components/tree/demo/search.tsx extend context correctly 1`] =
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -4533,9 +4682,10 @@ exports[`renders components/tree/demo/search.tsx extend context correctly 1`] =
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -4573,7 +4723,6 @@ exports[`renders components/tree/demo/search.tsx extend context correctly 2`] =
 exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-show-line"
-  role="tree"
 >
   <div>
     <input
@@ -4598,6 +4747,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -4609,9 +4759,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4652,9 +4803,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4699,9 +4851,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4733,9 +4886,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4767,9 +4921,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4801,9 +4956,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4848,9 +5004,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx extend context correctly
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
diff --git a/components/tree/__tests__/__snapshots__/demo.test.ts.snap b/components/tree/__tests__/__snapshots__/demo.test.ts.snap
index c88b9a28fc..7520c12e52 100644
--- a/components/tree/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tree/__tests__/__snapshots__/demo.test.ts.snap
@@ -3,7 +3,6 @@
 exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
-  role="tree"
 >
   <div>
     <input
@@ -28,6 +27,7 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position:relative"
   >
     <div
@@ -39,9 +39,10 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
           style="display:flex;flex-direction:column"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -71,7 +72,10 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-label="Select parent 1"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -89,9 +93,10 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -125,7 +130,11 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-disabled="true"
+              aria-label="Select parent 1-0"
               class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -143,9 +152,10 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -162,7 +172,11 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-disabled="true"
+              aria-label="Select leaf"
               class="ant-tree-checkbox ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -180,9 +194,10 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -199,7 +214,10 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select leaf"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -217,9 +235,10 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -253,7 +272,10 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-label="Select parent 1-1"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -271,9 +293,10 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -290,7 +313,10 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="true"
+              aria-label="Select tree node"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -321,7 +347,6 @@ exports[`renders components/tree/demo/basic.tsx correctly 1`] = `
 exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
-  role="tree"
 >
   <div>
     <input
@@ -346,6 +371,7 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position:relative"
   >
     <div
@@ -357,9 +383,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
           style="display:flex;flex-direction:column"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-indeterminate"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -389,7 +416,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="mixed"
+              aria-label="Select 0-0"
               class="ant-tree-checkbox ant-tree-checkbox-indeterminate"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -407,9 +437,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -443,7 +474,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-label="Select 0-0-0"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -461,9 +495,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -480,7 +515,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="true"
+              aria-label="Select 0-0-0-0"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -498,9 +536,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -517,7 +556,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="true"
+              aria-label="Select 0-0-0-1"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -535,9 +577,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -554,7 +597,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="true"
+              aria-label="Select 0-0-0-2"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -572,9 +618,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -608,7 +655,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="false"
+              aria-label="Select 0-0-1"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -626,9 +676,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -645,7 +696,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select 0-0-1-0"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -663,9 +717,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -682,7 +737,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select 0-0-1-1"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -700,9 +758,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -719,7 +778,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select 0-0-1-2"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -737,9 +799,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -753,7 +816,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select 0-0-2"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -771,9 +837,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -803,7 +870,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="false"
+              aria-label="Select 0-1"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -821,9 +891,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -833,7 +904,10 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select 0-2"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -860,7 +934,6 @@ exports[`renders components/tree/demo/basic-controlled.tsx correctly 1`] = `
 exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-block-node"
-  role="tree"
 >
   <div>
     <input
@@ -885,6 +958,7 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position:relative"
   >
     <div
@@ -896,9 +970,10 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
           style="display:flex;flex-direction:column"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -928,7 +1003,10 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="false"
+              aria-label="Select parent"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -946,9 +1024,10 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -962,7 +1041,11 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-disabled="true"
+              aria-label="Select child 1"
               class="ant-tree-checkbox ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -980,9 +1063,10 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -996,7 +1080,11 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-disabled="true"
+              aria-label="Select child 2"
               class="ant-tree-checkbox ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -1023,7 +1111,6 @@ exports[`renders components/tree/demo/block-node.tsx correctly 1`] = `
 exports[`renders components/tree/demo/customized-icon.tsx correctly 1`] = `
 <div
   class="ant-tree"
-  role="tree"
 >
   <div>
     <input
@@ -1048,6 +1135,7 @@ exports[`renders components/tree/demo/customized-icon.tsx correctly 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position:relative"
   >
     <div
@@ -1059,9 +1147,10 @@ exports[`renders components/tree/demo/customized-icon.tsx correctly 1`] = `
           style="display:flex;flex-direction:column"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1125,9 +1214,10 @@ exports[`renders components/tree/demo/customized-icon.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1175,9 +1265,10 @@ exports[`renders components/tree/demo/customized-icon.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1234,7 +1325,6 @@ exports[`renders components/tree/demo/customized-icon.tsx correctly 1`] = `
 exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
-  role="tree"
 >
   <div>
     <input
@@ -1259,6 +1349,7 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position:relative"
   >
     <div
@@ -1270,9 +1361,10 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
           style="display:flex;flex-direction:column"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1359,9 +1451,9 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
             class="ant-tree-treenode ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1432,9 +1524,9 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
             class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1505,9 +1597,10 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1594,9 +1687,9 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
             class="ant-tree-treenode ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1667,9 +1760,9 @@ exports[`renders components/tree/demo/directory.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
             class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1821,7 +1914,6 @@ Array [
   </div>,
   <div
     class="ant-tree ant-tree-block-node draggable-tree ant-tree-show-line"
-    role="tree"
   >
     <div>
       <input
@@ -1846,6 +1938,7 @@ Array [
     </div>
     <div
       class="ant-tree-list"
+      role="tree"
       style="position:relative"
     >
       <div
@@ -1857,9 +1950,10 @@ Array [
             style="display:flex;flex-direction:column"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="true"
               class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -1949,9 +2043,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="true"
               class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2045,9 +2140,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="true"
               class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2125,9 +2221,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2205,9 +2302,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2285,9 +2383,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2381,9 +2480,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2458,9 +2558,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2550,9 +2651,10 @@ Array [
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
               draggable="true"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -2633,7 +2735,6 @@ Array [
 exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-block-node draggable-tree"
-  role="tree"
 >
   <div>
     <input
@@ -2658,6 +2759,7 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position:relative"
   >
     <div
@@ -2669,9 +2771,10 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
           style="display:flex;flex-direction:column"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2735,9 +2838,10 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2805,9 +2909,10 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2858,9 +2963,10 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2911,9 +3017,10 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2964,9 +3071,10 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3034,9 +3142,10 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3084,9 +3193,10 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3150,9 +3260,10 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
             draggable="true"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3205,7 +3316,6 @@ exports[`renders components/tree/demo/draggable.tsx correctly 1`] = `
 exports[`renders components/tree/demo/dynamic.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
-  role="tree"
 >
   <div>
     <input
@@ -3230,6 +3340,7 @@ exports[`renders components/tree/demo/dynamic.tsx correctly 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position:relative"
   >
     <div
@@ -3241,9 +3352,10 @@ exports[`renders components/tree/demo/dynamic.tsx correctly 1`] = `
           style="display:flex;flex-direction:column"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3284,9 +3396,10 @@ exports[`renders components/tree/demo/dynamic.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3327,9 +3440,9 @@ exports[`renders components/tree/demo/dynamic.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
             class="ant-tree-treenode ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3475,7 +3588,6 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
   </div>
   <div
     class="ant-tree ant-tree-icon-hide ant-tree-show-line"
-    role="tree"
   >
     <div>
       <input
@@ -3500,6 +3612,7 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
     </div>
     <div
       class="ant-tree-list"
+      role="tree"
       style="position:relative"
     >
       <div
@@ -3511,9 +3624,10 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
             style="display:flex;flex-direction:column"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="true"
               class="ant-tree-treenode ant-tree-treenode-switcher-open"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3557,9 +3671,10 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="true"
               class="ant-tree-treenode ant-tree-treenode-switcher-open"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3607,9 +3722,10 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3657,9 +3773,10 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3712,9 +3829,10 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3762,9 +3880,10 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3812,9 +3931,10 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3862,9 +3982,10 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -3918,7 +4039,6 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
 exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
-  role="tree"
 >
   <div>
     <input
@@ -3943,6 +4063,7 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="width:200px;position:relative"
   >
     <div
@@ -3954,9 +4075,10 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
           style="display:flex;flex-direction:column"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -3986,7 +4108,10 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-label="Select parent 1"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4004,9 +4129,10 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4040,7 +4166,11 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-disabled="true"
+              aria-label="Select parent 1-0"
               class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4058,9 +4188,10 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4077,7 +4208,11 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-disabled="true"
+              aria-label="Select This is a very very very very long text"
               class="ant-tree-checkbox ant-tree-checkbox-disabled"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4095,9 +4230,10 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4114,7 +4250,10 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="false"
+              aria-label="Select This is also a very very very very very long text"
               class="ant-tree-checkbox"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4132,9 +4271,10 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4168,7 +4308,10 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
               </span>
             </span>
             <span
+              aria-checked="true"
+              aria-label="Select parent 1-1"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4186,9 +4329,10 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4205,7 +4349,10 @@ exports[`renders components/tree/demo/multiple-line.tsx correctly 1`] = `
               class="ant-tree-switcher ant-tree-switcher-noop"
             />
             <span
+              aria-checked="true"
+              aria-label="Select tree node"
               class="ant-tree-checkbox ant-tree-checkbox-checked"
+              role="checkbox"
             >
               <span
                 class="ant-tree-checkbox-inner"
@@ -4245,7 +4392,7 @@ exports[`renders components/tree/demo/search.tsx correctly 1`] = `
       <input
         class="ant-input ant-input-outlined"
         placeholder="Search"
-        type="text"
+        type="search"
         value=""
       />
       <span
@@ -4284,7 +4431,6 @@ exports[`renders components/tree/demo/search.tsx correctly 1`] = `
   </span>
   <div
     class="ant-tree ant-tree-icon-hide"
-    role="tree"
   >
     <div>
       <input
@@ -4309,6 +4455,7 @@ exports[`renders components/tree/demo/search.tsx correctly 1`] = `
     </div>
     <div
       class="ant-tree-list"
+      role="tree"
       style="position:relative"
     >
       <div
@@ -4320,9 +4467,10 @@ exports[`renders components/tree/demo/search.tsx correctly 1`] = `
             style="display:flex;flex-direction:column"
           >
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -4368,9 +4516,10 @@ exports[`renders components/tree/demo/search.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -4416,9 +4565,10 @@ exports[`renders components/tree/demo/search.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              aria-grabbed="false"
+              aria-expanded="false"
               class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
               draggable="false"
+              role="treeitem"
             >
               <span
                 aria-hidden="true"
@@ -4454,7 +4604,6 @@ exports[`renders components/tree/demo/search.tsx correctly 1`] = `
 exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-show-line"
-  role="tree"
 >
   <div>
     <input
@@ -4479,6 +4628,7 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position:relative"
   >
     <div
@@ -4490,9 +4640,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
           style="display:flex;flex-direction:column"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4533,9 +4684,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4580,9 +4732,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4614,9 +4767,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4648,9 +4802,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4682,9 +4837,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -4729,9 +4885,10 @@ exports[`renders components/tree/demo/switcher-icon.tsx correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
diff --git a/components/tree/__tests__/__snapshots__/directory.test.tsx.snap b/components/tree/__tests__/__snapshots__/directory.test.tsx.snap
index ea5b6e0a36..e1e2782a86 100644
--- a/components/tree/__tests__/__snapshots__/directory.test.tsx.snap
+++ b/components/tree/__tests__/__snapshots__/directory.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Directory Tree DirectoryTree should expend all when use treeData and defaultExpandAll is true 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
-  role="tree"
 >
   <div>
     <input
@@ -28,6 +27,7 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -39,9 +39,10 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -105,9 +106,10 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -175,9 +177,9 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
             </span>
           </div>
           <div
-            aria-grabbed="false"
             class="ant-tree-treenode ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -237,7 +239,6 @@ exports[`Directory Tree DirectoryTree should expend all when use treeData and de
 exports[`Directory Tree defaultExpandAll 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
-  role="tree"
 >
   <div>
     <input
@@ -262,6 +263,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -273,9 +275,10 @@ exports[`Directory Tree defaultExpandAll 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -339,9 +342,10 @@ exports[`Directory Tree defaultExpandAll 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -389,9 +393,10 @@ exports[`Directory Tree defaultExpandAll 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -439,9 +444,10 @@ exports[`Directory Tree defaultExpandAll 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -505,9 +511,10 @@ exports[`Directory Tree defaultExpandAll 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -555,9 +562,10 @@ exports[`Directory Tree defaultExpandAll 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -614,7 +622,6 @@ exports[`Directory Tree defaultExpandAll 1`] = `
 exports[`Directory Tree defaultExpandParent 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
-  role="tree"
 >
   <div>
     <input
@@ -639,6 +646,7 @@ exports[`Directory Tree defaultExpandParent 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -650,9 +658,10 @@ exports[`Directory Tree defaultExpandParent 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -716,9 +725,10 @@ exports[`Directory Tree defaultExpandParent 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -791,7 +801,6 @@ exports[`Directory Tree defaultExpandParent 1`] = `
 exports[`Directory Tree expand with state control click 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
-  role="tree"
 >
   <div>
     <input
@@ -816,6 +825,7 @@ exports[`Directory Tree expand with state control click 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -827,9 +837,10 @@ exports[`Directory Tree expand with state control click 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -893,9 +904,10 @@ exports[`Directory Tree expand with state control click 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -952,7 +964,6 @@ exports[`Directory Tree expand with state control click 1`] = `
 exports[`Directory Tree expand with state control doubleClick 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
-  role="tree"
 >
   <div>
     <input
@@ -977,6 +988,7 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -988,9 +1000,10 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1054,9 +1067,10 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1113,7 +1127,6 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
 exports[`Directory Tree expandedKeys update 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
-  role="tree"
 >
   <div>
     <input
@@ -1138,6 +1151,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -1149,9 +1163,10 @@ exports[`Directory Tree expandedKeys update 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1215,9 +1230,10 @@ exports[`Directory Tree expandedKeys update 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1281,9 +1297,10 @@ exports[`Directory Tree expandedKeys update 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1331,9 +1348,10 @@ exports[`Directory Tree expandedKeys update 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1390,7 +1408,6 @@ exports[`Directory Tree expandedKeys update 1`] = `
 exports[`Directory Tree group select 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
-  role="tree"
 >
   <div>
     <input
@@ -1415,6 +1432,7 @@ exports[`Directory Tree group select 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -1426,9 +1444,10 @@ exports[`Directory Tree group select 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1492,9 +1511,10 @@ exports[`Directory Tree group select 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1542,9 +1562,10 @@ exports[`Directory Tree group select 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1592,9 +1613,10 @@ exports[`Directory Tree group select 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1658,9 +1680,10 @@ exports[`Directory Tree group select 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1708,9 +1731,10 @@ exports[`Directory Tree group select 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1767,7 +1791,6 @@ exports[`Directory Tree group select 1`] = `
 exports[`Directory Tree group select 2`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
-  role="tree"
 >
   <div>
     <input
@@ -1792,6 +1815,7 @@ exports[`Directory Tree group select 2`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -1803,9 +1827,10 @@ exports[`Directory Tree group select 2`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1869,9 +1894,10 @@ exports[`Directory Tree group select 2`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1919,9 +1945,10 @@ exports[`Directory Tree group select 2`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -1969,9 +1996,10 @@ exports[`Directory Tree group select 2`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2035,9 +2063,10 @@ exports[`Directory Tree group select 2`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2085,9 +2114,10 @@ exports[`Directory Tree group select 2`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2144,7 +2174,6 @@ exports[`Directory Tree group select 2`] = `
 exports[`Directory Tree rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-rtl"
-  role="tree"
 >
   <div>
     <input
@@ -2169,6 +2198,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -2188,7 +2218,6 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
 exports[`Directory Tree rtl render component should be rendered correctly in RTL direction 2`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-rtl ant-tree-directory ant-tree-directory-rtl"
-  role="tree"
 >
   <div>
     <input
@@ -2213,6 +2242,7 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -2232,7 +2262,6 @@ exports[`Directory Tree rtl render component should be rendered correctly in RTL
 exports[`Directory Tree selectedKeys update 1`] = `
 <div
   class="ant-tree ant-tree-block-node ant-tree-directory"
-  role="tree"
 >
   <div>
     <input
@@ -2257,6 +2286,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -2268,9 +2298,10 @@ exports[`Directory Tree selectedKeys update 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2334,9 +2365,10 @@ exports[`Directory Tree selectedKeys update 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2384,9 +2416,10 @@ exports[`Directory Tree selectedKeys update 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2434,9 +2467,10 @@ exports[`Directory Tree selectedKeys update 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2500,9 +2534,10 @@ exports[`Directory Tree selectedKeys update 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -2550,9 +2585,10 @@ exports[`Directory Tree selectedKeys update 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
diff --git a/components/tree/__tests__/__snapshots__/index.test.tsx.snap b/components/tree/__tests__/__snapshots__/index.test.tsx.snap
index 503b760c71..4701b19f0d 100644
--- a/components/tree/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/tree/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Tree icon and switcherIcon of Tree with showLine should render correctly 1`] = `
 <div
   class="ant-tree ant-tree-show-line"
-  role="tree"
 >
   <div>
     <input
@@ -28,6 +27,7 @@ exports[`Tree icon and switcherIcon of Tree with showLine should render correctl
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -39,9 +39,10 @@ exports[`Tree icon and switcherIcon of Tree with showLine should render correctl
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -69,9 +70,10 @@ exports[`Tree icon and switcherIcon of Tree with showLine should render correctl
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -97,9 +99,10 @@ exports[`Tree icon and switcherIcon of Tree with showLine should render correctl
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -155,7 +158,6 @@ exports[`Tree icon and switcherIcon of Tree with showLine should render correctl
 exports[`Tree showLine is object type should render correctly 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide ant-tree-show-line"
-  role="tree"
 >
   <div>
     <input
@@ -180,6 +182,7 @@ exports[`Tree showLine is object type should render correctly 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -191,9 +194,10 @@ exports[`Tree showLine is object type should render correctly 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -237,9 +241,10 @@ exports[`Tree showLine is object type should render correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -287,9 +292,10 @@ exports[`Tree showLine is object type should render correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -321,9 +327,10 @@ exports[`Tree showLine is object type should render correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -355,9 +362,10 @@ exports[`Tree showLine is object type should render correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -389,9 +397,10 @@ exports[`Tree showLine is object type should render correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -439,9 +448,10 @@ exports[`Tree showLine is object type should render correctly 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -498,7 +508,6 @@ exports[`Tree showLine is object type should render correctly 1`] = `
 exports[`Tree support switcherLoadingIcon prop when loadData 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
-  role="tree"
 >
   <div>
     <input
@@ -523,6 +532,7 @@ exports[`Tree support switcherLoadingIcon prop when loadData 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -534,9 +544,10 @@ exports[`Tree support switcherLoadingIcon prop when loadData 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -559,9 +570,10 @@ exports[`Tree support switcherLoadingIcon prop when loadData 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-loading"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -593,9 +605,10 @@ exports[`Tree support switcherLoadingIcon prop when loadData 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-loading ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -636,7 +649,6 @@ exports[`Tree support switcherLoadingIcon prop when loadData 1`] = `
 exports[`Tree switcherIcon in Tree could be string 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
-  role="tree"
 >
   <div>
     <input
@@ -661,6 +673,7 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -672,9 +685,10 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -697,9 +711,10 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -724,9 +739,10 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -760,7 +776,6 @@ exports[`Tree switcherIcon in Tree could be string 1`] = `
 exports[`Tree switcherIcon should be loading icon when loadData 1`] = `
 <div
   class="ant-tree ant-tree-icon-hide"
-  role="tree"
 >
   <div>
     <input
@@ -785,6 +800,7 @@ exports[`Tree switcherIcon should be loading icon when loadData 1`] = `
   </div>
   <div
     class="ant-tree-list"
+    role="tree"
     style="position: relative;"
   >
     <div
@@ -796,9 +812,10 @@ exports[`Tree switcherIcon should be loading icon when loadData 1`] = `
           style="display: flex; flex-direction: column;"
         >
           <div
-            aria-grabbed="false"
+            aria-expanded="true"
             class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -821,9 +838,10 @@ exports[`Tree switcherIcon should be loading icon when loadData 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
@@ -850,9 +868,10 @@ exports[`Tree switcherIcon should be loading icon when loadData 1`] = `
             </span>
           </div>
           <div
-            aria-grabbed="false"
+            aria-expanded="false"
             class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
             draggable="false"
+            role="treeitem"
           >
             <span
               aria-hidden="true"
diff --git a/components/tree/demo/directory-debug.tsx b/components/tree/demo/directory-debug.tsx
index f8351f4eca..a5427d8b0f 100644
--- a/components/tree/demo/directory-debug.tsx
+++ b/components/tree/demo/directory-debug.tsx
@@ -46,7 +46,9 @@ const BasicDemo = () => <DirectoryTree {...sharedProps} multiple treeData={treeD
 
 const NormalDemo = () => <Tree {...sharedProps} defaultSelectedKeys={['0-1']} />;
 
-const NormalCheckDemo = () => <Tree {...sharedProps} checkable defaultSelectedKeys={['0-1','0-0-0', '0-0-1','0-1-1']} />;
+const NormalCheckDemo = () => (
+  <Tree {...sharedProps} checkable defaultSelectedKeys={['0-1', '0-0-0', '0-0-1', '0-1-1']} />
+);
 
 const NormalDragDemo = () => <Tree {...sharedProps} draggable defaultSelectedKeys={['0-1-0']} />;
 
diff --git a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
index cb48319d35..1e48eeea5f 100644
--- a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -895,6 +895,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="icon"
         />
@@ -914,6 +915,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="text"
         />
@@ -933,6 +935,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="both"
         />
diff --git a/components/typography/__tests__/__snapshots__/demo.test.tsx.snap b/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
index 988f00112a..55df5bc979 100644
--- a/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
@@ -725,6 +725,7 @@ Array [
         <input
           checked=""
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="icon"
         />
@@ -744,6 +745,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="text"
         />
@@ -763,6 +765,7 @@ Array [
       >
         <input
           class="ant-radio-input"
+          name="test-id"
           type="radio"
           value="both"
         />
diff --git a/package.json b/package.json
index 5baea96ad9..58a654978c 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "test": "jest --config .jest.js --no-cache",
     "test:all": "sh -e ./scripts/test-all.sh",
     "test:dekko": "tsx ./tests/dekko/index.test.ts",
-    "test:image": "jest --config .jest.image.js --no-cache -i -u --forceExit",
+    "test:image": "cross-env MOCK_USE_ID=false jest --config .jest.image.js --no-cache -i -u --forceExit",
     "test:node": "npm run version && jest --config .jest.node.js --no-cache",
     "test:package-diff": "antd-tools run package-diff",
     "test:site": "jest --config .jest.site.js",
@@ -106,12 +106,12 @@
   },
   "dependencies": {
     "@ant-design/colors": "^7.2.0",
-    "@ant-design/cssinjs": "^1.21.1",
+    "@ant-design/cssinjs": "^1.22.0",
     "@ant-design/cssinjs-utils": "^1.1.3",
+    "@ant-design/fast-color": "^2.0.6",
     "@ant-design/icons": "^5.5.2",
     "@ant-design/react-slick": "~1.1.2",
-    "@babel/runtime": "^7.25.7",
-    "@ctrl/tinycolor": "^3.6.1",
+    "@babel/runtime": "^7.26.0",
     "@rc-component/color-picker": "~2.0.1",
     "@rc-component/mutate-observer": "^1.1.0",
     "@rc-component/qrcode": "~1.0.0",
@@ -120,36 +120,36 @@
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.11",
-    "rc-cascader": "~3.30.0",
-    "rc-checkbox": "~3.3.0",
+    "rc-cascader": "~3.32.0",
+    "rc-checkbox": "~3.5.0",
     "rc-collapse": "~3.9.0",
     "rc-dialog": "~9.6.0",
     "rc-drawer": "~7.2.0",
     "rc-dropdown": "~4.2.1",
     "rc-field-form": "~2.7.0",
     "rc-image": "~7.11.0",
-    "rc-input": "~1.6.4",
-    "rc-input-number": "~9.3.0",
-    "rc-mentions": "~2.17.0",
+    "rc-input": "~1.7.2",
+    "rc-input-number": "~9.4.0",
+    "rc-mentions": "~2.19.1",
     "rc-menu": "~9.16.0",
     "rc-motion": "^2.9.5",
     "rc-notification": "~5.6.2",
     "rc-pagination": "~5.0.0",
-    "rc-picker": "~4.8.3",
+    "rc-picker": "~4.9.0",
     "rc-progress": "~4.0.0",
     "rc-rate": "~2.13.0",
     "rc-resize-observer": "^1.4.3",
-    "rc-segmented": "~2.5.0",
+    "rc-segmented": "~2.7.0",
     "rc-select": "~14.16.4",
     "rc-slider": "~11.1.8",
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.50.1",
-    "rc-tabs": "~15.4.0",
-    "rc-textarea": "~1.8.2",
-    "rc-tooltip": "~6.2.1",
-    "rc-tree": "~5.10.1",
-    "rc-tree-select": "~5.24.5",
+    "rc-tabs": "~15.5.0",
+    "rc-textarea": "~1.9.0",
+    "rc-tooltip": "~6.3.2",
+    "rc-tree": "~5.12.4",
+    "rc-tree-select": "~5.26.0",
     "rc-upload": "~4.8.1",
     "rc-util": "^5.44.3",
     "scroll-into-view-if-needed": "^3.1.0",
@@ -160,21 +160,21 @@
     "@ant-design/happy-work-theme": "^1.0.0",
     "@ant-design/tools": "^18.0.2",
     "@ant-design/v5-patch-for-react-19": "^1.0.2",
-    "@antfu/eslint-config": "^3.8.0",
+    "@antfu/eslint-config": "^3.11.2",
     "@antv/g6": "^4.8.24",
     "@biomejs/biome": "^1.9.4",
-    "@codecov/webpack-plugin": "^1.2.1",
-    "@codesandbox/sandpack-react": "^2.19.9",
+    "@codecov/webpack-plugin": "^1.4.0",
+    "@codesandbox/sandpack-react": "^2.19.10",
     "@dnd-kit/core": "^6.2.0",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@emotion/css": "^11.13.4",
-    "@emotion/react": "^11.13.3",
+    "@emotion/css": "^11.13.5",
+    "@emotion/react": "^11.13.5",
     "@emotion/server": "^11.11.0",
-    "@eslint-react/eslint-plugin": "^1.15.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-    "@inquirer/prompts": "^7.0.0",
+    "@eslint-react/eslint-plugin": "^1.17.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
+    "@inquirer/prompts": "^7.1.0",
     "@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",
     "@microflash/rehype-figure": "^2.1.1",
     "@npmcli/run-script": "^9.0.1",
@@ -183,10 +183,10 @@
     "@size-limit/file": "^11.1.6",
     "@stackblitz/sdk": "^1.11.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/adm-zip": "^0.5.5",
+    "@types/adm-zip": "^0.5.6",
     "@types/ali-oss": "^6.16.11",
     "@types/cli-progress": "^3.11.6",
     "@types/fs-extra": "^11.0.4",
@@ -201,7 +201,8 @@
     "@types/jsdom": "^21.1.7",
     "@types/lodash": "^4.17.12",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^22.7.7",
+    "@types/node": "^22.10.1",
+    "@types/nprogress": "^0.2.3",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
     "@types/prismjs": "^1.26.4",
@@ -220,7 +221,7 @@
     "adm-zip": "^0.5.16",
     "ali-oss": "^6.21.0",
     "antd-img-crop": "^4.23.0",
-    "antd-style": "^3.7.0",
+    "antd-style": "^3.7.1",
     "antd-token-previewer": "^2.0.8",
     "axios": "^1.7.7",
     "chalk": "^5.0.0",
@@ -233,12 +234,12 @@
     "dotenv": "^16.4.5",
     "dumi": "~2.4.17",
     "dumi-plugin-color-chunk": "^1.1.2",
-    "eslint": "^9.13.0",
+    "eslint": "^9.15.0",
     "eslint-plugin-compat": "^6.0.1",
-    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-react-hooks": "^5.2.0-canary-6907aa2a-20241220",
-    "eslint-plugin-react-refresh": "^0.4.13",
+    "eslint-plugin-react-refresh": "^0.4.14",
     "fast-glob": "^3.3.2",
     "fetch-jsonp": "^1.3.0",
     "fs-extra": "^11.2.0",
@@ -275,10 +276,10 @@
     "p-all": "^5.0.0",
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "pretty-format": "^29.7.0",
     "prismjs": "^1.29.0",
-    "puppeteer": "^23.6.0",
+    "puppeteer": "^23.9.0",
     "qs": "^6.13.0",
     "rc-footer": "^0.6.8",
     "rc-tween-one": "^3.0.6",
@@ -318,10 +319,10 @@
     "terser": "^5.36.0",
     "tsx": "^4.19.2",
     "typedoc": "^0.27.0",
-    "typescript": "~5.7.0",
-    "vanilla-jsoneditor": "^2.0.0",
+    "typescript": "~5.7.2",
+    "vanilla-jsoneditor": "^2.3.1",
     "vanilla-tilt": "^1.8.1",
-    "webpack": "^5.95.0",
+    "webpack": "^5.97.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "xhr-mock": "^2.5.1"
   },
diff --git a/tests/setup.ts b/tests/setup.ts
index 8c8868f5ee..f83e206617 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -74,3 +74,21 @@ if (typeof MessageChannel === 'undefined') {
     return { port1, port2 };
   };
 }
+
+// Mock useId to return a stable id for snapshot testing
+jest.mock('react', () => {
+  const originReact = jest.requireActual('react');
+
+  let cloneReact = {
+    ...originReact,
+  };
+
+  if (process.env.MOCK_USE_ID !== 'false') {
+    cloneReact = {
+      ...cloneReact,
+      useId: () => 'test-id',
+    };
+  }
+
+  return cloneReact;
+});