docs(changelog): 3.3.0

packages/vant-cli/site/desktop/components/Content.vue

@@ -170,6 +170,10 @@ export default {
     }
   }
 
+  > ul {
+    margin: 12px 0;
+  }
+
   > ul li,
   > ol li {
     position: relative;

packages/vant/docs/markdown/changelog.en-US.md

@@ -16,22 +16,64 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 
 ## Details
 
+### [v3.3.0](https://github.com/compare/v3.2.8...v3.3.0)
+
+`2021-11-19`
+
+**Accessibility**
+
+- Cascader: add role, aria and tabindex [#9886](https://github.com/youzan/vant/issues/9886)
+- CountDown: add timer role [#9906](https://github.com/youzan/vant/issues/9906)
+- DropdownMenu: add role, aria and tabindex [#9893](https://github.com/youzan/vant/issues/9893)
+- Field: add aria-labelledby [#9883](https://github.com/youzan/vant/issues/9883)
+- List: add role and tabindex [#9888](https://github.com/youzan/vant/issues/9888)
+- Pagination: refactor DOM to improve a11y [#9901](https://github.com/youzan/vant/issues/9901)
+- Popover: add tabindex and aria-disabled [#9889](https://github.com/youzan/vant/issues/9889)
+- Rate: improve a11y when disabled or readonly [#9881](https://github.com/youzan/vant/issues/9881)
+- Search: id prop add default value [#9884](https://github.com/youzan/vant/issues/9884)
+- Sidebar: add role, aria and tabindex [#9903](https://github.com/youzan/vant/issues/9903)
+- Slider: improve a11y when disabled or readonly [#9880](https://github.com/youzan/vant/issues/9880)
+- Stepper: add aria-disabled [#9877](https://github.com/youzan/vant/issues/9877)
+- Stepper: add group role [#9876](https://github.com/youzan/vant/issues/9876)
+- Switch: add tabindex [#9887](https://github.com/youzan/vant/issues/9887)
+- Tabbar: add role, aria and tabindex [#9895](https://github.com/youzan/vant/issues/9895)
+- Tabs: add aria-controls [#9882](https://github.com/youzan/vant/issues/9882)
+- Tabs: add aria-disabled [#9878](https://github.com/youzan/vant/issues/9878)
+- Tabs: add aria-orientation and tabindex [#9872](https://github.com/youzan/vant/issues/9872)
+- Uploader: add role, aria and tabindex [#9905](https://github.com/youzan/vant/issues/9905)
+- remove tabindex from disabled elements [#9879](https://github.com/youzan/vant/issues/9879)
+
+**Feature**
+
+- Popup: reduce unused listener [#9896](https://github.com/youzan/vant/issues/9896)
+- Field: expose sub-types of FieldRule [#9843](https://github.com/youzan/vant/issues/9843)
+- minify svg icons [#9869](https://github.com/youzan/vant/issues/9869)
+
+**Bug Fixes**
+
+- Popover: useClickAway failed in SSR [#9899](https://github.com/youzan/vant/issues/9899)
+- CouponList: incorrect list height [#9874](https://github.com/youzan/vant/issues/9874)
+- Field: should not trigger validation after blurring readonly input [#9862](https://github.com/youzan/vant/issues/9862)
+- Switch: switch node inherit font-size [#9842](https://github.com/youzan/vant/issues/9842)
+- Tabbar: before-change not work in route mode [#9856](https://github.com/youzan/vant/issues/9856)
+- Tabs: rename panel class to `van-tab__panel` [#9885](https://github.com/youzan/vant/issues/9885)
+
 ### [v3.2.8](https://github.com/compare/v3.2.7...v3.2.8)
 
 `2021-11-09`
 
 **Feature**
 
-- Cascader: add options-bottom slot [#9804](https://github.com/issues/9804)
+- Cascader: add options-bottom slot [#9804](https://github.com/youzan/vant/issues/9804)
 - SubmitBar: add SubmitBarTextAlign type [f95567](https://github.com/commit/f95567ade758d453f4acad8a40d8ae717035476a)
-- PasswordInput: add PasswordInputProps type [#9820](https://github.com/issues/9820)
+- PasswordInput: add PasswordInputProps type [#9820](https://github.com/youzan/vant/issues/9820)
 
 **Bug Fixes**
 
-- NavBar: fix NavBarProps spelling [#9818](https://github.com/issues/9818)
-- Progress: incorrect border-radius [#9826](https://github.com/issues/9826)
-- SubmitBar: fix missing SubmitBarProps export [#9819](https://github.com/issues/9819)
-- Tabs: should emit click-tab after before-change [#9805](https://github.com/issues/9805)
+- NavBar: fix NavBarProps spelling [#9818](https://github.com/youzan/vant/issues/9818)
+- Progress: incorrect border-radius [#9826](https://github.com/youzan/vant/issues/9826)
+- SubmitBar: fix missing SubmitBarProps export [#9819](https://github.com/youzan/vant/issues/9819)
+- Tabs: should emit click-tab after before-change [#9805](https://github.com/youzan/vant/issues/9805)
 
 ### [v3.2.7](https://github.com/youzan/vant/compare/v3.2.6...v3.2.7)
 

packages/vant/docs/markdown/changelog.zh-CN.md

@@ -16,22 +16,67 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 ## 更新内容
 
+### [v3.3.0](https://github.com/compare/v3.2.8...v3.3.0)
+
+`2021-11-19`
+
+**Accessibility**
+
+改善以下组件的无障碍访问体验：
+
+- Cascader: 增加 role="menu", tabindex, aria-checked, aria-disabled 属性 [#9886](https://github.com/youzan/vant/issues/9886)
+- CountDown: 增加 role="timer" 属性 [#9906](https://github.com/youzan/vant/issues/9906)
+- DropdownMenu: 增加 role="menu", tabindex, aria-labelledby 属性 [#9893](https://github.com/youzan/vant/issues/9893)
+- Field: 增加 aria-labelledby 属性 [#9883](https://github.com/youzan/vant/issues/9883)
+- List: 增加 role="button", tabindex 属性 [#9888](https://github.com/youzan/vant/issues/9888)
+- Pagination: 增加 role="navigation" 和 button 标签 [#9901](https://github.com/youzan/vant/issues/9901)
+- Popover: 增加 tabindex, aria-disabled 属性 [#9889](https://github.com/youzan/vant/issues/9889)
+- Rate: 增加 aria-disabled, aria-readonly 属性 [#9881](https://github.com/youzan/vant/issues/9881)
+- Search: 提供默认的 id 属性 属性 [#9884](https://github.com/youzan/vant/issues/9884)
+- Sidebar: 增加 role="tab", tabindex, aria-selected 属性 [#9903](https://github.com/youzan/vant/issues/9903)
+- Slider: 增加 aria-disabled, aria-readonly 属性 [#9880](https://github.com/youzan/vant/issues/9880)
+- Stepper: 增加 aria-disabled 属性 [#9877](https://github.com/youzan/vant/issues/9877)
+- Stepper: 增加 role="group" 属性 [#9876](https://github.com/youzan/vant/issues/9876)
+- Switch: 增加 tabindex 属性 [#9887](https://github.com/youzan/vant/issues/9887)
+- Tabbar: 增加 role="tab", tabindex, aria-selected 属性 [#9895](https://github.com/youzan/vant/issues/9895)
+- Tabs: 增加 aria-controls 属性 [#9882](https://github.com/youzan/vant/issues/9882)
+- Tabs: 增加 aria-disabled 属性 [#9878](https://github.com/youzan/vant/issues/9878)
+- Tabs: 增加 tabindex, aria-orientation 属性 [#9872](https://github.com/youzan/vant/issues/9872)
+- Uploader: 删除按钮增加 role="button", tabindex, aria-label 属性 [#9905](https://github.com/youzan/vant/issues/9905)
+- 移除禁用元素的 tabindex 属性 [#9879](https://github.com/youzan/vant/issues/9879)
+
+**Feature**
+
+- Popup: 移除多余的 click 事件监听 [#9896](https://github.com/youzan/vant/issues/9896)
+- Field: 导出 `FieldRuleValidator` 等多个类型定义 [#9843](https://github.com/youzan/vant/issues/9843)
+- Empty: 压缩 svg 图标 [#9869](https://github.com/youzan/vant/issues/9869)
+- NumberKeyboard: 压缩 svg 图标 [#9869](https://github.com/youzan/vant/issues/9869)
+- Tabs: 将 `van-tab__pane` 类重命名为 `van-tab__panel` [#9885](https://github.com/youzan/vant/issues/9885)
+
+**Bug Fixes**
+
+- Popover: 修复 useClickAway 方法在 SSR 时报错的问题 [#9899](https://github.com/youzan/vant/issues/9899)
+- CouponList: 修复列表高度不正确的问题 [#9874](https://github.com/youzan/vant/issues/9874)
+- Field: 修复点击只读输入框会触发表单验证的问题 [#9862](https://github.com/youzan/vant/issues/9862)
+- Switch: 修复全局设置 font-size 时样式错误的问题 [#9842](https://github.com/youzan/vant/issues/9842)
+- Tabbar: 修复 route 模式下无法触发 before-change 属性的问题 [#9856](https://github.com/youzan/vant/issues/9856)
+
 ### [v3.2.8](https://github.com/compare/v3.2.7...v3.2.8)
 
 `2021-11-09`
 
 **Feature**
 
-- Cascader: 新增 options-bottom 插槽 [#9804](https://github.com/issues/9804)
+- Cascader: 新增 options-bottom 插槽 [#9804](https://github.com/youzan/vant/issues/9804)
 - SubmitBar: 新增 SubmitBarTextAlign 类型 [f95567](https://github.com/commit/f95567ade758d453f4acad8a40d8ae717035476a)
-- PasswordInput: 新增 PasswordInputProps 类型 [#9820](https://github.com/issues/9820)
+- PasswordInput: 新增 PasswordInputProps 类型 [#9820](https://github.com/youzan/vant/issues/9820)
 
 **Bug Fixes**
 
-- NavBar: 修复 NavBarProps 拼写错误的问题 [#9818](https://github.com/issues/9818)
-- Progress: 修复圆角大小错误的问题 [#9826](https://github.com/issues/9826)
-- SubmitBar: 修复未导出 SubmitBarProps 的问题 [#9819](https://github.com/issues/9819)
-- Tabs: 修复 click-tab 触发顺序早于 before-change 的问题 [#9805](https://github.com/issues/9805)
+- NavBar: 修复 NavBarProps 拼写错误的问题 [#9818](https://github.com/youzan/vant/issues/9818)
+- Progress: 修复圆角大小错误的问题 [#9826](https://github.com/youzan/vant/issues/9826)
+- SubmitBar: 修复未导出 SubmitBarProps 的问题 [#9819](https://github.com/youzan/vant/issues/9819)
+- Tabs: 修复 click-tab 触发顺序早于 before-change 的问题 [#9805](https://github.com/youzan/vant/issues/9805)
 
 ### [v3.2.7](https://github.com/youzan/vant/compare/v3.2.6...v3.2.7)
 

packages/vant/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "3.2.8",
+  "version": "3.3.0",
   "description": "Mobile UI Components built on Vue",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/vant/src/count-down/CountDown.tsx

@@ -58,7 +58,7 @@ export default defineComponent({
     });
 
     return () => (
-      <div class={bem()}>
+      <div role="timer" class={bem()}>
         {slots.default ? slots.default(current.value) : timeText.value}
       </div>
     );

packages/vant/src/count-down/test/__snapshots__/index.spec.tsx.snap

@@ -1,31 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should format S milliseconds correctly 1`] = `
-<div class="van-count-down">
+<div role="timer"
+     class="van-count-down"
+>
   01-5
 </div>
 `;
 
 exports[`should format SS milliseconds correctly 1`] = `
-<div class="van-count-down">
+<div role="timer"
+     class="van-count-down"
+>
   01-50
 </div>
 `;
 
 exports[`should format complete time correctly 1`] = `
-<div class="van-count-down">
+<div role="timer"
+     class="van-count-down"
+>
   01-05-59-59-999
 </div>
 `;
 
 exports[`should format incomplete time correctly 1`] = `
-<div class="van-count-down">
+<div role="timer"
+     class="van-count-down"
+>
   29-59-59-999
 </div>
 `;
 
 exports[`should not start counting when auto-start prop is false 1`] = `
-<div class="van-count-down">
+<div role="timer"
+     class="van-count-down"
+>
   100
 </div>
 `;

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

@@ -459,7 +459,11 @@ exports[`should render demo and match snapshot 1`] = `
                         </i>
                       </div>
                     </div>
-                    <div class="van-uploader__preview-delete">
+                    <div role="button"
+                         class="van-uploader__preview-delete"
+                         tabindex="0"
+                         aria-label="Delete"
+                    >
                       <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
                       </i>
                     </div>

packages/vant/src/pagination/Pagination.tsx

@@ -133,6 +133,7 @@ export default defineComponent({
           ]}
         >
           <button
+            type="button"
             disabled={disabled}
             onClick={() => updateModelValue(modelValue - 1)}
           >
@@ -154,6 +155,7 @@ export default defineComponent({
           ]}
         >
           <button
+            type="button"
             disabled={disabled}
             onClick={() => updateModelValue(modelValue + 1)}
           >
@@ -172,6 +174,7 @@ export default defineComponent({
           ]}
         >
           <button
+            type="button"
             aria-current={page.active || undefined}
             onClick={() => updateModelValue(page.number)}
           >

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

@@ -7,37 +7,41 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <ul class="van-pagination__items">
       <li class="van-pagination__item van-pagination__item--disabled van-pagination__item--prev van-hairline--surround">
-        <button disabled>
+        <button type="button"
+                disabled
+        >
           Prev
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--active van-pagination__item--page van-hairline--surround">
-        <button aria-current="true">
+        <button type="button"
+                aria-current="true"
+        >
           1
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-        <button>
+        <button type="button">
           2
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-        <button>
+        <button type="button">
           3
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-        <button>
+        <button type="button">
           4
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-        <button>
+        <button type="button">
           5
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--next van-hairline--surround">
-        <button>
+        <button type="button">
           Next
         </button>
       </li>
@@ -51,7 +55,9 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <ul class="van-pagination__items">
       <li class="van-pagination__item van-pagination__item--disabled van-pagination__item--border van-pagination__item--prev van-hairline--surround">
-        <button disabled>
+        <button type="button"
+                disabled
+        >
           Prev
         </button>
       </li>
@@ -59,7 +65,7 @@ exports[`should render demo and match snapshot 1`] = `
         1/12
       </li>
       <li class="van-pagination__item van-pagination__item--border van-pagination__item--next van-hairline--surround">
-        <button>
+        <button type="button">
           Next
         </button>
       </li>
@@ -72,32 +78,36 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <ul class="van-pagination__items">
       <li class="van-pagination__item van-pagination__item--disabled van-pagination__item--prev van-hairline--surround">
-        <button disabled>
+        <button type="button"
+                disabled
+        >
           Prev
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--active van-pagination__item--page van-hairline--surround">
-        <button aria-current="true">
+        <button type="button"
+                aria-current="true"
+        >
           1
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-        <button>
+        <button type="button">
           2
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-        <button>
+        <button type="button">
           3
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-        <button>
+        <button type="button">
           ...
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--next van-hairline--surround">
-        <button>
+        <button type="button">
           Next
         </button>
       </li>
@@ -110,38 +120,42 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <ul class="van-pagination__items">
       <li class="van-pagination__item van-pagination__item--disabled van-pagination__item--prev van-hairline--surround">
-        <button disabled>
+        <button type="button"
+                disabled
+        >
           <i class="van-badge__wrapper van-icon van-icon-arrow-left">
           </i>
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--active van-pagination__item--page van-hairline--surround">
-        <button aria-current="true">
+        <button type="button"
+                aria-current="true"
+        >
           1
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-        <button>
+        <button type="button">
           2
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-        <button>
+        <button type="button">
           3
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-        <button>
+        <button type="button">
           4
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-        <button>
+        <button type="button">
           5
         </button>
       </li>
       <li class="van-pagination__item van-pagination__item--next van-hairline--surround">
-        <button>
+        <button type="button">
           <i class="van-badge__wrapper van-icon van-icon-arrow">
           </i>
         </button>

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

@@ -6,37 +6,37 @@ exports[`should render page slot correctly 1`] = `
 >
   <ul class="van-pagination__items">
     <li class="van-pagination__item van-pagination__item--prev van-hairline--surround">
-      <button>
+      <button type="button">
         Previous
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-      <button>
+      <button type="button">
         foo 1
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-      <button>
+      <button type="button">
         foo 2
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-      <button>
+      <button type="button">
         foo 3
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-      <button>
+      <button type="button">
         foo 4
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-      <button>
+      <button type="button">
         foo 5
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--next van-hairline--surround">
-      <button>
+      <button type="button">
         Next
       </button>
     </li>
@@ -50,37 +50,37 @@ exports[`should render prev-text、next-text slot correctly 1`] = `
 >
   <ul class="van-pagination__items">
     <li class="van-pagination__item van-pagination__item--prev van-hairline--surround">
-      <button>
+      <button type="button">
         Custom PrevText
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-      <button>
+      <button type="button">
         1
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-      <button>
+      <button type="button">
         2
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-      <button>
+      <button type="button">
         3
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-      <button>
+      <button type="button">
         4
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--page van-hairline--surround">
-      <button>
+      <button type="button">
         5
       </button>
     </li>
     <li class="van-pagination__item van-pagination__item--next van-hairline--surround">
-      <button>
+      <button type="button">
         Custom NextText
       </button>
     </li>

packages/vant/src/sidebar-item/SidebarItem.tsx

@@ -57,11 +57,17 @@ export default defineComponent({
       const selected = index.value === parent.getActive();
 
       return (
-        <a class={bem({ select: selected, disabled })} onClick={onClick}>
+        <div
+          role="tab"
+          class={bem({ select: selected, disabled })}
+          tabindex={disabled ? undefined : 0}
+          aria-selected={selected}
+          onClick={onClick}
+        >
           <Badge dot={dot} content={badge} class={bem('text')}>
             {slots.title ? slots.title() : title}
           </Badge>
-        </a>
+        </div>
       );
     };
   },

packages/vant/src/sidebar/Sidebar.tsx

@@ -41,6 +41,6 @@ export default defineComponent({
       setActive,
     });
 
-    return () => <div class={bem()}>{slots.default?.()}</div>;
+    return () => <div role="tablist" class={bem()}>{slots.default?.()}</div>;
   },
 });

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

@@ -9,22 +9,36 @@ exports[`should render demo and match snapshot 1`] = `
       <h3 class="demo-sidebar-title">
         Basic Usage
       </h3>
-      <div class="van-sidebar">
-        <a class="van-sidebar-item van-sidebar-item--select">
+      <div role="tablist"
+           class="van-sidebar"
+      >
+        <div role="tab"
+             class="van-sidebar-item van-sidebar-item--select"
+             tabindex="0"
+             aria-selected="true"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>
@@ -35,30 +49,44 @@ exports[`should render demo and match snapshot 1`] = `
       <h3 class="demo-sidebar-title">
         Show Badge
       </h3>
-      <div class="van-sidebar">
-        <a class="van-sidebar-item van-sidebar-item--select">
+      <div role="tablist"
+           class="van-sidebar"
+      >
+        <div role="tab"
+             class="van-sidebar-item van-sidebar-item--select"
+             tabindex="0"
+             aria-selected="true"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
             <div class="van-badge van-badge--dot van-badge--fixed">
             </div>
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
             <div class="van-badge van-badge--fixed">
               5
             </div>
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
             <div class="van-badge van-badge--fixed">
               20
             </div>
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>
@@ -69,22 +97,35 @@ exports[`should render demo and match snapshot 1`] = `
       <h3 class="demo-sidebar-title">
         Disabled
       </h3>
-      <div class="van-sidebar">
-        <a class="van-sidebar-item van-sidebar-item--select">
+      <div role="tablist"
+           class="van-sidebar"
+      >
+        <div role="tab"
+             class="van-sidebar-item van-sidebar-item--select"
+             tabindex="0"
+             aria-selected="true"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
-        <a class="van-sidebar-item van-sidebar-item--disabled">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item van-sidebar-item--disabled"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>
@@ -95,22 +136,36 @@ exports[`should render demo and match snapshot 1`] = `
       <h3 class="demo-sidebar-title">
         Change Event
       </h3>
-      <div class="van-sidebar">
-        <a class="van-sidebar-item van-sidebar-item--select">
+      <div role="tablist"
+           class="van-sidebar"
+      >
+        <div role="tab"
+             class="van-sidebar-item van-sidebar-item--select"
+             tabindex="0"
+             aria-selected="true"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title 1
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title 2
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title 3
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>

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

@@ -1,11 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render title slot correctly 1`] = `
-<div class="van-sidebar">
-  <a class="van-sidebar-item van-sidebar-item--select">
+<div role="tablist"
+     class="van-sidebar"
+>
+  <div role="tab"
+       class="van-sidebar-item van-sidebar-item--select"
+       tabindex="0"
+       aria-selected="true"
+  >
     <div class="van-badge__wrapper van-sidebar-item__text">
       Custom Title
     </div>
-  </a>
+  </div>
 </div>
 `;

packages/vant/src/tree-select/test/__snapshots__/demo.spec.ts.snap

@@ -5,22 +5,35 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tree-select"
        style="height: 300px;"
   >
-    <div class="van-sidebar van-tree-select__nav">
-      <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+    <div role="tablist"
+         class="van-sidebar van-tree-select__nav"
+    >
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="true"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 1
         </div>
-      </a>
-      <a class="van-sidebar-item van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 2
         </div>
-      </a>
-      <a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 3
         </div>
-      </a>
+      </div>
     </div>
     <div class="van-tree-select__content">
       <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
@@ -44,22 +57,35 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tree-select"
        style="height: 300px;"
   >
-    <div class="van-sidebar van-tree-select__nav">
-      <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+    <div role="tablist"
+         class="van-sidebar van-tree-select__nav"
+    >
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="true"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 1
         </div>
-      </a>
-      <a class="van-sidebar-item van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 2
         </div>
-      </a>
-      <a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 3
         </div>
-      </a>
+      </div>
     </div>
     <div class="van-tree-select__content">
       <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
@@ -85,17 +111,27 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tree-select"
        style="height: 55vw;"
   >
-    <div class="van-sidebar van-tree-select__nav">
-      <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+    <div role="tablist"
+         class="van-sidebar van-tree-select__nav"
+    >
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="true"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 1
         </div>
-      </a>
-      <a class="van-sidebar-item van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 2
         </div>
-      </a>
+      </div>
     </div>
     <div class="van-tree-select__content">
       <div class="van-image">
@@ -110,22 +146,32 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tree-select"
        style="height: 55vw;"
   >
-    <div class="van-sidebar van-tree-select__nav">
-      <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+    <div role="tablist"
+         class="van-sidebar van-tree-select__nav"
+    >
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="true"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 1
           <div class="van-badge van-badge--dot van-badge--fixed">
           </div>
         </div>
-      </a>
-      <a class="van-sidebar-item van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 2
           <div class="van-badge van-badge--fixed">
             5
           </div>
         </div>
-      </a>
+      </div>
     </div>
     <div class="van-tree-select__content">
       <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">

packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap

@@ -12,12 +12,18 @@ exports[`should render content slot correctly 1`] = `
 <div class="van-tree-select"
      style="height: 300px;"
 >
-  <div class="van-sidebar van-tree-select__nav">
-    <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+  <div role="tablist"
+       class="van-sidebar van-tree-select__nav"
+  >
+    <div role="tab"
+         class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+         tabindex="0"
+         aria-selected="true"
+    >
       <div class="van-badge__wrapper van-sidebar-item__text">
         group1
       </div>
-    </a>
+    </div>
   </div>
   <div class="van-tree-select__content">
     Custom Content
@@ -29,7 +35,9 @@ exports[`should render empty TreeSelect correctly 1`] = `
 <div class="van-tree-select"
      style="height: 300px;"
 >
-  <div class="van-sidebar van-tree-select__nav">
+  <div role="tablist"
+       class="van-sidebar van-tree-select__nav"
+  >
   </div>
   <div class="van-tree-select__content">
   </div>
@@ -40,15 +48,21 @@ exports[`should render nav badge correctly 1`] = `
 <div class="van-tree-select"
      style="height: 300px;"
 >
-  <div class="van-sidebar van-tree-select__nav">
-    <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+  <div role="tablist"
+       class="van-sidebar van-tree-select__nav"
+  >
+    <div role="tab"
+         class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+         tabindex="0"
+         aria-selected="true"
+    >
       <div class="van-badge__wrapper van-sidebar-item__text">
         group1
         <div class="van-badge van-badge--fixed">
           3
         </div>
       </div>
-    </a>
+    </div>
   </div>
   <div class="van-tree-select__content">
   </div>

packages/vant/src/uploader/UploaderPreviewItem.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { bem, isImageFile } from './utils';
+import { t, bem, isImageFile } from './utils';
 import {
   isDef,
   extend,
@@ -71,7 +71,13 @@ export default defineComponent({
     const renderDeleteIcon = () => {
       if (props.deletable && props.item.status !== 'uploading') {
         return (
-          <div class={bem('preview-delete')} onClick={onDelete}>
+          <div
+            role="button"
+            class={bem('preview-delete')}
+            tabindex={0}
+            aria-label={t('delete')}
+            onClick={onDelete}
+          >
             <Icon name="cross" class={bem('preview-delete-icon')} />
           </div>
         );

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

@@ -29,7 +29,11 @@ exports[`should render demo and match snapshot 1`] = `
             </i>
           </div>
         </div>
-        <div class="van-uploader__preview-delete">
+        <div role="button"
+             class="van-uploader__preview-delete"
+             tabindex="0"
+             aria-label="Delete"
+        >
           <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
           </i>
         </div>
@@ -45,7 +49,11 @@ exports[`should render demo and match snapshot 1`] = `
             </i>
           </div>
         </div>
-        <div class="van-uploader__preview-delete">
+        <div role="button"
+             class="van-uploader__preview-delete"
+             tabindex="0"
+             aria-label="Delete"
+        >
           <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
           </i>
         </div>
@@ -114,7 +122,11 @@ exports[`should render demo and match snapshot 1`] = `
             Failed
           </div>
         </div>
-        <div class="van-uploader__preview-delete">
+        <div role="button"
+             class="van-uploader__preview-delete"
+             tabindex="0"
+             aria-label="Delete"
+        >
           <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
           </i>
         </div>
@@ -144,7 +156,11 @@ exports[`should render demo and match snapshot 1`] = `
             </i>
           </div>
         </div>
-        <div class="van-uploader__preview-delete">
+        <div role="button"
+             class="van-uploader__preview-delete"
+             tabindex="0"
+             aria-label="Delete"
+        >
           <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
           </i>
         </div>
@@ -175,7 +191,11 @@ exports[`should render demo and match snapshot 1`] = `
             </i>
           </div>
         </div>
-        <div class="van-uploader__preview-delete">
+        <div role="button"
+             class="van-uploader__preview-delete"
+             tabindex="0"
+             aria-label="Delete"
+        >
           <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
           </i>
         </div>
@@ -234,7 +254,11 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
           </div>
         </div>
-        <div class="van-uploader__preview-delete">
+        <div role="button"
+             class="van-uploader__preview-delete"
+             tabindex="0"
+             aria-label="Delete"
+        >
           <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
           </i>
         </div>
@@ -305,7 +329,11 @@ exports[`should render demo and match snapshot 1`] = `
             </i>
           </div>
         </div>
-        <div class="van-uploader__preview-delete">
+        <div role="button"
+             class="van-uploader__preview-delete"
+             tabindex="0"
+             aria-label="Delete"
+        >
           <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
           </i>
         </div>
@@ -323,7 +351,11 @@ exports[`should render demo and match snapshot 1`] = `
             </i>
           </div>
         </div>
-        <div class="van-uploader__preview-delete">
+        <div role="button"
+             class="van-uploader__preview-delete"
+             tabindex="0"
+             aria-label="Delete"
+        >
           <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
           </i>
         </div>

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

@@ -16,7 +16,11 @@ exports[`delete preview image 1`] = `
           </i>
         </div>
       </div>
-      <div class="van-uploader__preview-delete">
+      <div role="button"
+           class="van-uploader__preview-delete"
+           tabindex="0"
+           aria-label="Delete"
+      >
         <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
         </i>
       </div>
@@ -61,7 +65,11 @@ exports[`disable preview image 2`] = `
           test.jpg
         </div>
       </div>
-      <div class="van-uploader__preview-delete">
+      <div role="button"
+           class="van-uploader__preview-delete"
+           tabindex="0"
+           aria-label="Delete"
+      >
         <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
         </i>
       </div>
@@ -107,7 +115,11 @@ exports[`image-fit prop 1`] = `
           </i>
         </div>
       </div>
-      <div class="van-uploader__preview-delete">
+      <div role="button"
+           class="van-uploader__preview-delete"
+           tabindex="0"
+           aria-label="Delete"
+      >
         <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
         </i>
       </div>
@@ -141,7 +153,11 @@ exports[`preview-cover slot 1`] = `
           Custom Preview Cover
         </div>
       </div>
-      <div class="van-uploader__preview-delete">
+      <div role="button"
+           class="van-uploader__preview-delete"
+           tabindex="0"
+           aria-label="Delete"
+      >
         <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
         </i>
       </div>
@@ -160,7 +176,11 @@ exports[`preview-cover slot 1`] = `
           Custom Preview Cover
         </div>
       </div>
-      <div class="van-uploader__preview-delete">
+      <div role="button"
+           class="van-uploader__preview-delete"
+           tabindex="0"
+           aria-label="Delete"
+      >
         <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
         </i>
       </div>
@@ -190,7 +210,11 @@ exports[`preview-size prop 1`] = `
           test.jpg
         </div>
       </div>
-      <div class="van-uploader__preview-delete">
+      <div role="button"
+           class="van-uploader__preview-delete"
+           tabindex="0"
+           aria-label="Delete"
+      >
         <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
         </i>
       </div>
@@ -223,7 +247,11 @@ exports[`render preview image 1`] = `
           </i>
         </div>
       </div>
-      <div class="van-uploader__preview-delete">
+      <div role="button"
+           class="van-uploader__preview-delete"
+           tabindex="0"
+           aria-label="Delete"
+      >
         <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
         </i>
       </div>
@@ -236,7 +264,11 @@ exports[`render preview image 1`] = `
           https://img.yzcdn.cn/vant/test.pdf
         </div>
       </div>
-      <div class="van-uploader__preview-delete">
+      <div role="button"
+           class="van-uploader__preview-delete"
+           tabindex="0"
+           aria-label="Delete"
+      >
         <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
         </i>
       </div>
@@ -249,7 +281,11 @@ exports[`render preview image 1`] = `
           test.jpg
         </div>
       </div>
-      <div class="van-uploader__preview-delete">
+      <div role="button"
+           class="van-uploader__preview-delete"
+           tabindex="0"
+           aria-label="Delete"
+      >
         <i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
         </i>
       </div>

packages/vant/src/uploader/utils.ts

@@ -5,9 +5,9 @@ import type {
   UploaderFileListItem,
 } from './types';
 
-const [name, bem] = createNamespace('uploader');
+const [name, bem, t] = createNamespace('uploader');
 
-export { name, bem };
+export { name, bem, t };
 
 export const toArray = <T>(item: T | T[]): T[] =>
   Array.isArray(item) ? item : [item];