From 518c57d0a3eaea85f92f0e8f9f14c7f32ead234b Mon Sep 17 00:00:00 2001
From: Jony J <1844749591@qq.com>
Date: Thu, 19 Dec 2024 19:38:29 +0800
Subject: [PATCH] feat(tabs): add focus style for keyboard operation (#52002)

* feat(tabs): add focus style for keyboard operation

* style: add missing focus style for tabpane

* style: add focus style for remove button

* chore: update rc-tabs dependency to version 15.5.0

* test: update snapshot

* chore: empty commit

* chore: empty commit

* chore: empty commit for triggering CI
---
 .../__snapshots__/demo-extend.test.ts.snap    |  11 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  11 +-
 .../__snapshots__/index.test.tsx.snap         |   7 +-
 .../__snapshots__/components.test.tsx.snap    |   7 +
 .../__snapshots__/demo-extend.test.ts.snap    |   3 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |   3 +-
 components/style/index.tsx                    |   9 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 220 ++++++++++--------
 .../__tests__/__snapshots__/demo.test.ts.snap | 220 ++++++++++--------
 .../__snapshots__/index.test.tsx.snap         |   4 +
 components/tabs/style/index.ts                |  20 +-
 package.json                                  |   2 +-
 12 files changed, 303 insertions(+), 214 deletions(-)

diff --git a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
index b8a7b4b5a6..d123508745 100644
--- a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -160,6 +160,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -195,7 +196,7 @@ Array [
                   class="ant-tabs-tab-btn"
                   id="rc-tabs-test-tab-tab2"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   tab2
                 </div>
@@ -1127,6 +1128,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -1162,7 +1164,7 @@ Array [
                   class="ant-tabs-tab-btn"
                   id="rc-tabs-test-tab-tab2"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   tab2
                 </div>
@@ -1267,6 +1269,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-middle ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -1287,7 +1290,7 @@ Array [
                   class="ant-tabs-tab-btn"
                   id="rc-tabs-test-tab-article"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   article
                 </div>
@@ -1317,7 +1320,7 @@ Array [
                   class="ant-tabs-tab-btn"
                   id="rc-tabs-test-tab-project"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   project
                 </div>
diff --git a/components/card/__tests__/__snapshots__/demo.test.ts.snap b/components/card/__tests__/__snapshots__/demo.test.ts.snap
index ac2919c40e..fe9f5f0186 100644
--- a/components/card/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.ts.snap
@@ -156,6 +156,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -187,7 +188,7 @@ Array [
                   aria-selected="false"
                   class="ant-tabs-tab-btn"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   tab2
                 </div>
@@ -1084,6 +1085,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -1115,7 +1117,7 @@ Array [
                   aria-selected="false"
                   class="ant-tabs-tab-btn"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   tab2
                 </div>
@@ -1201,6 +1203,7 @@ Array [
         class="ant-tabs ant-tabs-top ant-tabs-middle ant-card-head-tabs"
       >
         <div
+          aria-orientation="horizontal"
           class="ant-tabs-nav"
           role="tablist"
         >
@@ -1219,7 +1222,7 @@ Array [
                   aria-selected="false"
                   class="ant-tabs-tab-btn"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   article
                 </div>
@@ -1245,7 +1248,7 @@ Array [
                   aria-selected="false"
                   class="ant-tabs-tab-btn"
                   role="tab"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   project
                 </div>
diff --git a/components/card/__tests__/__snapshots__/index.test.tsx.snap b/components/card/__tests__/__snapshots__/index.test.tsx.snap
index 838b3c0b47..f074d43f4e 100644
--- a/components/card/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/card/__tests__/__snapshots__/index.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`Card correct pass tabList props 1`] = `
       class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-large ant-tabs-card ant-tabs-editable-card ant-card-head-tabs"
     >
       <div
+        aria-orientation="horizontal"
         class="ant-tabs-nav"
         role="tablist"
       >
@@ -76,14 +77,14 @@ exports[`Card correct pass tabList props 1`] = `
                 class="ant-tabs-tab-btn"
                 id="rc-tabs-test-tab-deprecated"
                 role="tab"
-                tabindex="0"
+                tabindex="-1"
               >
                 Deprecated
               </div>
               <button
                 aria-label="remove"
                 class="ant-tabs-tab-remove"
-                tabindex="0"
+                tabindex="-1"
                 type="button"
               >
                 <span
@@ -133,7 +134,7 @@ exports[`Card correct pass tabList props 1`] = `
                 class="ant-tabs-tab-btn"
                 id="rc-tabs-test-tab-notClosable"
                 role="tab"
-                tabindex="0"
+                tabindex="-1"
               >
                 NotClosable
               </div>
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
index afce1338a8..a8b3e08f46 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -28935,6 +28935,7 @@ exports[`ConfigProvider components Tabs configProvider 1`] = `
   class="config-tabs config-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="config-tabs-nav"
     role="tablist"
   >
@@ -29025,6 +29026,7 @@ exports[`ConfigProvider components Tabs configProvider componentDisabled 1`] = `
   class="config-tabs config-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="config-tabs-nav"
     role="tablist"
   >
@@ -29115,6 +29117,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize large 1`] =
   class="config-tabs config-tabs-top config-tabs-large"
 >
   <div
+    aria-orientation="horizontal"
     class="config-tabs-nav"
     role="tablist"
   >
@@ -29205,6 +29208,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize middle 1`]
   class="config-tabs config-tabs-top config-tabs-middle"
 >
   <div
+    aria-orientation="horizontal"
     class="config-tabs-nav"
     role="tablist"
   >
@@ -29295,6 +29299,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize small 1`] =
   class="config-tabs config-tabs-top config-tabs-small"
 >
   <div
+    aria-orientation="horizontal"
     class="config-tabs-nav"
     role="tablist"
   >
@@ -29385,6 +29390,7 @@ exports[`ConfigProvider components Tabs normal 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -29475,6 +29481,7 @@ exports[`ConfigProvider components Tabs prefixCls 1`] = `
   class="prefix-Tabs prefix-Tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="prefix-Tabs-nav"
     role="tablist"
   >
diff --git a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
index 68abd5e69b..6e1bae7f45 100644
--- a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -769,6 +769,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx extend context corr
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -804,7 +805,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx extend context corr
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Splitter Tab
           </div>
diff --git a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
index efbd1fd577..12cf7a134b 100644
--- a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
@@ -783,6 +783,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -814,7 +815,7 @@ exports[`renders components/splitter/demo/nested-in-tabs.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Splitter Tab
           </div>
diff --git a/components/style/index.tsx b/components/style/index.tsx
index b79230410a..528665324a 100644
--- a/components/style/index.tsx
+++ b/components/style/index.tsx
@@ -1,5 +1,6 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { AliasToken } from '../theme/internal';
 
 export const textEllipsis: CSSObject = {
@@ -131,15 +132,15 @@ export const genCommonStyle = (
   };
 };
 
-export const genFocusOutline = (token: AliasToken): CSSObject => ({
+export const genFocusOutline = (token: AliasToken, offset?: number): CSSObject => ({
   outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`,
-  outlineOffset: 1,
+  outlineOffset: offset ?? 1,
   transition: 'outline-offset 0s, outline 0s',
 });
 
-export const genFocusStyle = (token: AliasToken): CSSObject => ({
+export const genFocusStyle = (token: AliasToken, offset?: number): CSSObject => ({
   '&:focus-visible': {
-    ...genFocusOutline(token),
+    ...genFocusOutline(token, offset),
   },
 });
 
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index d2e099ca92..0c0bc5e44f 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -66,6 +66,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -101,7 +102,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Little
             </div>
@@ -116,7 +117,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Light
             </div>
@@ -209,6 +210,7 @@ exports[`renders components/tabs/demo/basic.tsx extend context correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -244,7 +246,7 @@ exports[`renders components/tabs/demo/basic.tsx extend context correctly 1`] = `
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -259,7 +261,7 @@ exports[`renders components/tabs/demo/basic.tsx extend context correctly 1`] = `
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -350,6 +352,7 @@ exports[`renders components/tabs/demo/card.tsx extend context correctly 1`] = `
   class="ant-tabs ant-tabs-top ant-tabs-card"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -385,7 +388,7 @@ exports[`renders components/tabs/demo/card.tsx extend context correctly 1`] = `
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -400,7 +403,7 @@ exports[`renders components/tabs/demo/card.tsx extend context correctly 1`] = `
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -494,6 +497,7 @@ exports[`renders components/tabs/demo/card-top.tsx extend context correctly 1`]
     class="ant-tabs ant-tabs-top ant-tabs-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -529,7 +533,7 @@ exports[`renders components/tabs/demo/card-top.tsx extend context correctly 1`]
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab Title 2
             </div>
@@ -544,7 +548,7 @@ exports[`renders components/tabs/demo/card-top.tsx extend context correctly 1`]
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab Title 3
             </div>
@@ -644,6 +648,7 @@ exports[`renders components/tabs/demo/centered.tsx extend context correctly 1`]
   class="ant-tabs ant-tabs-top ant-tabs-centered"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -679,7 +684,7 @@ exports[`renders components/tabs/demo/centered.tsx extend context correctly 1`]
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -694,7 +699,7 @@ exports[`renders components/tabs/demo/centered.tsx extend context correctly 1`]
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -787,6 +792,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -822,7 +828,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -837,7 +843,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -936,6 +942,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="vertical"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -971,7 +978,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -986,7 +993,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1085,6 +1092,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1120,7 +1128,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1135,7 +1143,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1234,6 +1242,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1269,7 +1278,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1284,7 +1293,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1382,6 +1391,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1419,7 +1429,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1520,6 +1530,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1557,7 +1568,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1658,6 +1669,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
     class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1695,7 +1707,7 @@ exports[`renders components/tabs/demo/component-token.tsx extend context correct
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1815,6 +1827,7 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx extend context corr
     class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1877,14 +1890,14 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx extend context corr
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -2055,6 +2068,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -2090,7 +2104,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -2105,7 +2119,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -2200,6 +2214,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx extend context correctl
     style="z-index: 1;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
       style="background: rgb(255, 255, 255);"
@@ -2236,7 +2251,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx extend context correctl
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -2251,7 +2266,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx extend context correctl
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -2345,6 +2360,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx extend context cor
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2392,7 +2408,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx extend context cor
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -2413,7 +2429,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx extend context cor
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2519,6 +2535,7 @@ exports[`renders components/tabs/demo/disabled.tsx extend context correctly 1`]
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2569,7 +2586,7 @@ exports[`renders components/tabs/demo/disabled.tsx extend context correctly 1`]
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2660,6 +2677,7 @@ exports[`renders components/tabs/demo/editable-card.tsx extend context correctly
   class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2722,14 +2740,14 @@ exports[`renders components/tabs/demo/editable-card.tsx extend context correctly
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-2"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
           <button
             aria-label="remove"
             class="ant-tabs-tab-remove"
-            tabindex="0"
+            tabindex="-1"
             type="button"
           >
             <span
@@ -2764,7 +2782,7 @@ exports[`renders components/tabs/demo/editable-card.tsx extend context correctly
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-3"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2912,6 +2930,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -2947,7 +2966,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -2962,7 +2981,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -3116,6 +3135,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -3163,7 +3183,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -3178,7 +3198,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -3282,6 +3302,7 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -3302,7 +3323,7 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
             class="ant-tabs-tab-btn"
             id="rc-tabs-test-tab-1"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             <span
               class="ant-tabs-tab-icon"
@@ -4117,6 +4138,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -4152,7 +4174,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -4234,6 +4256,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
             style="height: 300px;"
           >
             <div
+              aria-orientation="horizontal"
               class="ant-tabs-nav"
               role="tablist"
             >
@@ -4254,7 +4277,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-0"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 0
                     </div>
@@ -4284,7 +4307,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-2"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 2
                     </div>
@@ -4299,7 +4322,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-3"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 3
                     </div>
@@ -4314,7 +4337,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-4"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 4
                     </div>
@@ -4329,7 +4352,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-5"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 5
                     </div>
@@ -4344,7 +4367,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-6"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 6
                     </div>
@@ -4359,7 +4382,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-7"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 7
                     </div>
@@ -4374,7 +4397,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-8"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 8
                     </div>
@@ -4389,7 +4412,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-9"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 9
                     </div>
@@ -4404,7 +4427,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-10"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 10
                     </div>
@@ -4419,7 +4442,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-11"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 11
                     </div>
@@ -4434,7 +4457,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-12"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 12
                     </div>
@@ -4449,7 +4472,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-13"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 13
                     </div>
@@ -4464,7 +4487,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-14"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 14
                     </div>
@@ -4479,7 +4502,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-15"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 15
                     </div>
@@ -4494,7 +4517,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-16"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 16
                     </div>
@@ -4509,7 +4532,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-17"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 17
                     </div>
@@ -4524,7 +4547,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-18"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 18
                     </div>
@@ -4539,7 +4562,7 @@ exports[`renders components/tabs/demo/nest.tsx extend context correctly 1`] = `
                       class="ant-tabs-tab-btn"
                       id="rc-tabs-test-tab-19"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 19
                     </div>
@@ -4731,6 +4754,7 @@ Array [
     class="ant-tabs ant-tabs-left"
   >
     <div
+      aria-orientation="vertical"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -4766,7 +4790,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -4781,7 +4805,7 @@ Array [
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -4938,6 +4962,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -4973,7 +4998,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -4988,7 +5013,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -5075,6 +5100,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
     style="margin-bottom: 32px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -5110,7 +5136,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Card Tab 2
             </div>
@@ -5125,7 +5151,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Card Tab 3
             </div>
@@ -5211,6 +5237,7 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-small ant-tabs-card ant-tabs-editable-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -5273,14 +5300,14 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -5315,14 +5342,14 @@ exports[`renders components/tabs/demo/size.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -5536,6 +5563,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
     style="height: 220px;"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -5557,7 +5585,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-0"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-0
             </div>
@@ -5589,7 +5617,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-2"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-2
             </div>
@@ -5605,7 +5633,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-3"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-3
             </div>
@@ -5621,7 +5649,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-4"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-4
             </div>
@@ -5637,7 +5665,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-5"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-5
             </div>
@@ -5653,7 +5681,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-6"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-6
             </div>
@@ -5669,7 +5697,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-7"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-7
             </div>
@@ -5685,7 +5713,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-8"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-8
             </div>
@@ -5701,7 +5729,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-9"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-9
             </div>
@@ -5717,7 +5745,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-10"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-10
             </div>
@@ -5733,7 +5761,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-11"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-11
             </div>
@@ -5749,7 +5777,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-12"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-12
             </div>
@@ -5765,7 +5793,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-13"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-13
             </div>
@@ -5781,7 +5809,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-14"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-14
             </div>
@@ -5797,7 +5825,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-15"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-15
             </div>
@@ -5813,7 +5841,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-16"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-16
             </div>
@@ -5829,7 +5857,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-17"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-17
             </div>
@@ -5845,7 +5873,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-18"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-18
             </div>
@@ -5861,7 +5889,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-19"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-19
             </div>
@@ -5877,7 +5905,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-20"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-20
             </div>
@@ -5893,7 +5921,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-21"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-21
             </div>
@@ -5909,7 +5937,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-22"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-22
             </div>
@@ -5925,7 +5953,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-23"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-23
             </div>
@@ -5941,7 +5969,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-24"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-24
             </div>
@@ -5957,7 +5985,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-25"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-25
             </div>
@@ -5973,7 +6001,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-26"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-26
             </div>
@@ -5989,7 +6017,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-27"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-27
             </div>
@@ -6020,7 +6048,7 @@ exports[`renders components/tabs/demo/slide.tsx extend context correctly 1`] = `
               class="ant-tabs-tab-btn"
               id="rc-tabs-test-tab-29"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-29
             </div>
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
index 3a6865195c..68e4cc70b8 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
@@ -66,6 +66,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -97,7 +98,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Little
             </div>
@@ -110,7 +111,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Light
             </div>
@@ -182,6 +183,7 @@ exports[`renders components/tabs/demo/basic.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -213,7 +215,7 @@ exports[`renders components/tabs/demo/basic.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -226,7 +228,7 @@ exports[`renders components/tabs/demo/basic.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -296,6 +298,7 @@ exports[`renders components/tabs/demo/card.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top ant-tabs-card"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -327,7 +330,7 @@ exports[`renders components/tabs/demo/card.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -340,7 +343,7 @@ exports[`renders components/tabs/demo/card.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -413,6 +416,7 @@ exports[`renders components/tabs/demo/card-top.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -444,7 +448,7 @@ exports[`renders components/tabs/demo/card-top.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab Title 2
             </div>
@@ -457,7 +461,7 @@ exports[`renders components/tabs/demo/card-top.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab Title 3
             </div>
@@ -542,6 +546,7 @@ exports[`renders components/tabs/demo/centered.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top ant-tabs-centered"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -573,7 +578,7 @@ exports[`renders components/tabs/demo/centered.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -586,7 +591,7 @@ exports[`renders components/tabs/demo/centered.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -658,6 +663,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -689,7 +695,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -702,7 +708,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -782,6 +788,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="vertical"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -813,7 +820,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -826,7 +833,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -906,6 +913,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -937,7 +945,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -950,7 +958,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1030,6 +1038,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1061,7 +1070,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1074,7 +1083,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1153,6 +1162,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1186,7 +1196,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1266,6 +1276,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1299,7 +1310,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1379,6 +1390,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-card ant-tabs-centered"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1412,7 +1424,7 @@ exports[`renders components/tabs/demo/component-token.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1509,6 +1521,7 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1567,14 +1580,14 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -1724,6 +1737,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -1755,7 +1769,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1768,7 +1782,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1842,6 +1856,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
     style="z-index:1"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
       style="background:#ffffff"
@@ -1874,7 +1889,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -1887,7 +1902,7 @@ exports[`renders components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -1960,6 +1975,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2003,7 +2019,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
@@ -2022,7 +2038,7 @@ exports[`renders components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2092,6 +2108,7 @@ exports[`renders components/tabs/demo/disabled.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2136,7 +2153,7 @@ exports[`renders components/tabs/demo/disabled.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2206,6 +2223,7 @@ exports[`renders components/tabs/demo/editable-card.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2264,14 +2282,14 @@ exports[`renders components/tabs/demo/editable-card.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 2
           </div>
           <button
             aria-label="remove"
             class="ant-tabs-tab-remove"
-            tabindex="0"
+            tabindex="-1"
             type="button"
           >
             <span
@@ -2304,7 +2322,7 @@ exports[`renders components/tabs/demo/editable-card.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             Tab 3
           </div>
@@ -2431,6 +2449,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -2462,7 +2481,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -2475,7 +2494,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -2610,6 +2629,7 @@ Array [
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -2653,7 +2673,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -2666,7 +2686,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -2749,6 +2769,7 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -2767,7 +2788,7 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
             aria-selected="false"
             class="ant-tabs-tab-btn"
             role="tab"
-            tabindex="0"
+            tabindex="-1"
           >
             <span
               class="ant-tabs-tab-icon"
@@ -3145,6 +3166,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -3176,7 +3198,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -3239,6 +3261,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
             style="height:300px"
           >
             <div
+              aria-orientation="horizontal"
               class="ant-tabs-nav"
               role="tablist"
             >
@@ -3257,7 +3280,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 0
                     </div>
@@ -3283,7 +3306,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 2
                     </div>
@@ -3296,7 +3319,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 3
                     </div>
@@ -3309,7 +3332,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 4
                     </div>
@@ -3322,7 +3345,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 5
                     </div>
@@ -3335,7 +3358,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 6
                     </div>
@@ -3348,7 +3371,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 7
                     </div>
@@ -3361,7 +3384,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 8
                     </div>
@@ -3374,7 +3397,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 9
                     </div>
@@ -3387,7 +3410,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 10
                     </div>
@@ -3400,7 +3423,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 11
                     </div>
@@ -3413,7 +3436,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 12
                     </div>
@@ -3426,7 +3449,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 13
                     </div>
@@ -3439,7 +3462,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 14
                     </div>
@@ -3452,7 +3475,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 15
                     </div>
@@ -3465,7 +3488,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 16
                     </div>
@@ -3478,7 +3501,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 17
                     </div>
@@ -3491,7 +3514,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 18
                     </div>
@@ -3504,7 +3527,7 @@ exports[`renders components/tabs/demo/nest.tsx correctly 1`] = `
                       aria-selected="false"
                       class="ant-tabs-tab-btn"
                       role="tab"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       Tab 19
                     </div>
@@ -3675,6 +3698,7 @@ Array [
     class="ant-tabs ant-tabs-left"
   >
     <div
+      aria-orientation="vertical"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -3706,7 +3730,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -3719,7 +3743,7 @@ Array [
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -3855,6 +3879,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -3886,7 +3911,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
@@ -3899,7 +3924,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
@@ -3967,6 +3992,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
     style="margin-bottom:32px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -3998,7 +4024,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Card Tab 2
             </div>
@@ -4011,7 +4037,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Card Tab 3
             </div>
@@ -4078,6 +4104,7 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
     class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-small ant-tabs-card ant-tabs-editable-card"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -4136,14 +4163,14 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 2
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -4176,14 +4203,14 @@ exports[`renders components/tabs/demo/size.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab 3
             </div>
             <button
               aria-label="remove"
               class="ant-tabs-tab-remove"
-              tabindex="0"
+              tabindex="-1"
               type="button"
             >
               <span
@@ -4376,6 +4403,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
     style="height:220px"
   >
     <div
+      aria-orientation="horizontal"
       class="ant-tabs-nav"
       role="tablist"
     >
@@ -4395,7 +4423,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-0
             </div>
@@ -4423,7 +4451,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-2
             </div>
@@ -4437,7 +4465,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-3
             </div>
@@ -4451,7 +4479,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-4
             </div>
@@ -4465,7 +4493,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-5
             </div>
@@ -4479,7 +4507,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-6
             </div>
@@ -4493,7 +4521,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-7
             </div>
@@ -4507,7 +4535,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-8
             </div>
@@ -4521,7 +4549,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-9
             </div>
@@ -4535,7 +4563,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-10
             </div>
@@ -4549,7 +4577,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-11
             </div>
@@ -4563,7 +4591,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-12
             </div>
@@ -4577,7 +4605,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-13
             </div>
@@ -4591,7 +4619,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-14
             </div>
@@ -4605,7 +4633,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-15
             </div>
@@ -4619,7 +4647,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-16
             </div>
@@ -4633,7 +4661,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-17
             </div>
@@ -4647,7 +4675,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-18
             </div>
@@ -4661,7 +4689,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-19
             </div>
@@ -4675,7 +4703,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-20
             </div>
@@ -4689,7 +4717,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-21
             </div>
@@ -4703,7 +4731,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-22
             </div>
@@ -4717,7 +4745,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-23
             </div>
@@ -4731,7 +4759,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-24
             </div>
@@ -4745,7 +4773,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-25
             </div>
@@ -4759,7 +4787,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-26
             </div>
@@ -4773,7 +4801,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-27
             </div>
@@ -4800,7 +4828,7 @@ exports[`renders components/tabs/demo/slide.tsx correctly 1`] = `
               aria-selected="false"
               class="ant-tabs-tab-btn"
               role="tab"
-              tabindex="0"
+              tabindex="-1"
             >
               Tab-29
             </div>
diff --git a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
index 5610da2e8e..afe523590d 100644
--- a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
@@ -33,6 +33,7 @@ exports[`Tabs rtl render component should be rendered correctly in RTL direction
   class="ant-tabs ant-tabs-top ant-tabs-rtl"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -123,6 +124,7 @@ exports[`Tabs tabBarGutter should work 1`] = `
   class="ant-tabs ant-tabs-top"
 >
   <div
+    aria-orientation="horizontal"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -255,6 +257,7 @@ exports[`Tabs tabBarGutter should work 2`] = `
   class="ant-tabs ant-tabs-left"
 >
   <div
+    aria-orientation="vertical"
     class="ant-tabs-nav"
     role="tablist"
   >
@@ -387,6 +390,7 @@ exports[`Tabs tabPosition remove card 1`] = `
   class="ant-tabs ant-tabs-left"
 >
   <div
+    aria-orientation="vertical"
     class="ant-tabs-nav"
     role="tablist"
   >
diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts
index 7ad2af0414..0f120de1fa 100644
--- a/components/tabs/style/index.ts
+++ b/components/tabs/style/index.ts
@@ -1,7 +1,7 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
 
-import { genFocusStyle, resetComponent, textEllipsis } from '../../style';
+import { genFocusOutline, genFocusStyle, resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genMotionStyle from './motion';
@@ -165,9 +165,17 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
           background: token.colorBgContainer,
         },
 
+        [`${componentCls}-tab-focus`]: {
+          ...genFocusOutline(token, -3),
+        },
+
         [`${componentCls}-ink-bar`]: {
           visibility: 'hidden',
         },
+
+        [`& ${componentCls}-tab${componentCls}-tab-focus ${componentCls}-tab-btn`]: {
+          outline: 'none',
+        },
       },
 
       // ========================== Top & Bottom ==========================
@@ -687,7 +695,6 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
         '&:focus:not(:focus-visible), &:active': {
           color: itemActiveColor,
         },
-        ...genFocusStyle(token),
       },
       '&-btn': {
         outline: 'none',
@@ -716,6 +723,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
         '&:hover': {
           color: token.colorTextHeading,
         },
+        ...genFocusStyle(token),
       },
       '&:hover': {
         color: itemHoverColor,
@@ -726,6 +734,10 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
         textShadow: token.tabsActiveTextShadow,
       },
 
+      [`&${tabCls}-focus ${tabCls}-btn`]: {
+        ...genFocusOutline(token),
+      },
+
       [`&${tabCls}-disabled`]: {
         color: token.colorTextDisabled,
         cursor: 'not-allowed',
@@ -961,7 +973,7 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
             color: itemActiveColor,
           },
 
-          ...genFocusStyle(token),
+          ...genFocusStyle(token, -3),
         },
       },
 
@@ -992,7 +1004,7 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
       },
 
       [`${componentCls}-tabpane`]: {
-        outline: 'none',
+        ...genFocusStyle(token),
         '&-hidden': {
           display: 'none',
         },
diff --git a/package.json b/package.json
index 781a47f403..4563bf552a 100644
--- a/package.json
+++ b/package.json
@@ -145,7 +145,7 @@
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.49.0",
-    "rc-tabs": "~15.4.0",
+    "rc-tabs": "~15.5.0",
     "rc-textarea": "~1.8.2",
     "rc-tooltip": "~6.2.1",
     "rc-tree": "~5.10.1",