feat(Tabs): add aria-controls for a11y (#9882)

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

* test: keep jest snapshot stable

packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap

@@ -62,7 +62,8 @@ exports[`should update tabs when previous tab is clicked 1`] = `
            class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-cascader__tab"
              tabindex="-1"
              aria-selected="false"
@@ -71,7 +72,8 @@ exports[`should update tabs when previous tab is clicked 1`] = `
             Jiangsu
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab van-tab--active van-cascader__tab van-cascader__tab--unselected"
              tabindex="0"
              aria-selected="true"
@@ -92,8 +94,11 @@ exports[`should update tabs when previous tab is clicked 1`] = `
              class="van-swipe__track"
         >
           <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+               id="van-tab"
                role="tabpanel"
+               tabindex="-1"
                aria-hidden="true"
+               aria-labelledby="van-tabs-0"
                style="width: 100px;"
           >
             <div class="van-tab__pane">
@@ -114,8 +119,11 @@ exports[`should update tabs when previous tab is clicked 1`] = `
             </div>
           </div>
           <div class="van-swipe-item van-tab__pane-wrapper"
+               id="van-tab"
                role="tabpanel"
+               tabindex="0"
                aria-hidden="false"
+               aria-labelledby="van-tabs-1"
                style="width: 100px;"
           >
             <div class="van-tab__pane">

packages/vant/src/composables/use-id.ts

@@ -0,0 +1,15 @@
+import { getCurrentInstance } from 'vue';
+
+let current = 0;
+
+export function useId() {
+  const vm = getCurrentInstance();
+  const { name = 'unknown' } = vm?.type || {};
+
+  // keep jest snapshot stable
+  if (process.env.NODE_ENV === 'test') {
+    return name;
+  }
+
+  return `${name}-${++current}`;
+}

packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap

@@ -30,19 +30,23 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Available (6)
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Unavailable (2)
@@ -55,8 +59,11 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -260,8 +267,11 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
           </div>
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
@@ -311,19 +321,23 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Available (0)
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Unavailable (0)
@@ -336,8 +350,11 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-0"
            style="display: none;"
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -351,8 +368,11 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
           </div>
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-1"
            style
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -412,19 +432,23 @@ exports[`should render list-footer slot correctly 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Available (0)
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Unavailable (0)
@@ -437,8 +461,11 @@ exports[`should render list-footer slot correctly 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-0"
            style="display: none;"
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -453,8 +480,11 @@ exports[`should render list-footer slot correctly 1`] = `
           List Footer
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-1"
            style
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -515,19 +545,23 @@ exports[`should use custom src when using empty-image prop 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Available (0)
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Unavailable (0)
@@ -540,8 +574,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -555,8 +592,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
           </div>
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>

packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap

@@ -18,28 +18,34 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Error
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Network
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-2"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Search
@@ -52,8 +58,11 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         <div class="van-empty">
@@ -65,13 +74,19 @@ exports[`should render demo and match snapshot 1`] = `
           </p>
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
            style="display: none;"
       >
       </div>

packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap

@@ -9,37 +9,45 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-tabs__nav van-tabs__nav--line"
              aria-orientation="horizontal"
         >
-          <div role="tab"
+          <div id="van-tabs-0"
+               role="tab"
                class="van-tab van-tab--active"
                tabindex="0"
                aria-selected="true"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
               Demo
             </span>
           </div>
-          <div role="tab"
+          <div id="van-tabs-1"
+               role="tab"
                class="van-tab"
                tabindex="-1"
                aria-selected="false"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
               Basic
             </span>
           </div>
-          <div role="tab"
+          <div id="van-tabs-2"
+               role="tab"
                class="van-tab"
                tabindex="-1"
                aria-selected="false"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
               Outline
             </span>
           </div>
-          <div role="tab"
+          <div id="van-tabs-3"
+               role="tab"
                class="van-tab"
                tabindex="-1"
                aria-selected="false"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
               Filled
@@ -54,8 +62,11 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div>
@@ -130,18 +141,27 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-3"
          style="display: none;"
     >
     </div>

packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap

@@ -7,19 +7,23 @@ exports[`should render demo and match snapshot 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Basic Usage
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Custom Index List
@@ -32,8 +36,11 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div class="van-index-bar">
@@ -901,8 +908,11 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>

packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap

@@ -7,28 +7,34 @@ exports[`should render demo and match snapshot 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Basic Usage
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Error Info
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           PullRefresh
@@ -41,8 +47,11 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div role="feed"
@@ -72,13 +81,19 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>

packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap

@@ -7,28 +7,34 @@ exports[`should render demo and match snapshot 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Basic Usage
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Success Tip
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Custom Tips
@@ -41,8 +47,11 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div class="van-pull-refresh">
@@ -57,13 +66,19 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>

packages/vant/src/tab/Tab.tsx

@@ -22,6 +22,8 @@ import { TABS_KEY } from '../tabs/Tabs';
 
 // Composables
 import { useParent } from '@vant/use';
+import { useId } from '../composables/use-id';
+import { useExpose } from '../composables/use-expose';
 import { routeProps } from '../composables/use-route';
 import { TAB_STATUS_KEY } from '../composables/use-tab-status';
 
@@ -49,6 +51,7 @@ export default defineComponent({
   props: tabProps,
 
   setup(props, { slots }) {
+    const id = useId();
     const inited = ref(false);
     const { parent, index } = useParent(TABS_KEY);
 
@@ -92,6 +95,7 @@ export default defineComponent({
     provide(TAB_STATUS_KEY, active);
 
     return () => {
+      const label = `${parent.id}-${index.value}`;
       const { animated, swipeable, scrollspy, lazyRender } = parent.props;
 
       if (!slots.default && !animated) {
@@ -103,9 +107,12 @@ export default defineComponent({
       if (animated || swipeable) {
         return (
           <SwipeItem
+            id={id}
             role="tabpanel"
-            aria-hidden={!active.value}
             class={bem('pane-wrapper', { inactive: !active.value })}
+            tabindex={active.value ? 0 : -1}
+            aria-hidden={!active.value}
+            aria-labelledby={label}
           >
             <div class={bem('pane')}>{slots.default?.()}</div>
           </SwipeItem>
@@ -115,8 +122,17 @@ export default defineComponent({
       const shouldRender = inited.value || scrollspy || !lazyRender;
       const Content = shouldRender ? slots.default?.() : null;
 
+      useExpose({ id });
+
       return (
-        <div v-show={show} role="tabpanel" class={bem('pane')}>
+        <div
+          v-show={show}
+          id={id}
+          role="tabpanel"
+          class={bem('pane')}
+          tabindex={show ? 0 : -1}
+          aria-labelledby={label}
+        >
           {Content}
         </div>
       );

packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap

@@ -2,13 +2,19 @@
 
 exports[`should allow to disable lazy-render prop 1`] = `
 <div class="van-tabs__content">
-  <div role="tabpanel"
+  <div id="van-tab"
+       role="tabpanel"
        class="van-tab__pane"
+       tabindex="-1"
+       aria-labelledby="van-tabs-0"
        style="display: none;"
   >
   </div>
-  <div role="tabpanel"
+  <div id="van-tab"
+       role="tabpanel"
        class="van-tab__pane"
+       tabindex="-1"
+       aria-labelledby="van-tabs-1"
        style="display: none;"
   >
   </div>
@@ -17,14 +23,20 @@ exports[`should allow to disable lazy-render prop 1`] = `
 
 exports[`should allow to disable lazy-render prop 2`] = `
 <div class="van-tabs__content">
-  <div role="tabpanel"
+  <div id="van-tab"
+       role="tabpanel"
        class="van-tab__pane"
+       tabindex="0"
+       aria-labelledby="van-tabs-0"
        style
   >
     Text
   </div>
-  <div role="tabpanel"
+  <div id="van-tab"
+       role="tabpanel"
        class="van-tab__pane"
+       tabindex="-1"
+       aria-labelledby="van-tabs-1"
        style="display: none;"
   >
     Text
@@ -39,28 +51,34 @@ exports[`should allow to set name prop 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -73,19 +91,28 @@ exports[`should allow to set name prop 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -103,9 +130,12 @@ DOMWrapper {
     "_values": Object {},
   },
   "wrapperElement": <div
+    aria-labelledby="van-tabs-0"
     class="van-tab__pane"
+    id="van-tab"
     role="tabpanel"
     style=""
+    tabindex="0"
   >
     
     Text
@@ -120,10 +150,12 @@ exports[`should not render empty tab 1`] = `
 `;
 
 exports[`should render badge prop correctly 1`] = `
-<div role="tab"
+<div id="van-tabs-0"
+     role="tab"
      class="van-tab van-tab--active"
      tabindex="0"
      aria-selected="true"
+     aria-controls="van-tab"
 >
   <div class="van-badge__wrapper">
     <span class="van-tab__text van-tab__text--ellipsis">
@@ -142,10 +174,12 @@ exports[`should render nav-left、nav-right slot correctly 1`] = `
        aria-orientation="horizontal"
   >
     Custom nav left
-    <div role="tab"
+    <div id="van-tabs-0"
+         role="tab"
          class="van-tab van-tab--active"
          tabindex="0"
          aria-selected="true"
+         aria-controls="van-tab"
     >
       <span class="van-tab__text van-tab__text--ellipsis">
         Title
@@ -167,28 +201,34 @@ exports[`should switch tab after click the tab title 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -201,19 +241,28 @@ exports[`should switch tab after click the tab title 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -228,28 +277,34 @@ exports[`should switch tab after click the tab title 2`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -262,20 +317,29 @@ exports[`should switch tab after click the tab title 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-1"
          style
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -290,7 +354,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
@@ -299,7 +364,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
@@ -308,7 +374,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
@@ -329,8 +396,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
            class="van-swipe__track"
       >
         <div class="van-swipe-item van-tab__pane-wrapper"
+             id="van-tab"
              role="tabpanel"
+             tabindex="0"
              aria-hidden="false"
+             aria-labelledby="van-tabs-0"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -338,8 +408,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-1"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -347,8 +420,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-2"
              style="width: 100px;"
         >
         </div>
@@ -365,7 +441,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
@@ -374,7 +451,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
@@ -383,7 +461,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
@@ -404,8 +483,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
            class="van-swipe__track"
       >
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-0"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -413,8 +495,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper"
+             id="van-tab"
              role="tabpanel"
+             tabindex="0"
              aria-hidden="false"
+             aria-labelledby="van-tabs-1"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -422,8 +507,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-2"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -443,7 +531,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
@@ -452,7 +541,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
@@ -461,7 +551,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
@@ -482,8 +573,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
            class="van-swipe__track"
       >
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-0"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -491,8 +585,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper"
+             id="van-tab"
              role="tabpanel"
+             tabindex="0"
              aria-hidden="false"
+             aria-labelledby="van-tabs-1"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -500,8 +597,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-2"
              style="width: 100px;"
         >
           <div class="van-tab__pane">

packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap

@@ -7,28 +7,34 @@ exports[`should render Tab inside a component correctly 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           3
@@ -41,19 +47,28 @@ exports[`should render Tab inside a component correctly 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-1"
          style
     >
       1
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -68,28 +83,34 @@ exports[`should render correctly after inserting a tab 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           3
@@ -102,20 +123,29 @@ exports[`should render correctly after inserting a tab 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
     </div>
     <div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-1"
       >
         2
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
       3
@@ -131,19 +161,23 @@ exports[`should render correctly after inserting a tab with name 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           bar
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           foo
@@ -156,14 +190,20 @@ exports[`should render correctly after inserting a tab with name 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
       bar
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-1"
          style
     >
       foo

packages/vant/src/tabs/Tabs.tsx

@@ -44,6 +44,7 @@ import {
   useEventListener,
   onMountedOrActivated,
 } from '@vant/use';
+import { useId } from '../composables/use-id';
 import { route, RouteProps } from '../composables/use-route';
 import { useRefs } from '../composables/use-refs';
 import { useExpose } from '../composables/use-expose';
@@ -123,6 +124,7 @@ export default defineComponent({
     const navRef = ref<HTMLElement>();
     const wrapRef = ref<HTMLElement>();
 
+    const id = useId();
     const scroller = useScrollParent(root);
     const [titleRefs, setTitleRefs] = useRefs<ComponentInstance>();
     const { children, linkChildren } = useChildren(TABS_KEY);
@@ -359,12 +361,14 @@ export default defineComponent({
     const renderNav = () =>
       children.map((item, index) => (
         <TabsTitle
+          id={`${id}-${index}`}
           ref={setTitleRefs(index)}
           type={props.type}
           color={props.color}
           style={item.titleStyle}
           class={item.titleClass}
           isActive={index === state.currentIndex}
+          controls={item.id}
           scrollable={scrollable.value}
           renderTitle={item.$slots.title}
           activeColor={props.titleActiveColor}
@@ -472,6 +476,7 @@ export default defineComponent({
     useEventListener('scroll', onScroll, { target: scroller });
 
     linkChildren({
+      id,
       props,
       setLine,
       onRendered,

packages/vant/src/tabs/TabsTitle.tsx

@@ -8,6 +8,7 @@ export default defineComponent({
   name,
 
   props: {
+    id: String,
     dot: Boolean,
     type: String,
     color: String,
@@ -15,6 +16,7 @@ export default defineComponent({
     badge: numericProp,
     isActive: Boolean,
     disabled: Boolean,
+    controls: String,
     scrollable: Boolean,
     activeColor: String,
     renderTitle: Function,
@@ -75,6 +77,7 @@ export default defineComponent({
 
     return () => (
       <div
+        id={props.id}
         role="tab"
         class={[
           bem({
@@ -86,6 +89,7 @@ export default defineComponent({
         tabindex={props.disabled ? undefined : props.isActive ? 0 : -1}
         aria-selected={props.isActive}
         aria-disabled={props.disabled || undefined}
+        aria-controls={props.controls}
       >
         {renderText()}
       </div>

packages/vant/src/tabs/types.ts

@@ -11,6 +11,7 @@ export type TabsClickTabEventParams = {
 };
 
 export type TabsProvide = {
+  id: string;
   props: TabsProps;
   setLine: () => void;
   onRendered: (name: string | number, title?: string) => void;

packages/vant/src/vue-tsx-shim.d.ts

@@ -4,6 +4,7 @@ type EventHandler = (...args: any[]) => void;
 
 declare module 'vue' {
   interface ComponentCustomProps {
+    id?: string;
     role?: string;
     tabindex?: number;
     onClick?: EventHandler;