feat(Rate): improve a11y when disabled or readonly (#9881)

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

@@ -15,6 +15,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"
@@ -131,6 +133,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/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({
-      tab: 0,
-      code: props.code,
-    });
+    const root = ref<HTMLElement>();
+    const barRef = ref<HTMLElement>();
+    const activeTab = ref(0);
+    const listHeight = ref(0);
+    const currentCode = ref(props.code);
 
     const buttonDisabled = computed(
       () =>
         !props.exchangeButtonLoading &&
         (props.exchangeButtonDisabled ||
-          !state.code ||
-          state.code.length < props.exchangeMinLength)
+          !currentCode.value ||
+          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(() => {
-        if (couponRefs.value[index]) {
-          couponRefs.value[index].scrollIntoView();
-        }
-      });
+      nextTick(() => 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', {
-              'with-bar': props.showExchangeBar,
-              'with-bottom': props.showCloseButton,
-            })}
+            class={bem('list', { 'with-bottom': props.showCloseButton })}
+            style={{ height: `${listHeight.value}px` }}
           >
             {coupons.map((coupon, index) => (
               <Coupon
@@ -163,10 +169,8 @@ export default defineComponent({
       return (
         <Tab title={title}>
           <div
-            class={bem('list', {
-              'with-bar': props.showExchangeBar,
-              'with-bottom': props.showCloseButton,
-            })}
+            class={bem('list', { 'with-bottom': props.showCloseButton })}
+            style={{ height: `${listHeight.value}px` }}
           >
             {disabledCoupons.map((coupon) => (
               <Coupon
@@ -186,25 +190,23 @@ export default defineComponent({
     watch(
       () => props.code,
       (value) => {
-        state.code = value;
+        currentCode.value = value;
       }
     );
 
-    watch(
-      () => state.code,
-      (value) => emit('update:code', value)
-    );
-
+    watch(windowHeight, updateListHeight);
+    watch(currentCode, (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

@@ -56,15 +56,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

@@ -59,7 +59,9 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
            class="van-tab__pane"
            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">
@@ -338,7 +340,9 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
            class="van-tab__pane"
            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>
@@ -351,7 +355,9 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
            class="van-tab__pane"
            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>
@@ -435,7 +441,9 @@ exports[`should render list-footer slot correctly 1`] = `
            class="van-tab__pane"
            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>
@@ -449,7 +457,9 @@ exports[`should render list-footer slot correctly 1`] = `
            class="van-tab__pane"
            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>
@@ -534,7 +544,9 @@ exports[`should use custom src when using empty-image prop 1`] = `
            class="van-tab__pane"
            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>

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

@@ -116,7 +116,7 @@ export default defineComponent({
       return (
         <div
           role="button"
-          tabindex={disabled ? -1 : 0}
+          tabindex={disabled ? undefined : 0}
           class={[bem('item', { disabled }), { [HAPTICS_FEEDBACK]: !disabled }]}
           onClick={() => {
             if (!disabled) {

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

@@ -173,7 +173,6 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-dropdown-menu">
     <div class="van-dropdown-menu__bar">
       <div role="button"
-           tabindex="-1"
            class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
       >
         <span class="van-dropdown-menu__title">
@@ -183,7 +182,6 @@ exports[`should render demo and match snapshot 1`] = `
         </span>
       </div>
       <div role="button"
-           tabindex="-1"
            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

@@ -380,7 +380,6 @@ exports[`disable dropdown item 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar">
     <div role="button"
-         tabindex="-1"
          class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
     >
       <span class="van-dropdown-menu__title">

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

@@ -271,9 +271,12 @@ exports[`should render demo and match snapshot 1`] = `
         <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"
@@ -305,6 +308,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/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,7 +195,7 @@ export default defineComponent({
           role="radio"
           style={style}
           class={bem('item')}
-          tabindex={0}
+          tabindex={disabled ? undefined : 0}
           aria-setsize={+count}
           aria-posinset={score}
           aria-checked={!isVoid}
@@ -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/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-valuenow={current}
           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

@@ -288,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"
@@ -297,6 +297,7 @@ export default defineComponent({
             bem('minus', { disabled: minusDisabled.value }),
             { [HAPTICS_FEEDBACK]: !minusDisabled.value },
           ]}
+          aria-disabled={minusDisabled.value || undefined}
           {...createListeners('minus')}
         />
         <input
@@ -328,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"
@@ -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/tab/test/__snapshots__/demo.spec.ts.snap

@@ -284,6 +284,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div role="tab"
              class="van-tab van-tab--disabled"
              aria-selected="false"
+             aria-disabled="true"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 2

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

@@ -60,6 +60,7 @@ exports[`should allow to set name prop 1`] = `
       <div role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
+           aria-disabled="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -187,6 +188,7 @@ exports[`should switch tab after click the tab title 1`] = `
       <div role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
+           aria-disabled="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -247,6 +249,7 @@ exports[`should switch tab after click the tab title 2`] = `
       <div role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
+           aria-disabled="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -308,6 +311,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
       <div role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
+           aria-disabled="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -382,6 +386,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
       <div role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
+           aria-disabled="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -459,6 +464,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
       <div role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
+           aria-disabled="true"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3

packages/vant/src/tabs/TabsTitle.tsx

@@ -85,6 +85,7 @@ export default defineComponent({
         style={style.value}
         tabindex={props.disabled ? undefined : props.isActive ? 0 : -1}
         aria-selected={props.isActive}
+        aria-disabled={props.disabled || undefined}
       >
         {renderText()}
       </div>