vant 3.2.8 → 3.3.0

package/lib/pagination/index.less

@@ -13,9 +13,12 @@
 }
 
 .van-pagination {
-  display: flex;
   font-size: var(--van-pagination-font-size);
 
+  &__items {
+    display: flex;
+  }
+
   &__item,
   &__page-desc {
     display: flex;
@@ -33,58 +36,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 {
-      border-width: var(--van-border-width-base) 0 var(--van-border-width-base)
-        var(--van-border-width-base);
-    }
-
-    &:last-child::after {
-      border-right-width: var(--van-border-width-base);
+    &:not(:last-child)::after {
+      border-right-width: 0;
     }
 
     &--active {
       color: var(--van-white);
       background-color: var(--van-pagination-item-default-color);
     }
-  }
 
-  &__prev,
-  &__next {
-    padding: 0 var(--van-padding-base);
-    cursor: pointer;
-  }
+    &--page {
+      flex-grow: 0;
+    }
 
-  &__item--disabled {
-    &,
-    &:active {
+    &--prev,
+    &--next {
+      padding: 0 var(--van-padding-base);
+      cursor: pointer;
+    }
+
+    &--border::after {
+      border-width: var(--van-border-width-base);
+    }
+
+    &--disabled {
       color: var(--van-pagination-item-disabled-color);
       background-color: var(--van-pagination-item-disabled-background-color);
-      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-base);
-      }
-    }
-  }
 }

package/lib/password-input/PasswordInput.d.ts

@@ -49,9 +49,9 @@ declare const _default: import("vue").DefineComponent<{
     value: string;
     focused: boolean;
 } & {
-    errorInfo?: string | undefined;
     gutter?: string | number | undefined;
     info?: string | undefined;
+    errorInfo?: string | undefined;
 }> & {
     onFocus?: ((...args: any[]) => any) | undefined;
 }, {

package/lib/password-input/index.d.ts

@@ -29,9 +29,9 @@ export declare const PasswordInput: import("../utils").WithInstall<import("vue")
     value: string;
     focused: boolean;
 } & {
-    errorInfo?: string | undefined;
     gutter?: string | number | undefined;
     info?: string | undefined;
+    errorInfo?: string | undefined;
 }> & {
     onFocus?: ((...args: any[]) => any) | undefined;
 }, {

package/lib/popover/Popover.js

@@ -145,6 +145,8 @@ var _default = (0, _vue.defineComponent)({
         "style": {
           color
         },
+        "tabindex": disabled ? undefined : 0,
+        "aria-disabled": disabled || undefined,
         "onClick": () => onClickAction(action, index)
       }, [icon && (0, _vue.createVNode)(_icon.Icon, {
         "name": icon,

package/lib/popup/Popup.d.ts

@@ -91,7 +91,7 @@ declare const _default: import("vue").DefineComponent<{
         default: PopupCloseIconPosition;
     };
     safeAreaInsetBottom: BooleanConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "click" | "close" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon")[], "open" | "click" | "close" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon")[], "open" | "close" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     show?: unknown;
     zIndex?: unknown;
     overlay?: unknown;
@@ -137,7 +137,6 @@ declare const _default: import("vue").DefineComponent<{
     overlayClass?: unknown;
     transition?: string | undefined;
 }> & {
-    onClick?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
     onOpened?: ((...args: any[]) => any) | undefined;

package/lib/popup/Popup.js

@@ -44,7 +44,7 @@ var _default = (0, _vue.defineComponent)({
   name,
   inheritAttrs: false,
   props: popupProps,
-  emits: ['open', 'close', 'click', 'opened', 'closed', 'update:show', 'click-overlay', 'click-close-icon'],
+  emits: ['open', 'close', 'opened', 'closed', 'update:show', 'click-overlay', 'click-close-icon'],
 
   setup(props, _ref) {
     var {
@@ -136,8 +136,6 @@ var _default = (0, _vue.defineComponent)({
       }
     };
 
-    var onClick = event => emit('click', event);
-
     var onOpened = () => emit('opened');
 
     var onClosed = () => emit('closed');
@@ -156,8 +154,7 @@ var _default = (0, _vue.defineComponent)({
           [position]: position
         }), {
           'van-safe-area-bottom': safeAreaInsetBottom
-        }],
-        "onClick": onClick
+        }]
       }, attrs), [slots.default == null ? void 0 : slots.default(), renderCloseIcon()]), [[_vue.vShow, props.show]]);
     });
 

package/lib/popup/index.d.ts

@@ -42,7 +42,7 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
         default: import("./Popup").PopupCloseIconPosition;
     };
     safeAreaInsetBottom: BooleanConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "click" | "close" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon")[], "open" | "click" | "close" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon")[], "open" | "close" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     show?: unknown;
     zIndex?: unknown;
     overlay?: unknown;
@@ -88,7 +88,6 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
     overlayClass?: unknown;
     transition?: string | undefined;
 }> & {
-    onClick?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
     onOpened?: ((...args: any[]) => any) | undefined;

package/lib/rate/Rate.js

@@ -183,8 +183,8 @@ var _default = (0, _vue.defineComponent)({
         "role": "radio",
         "style": style,
         "class": bem('item'),
-        "tabindex": 0,
-        "aria-setsize": +count,
+        "tabindex": disabled ? undefined : 0,
+        "aria-setsize": count,
         "aria-posinset": score,
         "aria-checked": !isVoid,
         "onClick": onClickItem
@@ -219,7 +219,9 @@ var _default = (0, _vue.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
     }, [list.value.map(renderStar)]);

package/lib/search/Search.js

@@ -9,6 +9,8 @@ var _utils = require("../utils");
 
 var _Field = require("../field/Field");
 
+var _useId = require("../composables/use-id");
+
 var _useExpose = require("../composables/use-expose");
 
 var _field = require("../field");
@@ -38,6 +40,7 @@ var _default = (0, _vue.defineComponent)({
       slots,
       attrs
     } = _ref;
+    var id = (0, _useId.useId)();
     var filedRef = (0, _vue.ref)();
 
     var onCancel = () => {
@@ -56,11 +59,13 @@ var _default = (0, _vue.defineComponent)({
       }
     };
 
+    var getInputId = () => props.id || id + "-input";
+
     var renderLabel = () => {
       if (slots.label || props.label) {
         return (0, _vue.createVNode)("label", {
           "class": bem('label'),
-          "for": props.id
+          "for": getInputId()
         }, [slots.label ? slots.label() : props.label]);
       }
     };
@@ -92,7 +97,9 @@ var _default = (0, _vue.defineComponent)({
     var fieldPropNames = Object.keys(_Field.fieldSharedProps);
 
     var renderField = () => {
-      var fieldAttrs = (0, _utils.extend)({}, attrs, (0, _utils.pick)(props, fieldPropNames));
+      var fieldAttrs = (0, _utils.extend)({}, attrs, (0, _utils.pick)(props, fieldPropNames), {
+        id: getInputId()
+      });
 
       var onInput = value => emit('update:modelValue', value);
 

package/lib/sidebar/Sidebar.js

@@ -44,6 +44,7 @@ var _default = (0, _vue.defineComponent)({
       setActive
     });
     return () => (0, _vue.createVNode)("div", {
+      "role": "tablist",
       "class": bem()
     }, [slots.default == null ? void 0 : slots.default()]);
   }

package/lib/sidebar-item/SidebarItem.js

@@ -68,11 +68,14 @@ var _default = (0, _vue.defineComponent)({
         disabled
       } = props;
       var selected = index.value === parent.getActive();
-      return (0, _vue.createVNode)("a", {
+      return (0, _vue.createVNode)("div", {
+        "role": "tab",
         "class": bem({
           select: selected,
           disabled
         }),
+        "tabindex": disabled ? undefined : 0,
+        "aria-selected": selected,
         "onClick": onClick
       }, [(0, _vue.createVNode)(_badge.Badge, {
         "dot": dot,

package/lib/slider/Slider.js

@@ -294,10 +294,12 @@ var _default = (0, _vue.defineComponent)({
       return (0, _vue.createVNode)("div", {
         "role": "slider",
         "class": getButtonClassName(index),
-        "tabindex": props.disabled || props.readonly ? -1 : 0,
-        "aria-valuemin": +props.min,
+        "tabindex": props.disabled ? undefined : 0,
+        "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') {

package/lib/stepper/Stepper.js

@@ -219,14 +219,14 @@ var _default = (0, _vue.defineComponent)({
       // fix mobile safari page scroll down issue
       // see: https://github.com/youzan/vant/issues/7690
       if (props.disableInput) {
-        event.preventDefault();
+        (0, _utils.preventDefault)(event);
       }
     };
 
     var createListeners = type => ({
       onClick: event => {
         // disable double tap scrolling on mobile safari
-        event.preventDefault();
+        (0, _utils.preventDefault)(event);
         actionType = type;
         onChange();
       },
@@ -238,7 +238,7 @@ var _default = (0, _vue.defineComponent)({
       onTouchcancel: onTouchEnd
     });
 
-    (0, _vue.watch)([() => props.max, () => props.min, () => props.integer, () => props.decimalLength], check);
+    (0, _vue.watch)(() => [props.max, props.min, props.integer, props.decimalLength], check);
     (0, _vue.watch)(() => props.modelValue, value => {
       if (!isEqual(value, current.value)) {
         current.value = format(value);
@@ -252,6 +252,7 @@ var _default = (0, _vue.defineComponent)({
     });
     (0, _use.useCustomFieldValue)(() => props.modelValue);
     return () => (0, _vue.createVNode)("div", {
+      "role": "group",
       "class": bem([props.theme])
     }, [(0, _vue.withDirectives)((0, _vue.createVNode)("button", (0, _vue.mergeProps)({
       "type": "button",
@@ -260,7 +261,8 @@ var _default = (0, _vue.defineComponent)({
         disabled: minusDisabled.value
       }), {
         [_utils.HAPTICS_FEEDBACK]: !minusDisabled.value
-      }]
+      }],
+      "aria-disabled": minusDisabled.value || undefined
     }, createListeners('minus')), null), [[_vue.vShow, props.showMinus]]), (0, _vue.withDirectives)((0, _vue.createVNode)("input", {
       "ref": inputRef,
       "type": props.integer ? 'tel' : 'text',
@@ -272,9 +274,9 @@ var _default = (0, _vue.defineComponent)({
       "readonly": props.disableInput,
       "inputmode": props.integer ? 'numeric' : 'decimal',
       "placeholder": props.placeholder,
-      "aria-valuemax": +props.max,
-      "aria-valuemin": +props.min,
-      "aria-valuenow": +current.value,
+      "aria-valuemax": props.max,
+      "aria-valuemin": props.min,
+      "aria-valuenow": current.value,
       "onBlur": onBlur,
       "onInput": onInput,
       "onFocus": onFocus,
@@ -286,7 +288,8 @@ var _default = (0, _vue.defineComponent)({
         disabled: plusDisabled.value
       }), {
         [_utils.HAPTICS_FEEDBACK]: !plusDisabled.value
-      }]
+      }],
+      "aria-disabled": plusDisabled.value || undefined
     }, createListeners('plus')), null), [[_vue.vShow, props.showPlus]])]);
   }
 

package/lib/swipe/Swipe.js

@@ -55,7 +55,6 @@ var _default = (0, _vue.defineComponent)({
       swiping: false
     });
     var touch = (0, _useTouch.useTouch)();
-    var windowSize = (0, _use.useWindowSize)();
     var {
       children,
       linkChildren
@@ -391,7 +390,7 @@ var _default = (0, _vue.defineComponent)({
     (0, _vue.watch)(() => props.initialSwipe, value => initialize(+value));
     (0, _vue.watch)(count, () => initialize(state.active));
     (0, _vue.watch)(() => props.autoplay, autoplay);
-    (0, _vue.watch)([windowSize.width, windowSize.height], resize);
+    (0, _vue.watch)([_utils.windowWidth, _utils.windowHeight], resize);
     (0, _vue.watch)((0, _use.usePageVisibility)(), visible => {
       if (visible === 'visible') {
         autoplay();

package/lib/swipe/types.d.ts

@@ -19,9 +19,7 @@ export declare type SwipeExpose = {
     next: () => void;
     resize: () => void;
     swipeTo: (index: number, options?: SwipeToOptions) => void;
-    /**
-     * @private
-     */
+    /** @private */
     state: SwipeState;
 };
 export declare type SwipeProvide = {

package/lib/switch/Switch.js

@@ -81,6 +81,7 @@ var _default = (0, _vue.defineComponent)({
           disabled
         }),
         "style": style,
+        "tabindex": disabled ? undefined : 0,
         "aria-checked": checked,
         "onClick": onClick
       }, [(0, _vue.createVNode)("div", {

package/lib/switch/index.css

@@ -1 +1 @@
-:root{--van-switch-size:30px;--van-switch-width:2em;--van-switch-height:1em;--van-switch-node-size:1em;--van-switch-node-background-color:var(--van-white);--van-switch-node-box-shadow:0 3px 1px 0 rgba(0, 0, 0, 0.05),0 2px 2px 0 rgba(0, 0, 0, 0.1),0 3px 3px 0 rgba(0, 0, 0, 0.05);--van-switch-background-color:var(--van-background-color-light);--van-switch-on-background-color:var(--van-primary-color);--van-switch-transition-duration:var(--van-animation-duration-base);--van-switch-disabled-opacity:var(--van-disabled-opacity);--van-switch-border:var(--van-border-width-base) solid rgba(0, 0, 0, 0.1)}.van-switch{position:relative;display:inline-block;box-sizing:content-box;width:var(--van-switch-width);height:var(--van-switch-height);font-size:var(--van-switch-size);background:var(--van-switch-background-color);border:var(--van-switch-border);border-radius:var(--van-switch-node-size);cursor:pointer;transition:background-color var(--van-switch-transition-duration)}.van-switch__node{position:absolute;top:0;left:0;width:var(--van-switch-node-size);height:var(--van-switch-node-size);background:var(--van-switch-node-background-color);border-radius:100%;box-shadow:var(--van-switch-node-box-shadow);transition:transform var(--van-switch-transition-duration) cubic-bezier(.3, 1.05, .4, 1.05)}.van-switch__loading{top:25%;left:25%;width:50%;height:50%;line-height:1}.van-switch--on{background:var(--van-switch-on-background-color)}.van-switch--on .van-switch__node{transform:translateX(calc(var(--van-switch-width) - var(--van-switch-node-size)))}.van-switch--on .van-switch__loading{color:var(--van-switch-on-background-color)}.van-switch--disabled{cursor:not-allowed;opacity:var(--van-switch-disabled-opacity)}.van-switch--loading{cursor:default}
+:root{--van-switch-size:30px;--van-switch-width:2em;--van-switch-height:1em;--van-switch-node-size:1em;--van-switch-node-background-color:var(--van-white);--van-switch-node-box-shadow:0 3px 1px 0 rgba(0, 0, 0, 0.05),0 2px 2px 0 rgba(0, 0, 0, 0.1),0 3px 3px 0 rgba(0, 0, 0, 0.05);--van-switch-background-color:var(--van-background-color-light);--van-switch-on-background-color:var(--van-primary-color);--van-switch-transition-duration:var(--van-animation-duration-base);--van-switch-disabled-opacity:var(--van-disabled-opacity);--van-switch-border:var(--van-border-width-base) solid rgba(0, 0, 0, 0.1)}.van-switch{position:relative;display:inline-block;box-sizing:content-box;width:var(--van-switch-width);height:var(--van-switch-height);font-size:var(--van-switch-size);background:var(--van-switch-background-color);border:var(--van-switch-border);border-radius:var(--van-switch-node-size);cursor:pointer;transition:background-color var(--van-switch-transition-duration)}.van-switch__node{position:absolute;top:0;left:0;width:var(--van-switch-node-size);height:var(--van-switch-node-size);font-size:inherit;background:var(--van-switch-node-background-color);border-radius:100%;box-shadow:var(--van-switch-node-box-shadow);transition:transform var(--van-switch-transition-duration) cubic-bezier(.3, 1.05, .4, 1.05)}.van-switch__loading{top:25%;left:25%;width:50%;height:50%;line-height:1}.van-switch--on{background:var(--van-switch-on-background-color)}.van-switch--on .van-switch__node{transform:translateX(calc(var(--van-switch-width) - var(--van-switch-node-size)))}.van-switch--on .van-switch__loading{color:var(--van-switch-on-background-color)}.van-switch--disabled{cursor:not-allowed;opacity:var(--van-switch-disabled-opacity)}.van-switch--loading{cursor:default}

package/lib/switch/index.less

@@ -33,6 +33,8 @@
     left: 0;
     width: var(--van-switch-node-size);
     height: var(--van-switch-node-size);
+    // https://github.com/youzan/vant/issues/9839
+    font-size: inherit;
     background: var(--van-switch-node-background-color);
     border-radius: 100%;
     box-shadow: var(--van-switch-node-box-shadow);

package/lib/tab/Tab.js

@@ -11,6 +11,10 @@ var _Tabs = require("../tabs/Tabs");
 
 var _use = require("@vant/use");
 
+var _useId = require("../composables/use-id");
+
+var _useExpose = require("../composables/use-expose");
+
 var _useRoute = require("../composables/use-route");
 
 var _useTabStatus = require("../composables/use-tab-status");
@@ -40,6 +44,7 @@ var _default = (0, _vue.defineComponent)({
     var {
       slots
     } = _ref;
+    var id = (0, _useId.useId)();
     var inited = (0, _vue.ref)(false);
     var {
       parent,
@@ -85,6 +90,7 @@ var _default = (0, _vue.defineComponent)({
     });
     (0, _vue.provide)(_useTabStatus.TAB_STATUS_KEY, active);
     return () => {
+      var label = parent.id + "-" + index.value;
       var {
         animated,
         swipeable,
@@ -100,23 +106,32 @@ var _default = (0, _vue.defineComponent)({
 
       if (animated || swipeable) {
         return (0, _vue.createVNode)(_swipeItem.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
         }, {
           default: () => [(0, _vue.createVNode)("div", {
-            "class": bem('pane')
+            "class": bem('panel')
           }, [slots.default == null ? void 0 : slots.default()])]
         });
       }
 
       var shouldRender = inited.value || scrollspy || !lazyRender;
       var Content = shouldRender ? slots.default == null ? void 0 : slots.default() : null;
+      (0, _useExpose.useExpose)({
+        id
+      });
       return (0, _vue.withDirectives)((0, _vue.createVNode)("div", {
+        "id": id,
         "role": "tabpanel",
-        "class": bem('pane')
+        "class": bem('panel'),
+        "tabindex": show ? 0 : -1,
+        "aria-labelledby": label
       }, [Content]), [[_vue.vShow, show]]);
     };
   }

package/lib/tab/index.css

@@ -1 +1 @@
-.van-tab__pane,.van-tab__pane-wrapper{flex-shrink:0;box-sizing:border-box;width:100%}.van-tab__pane-wrapper--inactive{height:0;overflow:visible}
+.van-tab__panel,.van-tab__panel-wrapper{flex-shrink:0;box-sizing:border-box;width:100%}.van-tab__panel-wrapper--inactive{height:0;overflow:visible}

package/lib/tab/index.less

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

package/lib/tabbar/Tabbar.d.ts

@@ -27,7 +27,7 @@ declare const tabbarProps: {
 export declare type TabbarProps = ExtractPropTypes<typeof tabbarProps>;
 export declare type TabbarProvide = {
     props: TabbarProps;
-    setActive: (active: number | string) => void;
+    setActive: (active: number | string, afterChange: () => void) => void;
 };
 export declare const TABBAR_KEY: InjectionKey<TabbarProvide>;
 declare const _default: import("vue").DefineComponent<{

package/lib/tabbar/Tabbar.js

@@ -62,6 +62,7 @@ var _default = (0, _vue.defineComponent)({
       } = props;
       return (0, _vue.createVNode)("div", {
         "ref": root,
+        "role": "tablist",
         "style": (0, _utils.getZIndexStyle)(zIndex),
         "class": [bem({
           fixed
@@ -72,18 +73,17 @@ var _default = (0, _vue.defineComponent)({
       }, [slots.default == null ? void 0 : slots.default()]);
     };
 
-    var setActive = active => {
-      if (active !== props.modelValue) {
-        (0, _utils.callInterceptor)(props.beforeChange, {
-          args: [active],
+    var setActive = (active, afterChange) => {
+      (0, _utils.callInterceptor)(props.beforeChange, {
+        args: [active],
 
-          done() {
-            emit('update:modelValue', active);
-            emit('change', active);
-          }
+        done() {
+          emit('update:modelValue', active);
+          emit('change', active);
+          afterChange();
+        }
 
-        });
-      }
+      });
     };
 
     linkChildren({

package/lib/tabbar-item/TabbarItem.js

@@ -55,6 +55,8 @@ var _default = (0, _vue.defineComponent)({
     }
 
     var active = (0, _vue.computed)(() => {
+      var _props$name;
+
       var {
         route,
         modelValue
@@ -75,15 +77,17 @@ var _default = (0, _vue.defineComponent)({
         return pathMatched || nameMatched;
       }
 
-      return (props.name || index.value) === modelValue;
+      return ((_props$name = props.name) != null ? _props$name : index.value) === modelValue;
     });
 
     var onClick = event => {
-      var _props$name;
+      if (!active.value) {
+        var _props$name2;
+
+        parent.setActive((_props$name2 = props.name) != null ? _props$name2 : index.value, route);
+      }
 
-      parent.setActive((_props$name = props.name) != null ? _props$name : index.value);
       emit('click', event);
-      route();
     };
 
     var renderIcon = () => {
@@ -112,12 +116,15 @@ var _default = (0, _vue.defineComponent)({
       } = parent.props;
       var color = active.value ? activeColor : inactiveColor;
       return (0, _vue.createVNode)("div", {
+        "role": "tab",
         "class": bem({
           active: active.value
         }),
         "style": {
           color
         },
+        "tabindex": 0,
+        "aria-selected": active.value,
         "onClick": onClick
       }, [(0, _vue.createVNode)(_badge.Badge, {
         "dot": dot,

package/lib/tabs/Tabs.js

@@ -11,6 +11,8 @@ var _utils2 = require("./utils");
 
 var _use = require("@vant/use");
 
+var _useId = require("../composables/use-id");
+
 var _useRoute = require("../composables/use-route");
 
 var _useRefs = require("../composables/use-refs");
@@ -86,7 +88,7 @@ var _default = (0, _vue.defineComponent)({
     var root = (0, _vue.ref)();
     var navRef = (0, _vue.ref)();
     var wrapRef = (0, _vue.ref)();
-    var windowSize = (0, _use.useWindowSize)();
+    var id = (0, _useId.useId)();
     var scroller = (0, _use.useScrollParent)(root);
     var [titleRefs, setTitleRefs] = (0, _useRefs.useRefs)();
     var {
@@ -303,12 +305,14 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var renderNav = () => children.map((item, index) => (0, _vue.createVNode)(_TabsTitle.default, (0, _vue.mergeProps)({
+      "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,
@@ -336,14 +340,15 @@ var _default = (0, _vue.defineComponent)({
         "class": bem('nav', [type, {
           complete: scrollable.value
         }]),
-        "style": navStyle.value
+        "style": navStyle.value,
+        "aria-orientation": "horizontal"
       }, [(_slots$navLeft = slots['nav-left']) == null ? void 0 : _slots$navLeft.call(slots), renderNav(), type === 'line' && (0, _vue.createVNode)("div", {
         "class": bem('line'),
         "style": state.lineStyle
       }, null), (_slots$navRight = slots['nav-right']) == null ? void 0 : _slots$navRight.call(slots)])]);
     };
 
-    (0, _vue.watch)([() => props.color, windowSize.width], setLine);
+    (0, _vue.watch)([() => props.color, _utils.windowWidth], setLine);
     (0, _vue.watch)(() => props.active, value => {
       if (value !== currentName.value) {
         setCurrentIndexByName(value);
@@ -393,6 +398,7 @@ var _default = (0, _vue.defineComponent)({
       target: scroller
     });
     linkChildren({
+      id,
       props,
       setLine,
       onRendered,