From baa1b0f074f5c69c0abe36d3f1dbcca46ba17e43 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 16 Nov 2021 10:41:44 +0800
Subject: [PATCH] feat(Tabs): add aria-orientation and tabindex for a11y
 (#9872)

* feat(Tabs): add aria-orientation for a11y

* chore: update
---
 .../test/__snapshots__/index.spec.ts.snap     |  3 +
 .../test/__snapshots__/index.spec.ts.snap     | 12 ++++
 .../test/__snapshots__/demo.spec.ts.snap      |  4 ++
 .../icon/test/__snapshots__/demo.spec.ts.snap |  5 ++
 .../test/__snapshots__/demo.spec.ts.snap      |  3 +
 .../list/test/__snapshots__/demo.spec.ts.snap |  4 ++
 .../test/__snapshots__/demo.spec.ts.snap      |  4 ++
 .../tab/test/__snapshots__/demo.spec.ts.snap  | 60 +++++++++++++++++++
 .../test/__snapshots__/index.spec.tsx.snap    | 21 +++++++
 .../test/__snapshots__/insert.spec.tsx.snap   | 12 ++++
 packages/vant/src/tabs/Tabs.tsx               |  1 +
 packages/vant/src/tabs/TabsTitle.tsx          |  1 +
 12 files changed, 130 insertions(+)

diff --git a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
index aa247e4b3..185f67837 100644
--- a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
@@ -60,9 +60,11 @@ exports[`should update tabs when previous tab is clicked 1`] = `
     <div class="van-tabs__wrap van-tabs__wrap--scrollable">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-cascader__tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text">
@@ -71,6 +73,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
         </div>
         <div role="tab"
              class="van-tab van-tab--active van-cascader__tab van-cascader__tab--unselected"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text">
diff --git a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
index 915818e68..6c8e40f40 100644
--- a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
@@ -28,9 +28,11 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -39,6 +41,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -304,9 +307,11 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -315,6 +320,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
         </div>
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -398,9 +404,11 @@ exports[`should render list-footer slot correctly 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -409,6 +417,7 @@ exports[`should render list-footer slot correctly 1`] = `
         </div>
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -494,9 +503,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -505,6 +516,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
diff --git a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap
index 31d029c1d..4ea291ef8 100644
--- a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap
@@ -16,9 +16,11 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -27,6 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -35,6 +38,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
diff --git a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
index e04c60d36..83e09dba7 100644
--- a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
@@ -7,9 +7,11 @@ exports[`should render demo and match snapshot 1`] = `
       <div class="van-tabs__wrap">
         <div role="tablist"
              class="van-tabs__nav van-tabs__nav--line"
+             aria-orientation="horizontal"
         >
           <div role="tab"
                class="van-tab van-tab--active"
+               tabindex="0"
                aria-selected="true"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
@@ -18,6 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
           <div role="tab"
                class="van-tab"
+               tabindex="-1"
                aria-selected="false"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
@@ -26,6 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
           <div role="tab"
                class="van-tab"
+               tabindex="-1"
                aria-selected="false"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
@@ -34,6 +38,7 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
           <div role="tab"
                class="van-tab"
+               tabindex="-1"
                aria-selected="false"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
diff --git a/packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap
index e4c6301c1..ad6ac77c2 100644
--- a/packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap
@@ -5,9 +5,11 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -16,6 +18,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
diff --git a/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
index 8ef8e141f..89b815911 100644
--- a/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
@@ -5,9 +5,11 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -16,6 +18,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -24,6 +27,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
diff --git a/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
index 80b453770..d499f5d2d 100644
--- a/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
@@ -5,9 +5,11 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -16,6 +18,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -24,6 +27,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
diff --git a/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
index e464e9ebd..4a671bf18 100644
--- a/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
@@ -6,9 +6,11 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -17,6 +19,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -25,6 +28,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -33,6 +37,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -75,9 +80,11 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -86,6 +93,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -94,6 +102,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -131,9 +140,11 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__wrap van-tabs__wrap--scrollable">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text">
@@ -142,6 +153,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text">
@@ -150,6 +162,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text">
@@ -158,6 +171,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text">
@@ -166,6 +180,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text">
@@ -174,6 +189,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text">
@@ -182,6 +198,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text">
@@ -190,6 +207,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text">
@@ -252,9 +270,11 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -271,6 +291,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -308,9 +329,11 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--card"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -319,6 +342,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -327,6 +351,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -360,9 +385,11 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -371,6 +398,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -405,9 +433,11 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-tabs__wrap">
           <div role="tablist"
                class="van-tabs__nav van-tabs__nav--line"
+               aria-orientation="horizontal"
           >
             <div role="tab"
                  class="van-tab van-tab--active"
+                 tabindex="0"
                  aria-selected="true"
             >
               <span class="van-tab__text van-tab__text--ellipsis">
@@ -416,6 +446,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div role="tab"
                  class="van-tab"
+                 tabindex="-1"
                  aria-selected="false"
             >
               <span class="van-tab__text van-tab__text--ellipsis">
@@ -424,6 +455,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div role="tab"
                  class="van-tab"
+                 tabindex="-1"
                  aria-selected="false"
             >
               <span class="van-tab__text van-tab__text--ellipsis">
@@ -432,6 +464,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div role="tab"
                  class="van-tab"
+                 tabindex="-1"
                  aria-selected="false"
             >
               <span class="van-tab__text van-tab__text--ellipsis">
@@ -476,9 +509,11 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -489,6 +524,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -523,9 +559,11 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -534,6 +572,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -542,6 +581,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -550,6 +590,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -607,9 +648,11 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -618,6 +661,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -626,6 +670,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -634,6 +679,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -693,9 +739,11 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-tabs__wrap van-tabs__wrap--scrollable">
           <div role="tablist"
                class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
+               aria-orientation="horizontal"
           >
             <div role="tab"
                  class="van-tab van-tab--active"
+                 tabindex="0"
                  aria-selected="true"
             >
               <span class="van-tab__text">
@@ -704,6 +752,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div role="tab"
                  class="van-tab"
+                 tabindex="-1"
                  aria-selected="false"
             >
               <span class="van-tab__text">
@@ -712,6 +761,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div role="tab"
                  class="van-tab"
+                 tabindex="-1"
                  aria-selected="false"
             >
               <span class="van-tab__text">
@@ -720,6 +770,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div role="tab"
                  class="van-tab"
+                 tabindex="-1"
                  aria-selected="false"
             >
               <span class="van-tab__text">
@@ -728,6 +779,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div role="tab"
                  class="van-tab"
+                 tabindex="-1"
                  aria-selected="false"
             >
               <span class="van-tab__text">
@@ -736,6 +788,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div role="tab"
                  class="van-tab"
+                 tabindex="-1"
                  aria-selected="false"
             >
               <span class="van-tab__text">
@@ -744,6 +797,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div role="tab"
                  class="van-tab"
+                 tabindex="-1"
                  aria-selected="false"
             >
               <span class="van-tab__text">
@@ -752,6 +806,7 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
             <div role="tab"
                  class="van-tab"
+                 tabindex="-1"
                  aria-selected="false"
             >
               <span class="van-tab__text">
@@ -815,9 +870,11 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__wrap">
       <div role="tablist"
            class="van-tabs__nav van-tabs__nav--line"
+           aria-orientation="horizontal"
       >
         <div role="tab"
              class="van-tab van-tab--active"
+             tabindex="0"
              aria-selected="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -826,6 +883,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -834,6 +892,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
@@ -842,6 +901,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
         <div role="tab"
              class="van-tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
diff --git a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
index c2cf71c17..84f5917bf 100644
--- a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
@@ -37,9 +37,11 @@ exports[`should allow to set name prop 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -48,6 +50,7 @@ exports[`should allow to set name prop 1`] = `
       </div>
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -118,6 +121,7 @@ exports[`should not render empty tab 1`] = `
 exports[`should render badge prop correctly 1`] = `
 <div role="tab"
      class="van-tab van-tab--active"
+     tabindex="0"
      aria-selected="true"
 >
   <div class="van-badge__wrapper">
@@ -134,10 +138,12 @@ exports[`should render nav-left、nav-right slot correctly 1`] = `
 <div class="van-tabs__wrap">
   <div role="tablist"
        class="van-tabs__nav van-tabs__nav--line"
+       aria-orientation="horizontal"
   >
     Custom nav left
     <div role="tab"
          class="van-tab van-tab--active"
+         tabindex="0"
          aria-selected="true"
     >
       <span class="van-tab__text van-tab__text--ellipsis">
@@ -158,9 +164,11 @@ exports[`should switch tab after click the tab title 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -169,6 +177,7 @@ exports[`should switch tab after click the tab title 1`] = `
       </div>
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -215,9 +224,11 @@ exports[`should switch tab after click the tab title 2`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -226,6 +237,7 @@ exports[`should switch tab after click the tab title 2`] = `
       </div>
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -273,9 +285,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -284,6 +298,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
       </div>
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -344,9 +359,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -355,6 +372,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
       </div>
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -418,9 +436,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -429,6 +449,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
       </div>
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
diff --git a/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap b/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
index 5dfbc4c21..a11855ee2 100644
--- a/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
+++ b/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
@@ -5,9 +5,11 @@ exports[`should render Tab inside a component correctly 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -16,6 +18,7 @@ exports[`should render Tab inside a component correctly 1`] = `
       </div>
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -24,6 +27,7 @@ exports[`should render Tab inside a component correctly 1`] = `
       </div>
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -62,9 +66,11 @@ exports[`should render correctly after inserting a tab 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -73,6 +79,7 @@ exports[`should render correctly after inserting a tab 1`] = `
       </div>
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -81,6 +88,7 @@ exports[`should render correctly after inserting a tab 1`] = `
       </div>
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -121,9 +129,11 @@ exports[`should render correctly after inserting a tab with name 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -132,6 +142,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
       </div>
       <div role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
@@ -166,6 +177,7 @@ exports[`should render nav-bottom slot correctly 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist"
          class="van-tabs__nav van-tabs__nav--line"
+         aria-orientation="horizontal"
     >
       <div class="van-tabs__line">
       </div>
diff --git a/packages/vant/src/tabs/Tabs.tsx b/packages/vant/src/tabs/Tabs.tsx
index 15151665a..1bfc2fda5 100644
--- a/packages/vant/src/tabs/Tabs.tsx
+++ b/packages/vant/src/tabs/Tabs.tsx
@@ -395,6 +395,7 @@ export default defineComponent({
             role="tablist"
             class={bem('nav', [type, { complete: scrollable.value }])}
             style={navStyle.value}
+            aria-orientation="horizontal"
           >
             {slots['nav-left']?.()}
             {renderNav()}
diff --git a/packages/vant/src/tabs/TabsTitle.tsx b/packages/vant/src/tabs/TabsTitle.tsx
index 5f871ff50..5ee80339a 100644
--- a/packages/vant/src/tabs/TabsTitle.tsx
+++ b/packages/vant/src/tabs/TabsTitle.tsx
@@ -83,6 +83,7 @@ export default defineComponent({
           }),
         ]}
         style={style.value}
+        tabindex={props.disabled ? undefined : props.isActive ? 0 : -1}
         aria-selected={props.isActive}
       >
         {renderText()}