feat(Uploader): add role, aria and tabindex for a11y (#9905)

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/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];