Merge branch 'dev' into next

packages/vant-cli/src/common/constant.ts

@@ -1,7 +1,6 @@
 import { get } from 'lodash-es';
 import { existsSync, readFileSync } from 'fs';
-import { createRequire } from 'module';
+import { fileURLToPath, pathToFileURL } from 'url';
-import { fileURLToPath } from 'url';
 import { join, dirname, isAbsolute } from 'path';
 
 function findRootDir(dir: string): string {
@@ -58,11 +57,10 @@ export function getPackageJson() {
 }
 
 async function getVantConfigAsync() {
-  const require = createRequire(import.meta.url);
-  delete require.cache[VANT_CONFIG_FILE];
-
   try {
-    return (await import(VANT_CONFIG_FILE)).default;
+    // https://github.com/nodejs/node/issues/31710
+    // absolute file paths don't work on Windows
+    return (await import(pathToFileURL(VANT_CONFIG_FILE).href)).default;
   } catch (err) {
     return {};
   }

packages/vant-use/changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v1.3.4
+
+- Fix useClickAway failed in SSR
+
 ### v1.3.3
 
 - Allow to call useWindowSize outside setup
@@ -7,7 +11,7 @@
 
 ### v1.3.2
 
--Remove passive event polyfill
+- Remove passive event polyfill
 
 ### v1.3.1
 

packages/vant-use/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/use",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Vant Composition API",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/vant-use/src/useClickAway/index.ts

@@ -1,4 +1,5 @@
 import { Ref, unref } from 'vue';
+import { inBrowser } from '../utils';
 import { useEventListener } from '../useEventListener';
 
 export type UseClickAwayOptions = {
@@ -10,6 +11,10 @@ export function useClickAway(
   listener: EventListener,
   options: UseClickAwayOptions = {}
 ) {
+  if (!inBrowser) {
+    return;
+  }
+
   const { eventName = 'click' } = options;
 
   const onClick = (event: Event) => {

packages/vant/package.json

@@ -46,7 +46,7 @@
   "dependencies": {
     "@vant/icons": "^1.7.1",
     "@vant/popperjs": "^1.1.0",
-    "@vant/use": "^1.3.3"
+    "@vant/use": "^1.3.4"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

packages/vant/src/address-edit/test/__snapshots__/demo.spec.ts.snap

@@ -6,30 +6,38 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-address-edit__fields">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Name
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Name"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Phone
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="tel"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Phone"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -39,16 +47,20 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Area
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    class="van-field__control"
                    readonly
                    placeholder="Area"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -57,15 +69,19 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field van-address-edit-detail">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Address
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
-            <textarea rows="1"
+            <textarea id="van-field-input"
+                      rows="1"
                       class="van-field__control"
                       placeholder="Address"
+                      aria-labelledby="van-field-label"
                       style="height: auto;"
             >
             </textarea>
@@ -74,15 +90,19 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Postal
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="tel"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Postal"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -97,6 +117,7 @@ exports[`should render demo and match snapshot 1`] = `
       <div role="switch"
            class="van-switch"
            style="font-size: 24px;"
+           tabindex="0"
            aria-checked="false"
       >
         <div class="van-switch__node">

packages/vant/src/address-edit/test/__snapshots__/index.spec.js.snap

@@ -11,30 +11,38 @@ exports[`should render AddressEdit correctly 1`] = `
   <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Name
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Name"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Phone
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="tel"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Phone"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -44,16 +52,20 @@ exports[`should render AddressEdit correctly 1`] = `
          tabindex="0"
     >
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Area
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  readonly
                  placeholder="Area"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -62,15 +74,19 @@ exports[`should render AddressEdit correctly 1`] = `
     </div>
     <div class="van-cell van-field van-address-edit-detail">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Address
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
-          <textarea rows="1"
+          <textarea id="van-field-input"
+                    rows="1"
                     class="van-field__control"
                     placeholder="Address"
+                    aria-labelledby="van-field-label"
           >
           </textarea>
         </div>
@@ -96,30 +112,38 @@ exports[`should render AddressEdit with props correctly 1`] = `
   <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Name
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Name"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Phone
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="tel"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Phone"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -129,16 +153,20 @@ exports[`should render AddressEdit with props correctly 1`] = `
          tabindex="0"
     >
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Area
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  readonly
                  placeholder="Area"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -147,15 +175,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
     </div>
     <div class="van-cell van-field van-address-edit-detail">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Address
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
-          <textarea rows="1"
+          <textarea id="van-field-input"
+                    rows="1"
                     class="van-field__control"
                     placeholder="Address"
+                    aria-labelledby="van-field-label"
           >
           </textarea>
         </div>
@@ -163,15 +195,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Postal
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="tel"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Postal"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -186,6 +222,7 @@ exports[`should render AddressEdit with props correctly 1`] = `
     <div role="switch"
          class="van-switch van-switch--on"
          style="font-size: 24px;"
+         tabindex="0"
          aria-checked="true"
     >
       <div class="van-switch__node">
@@ -209,15 +246,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
 exports[`should valid address detail and render error message correctly 1`] = `
 <div class="van-cell van-field van-address-edit-detail">
   <div class="van-cell__title van-field__label">
-    <label>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
       Address
     </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
-      <textarea rows="1"
+      <textarea id="van-field-input"
+                rows="1"
                 class="van-field__control"
                 placeholder="Address"
+                aria-labelledby="van-field-label"
                 style="height: auto;"
       >
       </textarea>
@@ -235,16 +276,20 @@ exports[`should valid area code and render error message correctly 1`] = `
      tabindex="0"
 >
   <div class="van-cell__title van-field__label">
-    <label>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
       Area
     </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
              readonly
              placeholder="Area"
+             aria-labelledby="van-field-label"
       >
     </div>
     <div class="van-field__error-message">
@@ -259,15 +304,19 @@ exports[`should valid area code and render error message correctly 1`] = `
 exports[`should valid name and render error message correctly 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">
-    <label>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
       Name
     </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
              placeholder="Name"
+             aria-labelledby="van-field-label"
       >
     </div>
     <div class="van-field__error-message">
@@ -280,15 +329,19 @@ exports[`should valid name and render error message correctly 1`] = `
 exports[`should valid postal code and render error message correctly 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">
-    <label>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
       Postal
     </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
       <input type="tel"
+             id="van-field-input"
              class="van-field__control"
              placeholder="Postal"
+             aria-labelledby="van-field-label"
       >
     </div>
     <div class="van-field__error-message">
@@ -301,15 +354,19 @@ exports[`should valid postal code and render error message correctly 1`] = `
 exports[`should valid tel and render error message correctly 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">
-    <label>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
       Phone
     </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
       <input type="tel"
+             id="van-field-input"
              class="van-field__control"
              placeholder="Phone"
+             aria-labelledby="van-field-label"
       >
     </div>
     <div class="van-field__error-message">

packages/vant/src/button/Button.tsx

@@ -9,6 +9,7 @@ import {
 import {
   extend,
   numericProp,
+  preventDefault,
   makeStringProp,
   createNamespace,
   BORDER_SURROUND,
@@ -135,7 +136,7 @@ export default defineComponent({
 
     const onClick = (event: MouseEvent) => {
       if (props.loading) {
-        event.preventDefault();
+        preventDefault(event);
       } else if (!props.disabled) {
         emit('click', event);
         route();

packages/vant/src/calendar/CalendarHeader.tsx

@@ -26,9 +26,8 @@ export default defineComponent({
       }
     };
 
-    const onClickSubtitle = (event: MouseEvent) => {
+    const onClickSubtitle = (event: MouseEvent) =>
       emit('click-subtitle', event);
-    };
 
     const renderSubtitle = () => {
       if (props.showSubtitle) {

packages/vant/src/cascader/Cascader.tsx

@@ -205,8 +205,10 @@ export default defineComponent({
       selectedOption: CascaderOption | null,
       tabIndex: number
     ) => {
-      const selected =
+      const { disabled } = option;
-        selectedOption && option[valueKey] === selectedOption[valueKey];
+      const selected = !!(
+        selectedOption && option[valueKey] === selectedOption[valueKey]
+      );
       const color = option.color || (selected ? props.activeColor : undefined);
 
       const Text = slots.option ? (
@@ -217,14 +219,12 @@ export default defineComponent({
 
       return (
         <li
-          class={[
+          role="menuitemradio"
-            bem('option', {
+          class={[bem('option', { selected, disabled }), option.className]}
-              selected,
-              disabled: option.disabled,
-            }),
-            option.className,
-          ]}
           style={{ color }}
+          tabindex={disabled ? undefined : selected ? 0 : -1}
+          aria-checked={selected}
+          aria-disabled={disabled || undefined}
           onClick={() => onSelect(option, tabIndex)}
         >
           {Text}
@@ -240,7 +240,7 @@ export default defineComponent({
       selectedOption: CascaderOption | null,
       tabIndex: number
     ) => (
-      <ul class={bem('options')}>
+      <ul role="menu" class={bem('options')}>
         {options.map((option) =>
           renderOption(option, selectedOption, tabIndex)
         )}

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

@@ -7,16 +7,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Area
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Select Area"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -30,16 +34,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Area
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Select Area"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -53,16 +61,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Area
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Select Area"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -76,16 +88,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Area
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Select Area"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -99,16 +115,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Area
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Select Area"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>

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

@@ -6,23 +6,37 @@ exports[`should change close icon when using close-icon prop 1`] = `
 `;
 
 exports[`should render option slot correctly 1`] = `
-<li class="van-cascader__option">
+<li role="menuitemradio"
+    class="van-cascader__option"
+    tabindex="-1"
+    aria-checked="false"
+>
   Custom Option foo
 </li>
 `;
 
 exports[`should render options-top、options-bottom slots correctly 1`] = `
-<div class="van-tab__pane">
+<div class="van-tab__panel">
   Top, tab index: 0
-  <ul class="van-cascader__options">
+  <ul role="menu"
-    <li class="van-cascader__option van-cascader__option--selected">
+      class="van-cascader__options"
+  >
+    <li role="menuitemradio"
+        class="van-cascader__option van-cascader__option--selected"
+        tabindex="0"
+        aria-checked="true"
+    >
       <span>
         Zhejiang
       </span>
       <i class="van-badge__wrapper van-icon van-icon-success van-cascader__selected-icon">
       </i>
     </li>
-    <li class="van-cascader__option">
+    <li role="menuitemradio"
+        class="van-cascader__option"
+        tabindex="-1"
+        aria-checked="false"
+    >
       <span>
         Jiangsu
       </span>
@@ -39,7 +53,11 @@ exports[`should render title slot correctly 1`] = `
 `;
 
 exports[`should select correct option when value changed 1`] = `
-<li class="van-cascader__option van-cascader__option--selected">
+<li role="menuitemradio"
+    class="van-cascader__option van-cascader__option--selected"
+    tabindex="0"
+    aria-checked="true"
+>
   <span>
     Wenzhou
   </span>
@@ -60,17 +78,22 @@ 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"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-cascader__tab"
+             tabindex="-1"
              aria-selected="false"
         >
           <span class="van-tab__text">
             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"
         >
           <span class="van-tab__text">
@@ -89,18 +112,31 @@ 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">
+            <div class="van-tab__panel">
-              <ul class="van-cascader__options">
+              <ul role="menu"
-                <li class="van-cascader__option">
+                  class="van-cascader__options"
+              >
+                <li role="menuitemradio"
+                    class="van-cascader__option"
+                    tabindex="-1"
+                    aria-checked="false"
+                >
                   <span>
                     Zhejiang
                   </span>
                 </li>
-                <li class="van-cascader__option van-cascader__option--selected">
+                <li role="menuitemradio"
+                    class="van-cascader__option van-cascader__option--selected"
+                    tabindex="0"
+                    aria-checked="true"
+                >
                   <span>
                     Jiangsu
                   </span>
@@ -111,23 +147,40 @@ 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">
+            <div class="van-tab__panel">
-              <ul class="van-cascader__options">
+              <ul role="menu"
-                <li class="van-cascader__option">
+                  class="van-cascader__options"
+              >
+                <li role="menuitemradio"
+                    class="van-cascader__option"
+                    tabindex="-1"
+                    aria-checked="false"
+                >
                   <span>
                     Nanjing
                   </span>
                 </li>
-                <li class="van-cascader__option">
+                <li role="menuitemradio"
+                    class="van-cascader__option"
+                    tabindex="-1"
+                    aria-checked="false"
+                >
                   <span>
                     Wuxi
                   </span>
                 </li>
-                <li class="van-cascader__option">
+                <li role="menuitemradio"
+                    class="van-cascader__option"
+                    tabindex="-1"
+                    aria-checked="false"
+                >
                   <span>
                     Xuzhou
                   </span>

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

@@ -259,5 +259,5 @@ test('should render options-top、options-bottom slots correctly', async () => {
     .find('.van-cascader__option')
     .trigger('click');
 
-  expect(wrapper.find('.van-tab__pane').html()).toMatchSnapshot();
+  expect(wrapper.find('.van-tab__panel').html()).toMatchSnapshot();
 });

packages/vant/src/checkbox/Checker.tsx

@@ -131,7 +131,7 @@ export default defineComponent({
             },
             direction.value,
           ])}
-          tabindex={disabled.value ? -1 : 0}
+          tabindex={disabled.value ? undefined : 0}
           aria-checked={props.checked}
           onClick={onClick}
         >

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

@@ -19,7 +19,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div role="checkbox"
        class="van-checkbox van-checkbox--disabled"
-       tabindex="-1"
        aria-checked="false"
   >
     <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled">
@@ -32,7 +31,6 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
   <div role="checkbox"
        class="van-checkbox van-checkbox--disabled"
-       tabindex="-1"
        aria-checked="true"
   >
     <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked">

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/config-provider/test/__snapshots__/demo.spec.ts.snap

@@ -5,7 +5,9 @@ exports[`should render demo and match snapshot 1`] = `
   <form class="van-form">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Rate
         </label>
       </div>
@@ -15,6 +17,8 @@ exports[`should render demo and match snapshot 1`] = `
             <div role="radiogroup"
                  class="van-rate"
                  tabindex="0"
+                 aria-disabled="false"
+                 aria-readonly="false"
             >
               <div role="radio"
                    class="van-rate__item"
@@ -73,7 +77,9 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Slider
         </label>
       </div>
@@ -121,7 +127,9 @@ exports[`should render demo and match snapshot 1`] = `
     <form class="van-form">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Rate
           </label>
         </div>
@@ -131,6 +139,8 @@ exports[`should render demo and match snapshot 1`] = `
               <div role="radiogroup"
                    class="van-rate"
                    tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
               >
                 <div role="radio"
                      class="van-rate__item"
@@ -189,7 +199,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Slider
           </label>
         </div>

packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap

@@ -6,30 +6,38 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-contact-edit__fields">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Name
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Name"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Phone
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="tel"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Phone"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -44,6 +52,7 @@ exports[`should render demo and match snapshot 1`] = `
       <div role="switch"
            class="van-switch"
            style="font-size: 24px;"
+           tabindex="0"
            aria-checked="false"
       >
         <div class="van-switch__node">

packages/vant/src/coupon-list/CouponList.tsx

@@ -1,8 +1,8 @@
 import {
+  ref,
   watch,
   computed,
   nextTick,
-  reactive,
   onMounted,
   defineComponent,
   ExtractPropTypes,
@@ -11,6 +11,7 @@ import {
 // Utils
 import {
   truthProp,
+  windowHeight,
   makeArrayProp,
   makeStringProp,
   makeNumberProp,
@@ -26,6 +27,7 @@ import { Tabs } from '../tabs';
 import { Field } from '../field';
 import { Button } from '../button';
 import { Coupon, CouponInfo } from '../coupon';
+import { useRect } from '@vant/use';
 
 const [name, bem, t] = createNamespace('coupon-list');
 const EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';
@@ -62,34 +64,40 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const [couponRefs, setCouponRefs] = useRefs();
 
-    const state = reactive({
+    const root = ref<HTMLElement>();
-      tab: 0,
+    const barRef = ref<HTMLElement>();
-      code: props.code,
+    const activeTab = ref(0);
-    });
+    const listHeight = ref(0);
+    const currentCode = ref(props.code);
 
     const buttonDisabled = computed(
       () =>
         !props.exchangeButtonLoading &&
         (props.exchangeButtonDisabled ||
-          !state.code ||
+          !currentCode.value ||
-          state.code.length < props.exchangeMinLength)
+          currentCode.value.length < props.exchangeMinLength)
     );
 
+    const updateListHeight = () => {
+      const TABS_HEIGHT = 44;
+      const rootHeight = useRect(root).height;
+      const headerHeight = useRect(barRef).height + TABS_HEIGHT;
+      listHeight.value =
+        (rootHeight > headerHeight ? rootHeight : windowHeight.value) -
+        headerHeight;
+    };
+
     const onExchange = () => {
-      emit('exchange', state.code);
+      emit('exchange', currentCode.value);
 
       // auto clear currentCode when not use v-model
       if (!props.code) {
-        state.code = '';
+        currentCode.value = '';
       }
     };
 
     const scrollToCoupon = (index: number) => {
-      nextTick(() => {
+      nextTick(() => couponRefs.value[index]?.scrollIntoView());
-        if (couponRefs.value[index]) {
-          couponRefs.value[index].scrollIntoView();
-        }
-      });
     };
 
     const renderEmpty = () => (
@@ -102,9 +110,9 @@ export default defineComponent({
     const renderExchangeBar = () => {
       if (props.showExchangeBar) {
         return (
-          <div class={bem('exchange-bar')}>
+          <div ref={barRef} class={bem('exchange-bar')}>
             <Field
-              v-model={state.code}
+              v-model={currentCode.value}
               clearable
               border={false}
               class={bem('field')}
@@ -133,10 +141,8 @@ export default defineComponent({
       return (
         <Tab title={title}>
           <div
-            class={bem('list', {
+            class={bem('list', { 'with-bottom': props.showCloseButton })}
-              'with-bar': props.showExchangeBar,
+            style={{ height: `${listHeight.value}px` }}
-              'with-bottom': props.showCloseButton,
-            })}
           >
             {coupons.map((coupon, index) => (
               <Coupon
@@ -163,10 +169,8 @@ export default defineComponent({
       return (
         <Tab title={title}>
           <div
-            class={bem('list', {
+            class={bem('list', { 'with-bottom': props.showCloseButton })}
-              'with-bar': props.showExchangeBar,
+            style={{ height: `${listHeight.value}px` }}
-              'with-bottom': props.showCloseButton,
-            })}
           >
             {disabledCoupons.map((coupon) => (
               <Coupon
@@ -186,25 +190,23 @@ export default defineComponent({
     watch(
       () => props.code,
       (value) => {
-        state.code = value;
+        currentCode.value = value;
       }
     );
 
-    watch(
+    watch(windowHeight, updateListHeight);
-      () => state.code,
+    watch(currentCode, (value) => emit('update:code', value));
-      (value) => emit('update:code', value)
-    );
-
     watch(() => props.displayedCouponIndex, scrollToCoupon);
 
     onMounted(() => {
+      updateListHeight();
       scrollToCoupon(props.displayedCouponIndex);
     });
 
     return () => (
-      <div class={bem()}>
+      <div ref={root} class={bem()}>
         {renderExchangeBar()}
-        <Tabs v-model:active={state.tab} class={bem('tab')} border={false}>
+        <Tabs v-model:active={activeTab.value} class={bem('tab')}>
           {renderCouponTab()}
           {renderDisabledTab()}
         </Tabs>

packages/vant/src/coupon-list/index.less

@@ -54,15 +54,10 @@
 
   &__list {
     box-sizing: border-box;
-    height: calc(100vh - 108px);
     padding: var(--van-padding-md) 0 var(--van-padding-lg);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 
-    &--with-bar {
-      height: calc(100vh - 152px);
-    }
-
     &--with-bottom {
       padding-bottom: 50px;
     }

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

@@ -7,6 +7,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Coupon code"
           >
@@ -28,18 +29,25 @@ 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"
+        <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)
@@ -52,11 +60,16 @@ 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"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
+             style="height: 624px;"
+        >
           <div class="van-coupon">
             <div class="van-coupon__content">
               <div class="van-coupon__head">
@@ -255,8 +268,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"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
@@ -283,6 +299,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Coupon code"
           >
@@ -304,18 +321,25 @@ 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"
+        <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)
@@ -328,11 +352,16 @@ 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"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-0"
            style="display: none;"
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
+             style="height: 624px;"
+        >
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -341,11 +370,16 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
           </div>
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="0"
+           aria-labelledby="van-tabs-1"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
+             style="height: 624px;"
+        >
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -377,6 +411,7 @@ exports[`should render list-footer slot correctly 1`] = `
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Coupon code"
           >
@@ -398,18 +433,25 @@ 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"
+        <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)
@@ -422,11 +464,16 @@ exports[`should render list-footer slot correctly 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-0"
            style="display: none;"
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
+             style="height: 624px;"
+        >
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -436,11 +483,16 @@ exports[`should render list-footer slot correctly 1`] = `
           List Footer
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="0"
+           aria-labelledby="van-tabs-1"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
+             style="height: 624px;"
+        >
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -473,6 +525,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Coupon code"
           >
@@ -494,18 +547,25 @@ 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"
+        <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)
@@ -518,11 +578,16 @@ 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"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
+             style="height: 624px;"
+        >
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.com/xxx.png">
             <p>
@@ -531,8 +596,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
           </div>
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>

packages/vant/src/dropdown-item/DropdownItem.tsx

@@ -58,7 +58,7 @@ export default defineComponent({
       showWrapper: false,
     });
 
-    const { parent } = useParent(DROPDOWN_KEY);
+    const { parent, index } = useParent(DROPDOWN_KEY);
 
     if (!parent) {
       if (process.env.NODE_ENV !== 'production') {
@@ -142,14 +142,16 @@ export default defineComponent({
       return (
         <Cell
           v-slots={{ value: renderIcon }}
-          clickable
+          role="menuitem"
           key={option.value}
           icon={option.icon}
           title={option.text}
           class={bem('option', { active })}
           style={{ color: active ? activeColor : '' }}
+          tabindex={active ? 0 : -1}
+          clickable
           onClick={onClick}
-        ></Cell>
+        />
       );
     };
 
@@ -175,12 +177,14 @@ export default defineComponent({
         >
           <Popup
             v-model:show={state.showPopup}
+            role="menu"
             class={bem('content')}
             overlay={overlay}
             position={direction === 'down' ? 'top' : 'bottom'}
             duration={state.transition ? duration : 0}
             lazyRender={props.lazyRender}
             overlayStyle={{ position: 'absolute' }}
+            aria-labelledby={`${parent.id}-${index.value}`}
             closeOnClickOverlay={closeOnClickOverlay}
             onOpen={onOpen}
             onClose={onClose}

packages/vant/src/dropdown-menu/DropdownMenu.tsx

@@ -12,6 +12,7 @@ import {
   isDef,
   truthProp,
   numericProp,
+  windowHeight,
   makeStringProp,
   makeNumericProp,
   createNamespace,
@@ -20,6 +21,7 @@ import {
 } from '../utils';
 
 // Composables
+import { useId } from '../composables/use-id';
 import {
   useRect,
   useChildren,
@@ -53,6 +55,7 @@ export default defineComponent({
   props: dropdownMenuProps,
 
   setup(props, { slots }) {
+    const id = useId();
     const root = ref<HTMLElement>();
     const barRef = ref<HTMLElement>();
     const offset = ref(0);
@@ -86,7 +89,7 @@ export default defineComponent({
         if (props.direction === 'down') {
           offset.value = rect.bottom;
         } else {
-          offset.value = window.innerHeight - rect.top;
+          offset.value = windowHeight.value - rect.top;
         }
       }
     };
@@ -114,8 +117,9 @@ export default defineComponent({
 
       return (
         <div
+          id={`${id}-${index}`}
           role="button"
-          tabindex={disabled ? -1 : 0}
+          tabindex={disabled ? undefined : 0}
           class={[bem('item', { disabled }), { [HAPTICS_FEEDBACK]: !disabled }]}
           onClick={() => {
             if (!disabled) {
@@ -139,7 +143,7 @@ export default defineComponent({
       );
     };
 
-    linkChildren({ props, offset });
+    linkChildren({ id, props, offset });
     useClickAway(root, onClickAway);
     useEventListener('scroll', onScroll, { target: scrollParent });
 

packages/vant/src/dropdown-menu/test/__snapshots__/demo.spec.ts.snap

@@ -4,7 +4,8 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-dropdown-menu">
     <div class="van-dropdown-menu__bar">
-      <div role="button"
+      <div id="van-dropdown-menu-0"
+           role="button"
            tabindex="0"
            class="van-dropdown-menu__item van-haptics-feedback"
       >
@@ -14,7 +15,8 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </span>
       </div>
-      <div role="button"
+      <div id="van-dropdown-menu-1"
+           role="button"
            tabindex="0"
            class="van-dropdown-menu__item van-haptics-feedback"
       >
@@ -46,7 +48,8 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-dropdown-menu">
     <div class="van-dropdown-menu__bar">
-      <div role="button"
+      <div id="van-dropdown-menu-0"
+           role="button"
            tabindex="0"
            class="van-dropdown-menu__item van-haptics-feedback"
       >
@@ -56,7 +59,8 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </span>
       </div>
-      <div role="button"
+      <div id="van-dropdown-menu-1"
+           role="button"
            tabindex="0"
            class="van-dropdown-menu__item van-haptics-feedback"
       >
@@ -88,7 +92,8 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-dropdown-menu">
     <div class="van-dropdown-menu__bar">
-      <div role="button"
+      <div id="van-dropdown-menu-0"
+           role="button"
            tabindex="0"
            class="van-dropdown-menu__item van-haptics-feedback"
       >
@@ -98,7 +103,8 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </span>
       </div>
-      <div role="button"
+      <div id="van-dropdown-menu-1"
+           role="button"
            tabindex="0"
            class="van-dropdown-menu__item van-haptics-feedback"
       >
@@ -130,7 +136,8 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-dropdown-menu">
     <div class="van-dropdown-menu__bar">
-      <div role="button"
+      <div id="van-dropdown-menu-0"
+           role="button"
            tabindex="0"
            class="van-dropdown-menu__item van-haptics-feedback"
       >
@@ -140,7 +147,8 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </span>
       </div>
-      <div role="button"
+      <div id="van-dropdown-menu-1"
+           role="button"
            tabindex="0"
            class="van-dropdown-menu__item van-haptics-feedback"
       >
@@ -172,8 +180,8 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-dropdown-menu">
     <div class="van-dropdown-menu__bar">
-      <div role="button"
+      <div id="van-dropdown-menu-0"
-           tabindex="-1"
+           role="button"
            class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
       >
         <span class="van-dropdown-menu__title">
@@ -182,8 +190,8 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </span>
       </div>
-      <div role="button"
+      <div id="van-dropdown-menu-1"
-           tabindex="-1"
+           role="button"
            class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
       >
         <span class="van-dropdown-menu__title">

packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap

@@ -3,7 +3,8 @@
 exports[`click option 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -13,7 +14,8 @@ exports[`click option 1`] = `
         </div>
       </span>
     </div>
-    <div role="button"
+    <div id="van-dropdown-menu-1"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -36,9 +38,11 @@ exports[`click option 1`] = `
     <transition-stub>
       <div style="z-index: 2007; transition-duration: 0.2s; display: none;"
            class="van-popup van-popup--top van-dropdown-item__content"
+           role="menu"
+           aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
+             role="menuitem"
              tabindex="0"
         >
           <div class="van-cell__title">
@@ -52,8 +56,8 @@ exports[`click option 1`] = `
           </div>
         </div>
         <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
+             role="menuitem"
-             tabindex="0"
+             tabindex="-1"
         >
           <div class="van-cell__title">
             <span>
@@ -80,7 +84,8 @@ exports[`click option 1`] = `
 exports[`close-on-click-outside 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -90,7 +95,8 @@ exports[`close-on-click-outside 1`] = `
         </div>
       </span>
     </div>
-    <div role="button"
+    <div id="van-dropdown-menu-1"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -113,9 +119,11 @@ exports[`close-on-click-outside 1`] = `
     <transition-stub>
       <div style="z-index: 2004; transition-duration: 0.2s; display: none;"
            class="van-popup van-popup--top van-dropdown-item__content"
+           role="menu"
+           aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
+             role="menuitem"
              tabindex="0"
         >
           <div class="van-cell__title">
@@ -129,8 +137,8 @@ exports[`close-on-click-outside 1`] = `
           </div>
         </div>
         <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
+             role="menuitem"
-             tabindex="0"
+             tabindex="-1"
         >
           <div class="van-cell__title">
             <span>
@@ -157,7 +165,8 @@ exports[`close-on-click-outside 1`] = `
 exports[`destroy one item 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -182,7 +191,8 @@ exports[`destroy one item 1`] = `
 exports[`direction up 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -192,7 +202,8 @@ exports[`direction up 1`] = `
         </div>
       </span>
     </div>
-    <div role="button"
+    <div id="van-dropdown-menu-1"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -225,7 +236,8 @@ exports[`direction up 1`] = `
 exports[`direction up 2`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -235,7 +247,8 @@ exports[`direction up 2`] = `
         </div>
       </span>
     </div>
-    <div role="button"
+    <div id="van-dropdown-menu-1"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -258,9 +271,11 @@ exports[`direction up 2`] = `
     <transition-stub>
       <div style="z-index: 2006; transition-duration: 0.2s;"
            class="van-popup van-popup--bottom van-dropdown-item__content"
+           role="menu"
+           aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
+             role="menuitem"
              tabindex="0"
         >
           <div class="van-cell__title">
@@ -274,8 +289,8 @@ exports[`direction up 2`] = `
           </div>
         </div>
         <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
+             role="menuitem"
-             tabindex="0"
+             tabindex="-1"
         >
           <div class="van-cell__title">
             <span>
@@ -302,7 +317,8 @@ exports[`direction up 2`] = `
 exports[`disable close-on-click-outside 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -312,7 +328,8 @@ exports[`disable close-on-click-outside 1`] = `
         </div>
       </span>
     </div>
-    <div role="button"
+    <div id="van-dropdown-menu-1"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -335,9 +352,11 @@ exports[`disable close-on-click-outside 1`] = `
     <transition-stub>
       <div style="z-index: 2005; transition-duration: 0.2s;"
            class="van-popup van-popup--top van-dropdown-item__content"
+           role="menu"
+           aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
+             role="menuitem"
              tabindex="0"
         >
           <div class="van-cell__title">
@@ -351,8 +370,8 @@ exports[`disable close-on-click-outside 1`] = `
           </div>
         </div>
         <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
+             role="menuitem"
-             tabindex="0"
+             tabindex="-1"
         >
           <div class="van-cell__title">
             <span>
@@ -379,8 +398,8 @@ exports[`disable close-on-click-outside 1`] = `
 exports[`disable dropdown item 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
-         tabindex="-1"
+         role="button"
          class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
     >
       <span class="van-dropdown-menu__title">
@@ -404,7 +423,8 @@ exports[`disable dropdown item 1`] = `
 exports[`render option icon 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -414,7 +434,8 @@ exports[`render option icon 1`] = `
         </div>
       </span>
     </div>
-    <div role="button"
+    <div id="van-dropdown-menu-1"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -437,9 +458,11 @@ exports[`render option icon 1`] = `
     <transition-stub>
       <div style="z-index: 2003; transition-duration: 0.2s;"
            class="van-popup van-popup--top van-dropdown-item__content"
+           role="menu"
+           aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
+             role="menuitem"
              tabindex="0"
         >
           <i class="van-badge__wrapper van-icon van-icon-success van-cell__left-icon">
@@ -455,8 +478,8 @@ exports[`render option icon 1`] = `
           </div>
         </div>
         <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
+             role="menuitem"
-             tabindex="0"
+             tabindex="-1"
         >
           <i class="van-badge__wrapper van-icon van-icon-success van-cell__left-icon">
           </i>
@@ -485,7 +508,8 @@ exports[`render option icon 1`] = `
 exports[`show dropdown item 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -495,7 +519,8 @@ exports[`show dropdown item 1`] = `
         </div>
       </span>
     </div>
-    <div role="button"
+    <div id="van-dropdown-menu-1"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -518,9 +543,11 @@ exports[`show dropdown item 1`] = `
     <transition-stub>
       <div style="z-index: 2001; transition-duration: 0.2s;"
            class="van-popup van-popup--top van-dropdown-item__content"
+           role="menu"
+           aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
+             role="menuitem"
              tabindex="0"
         >
           <div class="van-cell__title">
@@ -534,8 +561,8 @@ exports[`show dropdown item 1`] = `
           </div>
         </div>
         <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
+             role="menuitem"
-             tabindex="0"
+             tabindex="-1"
         >
           <div class="van-cell__title">
             <span>
@@ -562,7 +589,8 @@ exports[`show dropdown item 1`] = `
 exports[`show dropdown item 2`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -572,7 +600,8 @@ exports[`show dropdown item 2`] = `
         </div>
       </span>
     </div>
-    <div role="button"
+    <div id="van-dropdown-menu-1"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -595,9 +624,11 @@ exports[`show dropdown item 2`] = `
     <transition-stub>
       <div style="z-index: 2001; transition-duration: 0s; display: none;"
            class="van-popup van-popup--top van-dropdown-item__content"
+           role="menu"
+           aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
+             role="menuitem"
              tabindex="0"
         >
           <div class="van-cell__title">
@@ -611,8 +642,8 @@ exports[`show dropdown item 2`] = `
           </div>
         </div>
         <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
+             role="menuitem"
-             tabindex="0"
+             tabindex="-1"
         >
           <div class="van-cell__title">
             <span>
@@ -637,9 +668,11 @@ exports[`show dropdown item 2`] = `
     <transition-stub>
       <div style="z-index: 2002; transition-duration: 0.2s;"
            class="van-popup van-popup--top van-dropdown-item__content"
+           role="menu"
+           aria-labelledby="van-dropdown-menu-1"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
+             role="menuitem"
              tabindex="0"
         >
           <div class="van-cell__title">
@@ -653,8 +686,8 @@ exports[`show dropdown item 2`] = `
           </div>
         </div>
         <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
+             role="menuitem"
-             tabindex="0"
+             tabindex="-1"
         >
           <div class="van-cell__title">
             <span>
@@ -673,7 +706,8 @@ exports[`show dropdown item 2`] = `
 exports[`show dropdown item 3`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -683,7 +717,8 @@ exports[`show dropdown item 3`] = `
         </div>
       </span>
     </div>
-    <div role="button"
+    <div id="van-dropdown-menu-1"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -706,9 +741,11 @@ exports[`show dropdown item 3`] = `
     <transition-stub>
       <div style="z-index: 2001; transition-duration: 0s; display: none;"
            class="van-popup van-popup--top van-dropdown-item__content"
+           role="menu"
+           aria-labelledby="van-dropdown-menu-0"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
+             role="menuitem"
              tabindex="0"
         >
           <div class="van-cell__title">
@@ -722,8 +759,8 @@ exports[`show dropdown item 3`] = `
           </div>
         </div>
         <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
+             role="menuitem"
-             tabindex="0"
+             tabindex="-1"
         >
           <div class="van-cell__title">
             <span>
@@ -748,9 +785,11 @@ exports[`show dropdown item 3`] = `
     <transition-stub>
       <div style="z-index: 2002; transition-duration: 0.2s; display: none;"
            class="van-popup van-popup--top van-dropdown-item__content"
+           role="menu"
+           aria-labelledby="van-dropdown-menu-1"
       >
         <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
-             role="button"
+             role="menuitem"
              tabindex="0"
         >
           <div class="van-cell__title">
@@ -764,8 +803,8 @@ exports[`show dropdown item 3`] = `
           </div>
         </div>
         <div class="van-cell van-cell--clickable van-dropdown-item__option"
-             role="button"
+             role="menuitem"
-             tabindex="0"
+             tabindex="-1"
         >
           <div class="van-cell__title">
             <span>
@@ -784,7 +823,8 @@ exports[`show dropdown item 3`] = `
 exports[`title prop 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -794,7 +834,8 @@ exports[`title prop 1`] = `
         </div>
       </span>
     </div>
-    <div role="button"
+    <div id="van-dropdown-menu-1"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >
@@ -827,7 +868,8 @@ exports[`title prop 1`] = `
 exports[`title slot 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar">
-    <div role="button"
+    <div id="van-dropdown-menu-0"
+         role="button"
          tabindex="0"
          class="van-dropdown-menu__item van-haptics-feedback"
     >

packages/vant/src/dropdown-menu/types.ts

@@ -4,6 +4,7 @@ import type { DropdownMenuProps } from './DropdownMenu';
 export type DropdownMenuDirection = 'up' | 'down';
 
 export type DropdownMenuProvide = {
+  id: string;
   props: DropdownMenuProps;
   offset: Ref<number>;
 };

packages/vant/src/empty/Network.tsx

@@ -6,11 +6,11 @@ const renderStop = (color: string, offset: number, opacity?: number) => (
 export const Network = (
   <svg viewBox="0 0 160 160">
     <defs>
-      <linearGradient id={`${prefix}1`} x1="64.022%" y1="100%" x2="64.022%">
+      <linearGradient id={`${prefix}1`} x1="64%" y1="100%" x2="64%">
         {renderStop('#FFF', 0, 0.5)}
         {renderStop('#F2F3F5', 100)}
       </linearGradient>
-      <linearGradient id={`${prefix}2`} x1="50%" x2="50%" y2="84.459%">
+      <linearGradient id={`${prefix}2`} x1="50%" x2="50%" y2="84%">
         {renderStop('#EBEDF0', 0)}
         {renderStop('#DCDEE0', 100, 0)}
       </linearGradient>
@@ -18,18 +18,14 @@ export const Network = (
         {renderStop('#EAEDF0', 0)}
         {renderStop('#DCDEE0', 100)}
       </linearGradient>
-      <linearGradient id={`${prefix}4`} x1="100%" y1="100%" x2="100%">
-        {renderStop('#EAEDF0', 0)}
-        {renderStop('#DCDEE0', 100)}
-      </linearGradient>
       <radialGradient
-        id={`${prefix}5`}
+        id={`${prefix}4`}
         cx="50%"
         cy="0%"
         fx="50%"
         fy="0%"
         r="100%"
-        gradientTransform="matrix(0 1 -.54835 0 .5 -.5)"
+        gradientTransform="matrix(0 1 -.54 0 .5 -.5)"
       >
         {renderStop('#EBEDF0', 0)}
         {renderStop('#FFF', 100, 0)}
@@ -37,49 +33,30 @@ export const Network = (
     </defs>
     <g fill="none">
       <g opacity=".8">
-        <path
+        <path d="M36 131V53H16v20H2v58h34z" fill={`url(#${prefix}1)`} />
-          d="M0 124V46h20v20h14v58H0z"
+        <path d="M123 15h22v14h9v77h-31V15z" fill={`url(#${prefix}1)`} />
-          fill={`url(#${prefix}1)`}
-          transform="matrix(-1 0 0 1 36 7)"
-        />
-        <path
-          d="M121 8h22.231v14H152v77.37h-31V8z"
-          fill={`url(#${prefix}1)`}
-          transform="translate(2 7)"
-        />
       </g>
-      <path fill={`url(#${prefix}5)`} d="M0 139h160v21H0z" />
+      <path fill={`url(#${prefix}4)`} d="M0 139h160v21H0z" />
       <path
-        d="M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z"
+        d="M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z"
         fill={`url(#${prefix}2)`}
-        transform="translate(43 36)"
       />
       <g opacity=".6" stroke-linecap="round" stroke-width="7">
         <path
-          d="M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
+          d="M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13"
           stroke={`url(#${prefix}3)`}
-          transform="translate(43 36)"
         />
+        <path d="M53 36a34 34 0 0 0 0 48" stroke={`url(#${prefix}3)`} />
         <path
-          d="M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145"
+          d="M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13"
           stroke={`url(#${prefix}3)`}
-          transform="translate(43 36)"
-        />
-        <path
-          d="M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
-          stroke={`url(#${prefix}4)`}
-          transform="rotate(-180 76.483 42.257)"
-        />
-        <path
-          d="M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145"
-          stroke={`url(#${prefix}4)`}
-          transform="rotate(-180 89.791 42.146)"
         />
+        <path d="M106 84a34 34 0 0 0 0-48" stroke={`url(#${prefix}3)`} />
       </g>
       <g transform="translate(31 105)">
         <rect fill="#EBEDF0" width="98" height="34" rx="2" />
-        <rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.114" />
+        <rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.1" />
-        <rect fill="#EBEDF0" x="15" y="12" width="18" height="6" rx="1.114" />
+        <rect fill="#EBEDF0" x="15" y="12" width="18" height="6" rx="1.1" />
       </g>
     </g>
   </svg>

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

@@ -16,26 +16,36 @@ 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"
+        <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
@@ -48,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"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         <div class="van-empty">
@@ -61,13 +74,19 @@ exports[`should render demo and match snapshot 1`] = `
           </p>
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
            style="display: none;"
       >
       </div>

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

@@ -36,9 +36,9 @@ exports[`should render svg when image is network 1`] = `
     <svg viewbox="0 0 160 160">
       <defs>
         <linearGradient id="van-empty-network-1"
-                        x1="64.022%"
+                        x1="64%"
                         y1="100%"
-                        x2="64.022%"
+                        x2="64%"
         >
           <stop stop-color="#FFF"
                 offset="0%"
@@ -53,7 +53,7 @@ exports[`should render svg when image is network 1`] = `
         <linearGradient id="van-empty-network-2"
                         x1="50%"
                         x2="50%"
-                        y2="84.459%"
+                        y2="84%"
         >
           <stop stop-color="#EBEDF0"
                 offset="0%"
@@ -79,27 +79,13 @@ exports[`should render svg when image is network 1`] = `
           >
           </stop>
         </linearGradient>
-        <linearGradient id="van-empty-network-4"
+        <radialGradient id="van-empty-network-4"
-                        x1="100%"
-                        y1="100%"
-                        x2="100%"
-        >
-          <stop stop-color="#EAEDF0"
-                offset="0%"
-          >
-          </stop>
-          <stop stop-color="#DCDEE0"
-                offset="100%"
-          >
-          </stop>
-        </linearGradient>
-        <radialGradient id="van-empty-network-5"
                         cx="50%"
                         cy="0%"
                         fx="50%"
                         fy="0%"
                         r="100%"
-                        gradienttransform="matrix(0 1 -.54835 0 .5 -.5)"
+                        gradienttransform="matrix(0 1 -.54 0 .5 -.5)"
         >
           <stop stop-color="#EBEDF0"
                 offset="0%"
@@ -114,48 +100,41 @@ exports[`should render svg when image is network 1`] = `
       </defs>
       <g fill="none">
         <g opacity=".8">
-          <path d="M0 124V46h20v20h14v58H0z"
+          <path d="M36 131V53H16v20H2v58h34z"
                 fill="url(#van-empty-network-1)"
-                transform="matrix(-1 0 0 1 36 7)"
           >
           </path>
-          <path d="M121 8h22.231v14H152v77.37h-31V8z"
+          <path d="M123 15h22v14h9v77h-31V15z"
                 fill="url(#van-empty-network-1)"
-                transform="translate(2 7)"
           >
           </path>
         </g>
-        <path fill="url(#van-empty-network-5)"
+        <path fill="url(#van-empty-network-4)"
               d="M0 139h160v21H0z"
         >
         </path>
-        <path d="M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z"
+        <path d="M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z"
               fill="url(#van-empty-network-2)"
-              transform="translate(43 36)"
         >
         </path>
         <g opacity=".6"
            stroke-linecap="round"
            stroke-width="7"
         >
-          <path d="M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
+          <path d="M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13"
                 stroke="url(#van-empty-network-3)"
-                transform="translate(43 36)"
           >
           </path>
-          <path d="M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145"
+          <path d="M53 36a34 34 0 0 0 0 48"
                 stroke="url(#van-empty-network-3)"
-                transform="translate(43 36)"
           >
           </path>
-          <path d="M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
+          <path d="M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13"
-                stroke="url(#van-empty-network-4)"
+                stroke="url(#van-empty-network-3)"
-                transform="rotate(-180 76.483 42.257)"
           >
           </path>
-          <path d="M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145"
+          <path d="M106 84a34 34 0 0 0 0-48"
-                stroke="url(#van-empty-network-4)"
+                stroke="url(#van-empty-network-3)"
-                transform="rotate(-180 89.791 42.146)"
           >
           </path>
         </g>
@@ -171,7 +150,7 @@ exports[`should render svg when image is network 1`] = `
                 y="8"
                 width="80"
                 height="18"
-                rx="1.114"
+                rx="1.1"
           >
           </rect>
           <rect fill="#EBEDF0"
@@ -179,7 +158,7 @@ exports[`should render svg when image is network 1`] = `
                 y="12"
                 width="18"
                 height="6"
-                rx="1.114"
+                rx="1.1"
           >
           </rect>
         </g>

packages/vant/src/field/Field.tsx

@@ -39,6 +39,7 @@ import { cellSharedProps } from '../cell/Cell';
 
 // Composables
 import { CUSTOM_FIELD_INJECTION_KEY, useParent } from '@vant/use';
+import { useId } from '../composables/use-id';
 import { useExpose } from '../composables/use-expose';
 
 // Components
@@ -128,6 +129,7 @@ export default defineComponent({
   ],
 
   setup(props, { emit, slots }) {
+    const id = useId();
     const state = reactive({
       focused: false,
       validateFailed: false,
@@ -376,6 +378,8 @@ export default defineComponent({
       emit('keypress', event);
     };
 
+    const getInputId = () => props.id || `${id}-input`;
+
     const renderInput = () => {
       const controlClass = bem('control', [
         getProp('inputAlign'),
@@ -395,7 +399,7 @@ export default defineComponent({
       }
 
       const inputAttrs = {
-        id: props.id,
+        id: getInputId(),
         ref: inputRef,
         name: props.name,
         rows: props.rows !== undefined ? +props.rows : undefined,
@@ -406,6 +410,7 @@ export default defineComponent({
         autofocus: props.autofocus,
         placeholder: props.placeholder,
         autocomplete: props.autocomplete,
+        'aria-labelledby': props.label ? `${id}-label` : undefined,
         onBlur,
         onFocus,
         onInput,
@@ -491,7 +496,11 @@ export default defineComponent({
         return [slots.label(), colon];
       }
       if (props.label) {
-        return <label for={props.id}>{props.label + colon}</label>;
+        return (
+          <label id={`${id}-label`} for={getInputId()}>
+            {props.label + colon}
+          </label>
+        );
       }
     };
 

packages/vant/src/field/README.md

@@ -250,7 +250,7 @@ Use `input-align` prop to align the input value.
 | v-model | Input value | _number \| string_ | - |
 | label | Left side label | _string_ | - |
 | name | As the identifier when submitting the form | _string_ | - |
-| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | - |
+| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | `van-field-n-input` |
 | type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | _string_ | `text` |
 | size | Size，can be set to `large` | _string_ | - |
 | maxlength | Max length of value | _number \| string_ | - |

packages/vant/src/field/README.zh-CN.md

@@ -269,7 +269,7 @@ export default {
 | v-model | 当前输入的值 | _number \| string_ | - |
 | label | 输入框左侧文本 | _string_ | - |
 | name | 名称，作为提交表单时的标识符 | _string_ | - |
-| id `v3.2.2` | 输入框 id，同时会设置 label 的 for 属性 | _string_ | - |
+| id `v3.2.2` | 输入框 id，同时会设置 label 的 for 属性 | _string_ | `van-field-n-input` |
 | type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | _string_ | `text` |
 | size | 大小，可选值为 `large` | _string_ | - |
 | maxlength | 输入的最大字符数 | _number \| string_ | - |

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

@@ -5,15 +5,19 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Label
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Text"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -24,37 +28,47 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Text"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Phone
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="tel"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Phone"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Digit
         </label>
       </div>
@@ -62,15 +76,19 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-field__body">
           <input type="tel"
                  inputmode="numeric"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Digit"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Number
         </label>
       </div>
@@ -78,23 +96,29 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-field__body">
           <input type="text"
                  inputmode="decimal"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Number"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Password
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="password"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Password"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -105,30 +129,38 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  readonly
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field van-field--disabled">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  disabled
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -143,15 +175,19 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Show Icon"
+                 aria-labelledby="van-field-label"
           >
           <div class="van-field__right-icon">
             <i class="van-badge__wrapper van-icon van-icon-warning-o">
@@ -166,15 +202,19 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Show Clear Icon"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -185,30 +225,38 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field van-field--error">
       <div class="van-cell__title van-field__label van-field__label--required">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Username
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control van-field__control--error"
                  placeholder="Username"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label van-field__label--required">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Phone
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Phone"
+                 aria-labelledby="van-field-label"
           >
         </div>
         <div class="van-field__error-message">
@@ -222,15 +270,19 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-cell--center van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           SMS
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="SMS"
+                 aria-labelledby="van-field-label"
           >
           <div class="van-field__button">
             <button type="button"
@@ -252,30 +304,38 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Format On Change"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Format On Blur"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -287,7 +347,8 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-cell van-field">
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
-          <textarea rows="1"
+          <textarea id="van-field-input"
+                    rows="1"
                     class="van-field__control"
                     placeholder="Message"
                     style="height: auto;"
@@ -302,15 +363,19 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Message
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
-          <textarea rows="2"
+          <textarea id="van-field-input"
+                    rows="2"
                     class="van-field__control"
                     placeholder="Message"
+                    aria-labelledby="van-field-label"
                     style="height: auto;"
           >
           </textarea>
@@ -329,15 +394,19 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control van-field__control--right"
                  placeholder="Input Align Right"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>

packages/vant/src/field/test/__snapshots__/index.spec.js.snap

@@ -7,7 +7,9 @@ exports[`should change clear icon when using clear-icon prop 1`] = `
 
 exports[`should render colon when using colon prop 1`] = `
 <div class="van-cell__title van-field__label">
-  <label>
+  <label id="van-field-label"
+         for="van-field-input"
+  >
     foo:
   </label>
 </div>
@@ -24,6 +26,7 @@ exports[`should render extra slot correctly 1`] = `
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
       >
     </div>
@@ -48,7 +51,8 @@ exports[`should render textarea when type is textarea 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body">
-      <textarea class="van-field__control"
+      <textarea id="van-field-input"
+                class="van-field__control"
                 style="height: auto;"
       >
       </textarea>
@@ -62,6 +66,7 @@ exports[`should render word limit correctly 1`] = `
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
       >
     </div>
@@ -80,6 +85,7 @@ exports[`should render word limit correctly when modelValue is null 1`] = `
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
       >
     </div>
@@ -98,6 +104,7 @@ exports[`should render word limit correctly when modelValue is undefined 1`] = `
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
       >
     </div>

packages/vant/src/form/Form.tsx

@@ -5,6 +5,7 @@ import {
   FORM_KEY,
   truthProp,
   numericProp,
+  preventDefault,
   makeStringProp,
   createNamespace,
 } from '../utils';
@@ -170,7 +171,7 @@ export default defineComponent({
     };
 
     const onSubmit = (event: Event) => {
-      event.preventDefault();
+      preventDefault(event);
       submit();
     };
 

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

@@ -6,32 +6,40 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-cell-group van-cell-group--inset">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Username
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="username"
                    class="van-field__control"
                    placeholder="Username"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Password
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="password"
+                   id="van-field-input"
                    name="password"
                    class="van-field__control"
                    placeholder="Password"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -55,64 +63,80 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-cell-group van-cell-group--inset">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Label
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="pattern"
                    class="van-field__control"
                    placeholder="Use pattern"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Label
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="validator"
                    class="van-field__control"
                    placeholder="Use validator"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Label
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="validatorMessage"
                    class="van-field__control"
                    placeholder="Use validator to return message"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Label
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="asyncValidator"
                    class="van-field__control"
                    placeholder="Use async validator"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -136,7 +160,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-cell-group van-cell-group--inset">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Switch
           </label>
         </div>
@@ -146,6 +172,7 @@ exports[`should render demo and match snapshot 1`] = `
               <div role="switch"
                    class="van-switch"
                    style="font-size: 20px;"
+                   tabindex="0"
                    aria-checked="false"
               >
                 <div class="van-switch__node">
@@ -157,7 +184,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Checkbox
           </label>
         </div>
@@ -180,7 +209,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Checkbox Group
           </label>
         </div>
@@ -221,7 +252,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Radio
           </label>
         </div>
@@ -264,16 +297,21 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Stepper
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <div class="van-field__control van-field__control--custom">
-              <div class="van-stepper">
+              <div role="group"
+                   class="van-stepper"
+              >
                 <button type="button"
                         class="van-stepper__minus van-stepper__minus--disabled"
+                        aria-disabled="true"
                 >
                 </button>
                 <input type="text"
@@ -295,7 +333,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Rate
           </label>
         </div>
@@ -305,6 +345,8 @@ exports[`should render demo and match snapshot 1`] = `
               <div role="radiogroup"
                    class="van-rate"
                    tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
               >
                 <div role="radio"
                      class="van-rate__item"
@@ -363,7 +405,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Slider
           </label>
         </div>
@@ -393,7 +437,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Uploader
           </label>
         </div>
@@ -437,17 +483,21 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Picker
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="picker"
                    class="van-field__control"
                    readonly
                    placeholder="Select city"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -459,17 +509,21 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Datetime Picker
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="datetimePicker"
                    class="van-field__control"
                    readonly
                    placeholder="Select time"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -481,17 +535,21 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Area Picker
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="area"
                    class="van-field__control"
                    readonly
                    placeholder="Select area"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -503,17 +561,21 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Calendar
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="calendar"
                    class="van-field__control"
                    readonly
                    placeholder="Select date"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>

packages/vant/src/form/test/__snapshots__/events.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`should emit failed event when validating failed 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                name="A"
                class="van-field__control"
         >
@@ -19,6 +20,7 @@ exports[`should emit failed event when validating failed 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                name="B"
                class="van-field__control"
         >

packages/vant/src/form/test/__snapshots__/props.spec.tsx.snap

@@ -4,14 +4,18 @@ exports[`should render colon when using colon prop 1`] = `
 <form class="van-form">
   <div class="van-cell van-field">
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Label:
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -23,6 +27,7 @@ exports[`should render colon when using colon prop 1`] = `
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
         >
       </div>
@@ -37,6 +42,7 @@ exports[`should render error-message-align prop correctly 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
         >
       </div>
@@ -54,6 +60,7 @@ exports[`should render input-align prop correctly 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control van-field__control--right"
         >
       </div>
@@ -76,28 +83,36 @@ exports[`should render label-align prop correctly 1`] = `
 <form class="van-form">
   <div class="van-cell van-field van-field--label-right">
     <div class="van-cell__title van-field__label van-field__label--right">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Label
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
   </div>
   <div class="van-cell van-field van-field--label-center">
     <div class="van-cell__title van-field__label van-field__label--center">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Label
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -111,14 +126,18 @@ exports[`should render label-width prop correctly 1`] = `
     <div class="van-cell__title van-field__label"
          style="width: 5rem;"
     >
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Label
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -127,14 +146,18 @@ exports[`should render label-width prop correctly 1`] = `
     <div class="van-cell__title van-field__label"
          style="width: 10vw;"
     >
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Label
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -148,6 +171,7 @@ exports[`should validate first field when using validate-first prop 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                name="A"
                class="van-field__control"
         >
@@ -161,6 +185,7 @@ exports[`should validate first field when using validate-first prop 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                name="B"
                class="van-field__control"
         >

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

@@ -7,34 +7,47 @@ 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"
+          <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
@@ -49,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"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div>
@@ -125,18 +141,27 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-3"
          style="display: none;"
     >
     </div>

packages/vant/src/image-preview/ImagePreview.tsx

@@ -16,6 +16,8 @@ import {
   truthProp,
   unknownProp,
   Interceptor,
+  windowWidth,
+  windowHeight,
   makeArrayProp,
   makeStringProp,
   makeNumericProp,
@@ -25,7 +27,7 @@ import {
 } from '../utils';
 
 // Composables
-import { useRect, useWindowSize } from '@vant/use';
+import { useRect } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Components
@@ -78,7 +80,6 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     const swipeRef = ref<SwipeInstance>();
-    const windowSize = useWindowSize();
 
     const state = reactive({
       active: 0,
@@ -185,7 +186,7 @@ export default defineComponent({
 
     onMounted(resize);
 
-    watch([windowSize.width, windowSize.height], resize);
+    watch([windowWidth, windowHeight], resize);
 
     watch(
       () => props.startPosition,

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

@@ -5,18 +5,25 @@ 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"
+      <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
@@ -29,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"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div class="van-index-bar">
@@ -898,8 +908,11 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>

packages/vant/src/lazyload/vue-lazyload/lazy-container.js

@@ -14,7 +14,7 @@ class LazyContainer {
     this.options = {};
     this.lazy = lazy;
 
-    this._queue = [];
+    this.queue = [];
     this.update({ el, binding });
   }
 
@@ -61,7 +61,7 @@ class LazyContainer {
 export default class LazyContainerManager {
   constructor({ lazy }) {
     this.lazy = lazy;
-    this._queue = [];
+    this.queue = [];
   }
 
   bind(el, binding, vnode) {
@@ -71,19 +71,19 @@ export default class LazyContainerManager {
       vnode,
       lazy: this.lazy,
     });
-    this._queue.push(container);
+    this.queue.push(container);
   }
 
   update(el, binding, vnode) {
-    const container = this._queue.find((item) => item.el === el);
+    const container = this.queue.find((item) => item.el === el);
     if (!container) return;
     container.update({ el, binding, vnode });
   }
 
   unbind(el) {
-    const container = this._queue.find((item) => item.el === el);
+    const container = this.queue.find((item) => item.el === el);
     if (!container) return;
     container.clear();
-    remove(this._queue, container);
+    remove(this.queue, container);
   }
 }

packages/vant/src/lazyload/vue-lazyload/lazy-image.js

@@ -59,7 +59,7 @@ export default (lazyManager) => ({
   },
   methods: {
     init() {
-      const { src, loading, error } = lazyManager._valueFormatter(this.src);
+      const { src, loading, error } = lazyManager.valueFormatter(this.src);
       this.state.loaded = false;
       this.options.src = src;
       this.options.error = error;

packages/vant/src/lazyload/vue-lazyload/lazy.js

@@ -50,9 +50,9 @@ export default function () {
       observerOptions,
     }) {
       this.mode = modeType.event;
-      this.ListenerQueue = [];
+      this.listeners = [];
-      this.TargetIndex = 0;
+      this.targetIndex = 0;
-      this.TargetQueue = [];
+      this.targets = [];
       this.options = {
         silent,
         dispatchEvent: !!dispatchEvent,
@@ -70,10 +70,10 @@ export default function () {
         observer: !!observer,
         observerOptions: observerOptions || DEFAULT_OBSERVER_OPTIONS,
       };
-      this._initEvent();
+      this.initEvent();
-      this._imageCache = new ImageCache({ max: 200 });
+      this.imageCache = new ImageCache({ max: 200 });
       this.lazyLoadHandler = throttle(
-        this._lazyLoadHandler.bind(this),
+        this.lazyLoadHandler.bind(this),
         this.options.throttleWait
       );
 
@@ -94,7 +94,7 @@ export default function () {
      * @return {Array}
      */
     performance() {
-      return this.ListenerQueue.map((item) => item.performance());
+      return this.listeners.map((item) => item.performance());
     }
 
     /*
@@ -103,12 +103,12 @@ export default function () {
      * @return
      */
     addLazyBox(vm) {
-      this.ListenerQueue.push(vm);
+      this.listeners.push(vm);
       if (inBrowser) {
-        this._addListenerTarget(window);
+        this.addListenerTarget(window);
-        this._observer && this._observer.observe(vm.el);
+        this.observer && this.observer.observe(vm.el);
         if (vm.$el && vm.$el.parentNode) {
-          this._addListenerTarget(vm.$el.parentNode);
+          this.addListenerTarget(vm.$el.parentNode);
         }
       }
     }
@@ -121,17 +121,17 @@ export default function () {
      * @return
      */
     add(el, binding, vnode) {
-      if (this.ListenerQueue.some((item) => item.el === el)) {
+      if (this.listeners.some((item) => item.el === el)) {
         this.update(el, binding);
         return nextTick(this.lazyLoadHandler);
       }
 
-      const value = this._valueFormatter(binding.value);
+      const value = this.valueFormatter(binding.value);
       let { src } = value;
 
       nextTick(() => {
         src = getBestSelectionFromSrcset(el, this.options.scale) || src;
-        this._observer && this._observer.observe(el);
+        this.observer && this.observer.observe(el);
 
         const container = Object.keys(binding.modifiers)[0];
         let $parent;
@@ -156,16 +156,16 @@ export default function () {
           loading: value.loading,
           error: value.error,
           cors: value.cors,
-          elRenderer: this._elRenderer.bind(this),
+          elRenderer: this.elRenderer.bind(this),
           options: this.options,
-          imageCache: this._imageCache,
+          imageCache: this.imageCache,
         });
 
-        this.ListenerQueue.push(newListener);
+        this.listeners.push(newListener);
 
         if (inBrowser) {
-          this._addListenerTarget(window);
+          this.addListenerTarget(window);
-          this._addListenerTarget($parent);
+          this.addListenerTarget($parent);
         }
 
         this.lazyLoadHandler();
@@ -180,11 +180,11 @@ export default function () {
      * @return
      */
     update(el, binding, vnode) {
-      const value = this._valueFormatter(binding.value);
+      const value = this.valueFormatter(binding.value);
       let { src } = value;
       src = getBestSelectionFromSrcset(el, this.options.scale) || src;
 
-      const exist = this.ListenerQueue.find((item) => item.el === el);
+      const exist = this.listeners.find((item) => item.el === el);
       if (!exist) {
         this.add(el, binding, vnode);
       } else {
@@ -194,9 +194,9 @@ export default function () {
           loading: value.loading,
         });
       }
-      if (this._observer) {
+      if (this.observer) {
-        this._observer.unobserve(el);
+        this.observer.unobserve(el);
-        this._observer.observe(el);
+        this.observer.observe(el);
       }
       this.lazyLoadHandler();
       nextTick(() => this.lazyLoadHandler());
@@ -209,12 +209,12 @@ export default function () {
      */
     remove(el) {
       if (!el) return;
-      this._observer && this._observer.unobserve(el);
+      this.observer && this.observer.unobserve(el);
-      const existItem = this.ListenerQueue.find((item) => item.el === el);
+      const existItem = this.listeners.find((item) => item.el === el);
       if (existItem) {
-        this._removeListenerTarget(existItem.$parent);
+        this.removeListenerTarget(existItem.$parent);
-        this._removeListenerTarget(window);
+        this.removeListenerTarget(window);
-        remove(this.ListenerQueue, existItem);
+        remove(this.listeners, existItem);
         existItem.$destroy();
       }
     }
@@ -226,12 +226,12 @@ export default function () {
      */
     removeComponent(vm) {
       if (!vm) return;
-      remove(this.ListenerQueue, vm);
+      remove(this.listeners, vm);
-      this._observer && this._observer.unobserve(vm.el);
+      this.observer && this.observer.unobserve(vm.el);
       if (vm.$parent && vm.$el.parentNode) {
-        this._removeListenerTarget(vm.$el.parentNode);
+        this.removeListenerTarget(vm.$el.parentNode);
       }
-      this._removeListenerTarget(window);
+      this.removeListenerTarget(window);
     }
 
     setMode(mode) {
@@ -242,21 +242,21 @@ export default function () {
       this.mode = mode; // event or observer
 
       if (mode === modeType.event) {
-        if (this._observer) {
+        if (this.observer) {
-          this.ListenerQueue.forEach((listener) => {
+          this.listeners.forEach((listener) => {
-            this._observer.unobserve(listener.el);
+            this.observer.unobserve(listener.el);
           });
-          this._observer = null;
+          this.observer = null;
         }
 
-        this.TargetQueue.forEach((target) => {
+        this.targets.forEach((target) => {
-          this._initListen(target.el, true);
+          this.initListen(target.el, true);
         });
       } else {
-        this.TargetQueue.forEach((target) => {
+        this.targets.forEach((target) => {
-          this._initListen(target.el, false);
+          this.initListen(target.el, false);
         });
-        this._initIntersectionObserver();
+        this.initIntersectionObserver();
       }
     }
 
@@ -269,22 +269,22 @@ export default function () {
      * @param  {DOM} el listener target
      * @return
      */
-    _addListenerTarget(el) {
+    addListenerTarget(el) {
       if (!el) return;
-      let target = this.TargetQueue.find((target) => target.el === el);
+      let target = this.targets.find((target) => target.el === el);
       if (!target) {
         target = {
           el,
-          id: ++this.TargetIndex,
+          id: ++this.targetIndex,
           childrenCount: 1,
           listened: true,
         };
-        this.mode === modeType.event && this._initListen(target.el, true);
+        this.mode === modeType.event && this.initListen(target.el, true);
-        this.TargetQueue.push(target);
+        this.targets.push(target);
       } else {
         target.childrenCount++;
       }
-      return this.TargetIndex;
+      return this.targetIndex;
     }
 
     /*
@@ -292,13 +292,13 @@ export default function () {
      * @param  {DOM} el or window
      * @return
      */
-    _removeListenerTarget(el) {
+    removeListenerTarget(el) {
-      this.TargetQueue.forEach((target, index) => {
+      this.targets.forEach((target, index) => {
         if (target.el === el) {
           target.childrenCount--;
           if (!target.childrenCount) {
-            this._initListen(target.el, false);
+            this.initListen(target.el, false);
-            this.TargetQueue.splice(index, 1);
+            this.targets.splice(index, 1);
             target = null;
           }
         }
@@ -311,13 +311,13 @@ export default function () {
      * @param  {boolean} start flag
      * @return
      */
-    _initListen(el, start) {
+    initListen(el, start) {
       this.options.ListenEvents.forEach((evt) =>
         (start ? on : off)(el, evt, this.lazyLoadHandler)
       );
     }
 
-    _initEvent() {
+    initEvent() {
       this.Event = {
         listeners: {
           loading: [],
@@ -358,9 +358,9 @@ export default function () {
      * find nodes which in viewport and trigger load
      * @return
      */
-    _lazyLoadHandler() {
+    lazyLoadHandler() {
       const freeList = [];
-      this.ListenerQueue.forEach((listener) => {
+      this.listeners.forEach((listener) => {
         if (!listener.el || !listener.el.parentNode) {
           freeList.push(listener);
         }
@@ -369,7 +369,7 @@ export default function () {
         listener.load();
       });
       freeList.forEach((item) => {
-        remove(this.ListenerQueue, item);
+        remove(this.listeners, item);
         item.$destroy();
       });
     }
@@ -379,19 +379,19 @@ export default function () {
      * set mode to observer
      * @return
      */
-    _initIntersectionObserver() {
+    initIntersectionObserver() {
       if (!hasIntersectionObserver) {
         return;
       }
 
-      this._observer = new IntersectionObserver(
+      this.observer = new IntersectionObserver(
-        this._observerHandler.bind(this),
+        this.observerHandler.bind(this),
         this.options.observerOptions
       );
 
-      if (this.ListenerQueue.length) {
+      if (this.listeners.length) {
-        this.ListenerQueue.forEach((listener) => {
+        this.listeners.forEach((listener) => {
-          this._observer.observe(listener.el);
+          this.observer.observe(listener.el);
         });
       }
     }
@@ -400,13 +400,13 @@ export default function () {
      * init IntersectionObserver
      * @return
      */
-    _observerHandler(entries) {
+    observerHandler(entries) {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          this.ListenerQueue.forEach((listener) => {
+          this.listeners.forEach((listener) => {
             if (listener.el === entry.target) {
               if (listener.state.loaded)
-                return this._observer.unobserve(listener.el);
+                return this.observer.unobserve(listener.el);
               listener.load();
             }
           });
@@ -421,7 +421,7 @@ export default function () {
      * @param  {bool} inCache  is rendered from cache
      * @return
      */
-    _elRenderer(listener, state, cache) {
+    elRenderer(listener, state, cache) {
       if (!listener.el) return;
       const { el, bindType } = listener;
 
@@ -463,7 +463,7 @@ export default function () {
      * @param {string} image's src
      * @return {object} image's loading, loaded, error url
      */
-    _valueFormatter(value) {
+    valueFormatter(value) {
       let src = value;
       let { loading, error } = this.options;
 

packages/vant/src/lazyload/vue-lazyload/listener.js

@@ -30,7 +30,7 @@ export default class ReactiveListener {
 
     this.$parent = $parent;
     this.elRenderer = elRenderer;
-    this._imageCache = imageCache;
+    this.imageCache = imageCache;
     this.performanceData = {
       loadStart: 0,
       loadEnd: 0,
@@ -156,7 +156,7 @@ export default class ReactiveListener {
       return;
     }
     if (this.state.rendered && this.state.loaded) return;
-    if (this._imageCache.has(this.src)) {
+    if (this.imageCache.has(this.src)) {
       this.state.loaded = true;
       this.render('loaded', true);
       this.state.rendered = true;
@@ -182,7 +182,7 @@ export default class ReactiveListener {
           this.record('loadEnd');
           this.render('loaded', false);
           this.state.rendered = true;
-          this._imageCache.add(this.src);
+          this.imageCache.add(this.src);
           onFinish();
         },
         (err) => {

packages/vant/src/lazyload/vue-lazyload/util.js

@@ -139,8 +139,7 @@ export const loadImageAsync = (item, resolve, reject) => {
   const image = new Image();
 
   if (!item || !item.src) {
-    const err = new Error('image src is required');
+    return reject(new Error('image src is required'));
-    return reject(err);
   }
 
   image.src = item.src;
@@ -163,22 +162,22 @@ export class ImageCache {
     this.options = {
       max: max || 100,
     };
-    this._caches = [];
+    this.caches = [];
   }
 
   has(key) {
-    return this._caches.indexOf(key) > -1;
+    return this.caches.indexOf(key) > -1;
   }
 
   add(key) {
     if (this.has(key)) return;
-    this._caches.push(key);
+    this.caches.push(key);
-    if (this._caches.length > this.options.max) {
+    if (this.caches.length > this.options.max) {
       this.free();
     }
   }
 
   free() {
-    this._caches.shift();
+    this.caches.shift();
   }
 }

packages/vant/src/list/List.tsx

@@ -115,7 +115,12 @@ export default defineComponent({
         const text = slots.error ? slots.error() : props.errorText;
         if (text) {
           return (
-            <div class={bem('error-text')} onClick={clickErrorText}>
+            <div
+              role="button"
+              class={bem('error-text')}
+              tabindex={0}
+              onClick={clickErrorText}
+            >
               {text}
             </div>
           );
@@ -139,10 +144,7 @@ export default defineComponent({
       }
     };
 
-    watch(
+    watch(() => [props.loading, props.finished, props.error], check);
-      [() => props.loading, () => props.finished, () => props.error],
-      check
-    );
 
     if (tabStatus) {
       watch(tabStatus, (tabActive) => {

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

@@ -5,26 +5,36 @@ 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"
+      <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
@@ -37,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"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div role="feed"
@@ -68,13 +81,19 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>

packages/vant/src/list/test/__snapshots__/index.spec.js.snap

@@ -5,7 +5,10 @@ exports[`should render error slot correctly 1`] = `
      class="van-list"
      aria-busy="false"
 >
-  <div class="van-list__error-text">
+  <div role="button"
+       class="van-list__error-text"
+       tabindex="0"
+  >
     Custom Error
   </div>
   <div class="van-list__placeholder">

packages/vant/src/number-keyboard/NumberKeyboardKey.tsx

@@ -1,5 +1,5 @@
 import { ref, PropType, defineComponent } from 'vue';
-import { numericProp, createNamespace } from '../utils';
+import { numericProp, createNamespace, preventDefault } from '../utils';
 import { useTouch } from '../composables/use-touch';
 import { Loading } from '../loading';
 
@@ -8,7 +8,7 @@ const [name, bem] = createNamespace('key');
 const CollapseIcon = (
   <svg class={bem('collapse-icon')} viewBox="0 0 30 24">
     <path
-      d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z"
+      d="M26 13h-2v2h2v-2zm-8-3h2V8h-2v2zm2-4h2V4h-2v2zm2 4h4V4h-2v4h-2v2zm-7 14 3-3h-6l3 3zM6 13H4v2h2v-2zm16 0H8v2h14v-2zm-12-3h2V8h-2v2zM28 0l1 1 1 1v15l-1 2H1l-1-2V2l1-1 1-1zm0 2H2v15h26V2zM6 4v2H4V4zm10 2h2V4h-2v2zM8 9v1H4V8zm8 0v1h-2V8zm-6-5v2H8V4zm4 0v2h-2V4z"
       fill="currentColor"
     />
   </svg>
@@ -17,7 +17,7 @@ const CollapseIcon = (
 const DeleteIcon = (
   <svg class={bem('delete-icon')} viewBox="0 0 32 22">
     <path
-      d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
+      d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
       fill="currentColor"
     />
   </svg>
@@ -61,7 +61,7 @@ export default defineComponent({
         // eliminate tap delay on safari
         // see: https://github.com/youzan/vant/issues/6836
         if (!slots.default) {
-          event.preventDefault();
+          preventDefault(event);
         }
         active.value = false;
         emit('press', props.text, props.type);

packages/vant/src/number-keyboard/test/__snapshots__/demo.spec.ts.snap

@@ -79,16 +79,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Bind Value
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Click To Input"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -178,7 +182,7 @@ exports[`should render demo and match snapshot 1`] = `
             <svg class="van-key__collapse-icon"
                  viewbox="0 0 30 24"
             >
-              <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z"
+              <path d="M26 13h-2v2h2v-2zm-8-3h2V8h-2v2zm2-4h2V4h-2v2zm2 4h4V4h-2v4h-2v2zm-7 14 3-3h-6l3 3zM6 13H4v2h2v-2zm16 0H8v2h14v-2zm-12-3h2V8h-2v2zM28 0l1 1 1 1v15l-1 2H1l-1-2V2l1-1 1-1zm0 2H2v15h26V2zM6 4v2H4V4zm10 2h2V4h-2v2zM8 9v1H4V8zm8 0v1h-2V8zm-6-5v2H8V4zm4 0v2h-2V4z"
                     fill="currentColor"
               >
               </path>
@@ -201,7 +205,7 @@ exports[`should render demo and match snapshot 1`] = `
             <svg class="van-key__delete-icon"
                  viewbox="0 0 32 22"
             >
-              <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
+              <path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
                     fill="currentColor"
               >
               </path>
@@ -316,7 +320,7 @@ exports[`should render demo and match snapshot 1`] = `
             <svg class="van-key__delete-icon"
                  viewbox="0 0 32 22"
             >
-              <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
+              <path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
                     fill="currentColor"
               >
               </path>
@@ -444,7 +448,7 @@ exports[`should render demo and match snapshot 1`] = `
             <svg class="van-key__delete-icon"
                  viewbox="0 0 32 22"
             >
-              <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
+              <path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
                     fill="currentColor"
               >
               </path>
@@ -567,7 +571,7 @@ exports[`should render demo and match snapshot 1`] = `
             <svg class="van-key__delete-icon"
                  viewbox="0 0 32 22"
             >
-              <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
+              <path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
                     fill="currentColor"
               >
               </path>
@@ -690,7 +694,7 @@ exports[`should render demo and match snapshot 1`] = `
             <svg class="van-key__delete-icon"
                  viewbox="0 0 32 22"
             >
-              <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
+              <path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
                     fill="currentColor"
               >
               </path>
@@ -795,7 +799,7 @@ exports[`should render demo and match snapshot 1`] = `
             <svg class="van-key__collapse-icon"
                  viewbox="0 0 30 24"
             >
-              <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z"
+              <path d="M26 13h-2v2h2v-2zm-8-3h2V8h-2v2zm2-4h2V4h-2v2zm2 4h4V4h-2v4h-2v2zm-7 14 3-3h-6l3 3zM6 13H4v2h2v-2zm16 0H8v2h14v-2zm-12-3h2V8h-2v2zM28 0l1 1 1 1v15l-1 2H1l-1-2V2l1-1 1-1zm0 2H2v15h26V2zM6 4v2H4V4zm10 2h2V4h-2v2zM8 9v1H4V8zm8 0v1h-2V8zm-6-5v2H8V4zm4 0v2h-2V4z"
                     fill="currentColor"
               >
               </path>
@@ -818,7 +822,7 @@ exports[`should render demo and match snapshot 1`] = `
             <svg class="van-key__delete-icon"
                  viewbox="0 0 32 22"
             >
-              <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
+              <path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
                     fill="currentColor"
               >
               </path>

packages/vant/src/pagination/Pagination.tsx

@@ -1,10 +1,11 @@
-import { computed, watch, defineComponent, ExtractPropTypes } from 'vue';
+import { computed, watchEffect, defineComponent, ExtractPropTypes } from 'vue';
 import {
-  BORDER,
+  clamp,
   makeStringProp,
   makeNumberProp,
   makeNumericProp,
   createNamespace,
+  BORDER_SURROUND,
 } from '../utils';
 
 const [name, bem, t] = createNamespace('pagination');
@@ -57,10 +58,6 @@ export default defineComponent({
       const showPageSize = +props.showPageSize;
       const { modelValue, forceEllipses } = props;
 
-      if (props.mode !== 'multi') {
-        return items;
-      }
-
       // Default page limits
       let startPage = 1;
       let endPage = pageCount;
@@ -101,85 +98,96 @@ export default defineComponent({
       return items;
     });
 
-    const select = (page: number, emitChange?: boolean) => {
+    const updateModelValue = (value: number, emitChange?: boolean) => {
-      page = Math.min(count.value, Math.max(1, page));
+      value = clamp(value, 1, count.value);
 
-      if (props.modelValue !== page) {
+      if (props.modelValue !== value) {
-        emit('update:modelValue', page);
+        emit('update:modelValue', value);
 
         if (emitChange) {
-          emit('change', page);
+          emit('change', value);
         }
       }
     };
 
-    watch(
+    // format modelValue
-      () => props.modelValue,
+    watchEffect(() => updateModelValue(props.modelValue));
-      (value) => {
+
-        select(value);
+    const renderDesc = () => (
-      },
+      <li class={bem('page-desc')}>
-      { immediate: true }
+        {slots.pageDesc
+          ? slots.pageDesc()
+          : `${props.modelValue}/${count.value}`}
+      </li>
     );
 
-    const renderDesc = () => {
+    const renderPrevButton = () => {
-      if (props.mode !== 'multi') {
+      const { mode, modelValue } = props;
-        return (
+      const slot = slots['prev-text'];
-          <li class={bem('page-desc')}>
+      const disabled = modelValue === 1;
-            {slots.pageDesc
-              ? slots.pageDesc()
-              : `${props.modelValue}/${count.value}`}
-          </li>
-        );
-      }
-    };
-
-    return () => {
-      const value = props.modelValue;
-      const simple = props.mode !== 'multi';
-
-      const onSelect = (value: number) => () => select(value, true);
-
       return (
-        <ul class={bem({ simple })}>
+        <li
-          <li
+          class={[
-            class={[
+            bem('item', { disabled, border: mode === 'simple', prev: true }),
-              bem('item', { disabled: value === 1 }),
+            BORDER_SURROUND,
-              bem('prev'),
+          ]}
-              BORDER,
+        >
-            ]}
+          <button
-            onClick={onSelect(value - 1)}
+            disabled={disabled}
+            onClick={() => updateModelValue(modelValue - 1)}
           >
-            {slots['prev-text']
+            {slot ? slot() : props.prevText || t('prev')}
-              ? slots['prev-text']()
+          </button>
-              : props.prevText || t('prev')}
+        </li>
-          </li>
-          {pages.value.map((page) => (
-            <li
-              class={[
-                bem('item', { active: page.active }),
-                bem('page'),
-                BORDER,
-              ]}
-              onClick={onSelect(page.number)}
-            >
-              {slots.page ? slots.page(page) : page.text}
-            </li>
-          ))}
-          {renderDesc()}
-          <li
-            class={[
-              bem('item', { disabled: value === count.value }),
-              bem('next'),
-              BORDER,
-            ]}
-            onClick={onSelect(value + 1)}
-          >
-            {slots['next-text']
-              ? slots['next-text']()
-              : props.nextText || t('next')}
-          </li>
-        </ul>
       );
     };
+
+    const renderNextButton = () => {
+      const { mode, modelValue } = props;
+      const slot = slots['next-text'];
+      const disabled = modelValue === count.value;
+      return (
+        <li
+          class={[
+            bem('item', { disabled, border: mode === 'simple', next: true }),
+            BORDER_SURROUND,
+          ]}
+        >
+          <button
+            disabled={disabled}
+            onClick={() => updateModelValue(modelValue + 1)}
+          >
+            {slot ? slot() : props.nextText || t('next')}
+          </button>
+        </li>
+      );
+    };
+
+    const renderPages = () =>
+      pages.value.map((page) => (
+        <li
+          class={[
+            bem('item', { active: page.active, page: true }),
+            BORDER_SURROUND,
+          ]}
+        >
+          <button
+            aria-current={page.active || undefined}
+            onClick={() => updateModelValue(page.number)}
+          >
+            {slots.page ? slots.page(page) : page.text}
+          </button>
+        </li>
+      ));
+
+    return () => (
+      <nav role="navigation" class={bem()}>
+        <ul class={bem('items')}>
+          {renderPrevButton()}
+          {props.mode === 'simple' ? renderDesc() : renderPages()}
+          {renderNextButton()}
+        </ul>
+      </nav>
+    );
   },
 });

packages/vant/src/pagination/index.less

@@ -11,9 +11,12 @@
 }
 
 .van-pagination {
-  display: flex;
   font-size: var(--van-pagination-font-size);
 
+  &__items {
+    display: flex;
+  }
+
   &__item,
   &__page-desc {
     display: flex;
@@ -31,58 +34,56 @@
     cursor: pointer;
     user-select: none;
 
+    button {
+      flex: 1;
+      height: 100%;
+      border: none;
+      padding: 0;
+      background: transparent;
+
+      &[disabled] {
+        cursor: not-allowed;
+      }
+    }
+
     &:active {
       color: var(--van-white);
       background-color: var(--van-pagination-item-default-color);
     }
 
-    &::after {
+    &:not(:last-child)::after {
-      border-width: var(--van-border-width) 0 var(--van-border-width)
+      border-right-width: 0;
-        var(--van-border-width);
-    }
-
-    &:last-child::after {
-      border-right-width: var(--van-border-width);
     }
 
     &--active {
       color: var(--van-white);
       background-color: var(--van-pagination-item-default-color);
     }
-  }
 
-  &__prev,
+    &--page {
-  &__next {
+      flex-grow: 0;
-    padding: 0 var(--van-padding-base);
+    }
-    cursor: pointer;
-  }
 
-  &__item--disabled {
+    &--prev,
-    &,
+    &--next {
-    &:active {
+      padding: 0 var(--van-padding-base);
+      cursor: pointer;
+    }
+
+    &--border::after {
+      border-width: var(--van-border-width);
+    }
+
+    &--disabled {
       color: var(--van-pagination-item-disabled-color);
       background-color: var(--van-pagination-item-disabled-background);
-      cursor: not-allowed;
       opacity: var(--van-pagination-disabled-opacity);
     }
   }
 
-  &__page {
-    flex-grow: 0;
-  }
-
   &__page-desc {
     flex: 1;
     height: var(--van-pagination-height);
     color: var(--van-pagination-desc-color);
   }
-
-  &--simple {
-    .van-pagination__prev,
-    .van-pagination__next {
-      &::after {
-        border-width: var(--van-border-width);
-      }
-    }
-  }
 }

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

@@ -2,92 +2,151 @@
 
 exports[`should render demo and match snapshot 1`] = `
 <div>
-  <ul class="van-pagination">
+  <nav role="navigation"
-    <li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">
+       class="van-pagination"
-      Prev
-    </li>
-    <li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">
-      1
-    </li>
-    <li class="van-pagination__item van-pagination__page van-hairline">
-      2
-    </li>
-    <li class="van-pagination__item van-pagination__page van-hairline">
-      3
-    </li>
-    <li class="van-pagination__item van-pagination__page van-hairline">
-      4
-    </li>
-    <li class="van-pagination__item van-pagination__page van-hairline">
-      5
-    </li>
-    <li class="van-pagination__item van-pagination__next van-hairline">
-      Next
-    </li>
-  </ul>
-</div>
-<div>
-  <ul class="van-pagination van-pagination--simple"
-      size="small"
   >
-    <li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">
+    <ul class="van-pagination__items">
-      Prev
+      <li class="van-pagination__item van-pagination__item--disabled van-pagination__item--prev van-hairline--surround">
-    </li>
+        <button disabled>
-    <li class="van-pagination__page-desc">
+          Prev
-      1/12
+        </button>
-    </li>
+      </li>
-    <li class="van-pagination__item van-pagination__next van-hairline">
+      <li class="van-pagination__item van-pagination__item--active van-pagination__item--page van-hairline--surround">
-      Next
+        <button aria-current="true">
-    </li>
+          1
-  </ul>
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+        <button>
+          2
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+        <button>
+          3
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+        <button>
+          4
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+        <button>
+          5
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--next van-hairline--surround">
+        <button>
+          Next
+        </button>
+      </li>
+    </ul>
+  </nav>
 </div>
 <div>
-  <ul class="van-pagination">
+  <nav role="navigation"
-    <li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">
+       class="van-pagination"
-      Prev
+       size="small"
-    </li>
+  >
-    <li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">
+    <ul class="van-pagination__items">
-      1
+      <li class="van-pagination__item van-pagination__item--disabled van-pagination__item--border van-pagination__item--prev van-hairline--surround">
-    </li>
+        <button disabled>
-    <li class="van-pagination__item van-pagination__page van-hairline">
+          Prev
-      2
+        </button>
-    </li>
+      </li>
-    <li class="van-pagination__item van-pagination__page van-hairline">
+      <li class="van-pagination__page-desc">
-      3
+        1/12
-    </li>
+      </li>
-    <li class="van-pagination__item van-pagination__page van-hairline">
+      <li class="van-pagination__item van-pagination__item--border van-pagination__item--next van-hairline--surround">
-      ...
+        <button>
-    </li>
+          Next
-    <li class="van-pagination__item van-pagination__next van-hairline">
+        </button>
-      Next
+      </li>
-    </li>
+    </ul>
-  </ul>
+  </nav>
 </div>
 <div>
-  <ul class="van-pagination">
+  <nav role="navigation"
-    <li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">
+       class="van-pagination"
-      <i class="van-badge__wrapper van-icon van-icon-arrow-left">
+  >
-      </i>
+    <ul class="van-pagination__items">
-    </li>
+      <li class="van-pagination__item van-pagination__item--disabled van-pagination__item--prev van-hairline--surround">
-    <li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">
+        <button disabled>
-      1
+          Prev
-    </li>
+        </button>
-    <li class="van-pagination__item van-pagination__page van-hairline">
+      </li>
-      2
+      <li class="van-pagination__item van-pagination__item--active van-pagination__item--page van-hairline--surround">
-    </li>
+        <button aria-current="true">
-    <li class="van-pagination__item van-pagination__page van-hairline">
+          1
-      3
+        </button>
-    </li>
+      </li>
-    <li class="van-pagination__item van-pagination__page van-hairline">
+      <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-      4
+        <button>
-    </li>
+          2
-    <li class="van-pagination__item van-pagination__page van-hairline">
+        </button>
-      5
+      </li>
-    </li>
+      <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-    <li class="van-pagination__item van-pagination__next van-hairline">
+        <button>
-      <i class="van-badge__wrapper van-icon van-icon-arrow">
+          3
-      </i>
+        </button>
-    </li>
+      </li>
-  </ul>
+      <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+        <button>
+          ...
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--next van-hairline--surround">
+        <button>
+          Next
+        </button>
+      </li>
+    </ul>
+  </nav>
+</div>
+<div>
+  <nav role="navigation"
+       class="van-pagination"
+  >
+    <ul class="van-pagination__items">
+      <li class="van-pagination__item van-pagination__item--disabled van-pagination__item--prev van-hairline--surround">
+        <button disabled>
+          <i class="van-badge__wrapper van-icon van-icon-arrow-left">
+          </i>
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--active van-pagination__item--page van-hairline--surround">
+        <button aria-current="true">
+          1
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+        <button>
+          2
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+        <button>
+          3
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+        <button>
+          4
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+        <button>
+          5
+        </button>
+      </li>
+      <li class="van-pagination__item van-pagination__item--next van-hairline--surround">
+        <button>
+          <i class="van-badge__wrapper van-icon van-icon-arrow">
+          </i>
+        </button>
+      </li>
+    </ul>
+  </nav>
 </div>
 `;

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

@@ -1,53 +1,89 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render page slot correctly 1`] = `
-<ul class="van-pagination">
+<nav role="navigation"
-  <li class="van-pagination__item van-pagination__prev van-hairline">
+     class="van-pagination"
-    Previous
+>
-  </li>
+  <ul class="van-pagination__items">
-  <li class="van-pagination__item van-pagination__page van-hairline">
+    <li class="van-pagination__item van-pagination__item--prev van-hairline--surround">
-    foo 1
+      <button>
-  </li>
+        Previous
-  <li class="van-pagination__item van-pagination__page van-hairline">
+      </button>
-    foo 2
+    </li>
-  </li>
+    <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-  <li class="van-pagination__item van-pagination__page van-hairline">
+      <button>
-    foo 3
+        foo 1
-  </li>
+      </button>
-  <li class="van-pagination__item van-pagination__page van-hairline">
+    </li>
-    foo 4
+    <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-  </li>
+      <button>
-  <li class="van-pagination__item van-pagination__page van-hairline">
+        foo 2
-    foo 5
+      </button>
-  </li>
+    </li>
-  <li class="van-pagination__item van-pagination__next van-hairline">
+    <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-    Next
+      <button>
-  </li>
+        foo 3
-</ul>
+      </button>
+    </li>
+    <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+      <button>
+        foo 4
+      </button>
+    </li>
+    <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+      <button>
+        foo 5
+      </button>
+    </li>
+    <li class="van-pagination__item van-pagination__item--next van-hairline--surround">
+      <button>
+        Next
+      </button>
+    </li>
+  </ul>
+</nav>
 `;
 
 exports[`should render prev-text、next-text slot correctly 1`] = `
-<ul class="van-pagination">
+<nav role="navigation"
-  <li class="van-pagination__item van-pagination__prev van-hairline">
+     class="van-pagination"
-    Custom PrevText
+>
-  </li>
+  <ul class="van-pagination__items">
-  <li class="van-pagination__item van-pagination__page van-hairline">
+    <li class="van-pagination__item van-pagination__item--prev van-hairline--surround">
-    1
+      <button>
-  </li>
+        Custom PrevText
-  <li class="van-pagination__item van-pagination__page van-hairline">
+      </button>
-    2
+    </li>
-  </li>
+    <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-  <li class="van-pagination__item van-pagination__page van-hairline">
+      <button>
-    3
+        1
-  </li>
+      </button>
-  <li class="van-pagination__item van-pagination__page van-hairline">
+    </li>
-    4
+    <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-  </li>
+      <button>
-  <li class="van-pagination__item van-pagination__page van-hairline">
+        2
-    5
+      </button>
-  </li>
+    </li>
-  <li class="van-pagination__item van-pagination__next van-hairline">
+    <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-    Custom NextText
+      <button>
-  </li>
+        3
-</ul>
+      </button>
+    </li>
+    <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+      <button>
+        4
+      </button>
+    </li>
+    <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
+      <button>
+        5
+      </button>
+    </li>
+    <li class="van-pagination__item van-pagination__item--next van-hairline--surround">
+      <button>
+        Custom NextText
+      </button>
+    </li>
+  </ul>
+</nav>
 `;

packages/vant/src/password-input/test/__snapshots__/demo.spec.ts.snap

@@ -233,7 +233,7 @@ exports[`should render demo and match snapshot 1`] = `
             <svg class="van-key__collapse-icon"
                  viewbox="0 0 30 24"
             >
-              <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z"
+              <path d="M26 13h-2v2h2v-2zm-8-3h2V8h-2v2zm2-4h2V4h-2v2zm2 4h4V4h-2v4h-2v2zm-7 14 3-3h-6l3 3zM6 13H4v2h2v-2zm16 0H8v2h14v-2zm-12-3h2V8h-2v2zM28 0l1 1 1 1v15l-1 2H1l-1-2V2l1-1 1-1zm0 2H2v15h26V2zM6 4v2H4V4zm10 2h2V4h-2v2zM8 9v1H4V8zm8 0v1h-2V8zm-6-5v2H8V4zm4 0v2h-2V4z"
                     fill="currentColor"
               >
               </path>
@@ -256,7 +256,7 @@ exports[`should render demo and match snapshot 1`] = `
             <svg class="van-key__delete-icon"
                  viewbox="0 0 32 22"
             >
-              <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
+              <path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
                     fill="currentColor"
               >
               </path>

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

@@ -679,16 +679,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         City
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Choose City"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>

packages/vant/src/popover/Popover.tsx

@@ -173,6 +173,8 @@ export default defineComponent({
           role="menuitem"
           class={[bem('action', { disabled, 'with-icon': icon }), className]}
           style={{ color }}
+          tabindex={disabled ? undefined : 0}
+          aria-disabled={disabled || undefined}
           onClick={() => onClickAction(action, index)}
         >
           {icon && (

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

@@ -31,16 +31,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Placement
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                name="picker"
                class="van-field__control"
                readonly
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>

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

@@ -3,6 +3,7 @@
 exports[`should allow to custom the className of action 1`] = `
 <div role="menuitem"
      class="van-popover__action foo"
+     tabindex="0"
 >
   <div class="van-popover__action-text van-hairline--bottom">
     Option
@@ -22,6 +23,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
     >
       <div role="menuitem"
            class="van-popover__action van-popover__action--with-icon"
+           tabindex="0"
       >
         <i class="van-badge__wrapper my-icon my-icon-success van-popover__action-icon">
         </i>

packages/vant/src/popup/Popup.tsx

@@ -71,7 +71,6 @@ export default defineComponent({
   emits: [
     'open',
     'close',
-    'click',
     'opened',
     'closed',
     'update:show',
@@ -176,7 +175,6 @@ export default defineComponent({
       }
     };
 
-    const onClick = (event: MouseEvent) => emit('click', event);
     const onOpened = () => emit('opened');
     const onClosed = () => emit('closed');
 
@@ -194,7 +192,6 @@ export default defineComponent({
             }),
             { 'van-safe-area-bottom': safeAreaInsetBottom },
           ]}
-          onClick={onClick}
           {...attrs}
         >
           {slots.default?.()}

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

@@ -5,26 +5,36 @@ 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"
+      <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
@@ -37,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"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div class="van-pull-refresh">
@@ -53,13 +66,19 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>

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

@@ -71,7 +71,6 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <div role="radio"
          class="van-radio van-radio--disabled"
-         tabindex="-1"
          aria-checked="false"
     >
       <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled">
@@ -84,7 +83,6 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div role="radio"
          class="van-radio van-radio--disabled"
-         tabindex="-1"
          aria-checked="true"
     >
       <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked">

packages/vant/src/rate/Rate.tsx

@@ -195,8 +195,8 @@ export default defineComponent({
           role="radio"
           style={style}
           class={bem('item')}
-          tabindex={0}
+          tabindex={disabled ? undefined : 0}
-          aria-setsize={+count}
+          aria-setsize={count}
           aria-posinset={score}
           aria-checked={!isVoid}
           onClick={onClickItem}
@@ -231,7 +231,9 @@ export default defineComponent({
           readonly: props.readonly,
           disabled: props.disabled,
         })}
-        tabindex={0}
+        tabindex={props.disabled ? undefined : 0}
+        aria-disabled={props.disabled}
+        aria-readonly={props.readonly}
         onTouchstart={onTouchStart}
         onTouchmove={onTouchMove}
       >

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

@@ -5,6 +5,8 @@ exports[`should render demo and match snapshot 1`] = `
   <div role="radiogroup"
        class="van-rate"
        tabindex="0"
+       aria-disabled="false"
+       aria-readonly="false"
   >
     <div role="radio"
          class="van-rate__item"
@@ -62,6 +64,8 @@ exports[`should render demo and match snapshot 1`] = `
   <div role="radiogroup"
        class="van-rate"
        tabindex="0"
+       aria-disabled="false"
+       aria-readonly="false"
   >
     <div role="radio"
          class="van-rate__item"
@@ -119,6 +123,8 @@ exports[`should render demo and match snapshot 1`] = `
   <div role="radiogroup"
        class="van-rate"
        tabindex="0"
+       aria-disabled="false"
+       aria-readonly="false"
   >
     <div role="radio"
          class="van-rate__item"
@@ -186,6 +192,8 @@ exports[`should render demo and match snapshot 1`] = `
   <div role="radiogroup"
        class="van-rate"
        tabindex="0"
+       aria-disabled="false"
+       aria-readonly="false"
   >
     <div role="radio"
          class="van-rate__item"
@@ -247,6 +255,8 @@ exports[`should render demo and match snapshot 1`] = `
   <div role="radiogroup"
        class="van-rate"
        tabindex="0"
+       aria-disabled="false"
+       aria-readonly="false"
   >
     <div role="radio"
          class="van-rate__item"
@@ -313,11 +323,11 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div role="radiogroup"
        class="van-rate van-rate--disabled"
-       tabindex="0"
+       aria-disabled="true"
+       aria-readonly="false"
   >
     <div role="radio"
          class="van-rate__item"
-         tabindex="0"
          aria-setsize="5"
          aria-posinset="1"
          aria-checked="true"
@@ -327,7 +337,6 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div role="radio"
          class="van-rate__item"
-         tabindex="0"
          aria-setsize="5"
          aria-posinset="2"
          aria-checked="true"
@@ -337,7 +346,6 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div role="radio"
          class="van-rate__item"
-         tabindex="0"
          aria-setsize="5"
          aria-posinset="3"
          aria-checked="true"
@@ -347,7 +355,6 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div role="radio"
          class="van-rate__item"
-         tabindex="0"
          aria-setsize="5"
          aria-posinset="4"
          aria-checked="false"
@@ -357,7 +364,6 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div role="radio"
          class="van-rate__item"
-         tabindex="0"
          aria-setsize="5"
          aria-posinset="5"
          aria-checked="false"
@@ -371,6 +377,8 @@ exports[`should render demo and match snapshot 1`] = `
   <div role="radiogroup"
        class="van-rate van-rate--readonly"
        tabindex="0"
+       aria-disabled="false"
+       aria-readonly="true"
   >
     <div role="radio"
          class="van-rate__item"
@@ -428,6 +436,8 @@ exports[`should render demo and match snapshot 1`] = `
   <div role="radiogroup"
        class="van-rate van-rate--readonly"
        tabindex="0"
+       aria-disabled="false"
+       aria-readonly="true"
   >
     <div role="radio"
          class="van-rate__item"
@@ -489,6 +499,8 @@ exports[`should render demo and match snapshot 1`] = `
   <div role="radiogroup"
        class="van-rate"
        tabindex="0"
+       aria-disabled="false"
+       aria-readonly="false"
   >
     <div role="radio"
          class="van-rate__item"

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

@@ -4,6 +4,8 @@ exports[`should render gutter when using gutter prop 1`] = `
 <div role="radiogroup"
      class="van-rate"
      tabindex="0"
+     aria-disabled="false"
+     aria-readonly="false"
 >
   <div role="radio"
        style="padding-right: 10px;"

packages/vant/src/search/README.md

@@ -122,7 +122,7 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt
 | label | Left side label | _string_ | - |
 | name `v3.2.3` | As the identifier when submitting the form | _string_ | - |
 | shape | Shape of field, can be set to `round` | _string_ | `square` |
-| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | - |
+| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | `van-search-n-input` |
 | background | Background color of field | _string_ | `#f2f2f2` |
 | maxlength | Max length of value | _number \| string_ | - |
 | placeholder | Placeholder | _string_ | - |

packages/vant/src/search/README.zh-CN.md

@@ -134,7 +134,7 @@ export default {
 | label | 搜索框左侧文本 | _string_ | - |
 | name `v3.2.3` | 名称，作为提交表单时的标识符 | _string_ | - |
 | shape | 搜索框形状，可选值为 `round` | _string_ | `square` |
-| id `v3.2.2` | 搜索框 id，同时会设置 label 的 for 属性 | _string_ | - |
+| id `v3.2.2` | 搜索框 id，同时会设置 label 的 for 属性 | _string_ | `van-search-n-input` |
 | background | 搜索框外部背景色 | _string_ | `#f2f2f2` |
 | maxlength | 输入的最大字符数 | _number \| string_ | - |
 | placeholder | 占位提示文字 | _string_ | - |

packages/vant/src/search/Search.tsx

@@ -12,6 +12,7 @@ import {
 import { fieldSharedProps } from '../field/Field';
 
 // Composables
+import { useId } from '../composables/use-id';
 import { useExpose } from '../composables/use-expose';
 
 // Components
@@ -42,6 +43,7 @@ export default defineComponent({
   emits: ['search', 'cancel', 'update:modelValue'],
 
   setup(props, { emit, slots, attrs }) {
+    const id = useId();
     const filedRef = ref<FieldInstance>();
 
     const onCancel = () => {
@@ -59,10 +61,12 @@ export default defineComponent({
       }
     };
 
+    const getInputId = () => props.id || `${id}-input`;
+
     const renderLabel = () => {
       if (slots.label || props.label) {
         return (
-          <label class={bem('label')} for={props.id}>
+          <label class={bem('label')} for={getInputId()}>
             {slots.label ? slots.label() : props.label}
           </label>
         );
@@ -93,7 +97,9 @@ export default defineComponent({
     >;
 
     const renderField = () => {
-      const fieldAttrs = extend({}, attrs, pick(props, fieldPropNames));
+      const fieldAttrs = extend({}, attrs, pick(props, fieldPropNames), {
+        id: getInputId(),
+      });
 
       const onInput = (value: string) => emit('update:modelValue', value);
 

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

@@ -12,6 +12,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
+                   id="van-search-input"
                    class="van-field__control"
                    placeholder="Placeholder"
             >
@@ -33,6 +34,7 @@ exports[`should render demo and match snapshot 1`] = `
           <div class="van-cell__value van-cell__value--alone van-field__value">
             <div class="van-field__body">
               <input type="search"
+                     id="van-search-input"
                      class="van-field__control"
                      placeholder="Placeholder"
               >
@@ -60,6 +62,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
+                   id="van-search-input"
                    class="van-field__control van-field__control--center"
                    placeholder="Placeholder"
             >
@@ -80,6 +83,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
+                   id="van-search-input"
                    class="van-field__control"
                    disabled
                    placeholder="Placeholder"
@@ -103,6 +107,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
+                   id="van-search-input"
                    class="van-field__control"
                    placeholder="Placeholder"
             >
@@ -115,7 +120,9 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-search van-search--show-action">
     <div class="van-search__content van-search__content--square">
-      <label class="van-search__label">
+      <label class="van-search__label"
+             for="van-search-input"
+      >
         Address
       </label>
       <div class="van-cell van-cell--borderless van-field van-search__field">
@@ -126,6 +133,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
+                   id="van-search-input"
                    class="van-field__control"
                    placeholder="Placeholder"
             >

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

@@ -10,7 +10,9 @@ exports[`should render action text when using action-text prop 1`] = `
 `;
 
 exports[`should render label slot correctly 1`] = `
-<label class="van-search__label">
+<label class="van-search__label"
+       for="van-search-input"
+>
   Custom Label
 </label>
 `;
@@ -34,6 +36,7 @@ exports[`should render left slot correctly 1`] = `
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
           <input type="search"
+                 id="van-search-input"
                  class="van-field__control"
           >
         </div>

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

@@ -47,6 +47,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div role="switch"
        class="van-switch"
        style="font-size: 24px;"
+       tabindex="0"
        aria-checked="false"
   >
     <div class="van-switch__node">

packages/vant/src/slider/Slider.tsx

@@ -294,10 +294,12 @@ export default defineComponent({
         <div
           role="slider"
           class={getButtonClassName(index)}
-          tabindex={props.disabled || props.readonly ? -1 : 0}
+          tabindex={props.disabled ? undefined : 0}
-          aria-valuemin={+props.min}
+          aria-valuemin={props.min}
           aria-valuenow={current}
-          aria-valuemax={+props.max}
+          aria-valuemax={props.max}
+          aria-disabled={props.disabled || undefined}
+          aria-readonly={props.readonly || undefined}
           aria-orientation={props.vertical ? 'vertical' : 'horizontal'}
           onTouchstart={(event) => {
             if (typeof index === 'number') {

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

@@ -76,10 +76,10 @@ exports[`should render demo and match snapshot 1`] = `
     >
       <div role="slider"
            class="van-slider__button-wrapper van-slider__button-wrapper--right"
-           tabindex="-1"
            aria-valuemin="0"
            aria-valuenow="50"
            aria-valuemax="100"
+           aria-disabled="true"
            aria-orientation="horizontal"
       >
         <div class="van-slider__button">

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

@@ -29,6 +29,27 @@ exports[`should render left-button、right-button slot correctly 1`] = `
 </div>
 `;
 
+exports[`should render readonly Slider correctly 1`] = `
+<div class="van-slider">
+  <div class="van-slider__bar"
+       style="width: 50%; left: 0%;"
+  >
+    <div role="slider"
+         class="van-slider__button-wrapper van-slider__button-wrapper--right"
+         tabindex="0"
+         aria-valuemin="0"
+         aria-valuenow="50"
+         aria-valuemax="100"
+         aria-readonly="true"
+         aria-orientation="horizontal"
+    >
+      <div class="van-slider__button">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`should render reversed range slider correctly 1`] = `
 <div class="van-slider">
   <div class="van-slider__bar"

packages/vant/src/slider/test/index.spec.ts

@@ -117,6 +117,17 @@ test('should not allow to click slider when readonly', async () => {
   expect(wrapper.emitted('update:modelValue')).toBeFalsy();
 });
 
+test('should render readonly Slider correctly', async () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+      readonly: true,
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
 test('should allow to drag vertical slider', () => {
   const restoreMock = mockRect(true);
 

packages/vant/src/stepper/Stepper.tsx

@@ -247,14 +247,14 @@ export default defineComponent({
       // fix mobile safari page scroll down issue
       // see: https://github.com/youzan/vant/issues/7690
       if (props.disableInput) {
-        event.preventDefault();
+        preventDefault(event);
       }
     };
 
-    const createListeners = (type: 'plus' | 'minus') => ({
+    const createListeners = (type: typeof actionType) => ({
       onClick: (event: MouseEvent) => {
         // disable double tap scrolling on mobile safari
-        event.preventDefault();
+        preventDefault(event);
         actionType = type;
         onChange();
       },
@@ -267,12 +267,7 @@ export default defineComponent({
     });
 
     watch(
-      [
+      () => [props.max, props.min, props.integer, props.decimalLength],
-        () => props.max,
-        () => props.min,
-        () => props.integer,
-        () => props.decimalLength,
-      ],
       check
     );
 
@@ -293,7 +288,7 @@ export default defineComponent({
     useCustomFieldValue(() => props.modelValue);
 
     return () => (
-      <div class={bem([props.theme])}>
+      <div role="group" class={bem([props.theme])}>
         <button
           v-show={props.showMinus}
           type="button"
@@ -302,6 +297,7 @@ export default defineComponent({
             bem('minus', { disabled: minusDisabled.value }),
             { [HAPTICS_FEEDBACK]: !minusDisabled.value },
           ]}
+          aria-disabled={minusDisabled.value || undefined}
           {...createListeners('minus')}
         />
         <input
@@ -317,9 +313,9 @@ export default defineComponent({
           // set keyboard in modern browsers
           inputmode={props.integer ? 'numeric' : 'decimal'}
           placeholder={props.placeholder}
-          aria-valuemax={+props.max}
+          aria-valuemax={props.max}
-          aria-valuemin={+props.min}
+          aria-valuemin={props.min}
-          aria-valuenow={+current.value}
+          aria-valuenow={current.value}
           onBlur={onBlur}
           onInput={onInput}
           onFocus={onFocus}
@@ -333,6 +329,7 @@ export default defineComponent({
             bem('plus', { disabled: plusDisabled.value }),
             { [HAPTICS_FEEDBACK]: !plusDisabled.value },
           ]}
+          aria-disabled={plusDisabled.value || undefined}
           {...createListeners('plus')}
         />
       </div>

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

@@ -9,9 +9,12 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
+                aria-disabled="true"
         >
         </button>
         <input type="text"
@@ -36,9 +39,12 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
+                aria-disabled="true"
         >
         </button>
         <input type="text"
@@ -63,9 +69,12 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
+                aria-disabled="true"
         >
         </button>
         <input type="text"
@@ -90,9 +99,12 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
+                aria-disabled="true"
         >
         </button>
         <input type="tel"
@@ -117,9 +129,12 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
+                aria-disabled="true"
         >
         </button>
         <input type="text"
@@ -133,6 +148,7 @@ exports[`should render demo and match snapshot 1`] = `
         >
         <button type="button"
                 class="van-stepper__plus van-stepper__plus--disabled"
+                aria-disabled="true"
         >
         </button>
       </div>
@@ -145,9 +161,12 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
+                aria-disabled="true"
         >
         </button>
         <input type="text"
@@ -173,9 +192,12 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
+                aria-disabled="true"
         >
         </button>
         <input type="text"
@@ -184,7 +206,7 @@ exports[`should render demo and match snapshot 1`] = `
                inputmode="decimal"
                aria-valuemax="Infinity"
                aria-valuemin="1"
-               aria-valuenow="1"
+               aria-valuenow="1.0"
         >
         <button type="button"
                 class="van-stepper__plus van-haptics-feedback"
@@ -200,10 +222,13 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 style="width: 32px; height: 32px;"
                 class="van-stepper__minus van-stepper__minus--disabled"
+                aria-disabled="true"
         >
         </button>
         <input type="text"
@@ -230,9 +255,12 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
+                aria-disabled="true"
         >
         </button>
         <input type="text"
@@ -257,10 +285,13 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper van-stepper--round">
+      <div role="group"
+           class="van-stepper van-stepper--round"
+      >
         <button type="button"
                 style="width: 22px; height: 22px;"
                 class="van-stepper__minus van-stepper__minus--disabled"
+                aria-disabled="true"
         >
         </button>
         <input type="text"

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

@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should disable buttons and input when using disabled prop 1`] = `
-<div class="van-stepper">
+<div role="group"
+     class="van-stepper"
+>
   <button type="button"
           class="van-stepper__minus van-stepper__minus--disabled"
+          aria-disabled="true"
   >
   </button>
   <input type="text"
@@ -17,16 +20,20 @@ exports[`should disable buttons and input when using disabled prop 1`] = `
   >
   <button type="button"
           class="van-stepper__plus van-stepper__plus--disabled"
+          aria-disabled="true"
   >
   </button>
 </div>
 `;
 
 exports[`should update input height and button size when using button-size prop 1`] = `
-<div class="van-stepper">
+<div role="group"
+     class="van-stepper"
+>
   <button type="button"
           style="width: 2rem; height: 2rem;"
           class="van-stepper__minus van-stepper__minus--disabled"
+          aria-disabled="true"
   >
   </button>
   <input type="text"

packages/vant/src/sticky/test/index.spec.tsx

@@ -1,6 +1,6 @@
 import { nextTick, ref } from 'vue';
 import { VueWrapper } from '@vue/test-utils';
-import { mockScrollTop, mount } from '../../../test';
+import { mockScrollTop, trigger, mount } from '../../../test';
 import { Sticky } from '..';
 import { ComponentInstance } from '../../utils';
 
@@ -130,6 +130,7 @@ test('should allow to using offset-top prop with rem unit', async () => {
 
 test('should allow to using offset-top prop with vw unit', async () => {
   Object.defineProperty(window, 'innerWidth', { value: 300 });
+  trigger(window, 'resize');
 
   const wrapper = mount({
     render() {

packages/vant/src/swipe/Swipe.tsx

@@ -19,18 +19,15 @@ import {
   isHidden,
   truthProp,
   numericProp,
+  windowWidth,
+  windowHeight,
   preventDefault,
   createNamespace,
   makeNumericProp,
 } from '../utils';
 
 // Composables
-import {
+import { doubleRaf, useChildren, usePageVisibility } from '@vant/use';
-  doubleRaf,
-  useChildren,
-  useWindowSize,
-  usePageVisibility,
-} from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 import { onPopupReopen } from '../composables/on-popup-reopen';
@@ -78,7 +75,6 @@ export default defineComponent({
     });
 
     const touch = useTouch();
-    const windowSize = useWindowSize();
     const { children, linkChildren } = useChildren(SWIPE_KEY);
 
     const count = computed(() => children.length);
@@ -413,7 +409,7 @@ export default defineComponent({
 
     watch(count, () => initialize(state.active));
     watch(() => props.autoplay, autoplay);
-    watch([windowSize.width, windowSize.height], resize);
+    watch([windowWidth, windowHeight], resize);
     watch(usePageVisibility(), (visible) => {
       if (visible === 'visible') {
         autoplay();

packages/vant/src/switch/Switch.tsx

@@ -68,6 +68,7 @@ export default defineComponent({
             disabled,
           })}
           style={style}
+          tabindex={disabled ? undefined : 0}
           aria-checked={checked}
           onClick={onClick}
         >

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

@@ -4,6 +4,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div role="switch"
        class="van-switch van-switch--on"
+       tabindex="0"
        aria-checked="true"
   >
     <div class="van-switch__node">
@@ -22,6 +23,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div role="switch"
        class="van-switch van-switch--on van-switch--loading"
+       tabindex="0"
        aria-checked="true"
   >
     <div class="van-switch__node">
@@ -46,6 +48,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div role="switch"
        class="van-switch van-switch--on"
        style="font-size: 24px;"
+       tabindex="0"
        aria-checked="true"
   >
     <div class="van-switch__node">
@@ -56,6 +59,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div role="switch"
        class="van-switch van-switch--on"
        style="background-color: rgb(238, 10, 36);"
+       tabindex="0"
        aria-checked="true"
   >
     <div class="van-switch__node">
@@ -65,6 +69,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div role="switch"
        class="van-switch van-switch--on"
+       tabindex="0"
        aria-checked="true"
   >
     <div class="van-switch__node">
@@ -81,6 +86,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div role="switch"
          class="van-switch van-switch--on"
          style="font-size: 24px;"
+         tabindex="0"
          aria-checked="true"
     >
       <div class="van-switch__node">

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,11 +107,14 @@ 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>
+            <div class={bem('panel')}>{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('panel')}
+          tabindex={show ? 0 : -1}
+          aria-labelledby={label}
+        >
           {Content}
         </div>
       );

packages/vant/src/tab/index.less

@@ -1,5 +1,5 @@
 .van-tab {
-  &__pane {
+  &__panel {
     &,
     &-wrapper {
       flex-shrink: 0;

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"
-       class="van-tab__pane"
+       role="tabpanel"
+       class="van-tab__panel"
+       tabindex="-1"
+       aria-labelledby="van-tabs-0"
        style="display: none;"
   >
   </div>
-  <div role="tabpanel"
+  <div id="van-tab"
-       class="van-tab__pane"
+       role="tabpanel"
+       class="van-tab__panel"
+       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"
-       class="van-tab__pane"
+       role="tabpanel"
+       class="van-tab__panel"
+       tabindex="0"
+       aria-labelledby="van-tabs-0"
        style
   >
     Text
   </div>
-  <div role="tabpanel"
+  <div id="van-tab"
-       class="van-tab__pane"
+       role="tabpanel"
+       class="van-tab__panel"
+       tabindex="-1"
+       aria-labelledby="van-tabs-1"
        style="display: none;"
   >
     Text
@@ -37,26 +49,36 @@ 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"
+      <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
@@ -69,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"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -99,9 +130,12 @@ DOMWrapper {
     "_values": Object {},
   },
   "wrapperElement": <div
-    class="van-tab__pane"
+    aria-labelledby="van-tabs-0"
+    class="van-tab__panel"
+    id="van-tab"
     role="tabpanel"
     style=""
+    tabindex="0"
   >
     
     Text
@@ -116,9 +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">
@@ -134,11 +171,15 @@ 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"
+    <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
@@ -158,26 +199,36 @@ 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"
+      <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
@@ -190,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"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -215,26 +275,36 @@ 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"
+      <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
@@ -247,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"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="0"
+         aria-labelledby="van-tabs-1"
          style
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -273,26 +352,33 @@ 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"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
+           tabindex="0"
            aria-selected="true"
       >
         <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"
       >
         <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"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -310,26 +396,35 @@ 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">
+          <div class="van-tab__panel">
             Text
           </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">
+          <div class="van-tab__panel">
             Text
           </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>
@@ -344,26 +439,33 @@ 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"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <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"
       >
         <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"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -381,29 +483,38 @@ 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">
+          <div class="van-tab__panel">
             Text
           </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">
+          <div class="van-tab__panel">
             Text
           </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">
+          <div class="van-tab__panel">
             Text
           </div>
         </div>
@@ -418,26 +529,33 @@ 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"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
+           tabindex="-1"
            aria-selected="false"
       >
         <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"
       >
         <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"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -455,29 +573,38 @@ 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">
+          <div class="van-tab__panel">
             Text
           </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">
+          <div class="van-tab__panel">
             Text
           </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">
+          <div class="van-tab__panel">
             Text
           </div>
         </div>

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

@@ -5,26 +5,36 @@ 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"
+      <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
@@ -37,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"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="0"
+         aria-labelledby="van-tabs-1"
          style
     >
       1
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -62,26 +81,36 @@ 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"
+      <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
@@ -94,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"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
     </div>
     <div>
-      <div role="tabpanel"
+      <div id="van-tab"
-           class="van-tab__pane"
+           role="tabpanel"
+           class="van-tab__panel"
+           tabindex="0"
+           aria-labelledby="van-tabs-1"
       >
         2
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
       3
@@ -121,18 +159,25 @@ 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"
+      <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
@@ -145,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"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
       bar
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
-         class="van-tab__pane"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="0"
+         aria-labelledby="van-tabs-1"
          style
     >
       foo
@@ -166,6 +217,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>

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

@@ -256,7 +256,7 @@ test('should emit rendered event after tab is rendered', async () => {
 
   await later();
   expect(onRendered).toHaveBeenCalledWith('a', 'title1');
-  expect(wrapper.find('.van-tab__pane')).toMatchSnapshot();
+  expect(wrapper.find('.van-tab__panel')).toMatchSnapshot();
 
   const tabs = wrapper.findAll('.van-tab');
   await tabs[1].trigger('click');

packages/vant/src/tabbar-item/TabbarItem.tsx

@@ -89,8 +89,11 @@ export default defineComponent({
 
       return (
         <div
+          role="tab"
           class={bem({ active: active.value })}
           style={{ color }}
+          tabindex={0}
+          aria-selected={active.value}
           onClick={onClick}
         >
           <Badge

packages/vant/src/tabbar/Tabbar.tsx

@@ -69,6 +69,7 @@ export default defineComponent({
       return (
         <div
           ref={root}
+          role="tablist"
           style={getZIndexStyle(zIndex)}
           class={[
             bem({ fixed }),

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

@@ -2,8 +2,14 @@
 
 exports[`should render demo and match snapshot 1`] = `
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
+  <div role="tablist"
-    <div class="van-tabbar-item van-tabbar-item--active">
+       class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
+  >
+    <div role="tab"
+         class="van-tabbar-item van-tabbar-item--active"
+         tabindex="0"
+         aria-selected="true"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
         </i>
@@ -12,7 +18,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-search">
         </i>
@@ -21,7 +31,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-friends-o">
         </i>
@@ -30,7 +44,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-setting-o">
         </i>
@@ -42,8 +60,14 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
+  <div role="tablist"
-    <div class="van-tabbar-item van-tabbar-item--active">
+       class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
+  >
+    <div role="tab"
+         class="van-tabbar-item van-tabbar-item--active"
+         tabindex="0"
+         aria-selected="true"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
         </i>
@@ -52,7 +76,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-search">
         </i>
@@ -61,7 +89,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-friends-o">
         </i>
@@ -70,7 +102,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-setting-o">
         </i>
@@ -82,8 +118,14 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
+  <div role="tablist"
-    <div class="van-tabbar-item van-tabbar-item--active">
+       class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
+  >
+    <div role="tab"
+         class="van-tabbar-item van-tabbar-item--active"
+         tabindex="0"
+         aria-selected="true"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
         </i>
@@ -92,7 +134,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-search">
         </i>
@@ -103,7 +149,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-friends-o">
         </i>
@@ -115,7 +165,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-setting-o">
         </i>
@@ -130,8 +184,14 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
+  <div role="tablist"
-    <div class="van-tabbar-item van-tabbar-item--active">
+       class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
+  >
+    <div role="tab"
+         class="van-tabbar-item van-tabbar-item--active"
+         tabindex="0"
+         aria-selected="true"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <img src="https://img.yzcdn.cn/vant/user-active.png">
         <div class="van-badge van-badge--fixed">
@@ -144,7 +204,11 @@ exports[`should render demo and match snapshot 1`] = `
         </span>
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-search">
         </i>
@@ -153,7 +217,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-setting-o">
         </i>
@@ -165,9 +233,14 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
+  <div role="tablist"
-    <div class="van-tabbar-item van-tabbar-item--active"
+       class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
+  >
+    <div role="tab"
+         class="van-tabbar-item van-tabbar-item--active"
          style="color: rgb(238, 10, 36);"
+         tabindex="0"
+         aria-selected="true"
     >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
@@ -177,8 +250,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item"
+    <div role="tab"
+         class="van-tabbar-item"
          style="color: rgb(0, 0, 0);"
+         tabindex="0"
+         aria-selected="false"
     >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-search">
@@ -188,8 +264,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item"
+    <div role="tab"
+         class="van-tabbar-item"
          style="color: rgb(0, 0, 0);"
+         tabindex="0"
+         aria-selected="false"
     >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-friends-o">
@@ -199,8 +278,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab
       </div>
     </div>
-    <div class="van-tabbar-item"
+    <div role="tab"
+         class="van-tabbar-item"
          style="color: rgb(0, 0, 0);"
+         tabindex="0"
+         aria-selected="false"
     >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-setting-o">
@@ -213,8 +295,14 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
+  <div role="tablist"
-    <div class="van-tabbar-item van-tabbar-item--active">
+       class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
+  >
+    <div role="tab"
+         class="van-tabbar-item van-tabbar-item--active"
+         tabindex="0"
+         aria-selected="true"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
         </i>
@@ -223,7 +311,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab 1
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-search">
         </i>
@@ -232,7 +324,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab 2
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-friends-o">
         </i>
@@ -241,7 +337,11 @@ exports[`should render demo and match snapshot 1`] = `
         Tab 3
       </div>
     </div>
-    <div class="van-tabbar-item">
+    <div role="tab"
+         class="van-tabbar-item"
+         tabindex="0"
+         aria-selected="false"
+    >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-setting-o">
         </i>

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

@@ -4,7 +4,9 @@ exports[`should render placeholder element when using placeholder prop 1`] = `
 <div class="van-tabbar__placeholder"
      style="height: 50px;"
 >
-  <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
+  <div role="tablist"
+       class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
+  >
   </div>
 </div>
 `;

packages/vant/src/tabs/Tabs.tsx

@@ -23,6 +23,7 @@ import {
   truthProp,
   numericProp,
   Interceptor,
+  windowWidth,
   getElementTop,
   makeStringProp,
   callInterceptor,
@@ -38,11 +39,11 @@ import { scrollLeftTo, scrollTopTo } from './utils';
 import {
   useRect,
   useChildren,
-  useWindowSize,
   useScrollParent,
   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';
@@ -100,7 +101,7 @@ export default defineComponent({
     const navRef = ref<HTMLElement>();
     const wrapRef = ref<HTMLElement>();
 
-    const windowSize = useWindowSize();
+    const id = useId();
     const scroller = useScrollParent(root);
     const [titleRefs, setTitleRefs] = useRefs<ComponentInstance>();
     const { children, linkChildren } = useChildren(TABS_KEY);
@@ -329,12 +330,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}
@@ -365,6 +368,7 @@ export default defineComponent({
             role="tablist"
             class={bem('nav', [type, { complete: scrollable.value }])}
             style={navStyle.value}
+            aria-orientation="horizontal"
           >
             {slots['nav-left']?.()}
             {renderNav()}
@@ -377,7 +381,7 @@ export default defineComponent({
       );
     };
 
-    watch([() => props.color, windowSize.width], setLine);
+    watch([() => props.color, windowWidth], setLine);
 
     watch(
       () => props.active,
@@ -441,6 +445,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({
@@ -83,7 +86,10 @@ export default defineComponent({
           }),
         ]}
         style={style.value}
+        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/utils/dom.ts

@@ -1,4 +1,4 @@
-import { useRect } from '@vant/use';
+import { useRect, useWindowSize } from '@vant/use';
 import { unref, Ref } from 'vue';
 import { isIOS as checkIsIOS } from './validate';
 
@@ -84,3 +84,5 @@ export function isHidden(
 
   return hidden || parentHidden;
 }
+
+export const { width: windowWidth, height: windowHeight } = useWindowSize();

packages/vant/src/utils/format.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'vue';
-import { useWindowSize } from '@vant/use';
 import { inBrowser } from './basic';
+import { windowWidth, windowHeight } from './dom';
 import { isDef, isNumeric } from './validate';
 
 export function addUnit(value?: string | number): string | undefined {
@@ -51,15 +51,13 @@ function convertRem(value: string) {
 }
 
 function convertVw(value: string) {
-  const { width } = useWindowSize();
   value = value.replace(/vw/g, '');
-  return (+value * width.value) / 100;
+  return (+value * windowWidth.value) / 100;
 }
 
 function convertVh(value: string) {
-  const { height } = useWindowSize();
   value = value.replace(/vh/g, '');
-  return (+value * height.value) / 100;
+  return (+value * windowHeight.value) / 100;
 }
 
 export function unitToPx(value: string | number): number {

packages/vant/src/utils/test/index.spec.ts

@@ -3,6 +3,7 @@ import { deepClone } from '../deep-clone';
 import { deepAssign } from '../deep-assign';
 import { isDef, isMobile, isNumeric } from '../validate';
 import { addUnit, unitToPx, camelize, formatNumber } from '../format';
+import { trigger } from '../../../test';
 
 test('deepClone', () => {
   const a = { foo: 0 };
@@ -110,6 +111,7 @@ test('unitToPx', () => {
 
   Object.defineProperty(window, 'innerWidth', { value: 100 });
   Object.defineProperty(window, 'innerHeight', { value: 200 });
+  trigger(window, 'resize');
 
   expect(unitToPx(0)).toEqual(0);
   expect(unitToPx(10)).toEqual(10);