feat(Cascader): add role, aria and tabindex for a11y (#9886)

* feat(Cascader): add role, aria and tabindex for a11y

* fix: typing

* fix: snapshot

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 =
-        selectedOption && option[valueKey] === selectedOption[valueKey];
+      const { disabled } = option;
+      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={[
-            bem('option', {
-              selected,
-              disabled: option.disabled,
-            }),
-            option.className,
-          ]}
+          role="menuitemradio"
+          class={[bem('option', { selected, 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__/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">
-    <li class="van-cascader__option van-cascader__option--selected">
+  <ul role="menu"
+      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>
@@ -101,14 +119,24 @@ exports[`should update tabs when previous tab is clicked 1`] = `
                aria-labelledby="van-tabs-0"
                style="width: 100px;"
           >
-            <div class="van-tab__pane">
-              <ul class="van-cascader__options">
-                <li class="van-cascader__option">
+            <div class="van-tab__panel">
+              <ul role="menu"
+                  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>
@@ -126,19 +154,33 @@ exports[`should update tabs when previous tab is clicked 1`] = `
                aria-labelledby="van-tabs-1"
                style="width: 100px;"
           >
-            <div class="van-tab__pane">
-              <ul class="van-cascader__options">
-                <li class="van-cascader__option">
+            <div class="van-tab__panel">
+              <ul role="menu"
+                  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/coupon-list/test/__snapshots__/index.spec.ts.snap

@@ -62,7 +62,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
            style
@@ -270,7 +270,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-1"
            style="display: none;"
@@ -354,7 +354,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-0"
            style="display: none;"
@@ -372,7 +372,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-1"
            style
@@ -466,7 +466,7 @@ exports[`should render list-footer slot correctly 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-0"
            style="display: none;"
@@ -485,7 +485,7 @@ exports[`should render list-footer slot correctly 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-1"
            style
@@ -580,7 +580,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
            style
@@ -598,7 +598,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-1"
            style="display: none;"

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

@@ -60,7 +60,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
            style
@@ -76,7 +76,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-1"
            style="display: none;"
@@ -84,7 +84,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-2"
            style="display: none;"

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

@@ -64,7 +64,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs__content">
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="0"
          aria-labelledby="van-tabs-0"
          style
@@ -143,7 +143,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-1"
          style="display: none;"
@@ -151,7 +151,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-2"
          style="display: none;"
@@ -159,7 +159,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-3"
          style="display: none;"

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

@@ -38,7 +38,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs__content">
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="0"
          aria-labelledby="van-tabs-0"
          style
@@ -910,7 +910,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-1"
          style="display: none;"

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

@@ -49,7 +49,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs__content">
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="0"
          aria-labelledby="van-tabs-0"
          style
@@ -83,7 +83,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-1"
          style="display: none;"
@@ -91,7 +91,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-2"
          style="display: none;"

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

@@ -49,7 +49,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs__content">
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="0"
          aria-labelledby="van-tabs-0"
          style
@@ -68,7 +68,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-1"
          style="display: none;"
@@ -76,7 +76,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-2"
          style="display: none;"

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,7 +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-field-input"
+                   id="van-search-input"
                    class="van-field__control"
                    placeholder="Placeholder"
             >
@@ -34,7 +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-field-input"
+                     id="van-search-input"
                      class="van-field__control"
                      placeholder="Placeholder"
               >
@@ -62,7 +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-field-input"
+                   id="van-search-input"
                    class="van-field__control van-field__control--center"
                    placeholder="Placeholder"
             >
@@ -83,7 +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-field-input"
+                   id="van-search-input"
                    class="van-field__control"
                    disabled
                    placeholder="Placeholder"
@@ -107,7 +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-field-input"
+                   id="van-search-input"
                    class="van-field__control"
                    placeholder="Placeholder"
             >
@@ -120,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">
@@ -131,7 +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-field-input"
+                   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,7 +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-field-input"
+                 id="van-search-input"
                  class="van-field__control"
           >
         </div>

packages/vant/src/tab/Tab.tsx

@@ -114,7 +114,7 @@ export default defineComponent({
             aria-hidden={!active.value}
             aria-labelledby={label}
           >
-            <div class={bem('pane')}>{slots.default?.()}</div>
+            <div class={bem('panel')}>{slots.default?.()}</div>
           </SwipeItem>
         );
       }
@@ -129,7 +129,7 @@ export default defineComponent({
           v-show={show}
           id={id}
           role="tabpanel"
-          class={bem('pane')}
+          class={bem('panel')}
           tabindex={show ? 0 : -1}
           aria-labelledby={label}
         >

packages/vant/src/tab/index.less

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

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

@@ -61,7 +61,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
            style
@@ -70,7 +70,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-1"
            style="display: none;"
@@ -78,7 +78,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-2"
            style="display: none;"
@@ -86,7 +86,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-3"
            style="display: none;"
@@ -144,7 +144,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-0"
            style="display: none;"
@@ -152,7 +152,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-1"
            style
@@ -161,7 +161,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-2"
            style="display: none;"
@@ -274,7 +274,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
            style
@@ -283,7 +283,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-1"
            style="display: none;"
@@ -291,7 +291,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-2"
            style="display: none;"
@@ -299,7 +299,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-3"
            style="display: none;"
@@ -307,7 +307,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-4"
            style="display: none;"
@@ -315,7 +315,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-5"
            style="display: none;"
@@ -323,7 +323,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-6"
            style="display: none;"
@@ -331,7 +331,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-7"
            style="display: none;"
@@ -389,7 +389,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
            style
@@ -398,7 +398,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-1"
            style="display: none;"
@@ -406,7 +406,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-2"
            style="display: none;"
@@ -460,7 +460,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
            style
@@ -469,7 +469,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-1"
            style="display: none;"
@@ -477,7 +477,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-2"
            style="display: none;"
@@ -524,7 +524,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
            style
@@ -533,7 +533,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-1"
            style="display: none;"
@@ -606,7 +606,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
            style
@@ -615,7 +615,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-1"
            style="display: none;"
@@ -623,7 +623,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-2"
            style="display: none;"
@@ -631,7 +631,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-3"
            style="display: none;"
@@ -682,7 +682,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
            style
@@ -691,7 +691,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-1"
            style="display: none;"
@@ -766,7 +766,7 @@ exports[`should render demo and match snapshot 1`] = `
                aria-labelledby="van-tabs-0"
                style="width: 100px;"
           >
-            <div class="van-tab__pane">
+            <div class="van-tab__panel">
               content of tab 1
             </div>
           </div>
@@ -778,7 +778,7 @@ exports[`should render demo and match snapshot 1`] = `
                aria-labelledby="van-tabs-1"
                style="width: 100px;"
           >
-            <div class="van-tab__pane">
+            <div class="van-tab__panel">
               content of tab 2
             </div>
           </div>
@@ -871,7 +871,7 @@ exports[`should render demo and match snapshot 1`] = `
                aria-labelledby="van-tabs-0"
                style="width: 100px;"
           >
-            <div class="van-tab__pane">
+            <div class="van-tab__panel">
               content of tab 1
             </div>
           </div>
@@ -883,7 +883,7 @@ exports[`should render demo and match snapshot 1`] = `
                aria-labelledby="van-tabs-1"
                style="width: 100px;"
           >
-            <div class="van-tab__pane">
+            <div class="van-tab__panel">
               content of tab 2
             </div>
           </div>
@@ -1018,7 +1018,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
       >
@@ -1026,7 +1026,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-1"
       >
@@ -1034,7 +1034,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-2"
       >
@@ -1042,7 +1042,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-3"
       >
@@ -1050,7 +1050,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-4"
       >
@@ -1058,7 +1058,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-5"
       >
@@ -1066,7 +1066,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-6"
       >
@@ -1074,7 +1074,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-7"
       >
@@ -1143,7 +1143,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-tabs__content">
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-0"
            style
@@ -1152,7 +1152,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-1"
            style="display: none;"
@@ -1160,7 +1160,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-2"
            style="display: none;"
@@ -1168,7 +1168,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="-1"
            aria-labelledby="van-tabs-3"
            style="display: none;"

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

@@ -4,7 +4,7 @@ exports[`should allow to disable lazy-render prop 1`] = `
 <div class="van-tabs__content">
   <div id="van-tab"
        role="tabpanel"
-       class="van-tab__pane"
+       class="van-tab__panel"
        tabindex="-1"
        aria-labelledby="van-tabs-0"
        style="display: none;"
@@ -12,7 +12,7 @@ exports[`should allow to disable lazy-render prop 1`] = `
   </div>
   <div id="van-tab"
        role="tabpanel"
-       class="van-tab__pane"
+       class="van-tab__panel"
        tabindex="-1"
        aria-labelledby="van-tabs-1"
        style="display: none;"
@@ -25,7 +25,7 @@ exports[`should allow to disable lazy-render prop 2`] = `
 <div class="van-tabs__content">
   <div id="van-tab"
        role="tabpanel"
-       class="van-tab__pane"
+       class="van-tab__panel"
        tabindex="0"
        aria-labelledby="van-tabs-0"
        style
@@ -34,7 +34,7 @@ exports[`should allow to disable lazy-render prop 2`] = `
   </div>
   <div id="van-tab"
        role="tabpanel"
-       class="van-tab__pane"
+       class="van-tab__panel"
        tabindex="-1"
        aria-labelledby="van-tabs-1"
        style="display: none;"
@@ -93,7 +93,7 @@ exports[`should allow to set name prop 1`] = `
   <div class="van-tabs__content">
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="0"
          aria-labelledby="van-tabs-0"
          style
@@ -102,7 +102,7 @@ exports[`should allow to set name prop 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-1"
          style="display: none;"
@@ -110,7 +110,7 @@ exports[`should allow to set name prop 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-2"
          style="display: none;"
@@ -131,7 +131,7 @@ DOMWrapper {
   },
   "wrapperElement": <div
     aria-labelledby="van-tabs-0"
-    class="van-tab__pane"
+    class="van-tab__panel"
     id="van-tab"
     role="tabpanel"
     style=""
@@ -243,7 +243,7 @@ exports[`should switch tab after click the tab title 1`] = `
   <div class="van-tabs__content">
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="0"
          aria-labelledby="van-tabs-0"
          style
@@ -252,7 +252,7 @@ exports[`should switch tab after click the tab title 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-1"
          style="display: none;"
@@ -260,7 +260,7 @@ exports[`should switch tab after click the tab title 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-2"
          style="display: none;"
@@ -319,7 +319,7 @@ exports[`should switch tab after click the tab title 2`] = `
   <div class="van-tabs__content">
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-0"
          style="display: none;"
@@ -328,7 +328,7 @@ exports[`should switch tab after click the tab title 2`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="0"
          aria-labelledby="van-tabs-1"
          style
@@ -337,7 +337,7 @@ exports[`should switch tab after click the tab title 2`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-2"
          style="display: none;"
@@ -403,7 +403,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
              aria-labelledby="van-tabs-0"
              style="width: 100px;"
         >
-          <div class="van-tab__pane">
+          <div class="van-tab__panel">
             Text
           </div>
         </div>
@@ -415,7 +415,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
              aria-labelledby="van-tabs-1"
              style="width: 100px;"
         >
-          <div class="van-tab__pane">
+          <div class="van-tab__panel">
             Text
           </div>
         </div>
@@ -490,7 +490,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
              aria-labelledby="van-tabs-0"
              style="width: 100px;"
         >
-          <div class="van-tab__pane">
+          <div class="van-tab__panel">
             Text
           </div>
         </div>
@@ -502,7 +502,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
              aria-labelledby="van-tabs-1"
              style="width: 100px;"
         >
-          <div class="van-tab__pane">
+          <div class="van-tab__panel">
             Text
           </div>
         </div>
@@ -514,7 +514,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
              aria-labelledby="van-tabs-2"
              style="width: 100px;"
         >
-          <div class="van-tab__pane">
+          <div class="van-tab__panel">
             Text
           </div>
         </div>
@@ -580,7 +580,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
              aria-labelledby="van-tabs-0"
              style="width: 100px;"
         >
-          <div class="van-tab__pane">
+          <div class="van-tab__panel">
             Text
           </div>
         </div>
@@ -592,7 +592,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
              aria-labelledby="van-tabs-1"
              style="width: 100px;"
         >
-          <div class="van-tab__pane">
+          <div class="van-tab__panel">
             Text
           </div>
         </div>
@@ -604,7 +604,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
              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

@@ -49,7 +49,7 @@ exports[`should render Tab inside a component correctly 1`] = `
   <div class="van-tabs__content">
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="0"
          aria-labelledby="van-tabs-1"
          style
@@ -58,7 +58,7 @@ exports[`should render Tab inside a component correctly 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-0"
          style="display: none;"
@@ -66,7 +66,7 @@ exports[`should render Tab inside a component correctly 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-2"
          style="display: none;"
@@ -125,7 +125,7 @@ exports[`should render correctly after inserting a tab 1`] = `
   <div class="van-tabs__content">
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-0"
          style="display: none;"
@@ -134,7 +134,7 @@ exports[`should render correctly after inserting a tab 1`] = `
     <div>
       <div id="van-tab"
            role="tabpanel"
-           class="van-tab__pane"
+           class="van-tab__panel"
            tabindex="0"
            aria-labelledby="van-tabs-1"
       >
@@ -143,7 +143,7 @@ exports[`should render correctly after inserting a tab 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-2"
          style="display: none;"
@@ -192,7 +192,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
   <div class="van-tabs__content">
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="-1"
          aria-labelledby="van-tabs-0"
          style="display: none;"
@@ -201,7 +201,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
     </div>
     <div id="van-tab"
          role="tabpanel"
-         class="van-tab__pane"
+         class="van-tab__panel"
          tabindex="0"
          aria-labelledby="van-tabs-1"
          style

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');