feat: improve accessibility (#775)

* feat: improve accessibility * fix: remove unnecessary role attributes from tab-related buttons * Revert "fix: remove unnecessary role attributes from tab-related buttons" This reverts commit 4c68273. * revert: restore role attribute for add button
react-component · Feb 7, 2025 · cab13b8 · cab13b8
1 parent 9cfae99
commit cab13b8
Show file tree

Hide file tree

Showing 4 changed files with 1 addition and 8 deletions.
diff --git a/src/TabNavList/OperationNode.tsx b/src/TabNavList/OperationNode.tsx
@@ -202,8 +202,6 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
         type="button"
         className={`${prefixCls}-nav-more`}
         style={moreStyle}
-        tabIndex={-1}
-        aria-hidden="true"
         aria-haspopup="listbox"
         aria-controls={popupId}
         id={`${id}-more`}

diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx
@@ -126,6 +126,7 @@ const TabNode: React.FC<TabNodeProps> = props => {
       {removable && (
         <button
           type="button"
+          role="tab"
           aria-label={removeAriaLabel || 'remove'}
           tabIndex={active ? 0 : -1}
           className={`${tabPrefix}-remove`}

diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
@@ -73,11 +73,9 @@ exports[`Tabs.Basic Normal 1`] = `
         aria-controls="rc-tabs-test-more-popup"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-hidden="true"
         class="rc-tabs-nav-more"
         id="rc-tabs-test-more"
         style="visibility: hidden; order: 1;"
-        tabindex="-1"
         type="button"
       >
         More
@@ -148,11 +146,9 @@ exports[`Tabs.Basic Skip invalidate children 1`] = `
         aria-controls="rc-tabs-test-more-popup"
         aria-expanded="false"
         aria-haspopup="listbox"
-        aria-hidden="true"
         class="rc-tabs-nav-more"
         id="rc-tabs-test-more"
         style="visibility: hidden; order: 1;"
-        tabindex="-1"
         type="button"
       >
         More

diff --git a/tests/__snapshots__/overflow.test.tsx.snap b/tests/__snapshots__/overflow.test.tsx.snap
@@ -5,11 +5,9 @@ exports[`Tabs.Overflow should collapse 1`] = `
   aria-controls="rc-tabs-test-more-popup"
   aria-expanded="false"
   aria-haspopup="listbox"
-  aria-hidden="true"
   class="rc-tabs-nav-more"
   id="rc-tabs-test-more"
   style=""
-  tabindex="-1"
   type="button"
 >
   More