refactor: remove TransButton in Table/Transfer/Typography (#51068)

components/_util/__tests__/transButton.test.tsx

@@ -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');
-  });
-});

components/_util/__tests__/util.test.tsx

@@ -1,10 +1,6 @@
-import React from 'react';
+import { waitFakeTimer } from '../../../tests/utils';
-import KeyCode from 'rc-util/lib/KeyCode';
-
-import { fireEvent, render, 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);

components/_util/transButton.tsx

@@ -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;

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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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;"

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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <span
         aria-label="copy"
@@ -471,7 +469,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </span>,
   <span
     class="ant-input-affix-wrapper ant-input-outlined"

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,
+  },
+});

components/style/operationUnit.ts

@@ -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,
-  },
-});

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',

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={() => {
+          onClick={() => onRemove?.(item)}
-            onRemove?.(item);
-          }}
         >
           <DeleteOutlined />
-        </TransButton>
+        </button>
       </li>
     );
   }

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"
+              type="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
             >
               <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"
+              type="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
             >
               <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"
+              type="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
             >
               <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"
+              type="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
             >
               <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"
+              type="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
             >
               <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"
+              type="button"
-              style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-              tabindex="0"
             >
               <span
                 aria-label="delete"
@@ -8489,7 +8477,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
         </ul>
       </div>

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"
+              type="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
             >
               <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"
+              type="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
             >
               <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"
+              type="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
             >
               <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"
+              type="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
             >
               <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"
+              type="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
             >
               <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"
+              type="button"
-              style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-              tabindex="0"
             >
               <span
                 aria-label="delete"
@@ -5568,7 +5556,7 @@ Array [
                   />
                 </svg>
               </span>
-            </div>
+            </button>
           </li>
         </ul>
       </div>

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',
+          '&:hover, &:focus': {
-          transition: `all ${motionDurationSlow}`,
+            color: colorTextSecondary,
-
-          '&:hover': {
-            color: token.colorLinkHover,
-          },
-
-          '&::after': {
-            position: 'absolute',
-            inset: `-${unit(itemPaddingBlock)} -50%`,
-            content: '""',
           },
         },
 

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>
   );
 };

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;
   };

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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"
-      tabindex="0"
     >
       <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;"

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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <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"
+      type="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
-      tabindex="0"
     >
       <span
         aria-label="copy"
@@ -1603,7 +1553,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </span>,
 ]
 `;

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();
       }
 

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', () => {
+  it('should trigger callback when press {enter}', async () => {
-    const onEditStart = jest.fn();
     const onCopy = jest.fn();
-
+    const onEditStart = jest.fn();
     const { container: wrapper } = render(
-      <Paragraph
+      <Paragraph copyable={{ onCopy }} editable={{ onStart: onEditStart }}>
-        copyable={{
-          onCopy,
-        }}
-        editable={{
-          onStart: onEditStart,
-        }}
-      >
         test
       </Paragraph>,
     );
-    const timer: any = 9527;
+    const copyButton = wrapper.querySelector('.ant-typography-copy') as HTMLButtonElement;
-    jest.spyOn(window, 'setTimeout').mockReturnValue(timer);
+    expect(copyButton).toBeTruthy();
-    jest.spyOn(window, 'clearTimeout');
+    // https://github.com/testing-library/user-event/issues/179#issuecomment-1125146667
-    // must copy first, because editing button will hide copy button
+    copyButton.focus();
-    fireEvent.keyUp(wrapper.querySelectorAll('.ant-typography-copy')[0], {
+    userEvent.keyboard('{enter}');
-      keyCode: KeyCode.ENTER,
+    await waitFor(() => expect(onCopy).toHaveBeenCalledTimes(1));
-    });
+    const editButton = wrapper.querySelector('.ant-typography-edit') as HTMLButtonElement;
-    fireEvent.keyUp(wrapper.querySelectorAll('.anticon-edit')[0], { keyCode: KeyCode.ENTER });
+    expect(editButton).toBeTruthy();
-
+    editButton.focus();
-    expect(onEditStart.mock.calls.length).toBe(1);
+    userEvent.keyboard('{enter}');
-    expect(onCopy.mock.calls.length).toBe(1);
+    await waitFor(() => expect(onEditStart).toHaveBeenCalledTimes(1));
-    jest.restoreAllMocks();
   });
 });

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);

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,