feat: add tabIndex option for paragraph

ant-design · Apr 24, 2024 · c240ea8 · c240ea8
1 parent 5c2e6e3
commit c240ea8
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 4 deletions.
diff --git a/components/_util/transButton.tsx b/components/_util/transButton.tsx
@@ -11,6 +11,7 @@ interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
   noStyle?: boolean;
   autoFocus?: boolean;
   disabled?: boolean;
+  tabIndex?: number;
 }
 
 const inlineStyle: React.CSSProperties = {
@@ -37,7 +38,7 @@ const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, r
     }
   };
 
-  const { style, noStyle, disabled, ...restProps } = props;
+  const { style, noStyle, disabled, tabIndex = 0, ...restProps } = props;
 
   let mergedStyle: React.CSSProperties = {};
 
@@ -59,7 +60,7 @@ const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, r
   return (
     <div
       role="button"
-      tabIndex={0}
+      tabIndex={tabIndex}
       ref={ref}
       {...restProps}
       onKeyDown={onKeyDown}

diff --git a/components/typography/Base/CopyBtn.tsx b/components/typography/Base/CopyBtn.tsx
@@ -17,10 +17,21 @@ export interface CopyBtnProps extends Omit<CopyConfig, 'onCopy'> {
   onCopy: React.MouseEventHandler<HTMLDivElement>;
   iconOnly: boolean;
   loading: boolean;
+  tabIndex?: number;
 }
 
 export default function CopyBtn(props: CopyBtnProps) {
-  const { prefixCls, copied, locale = {}, onCopy, iconOnly, tooltips, icon, loading } = props;
+  const {
+    prefixCls,
+    copied,
+    locale = {},
+    onCopy,
+    iconOnly,
+    tooltips,
+    icon,
+    loading,
+    tabIndex,
+  } = props;
 
   const tooltipNodes = toList(tooltips);
   const iconNodes = toList(icon);
@@ -42,6 +53,7 @@ export default function CopyBtn(props: CopyBtnProps) {
         })}
         onClick={onCopy as any}
         aria-label={ariaLabel}
+        tabIndex={tabIndex}
       >
         {copied
           ? getNode(iconNodes[1], <CheckOutlined />, true)

diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
@@ -33,6 +33,7 @@ export interface CopyConfig {
   icon?: React.ReactNode;
   tooltips?: React.ReactNode;
   format?: 'text/plain' | 'text/html';
+  tabIndex?: number;
 }
 
 interface EditConfig {
@@ -48,6 +49,7 @@ interface EditConfig {
   autoSize?: boolean | AutoSizeType;
   triggerType?: ('icon' | 'text')[];
   enterIcon?: React.ReactNode;
+  tabIndex?: number;
 }
 
 export interface EllipsisConfig {
@@ -391,7 +393,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   const renderEdit = () => {
     if (!enableEdit) return;
 
-    const { icon, tooltip } = editConfig;
+    const { icon, tooltip, tabIndex } = editConfig;
 
     const editTitle = toArray(tooltip)[0] || textLocale?.edit;
     const ariaLabel = typeof editTitle === 'string' ? editTitle : '';
@@ -403,6 +405,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
           className={`${prefixCls}-edit`}
           onClick={onEditClick}
           aria-label={ariaLabel}
+          tabIndex={tabIndex}
         >
           {icon || <EditOutlined role="button" />}
         </TransButton>

diff --git a/components/typography/__tests__/copy.test.tsx b/components/typography/__tests__/copy.test.tsx
@@ -328,4 +328,35 @@ describe('Typography copy', () => {
     );
     expect(container.querySelector('.ant-typography-copy')).toBeTruthy();
   });
+
+  it('tabIndex of copy button', () => {
+    const { container, rerender } = render(<Base component="p">test</Base>);
+
+    rerender(
+      <Base component="p" copyable={{ tabIndex: -1 }}>
+        test
+      </Base>,
+    );
+    expect(container.querySelector('.ant-typography-copy')?.getAttribute('tabIndex')).toBe('-1');
+  });
+
+  it('locale text for button tooltip', async () => {
+    const { container, rerender } = render(<Base component="p">test</Base>);
+
+    rerender(
+      <Base component="p" copyable={{ tabIndex: -1 }}>
+        test
+      </Base>,
+    );
+
+    fireEvent.mouseEnter(container.querySelectorAll('.ant-typography-copy')[0]);
+    await waitFakeTimer();
+    await waitFor(() => {
+      expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copy');
+    });
+    fireEvent.click(container.querySelectorAll('.ant-typography-copy')[0]);
+    await waitFor(() => {
+      expect(container.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copied');
+    });
+  });
 });
diff --git a/components/typography/__tests__/editable.test.tsx b/components/typography/__tests__/editable.test.tsx
@@ -90,4 +90,16 @@ describe('Typography.Editable', () => {
     );
     expect(container.querySelector('.ant-typography-edit')).toBeTruthy();
   });
+
+  it('tabIndex of edit button', () => {
+    const { container, rerender } = render(<Base component="p">test</Base>);
+    expect(container.querySelector('.ant-typography-edit')).toBeFalsy();
+
+    rerender(
+      <Base component="p" editable={{ tabIndex: -1 }}>
+        test
+      </Base>,
+    );
+    expect(container.querySelector('.ant-typography-edit')?.getAttribute('tabIndex')).toBe('-1');
+  });
 });
diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md
@@ -92,6 +92,7 @@ Common props ref：[Common props](/docs/react/common-props)
       icon: ReactNode,
       tooltips: false | [ReactNode, ReactNode],
       format: 'text/plain' | 'text/html',
+      tabIndex: number,
     }
 
 | Property | Description | Type | Default | Version |
@@ -101,6 +102,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | text | The text to copy | string | - |  |
 | tooltips | Custom tooltip text, hide when it is false | \[ReactNode, ReactNode] | \[`Copy`, `Copied`] | 4.4.0 |
 | onCopy | Called when copied text | function | - |  |
+| tabIndex | Set tabIndex of the copy button | number | 0 | 5.17.0 |
 
 ### editable
 
@@ -117,6 +119,7 @@ Common props ref：[Common props](/docs/react/common-props)
       onEnd: function,
       triggerType: ('icon' | 'text')[],
       enterIcon: ReactNode,
+      tabIndex: number,
     }
 
 | Property | Description | Type | Default | Version |
@@ -133,6 +136,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | onEnd | Called when type ENTER to exit editable state | function | - | 4.14.0 |
 | triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`> | \[`icon`] |  |
 | enterIcon | Custom "enter" icon in the edit field (passing `null` removes the icon) | ReactNode | `<EnterOutlined />` | 4.17.0 |
+| tabIndex | Set tabIndex of the edit button | number | 0 | 5.17.0 |
 
 ### ellipsis
 

diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md
@@ -93,6 +93,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
       icon: ReactNode,
       tooltips: false | [ReactNode, ReactNode],
       format: 'text/plain' | 'text/html',
+      tabIndex: number,
     }
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -102,6 +103,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | text | 拷贝到剪切板里的文本 | string | - |  |
 | tooltips | 自定义提示文案，为 false 时隐藏文案 | \[ReactNode, ReactNode] | \[`复制`, `复制成功`] | 4.4.0 |
 | onCopy | 拷贝成功的回调函数 | function | - |  |
+| tabIndex | 自定义复制按钮的 tabIndex | number | 0 | 5.17.0 |
 
 ### editable
 
@@ -118,6 +120,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
       onEnd: function,
       triggerType: ('icon' | 'text')[],
       enterIcon: ReactNode,
+      tabIndex: number,
     }
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -134,6 +137,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | onEnd | 按 ENTER 结束编辑状态时触发 | function | - | 4.14.0 |
 | triggerType | 编辑模式触发器类型，图标、文本或者两者都设置（不设置图标作为触发器时它会隐藏） | Array&lt;`icon`\|`text`> | \[`icon`] |  |
 | enterIcon | 在编辑段中自定义“enter”图标（传递“null”将删除图标） | ReactNode | `<EnterOutlined />` | 4.17.0 |
+| tabIndex | 自定义编辑按钮的 tabIndex | number | 0 | 5.17.0 |
 
 ### ellipsis