diff --git a/components/_util/__tests__/transButton.test.tsx b/components/_util/__tests__/transButton.test.tsx
deleted file mode 100644
index 41806b843d..0000000000
--- a/components/_util/__tests__/transButton.test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { render } from '../../../tests/utils';
-import TransButton from '../transButton';
-
-describe('transButton component', () => {
-  it('disabled should update style', () => {
-    const { container } = render(<TransButton disabled />);
-    expect(container.querySelector('div')?.style.pointerEvents).toBe('none');
-  });
-});
diff --git a/components/_util/__tests__/util.test.tsx b/components/_util/__tests__/util.test.tsx
index 247492c716..067c9aa518 100644
--- a/components/_util/__tests__/util.test.tsx
+++ b/components/_util/__tests__/util.test.tsx
@@ -1,10 +1,6 @@
-import React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { waitFakeTimer } from '../../../tests/utils';
 import { isStyleSupport } from '../styleChecker';
 import throttleByAnimationFrame from '../throttleByAnimationFrame';
-import TransButton from '../transButton';
 
 describe('Test utils function', () => {
   describe('throttle', () => {
@@ -45,29 +41,6 @@ describe('Test utils function', () => {
     });
   });
 
-  describe('TransButton', () => {
-    it('can be focus/blur', () => {
-      const ref = React.createRef<HTMLDivElement>();
-      render(<TransButton ref={ref}>TransButton</TransButton>);
-      expect(typeof ref.current?.focus).toBe('function');
-      expect(typeof ref.current?.blur).toBe('function');
-    });
-
-    it('should trigger onClick when press enter', () => {
-      const onClick = jest.fn();
-
-      const { container } = render(<TransButton onClick={onClick}>TransButton</TransButton>);
-
-      // callback should trigger
-      fireEvent.keyUp(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
-      expect(onClick).toHaveBeenCalledTimes(1);
-
-      // callback should not trigger
-      fireEvent.keyDown(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
   describe('style', () => {
     it('isStyleSupport', () => {
       expect(isStyleSupport('color')).toBe(true);
diff --git a/components/_util/transButton.tsx b/components/_util/transButton.tsx
deleted file mode 100644
index a62dcd038d..0000000000
--- a/components/_util/transButton.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Wrap of sub component which need use as Button capacity (like Icon component).
- *
- * This helps accessibility reader to tread as a interactive button to operation.
- */
-import * as React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-
-interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
-  onClick?: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  noStyle?: boolean;
-  autoFocus?: boolean;
-  disabled?: boolean;
-  tabIndex?: number;
-}
-
-const inlineStyle: React.CSSProperties = {
-  border: 0,
-  background: 'transparent',
-  padding: 0,
-  lineHeight: 'inherit',
-  display: 'inline-block',
-};
-
-const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, ref) => {
-  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
-    const { keyCode } = event;
-    if (keyCode === KeyCode.ENTER) {
-      event.preventDefault();
-    }
-  };
-
-  const onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
-    const { keyCode } = event;
-    const { onClick } = props;
-    if (keyCode === KeyCode.ENTER && onClick) {
-      onClick();
-    }
-  };
-
-  const { style, noStyle, disabled, tabIndex = 0, ...restProps } = props;
-
-  let mergedStyle: React.CSSProperties = {};
-
-  if (!noStyle) {
-    mergedStyle = {
-      ...inlineStyle,
-    };
-  }
-
-  if (disabled) {
-    mergedStyle.pointerEvents = 'none';
-  }
-
-  mergedStyle = {
-    ...mergedStyle,
-    ...style,
-  };
-
-  return (
-    <div
-      role="button"
-      tabIndex={tabIndex}
-      ref={ref}
-      {...restProps}
-      onKeyDown={onKeyDown}
-      onKeyUp={onKeyUp}
-      style={mergedStyle}
-    />
-  );
-});
-
-export default TransButton;
diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
index dd77b80d71..9d4341bcb7 100644
--- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -721,12 +721,10 @@ Array [
     class="ant-typography"
   >
     Ant Design
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -747,7 +745,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
index 17157b7893..8388164360 100644
--- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
@@ -445,12 +445,10 @@ Array [
     class="ant-typography"
   >
     Ant Design
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -471,7 +469,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </span>,
   <span
     class="ant-input-affix-wrapper ant-input-outlined"
diff --git a/components/style/index.tsx b/components/style/index.tsx
index d5089ff20c..624ef2c11f 100644
--- a/components/style/index.tsx
+++ b/components/style/index.tsx
@@ -3,8 +3,6 @@ import type { CSSObject } from '@ant-design/cssinjs';
 
 import type { AliasToken } from '../theme/internal';
 
-export { operationUnit } from './operationUnit';
-
 export const textEllipsis: CSSObject = {
   overflow: 'hidden',
   whiteSpace: 'nowrap',
@@ -145,3 +143,27 @@ export const genFocusStyle = (token: AliasToken): CSSObject => ({
     ...genFocusOutline(token),
   },
 });
+
+export const operationUnit = (token: AliasToken): CSSObject => ({
+  // FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
+  // And Typography use this to generate link style which should not do this.
+  color: token.colorLink,
+  textDecoration: token.linkDecoration,
+  outline: 'none',
+  cursor: 'pointer',
+  transition: `all ${token.motionDurationSlow}`,
+  border: 0,
+  padding: 0,
+  background: 'none',
+  userSelect: 'none',
+
+  ...genFocusStyle(token),
+
+  '&:focus, &:hover': {
+    color: token.colorLinkHover,
+  },
+
+  '&:active': {
+    color: token.colorLinkActive,
+  },
+});
diff --git a/components/style/operationUnit.ts b/components/style/operationUnit.ts
deleted file mode 100644
index 0f77b62726..0000000000
--- a/components/style/operationUnit.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
-import type { AliasToken } from '../theme/internal';
-
-export const operationUnit = (token: AliasToken): CSSObject => ({
-  // FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
-  // And Typography use this to generate link style which should not do this.
-  color: token.colorLink,
-  textDecoration: 'none',
-  outline: 'none',
-  cursor: 'pointer',
-  transition: `color ${token.motionDurationSlow}`,
-
-  '&:focus, &:hover': {
-    color: token.colorLinkHover,
-  },
-
-  '&:active': {
-    color: token.colorLinkActive,
-  },
-});
diff --git a/components/table/style/expand.ts b/components/table/style/expand.ts
index 119031ace8..09e2c40dca 100644
--- a/components/table/style/expand.ts
+++ b/components/table/style/expand.ts
@@ -55,18 +55,14 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
         ...operationUnit(token),
         position: 'relative',
         float: 'left',
-        boxSizing: 'border-box',
         width: expandIconSize,
         height: expandIconSize,
-        padding: 0,
         color: 'inherit',
         lineHeight: unit(expandIconSize),
         background: tableExpandIconBg,
         border: tableBorder,
         borderRadius,
         transform: `scale(${expandIconScale})`,
-        transition: `all ${motionDurationSlow}`,
-        userSelect: 'none',
 
         '&:focus, &:hover, &:active': {
           borderColor: 'currentcolor',
diff --git a/components/transfer/ListItem.tsx b/components/transfer/ListItem.tsx
index 8b870364a0..45d7919857 100644
--- a/components/transfer/ListItem.tsx
+++ b/components/transfer/ListItem.tsx
@@ -3,7 +3,6 @@ import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
 import classNames from 'classnames';
 
 import type { KeyWiseTransferItem } from '.';
-import TransButton from '../_util/transButton';
 import Checkbox from '../checkbox';
 import { useLocale } from '../locale';
 import defaultLocale from '../locale/en_US';
@@ -53,16 +52,15 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
     return (
       <li {...liProps}>
         {labelNode}
-        <TransButton
+        <button
+          type="button"
           disabled={disabled || item.disabled}
           className={`${prefixCls}-content-item-remove`}
           aria-label={contextLocale?.remove}
-          onClick={() => {
-            onRemove?.(item);
-          }}
+          onClick={() => onRemove?.(item)}
         >
           <DeleteOutlined />
-        </TransButton>
+        </button>
       </li>
     );
   }
diff --git a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
index 858e7b65da..0be3b3ef63 100644
--- a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -8278,12 +8278,10 @@ Array [
             >
               content3
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -8304,7 +8302,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
           <li
             class="ant-transfer-list-content-item"
@@ -8315,12 +8313,10 @@ Array [
             >
               content6
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -8341,7 +8337,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
           <li
             class="ant-transfer-list-content-item"
@@ -8352,12 +8348,10 @@ Array [
             >
               content9
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -8378,7 +8372,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
           <li
             class="ant-transfer-list-content-item"
@@ -8389,12 +8383,10 @@ Array [
             >
               content12
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -8415,7 +8407,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
           <li
             class="ant-transfer-list-content-item"
@@ -8426,12 +8418,10 @@ Array [
             >
               content15
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -8452,7 +8442,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
           <li
             class="ant-transfer-list-content-item"
@@ -8463,12 +8453,10 @@ Array [
             >
               content18
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -8489,7 +8477,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
         </ul>
       </div>
diff --git a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
index c940f3b242..41f4fd8323 100644
--- a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
@@ -5357,12 +5357,10 @@ Array [
             >
               content3
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -5383,7 +5381,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
           <li
             class="ant-transfer-list-content-item"
@@ -5394,12 +5392,10 @@ Array [
             >
               content6
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -5420,7 +5416,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
           <li
             class="ant-transfer-list-content-item"
@@ -5431,12 +5427,10 @@ Array [
             >
               content9
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -5457,7 +5451,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
           <li
             class="ant-transfer-list-content-item"
@@ -5468,12 +5462,10 @@ Array [
             >
               content12
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -5494,7 +5486,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
           <li
             class="ant-transfer-list-content-item"
@@ -5505,12 +5497,10 @@ Array [
             >
               content15
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -5531,7 +5521,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
           <li
             class="ant-transfer-list-content-item"
@@ -5542,12 +5532,10 @@ Array [
             >
               content18
             </span>
-            <div
+            <button
               aria-label="Remove"
               class="ant-transfer-list-content-item-remove"
-              role="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
+              type="button"
             >
               <span
                 aria-label="delete"
@@ -5568,7 +5556,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
         </ul>
       </div>
diff --git a/components/transfer/style/index.ts b/components/transfer/style/index.ts
index a8cb8bf655..c4c464b6ed 100644
--- a/components/transfer/style/index.ts
+++ b/components/transfer/style/index.ts
@@ -1,7 +1,7 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
 
-import { resetComponent, resetIcon, textEllipsis } from '../../style';
+import { resetComponent, resetIcon, textEllipsis, operationUnit } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
@@ -122,6 +122,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
     itemPaddingBlock,
     controlItemBgActive,
     colorTextDisabled,
+    colorTextSecondary,
     listHeight,
     listWidth,
     listWidthLG,
@@ -242,20 +243,11 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
         },
 
         '&-remove': {
-          position: 'relative',
+          ...operationUnit(token),
           color: colorBorder,
 
-          cursor: 'pointer',
-          transition: `all ${motionDurationSlow}`,
-
-          '&:hover': {
-            color: token.colorLinkHover,
-          },
-
-          '&::after': {
-            position: 'absolute',
-            inset: `-${unit(itemPaddingBlock)} -50%`,
-            content: '""',
+          '&:hover, &:focus': {
+            color: colorTextSecondary,
           },
         },
 
diff --git a/components/typography/Base/CopyBtn.tsx b/components/typography/Base/CopyBtn.tsx
index 1b651e40e7..20fafbbd93 100644
--- a/components/typography/Base/CopyBtn.tsx
+++ b/components/typography/Base/CopyBtn.tsx
@@ -5,7 +5,6 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import classNames from 'classnames';
 
 import type { CopyConfig } from '.';
-import TransButton from '../../_util/transButton';
 import type { Locale } from '../../locale';
 import Tooltip from '../../tooltip';
 import { getNode, toList } from './util';
@@ -14,7 +13,7 @@ export interface CopyBtnProps extends Omit<CopyConfig, 'onCopy'> {
   prefixCls: string;
   copied: boolean;
   locale: Locale['Text'];
-  onCopy: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  onCopy: React.MouseEventHandler<HTMLButtonElement>;
   iconOnly: boolean;
   loading: boolean;
 }
@@ -39,7 +38,8 @@ const CopyBtn: React.FC<CopyBtnProps> = ({
 
   return (
     <Tooltip title={copyTitle}>
-      <TransButton
+      <button
+        type="button"
         className={classNames(`${prefixCls}-copy`, {
           [`${prefixCls}-copy-success`]: copied,
           [`${prefixCls}-copy-icon-only`]: iconOnly,
@@ -51,7 +51,7 @@ const CopyBtn: React.FC<CopyBtnProps> = ({
         {copied
           ? getNode(iconNodes[1], <CheckOutlined />, true)
           : getNode(iconNodes[0], btnLoading ? <LoadingOutlined /> : <CopyOutlined />, true)}
-      </TransButton>
+      </button>
     </Tooltip>
   );
 };
diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
index d628447a95..056411ba71 100644
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@@ -10,7 +10,6 @@ import omit from 'rc-util/lib/omit';
 import { composeRef } from 'rc-util/lib/ref';
 
 import { isStyleSupport } from '../../_util/styleChecker';
-import TransButton from '../../_util/transButton';
 import { ConfigContext } from '../../config-provider';
 import useLocale from '../../locale/useLocale';
 import type { TooltipProps } from '../../tooltip';
@@ -31,7 +30,7 @@ export type BaseType = 'secondary' | 'success' | 'warning' | 'danger';
 
 export interface CopyConfig {
   text?: string | (() => string | Promise<string>);
-  onCopy?: (event?: React.MouseEvent<HTMLDivElement>) => void;
+  onCopy?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
   icon?: React.ReactNode;
   tooltips?: React.ReactNode;
   format?: 'text/plain' | 'text/html';
@@ -130,7 +129,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   const [textLocale] = useLocale('Text');
 
   const typographyRef = React.useRef<HTMLElement>(null);
-  const editIconRef = React.useRef<HTMLDivElement>(null);
+  const editIconRef = React.useRef<HTMLButtonElement>(null);
 
   // ============================ MISC ============================
   const prefixCls = getPrefixCls('typography', customizePrefixCls);
@@ -349,14 +348,15 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   const renderExpand = () => {
     const { expandable, symbol } = ellipsisConfig;
     return expandable ? (
-      <TransButton
+      <button
+        type="button"
         key="expand"
         className={`${prefixCls}-${expanded ? 'collapse' : 'expand'}`}
         onClick={(e) => onExpandClick(e!, { expanded: !expanded })}
         aria-label={expanded ? textLocale.collapse : textLocale?.expand}
       >
         {typeof symbol === 'function' ? symbol(expanded) : symbol}
-      </TransButton>
+      </button>
     ) : null;
   };
 
@@ -373,7 +373,8 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
 
     return triggerType.includes('icon') ? (
       <Tooltip key="edit" title={tooltip === false ? '' : editTitle}>
-        <TransButton
+        <button
+          type="button"
           ref={editIconRef}
           className={`${prefixCls}-edit`}
           onClick={onEditClick}
@@ -381,7 +382,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
           tabIndex={tabIndex}
         >
           {icon || <EditOutlined role="button" />}
-        </TransButton>
+        </button>
       </Tooltip>
     ) : null;
   };
diff --git a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
index 40bb1ace3a..cb48319d35 100644
--- a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -440,12 +440,10 @@ Array [
     class="ant-typography"
   >
     This is a copyable text.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -466,7 +464,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -491,12 +489,10 @@ Array [
     class="ant-typography"
   >
     Replace copy text.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -517,7 +513,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -542,12 +538,10 @@ Array [
     class="ant-typography"
   >
     Custom Copy icon and replace tooltips text.
-    <div
+    <button
       aria-label="click here"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="smile"
@@ -568,7 +562,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -593,12 +587,10 @@ Array [
     class="ant-typography"
   >
     Hide Copy tooltips.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -619,7 +611,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -642,12 +634,10 @@ Array [
     class="ant-typography"
   >
     Request copy text.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -668,7 +658,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -692,12 +682,10 @@ Array [
   <span
     class="ant-typography"
   >
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy ant-typography-copy-icon-only"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -718,7 +706,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -750,12 +738,10 @@ Array [
     class="ant-typography"
   >
     This is an editable text.
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -776,7 +762,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -802,12 +788,10 @@ Array [
     class="ant-typography ant-typography-ellipsis"
   >
     This is a loooooooooooooooooooooooooooooooong editable text with suffix.
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -828,7 +812,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -853,12 +837,10 @@ Array [
     class="ant-typography"
   >
     Custom Edit icon and replace tooltip text.
-    <div
+    <button
       aria-label="click to edit text"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="highlight"
@@ -879,7 +861,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -967,12 +949,10 @@ Array [
     class="ant-typography"
   >
     Text or icon as trigger - click to start editing.
-    <div
+    <button
       aria-label="click to edit text"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -993,7 +973,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1018,12 +998,10 @@ Array [
     class="ant-typography"
   >
     Editable text with a custom enter icon in edit field.
-    <div
+    <button
       aria-label="click to edit text"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="highlight"
@@ -1044,7 +1022,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1069,12 +1047,10 @@ Array [
     class="ant-typography"
   >
     Editable text with no enter icon in edit field.
-    <div
+    <button
       aria-label="click to edit text"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="highlight"
@@ -1095,7 +1071,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1120,12 +1096,10 @@ Array [
     class="ant-typography"
   >
     Hide Edit tooltip.
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -1146,7 +1120,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1169,12 +1143,10 @@ Array [
     class="ant-typography"
   >
     This is an editable text with limited length.
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -1195,7 +1167,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1221,12 +1193,10 @@ Array [
     style="margin: 0px;"
   >
     h1. Ant Design
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -1247,7 +1217,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1273,12 +1243,10 @@ Array [
     style="margin: 0px;"
   >
     h2. Ant Design
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -1299,7 +1267,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1325,12 +1293,10 @@ Array [
     style="margin: 0px;"
   >
     h3. Ant Design
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -1351,7 +1317,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1377,12 +1343,10 @@ Array [
     style="margin: 0px;"
   >
     h4. Ant Design
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -1403,7 +1367,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1429,12 +1393,10 @@ Array [
     style="margin: 0px;"
   >
     h5. Ant Design
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -1455,7 +1417,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1652,12 +1614,10 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx extend conte
     class="ant-typography ant-typography-ellipsis"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -1678,7 +1638,7 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx extend conte
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1855,12 +1815,10 @@ Array [
     style="max-width: 400px; font-size: 24px;"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -1881,7 +1839,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1909,12 +1867,10 @@ Array [
     style="max-width: 400px; font-size: 12px;"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -1935,7 +1891,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -1963,12 +1919,10 @@ Array [
     style="width: 400px; font-size: 24px;"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -1989,7 +1943,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -2017,12 +1971,10 @@ Array [
     style="width: 100px;"
   >
     Ant Design is a design language for background applications, is refined by Ant UED Team.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -2043,7 +1995,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -2139,12 +2091,10 @@ Array [
     style="width: 100px; white-space: nowrap;"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -2165,7 +2115,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
diff --git a/components/typography/__tests__/__snapshots__/demo.test.tsx.snap b/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
index f67df07902..988f00112a 100644
--- a/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
@@ -438,12 +438,10 @@ Array [
     class="ant-typography"
   >
     This is a copyable text.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -464,18 +462,16 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <div
     class="ant-typography"
   >
     Replace copy text.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -496,18 +492,16 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <div
     class="ant-typography"
   >
     Custom Copy icon and replace tooltips text.
-    <div
+    <button
       aria-label="click here"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="smile"
@@ -528,18 +522,16 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <div
     class="ant-typography"
   >
     Hide Copy tooltips.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -560,18 +552,16 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <div
     class="ant-typography"
   >
     Request copy text.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -592,17 +582,15 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <span
     class="ant-typography"
   >
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy ant-typography-copy-icon-only"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -623,7 +611,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </span>,
 ]
 `;
@@ -634,12 +622,10 @@ Array [
     class="ant-typography"
   >
     This is an editable text.
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -660,7 +646,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <div
     class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line"
@@ -668,12 +654,10 @@ Array [
     This is a loooooooooooooooooooooooooooooooong editable text 
     <!-- -->
     with suffix.
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -694,18 +678,16 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <div
     class="ant-typography"
   >
     Custom Edit icon and replace tooltip text.
-    <div
+    <button
       aria-label="click to edit text"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="highlight"
@@ -726,7 +708,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   Trigger edit with:,
   <!-- -->,
@@ -797,12 +779,10 @@ Array [
     class="ant-typography"
   >
     Text or icon as trigger - click to start editing.
-    <div
+    <button
       aria-label="click to edit text"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -823,18 +803,16 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <div
     class="ant-typography"
   >
     Editable text with a custom enter icon in edit field.
-    <div
+    <button
       aria-label="click to edit text"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="highlight"
@@ -855,18 +833,16 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <div
     class="ant-typography"
   >
     Editable text with no enter icon in edit field.
-    <div
+    <button
       aria-label="click to edit text"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="highlight"
@@ -887,18 +863,16 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <div
     class="ant-typography"
   >
     Hide Edit tooltip.
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -919,18 +893,16 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <div
     class="ant-typography"
   >
     This is an editable text with limited length.
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -951,19 +923,17 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>,
   <h1
     class="ant-typography"
     style="margin:0"
   >
     h1. Ant Design
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -984,19 +954,17 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </h1>,
   <h2
     class="ant-typography"
     style="margin:0"
   >
     h2. Ant Design
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -1017,19 +985,17 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </h2>,
   <h3
     class="ant-typography"
     style="margin:0"
   >
     h3. Ant Design
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -1050,19 +1016,17 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </h3>,
   <h4
     class="ant-typography"
     style="margin:0"
   >
     h4. Ant Design
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -1083,19 +1047,17 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </h4>,
   <h5
     class="ant-typography"
     style="margin:0"
   >
     h5. Ant Design
-    <div
+    <button
       aria-label="Edit"
       class="ant-typography-edit"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="edit"
@@ -1116,7 +1078,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </h5>,
 ]
 `;
@@ -1233,12 +1195,10 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx correctly 1`
     style="-webkit-line-clamp:2"
   >
     Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -1259,7 +1219,7 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx correctly 1`
           />
         </svg>
       </span>
-    </div>
+    </button>
   </div>
 </div>
 `;
@@ -1397,12 +1357,10 @@ Array [
     style="max-width:400px;font-size:24px"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -1423,7 +1381,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </span>,
   <br />,
   <span
@@ -1431,12 +1389,10 @@ Array [
     style="max-width:400px;font-size:12px"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -1457,7 +1413,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </span>,
   <br />,
   <span
@@ -1465,12 +1421,10 @@ Array [
     style="width:400px;font-size:24px"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -1491,7 +1445,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </span>,
   <br />,
   <span
@@ -1499,12 +1453,10 @@ Array [
     style="width:100px"
   >
     Ant Design is a design language for background applications, is refined by Ant UED Team.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -1525,7 +1477,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </span>,
   <p>
     [Before]
@@ -1577,12 +1529,10 @@ Array [
     style="width:100px;white-space:nowrap"
   >
     In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -1603,7 +1553,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </span>,
 ]
 `;
diff --git a/components/typography/__tests__/copy.test.tsx b/components/typography/__tests__/copy.test.tsx
index 9d7559797d..b6439b76ff 100644
--- a/components/typography/__tests__/copy.test.tsx
+++ b/components/typography/__tests__/copy.test.tsx
@@ -224,7 +224,7 @@ describe('Typography copy', () => {
     });
 
     it('the first parameter of onCopy is the click event', () => {
-      function onCopy(e?: React.MouseEvent<HTMLDivElement>) {
+      function onCopy(e?: React.MouseEvent<HTMLButtonElement>) {
         expect(e).not.toBeUndefined();
       }
 
diff --git a/components/typography/__tests__/index.test.tsx b/components/typography/__tests__/index.test.tsx
index d4ac01487d..28d74d2359 100644
--- a/components/typography/__tests__/index.test.tsx
+++ b/components/typography/__tests__/index.test.tsx
@@ -3,6 +3,7 @@ import { CheckOutlined, HighlightOutlined, LikeOutlined, SmileOutlined } from '@
 import copy from 'copy-to-clipboard';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { resetWarned } from 'rc-util/lib/warning';
+import userEvent from '@testing-library/user-event';
 
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -476,33 +477,24 @@ describe('Typography', () => {
     expect(ref.current instanceof HTMLSpanElement).toBe(true);
   });
 
-  it('Callback on enter key is triggered', () => {
-    const onEditStart = jest.fn();
+  it('should trigger callback when press {enter}', async () => {
     const onCopy = jest.fn();
-
+    const onEditStart = jest.fn();
     const { container: wrapper } = render(
-      <Paragraph
-        copyable={{
-          onCopy,
-        }}
-        editable={{
-          onStart: onEditStart,
-        }}
-      >
+      <Paragraph copyable={{ onCopy }} editable={{ onStart: onEditStart }}>
         test
       </Paragraph>,
     );
-    const timer: any = 9527;
-    jest.spyOn(window, 'setTimeout').mockReturnValue(timer);
-    jest.spyOn(window, 'clearTimeout');
-    // must copy first, because editing button will hide copy button
-    fireEvent.keyUp(wrapper.querySelectorAll('.ant-typography-copy')[0], {
-      keyCode: KeyCode.ENTER,
-    });
-    fireEvent.keyUp(wrapper.querySelectorAll('.anticon-edit')[0], { keyCode: KeyCode.ENTER });
-
-    expect(onEditStart.mock.calls.length).toBe(1);
-    expect(onCopy.mock.calls.length).toBe(1);
-    jest.restoreAllMocks();
+    const copyButton = wrapper.querySelector('.ant-typography-copy') as HTMLButtonElement;
+    expect(copyButton).toBeTruthy();
+    // https://github.com/testing-library/user-event/issues/179#issuecomment-1125146667
+    copyButton.focus();
+    userEvent.keyboard('{enter}');
+    await waitFor(() => expect(onCopy).toHaveBeenCalledTimes(1));
+    const editButton = wrapper.querySelector('.ant-typography-edit') as HTMLButtonElement;
+    expect(editButton).toBeTruthy();
+    editButton.focus();
+    userEvent.keyboard('{enter}');
+    await waitFor(() => expect(onEditStart).toHaveBeenCalledTimes(1));
   });
 });
diff --git a/components/typography/hooks/useCopyClick.ts b/components/typography/hooks/useCopyClick.ts
index 8bf361f78e..3b925ac4c4 100644
--- a/components/typography/hooks/useCopyClick.ts
+++ b/components/typography/hooks/useCopyClick.ts
@@ -32,7 +32,7 @@ const useCopyClick = ({
   React.useEffect(() => cleanCopyId, []);
 
   // Keep copy action up to date
-  const onClick = useEvent(async (e?: React.MouseEvent<HTMLDivElement>) => {
+  const onClick = useEvent(async (e?: React.MouseEvent<HTMLButtonElement>) => {
     e?.preventDefault();
     e?.stopPropagation();
     setCopyLoading(true);
diff --git a/components/typography/style/mixins.ts b/components/typography/style/mixins.ts
index beaec542b8..75433d4915 100644
--- a/components/typography/style/mixins.ts
+++ b/components/typography/style/mixins.ts
@@ -60,11 +60,6 @@ export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
   return {
     'a&, a': {
       ...operationUnit(token),
-      textDecoration: token.linkDecoration,
-
-      '&:active, &:hover': {
-        textDecoration: token.linkHoverDecoration,
-      },
 
       [`&[disabled], &${componentCls}-disabled`]: {
         color: token.colorTextDisabled,