From eb6e609a9320130716abd4da3f717e0a70e167d4 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 19 Nov 2021 15:37:41 +0800
Subject: [PATCH] feat(Uploader): add role, aria and tabindex for a11y (#9905)

---
 .../form/test/__snapshots__/demo.spec.ts.snap |  6 ++-
 .../vant/src/uploader/UploaderPreviewItem.tsx | 10 +++-
 .../test/__snapshots__/demo.spec.ts.snap      | 48 ++++++++++++++---
 .../test/__snapshots__/index.spec.ts.snap     | 54 +++++++++++++++----
 packages/vant/src/uploader/utils.ts           |  4 +-
 5 files changed, 100 insertions(+), 22 deletions(-)

diff --git a/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
index b2072dc75..04062414c 100644
--- a/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
+++ b/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>
diff --git a/packages/vant/src/uploader/UploaderPreviewItem.tsx b/packages/vant/src/uploader/UploaderPreviewItem.tsx
index 26801d22b..0c5fe5692 100644
--- a/packages/vant/src/uploader/UploaderPreviewItem.tsx
+++ b/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>
         );
diff --git a/packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap
index 4ac695728..17ec1bc81 100644
--- a/packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap
+++ b/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>
diff --git a/packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap
index 27c162802..7db4ac44d 100644
--- a/packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap
+++ b/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>
diff --git a/packages/vant/src/uploader/utils.ts b/packages/vant/src/uploader/utils.ts
index c98876fca..35aa1db3a 100644
--- a/packages/vant/src/uploader/utils.ts
+++ b/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];