fix(FileUpload): improve file removal a11y (#4607)

Author: J-Michalek

src/runtime/components/FileUpload.vue

@@ -127,7 +127,7 @@ export interface FileUploadSlots<M extends boolean = false> {
 import { computed, watch } from 'vue'
 import { Primitive } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
-import { useAppConfig } from '#imports'
+import { useAppConfig, useLocale } from '#imports'
 import { useFormField } from '../composables/useFormField'
 import { useFileUpload } from '../composables/useFileUpload'
 import { tv } from '../utils/tv'
@@ -153,6 +153,8 @@ const modelValue = defineModel<(M extends true ? File[] : File) | null>()
 
 const appConfig = useAppConfig() as FileUpload['AppConfig']
 
+const { t } = useLocale()
+
 const [DefineFilesTemplate, ReuseFilesTemplate] = createReusableTemplate()
 
 const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
@@ -235,13 +237,17 @@ function removeFile(index?: number) {
 
   if (!props.multiple || index === undefined) {
     onUpdate([], true)
+
+    dropzoneRef.value?.focus()
     return
   }
 
   const files = [...modelValue.value as File[]]
   files.splice(index, 1)
 
   onUpdate(files, true)
+
+  dropzoneRef.value?.focus()
 }
 
 watch(modelValue, (newValue) => {
@@ -298,6 +304,7 @@ defineExpose({
                     }),
                     ...typeof fileDelete === 'object' ? fileDelete : undefined
                   }"
+                  :aria-label="t('fileUpload.removeFile', { filename: (file as File).name })"
                   :trailing-icon="fileDeleteIcon || appConfig.ui.icons.close"
                   :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
                   @click.stop.prevent="removeFile(index)"

src/runtime/locale/ar.ts

@@ -54,6 +54,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'لا توجد بيانات'
+    },
+    fileUpload: {
+      removeFile: 'إزالة {filename}'
     }
   }
 })

src/runtime/locale/az.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Məlumat yoxdur'
+    },
+    fileUpload: {
+      removeFile: '{filename} sil'
     }
   }
 })

src/runtime/locale/bg.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Няма данни'
+    },
+    fileUpload: {
+      removeFile: 'Премахни {filename}'
     }
   }
 })

src/runtime/locale/bn.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'কোন তথ্য নেই'
+    },
+    fileUpload: {
+      removeFile: '{filename} সরান'
     }
   }
 })

src/runtime/locale/ca.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Sense dades'
+    },
+    fileUpload: {
+      removeFile: 'Eliminar {filename}'
     }
   }
 })

src/runtime/locale/ckb.ts

@@ -54,6 +54,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'هیچ داتایەک نییە'
+    },
+    fileUpload: {
+      removeFile: '{filename} بسڕەوە'
     }
   }
 })

src/runtime/locale/cs.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Žádná data'
+    },
+    fileUpload: {
+      removeFile: 'Odebrat {filename}'
     }
   }
 })

src/runtime/locale/da.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Ingen data'
+    },
+    fileUpload: {
+      removeFile: 'Fjern {filename}'
     }
   }
 })

src/runtime/locale/de.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Keine Daten'
+    },
+    fileUpload: {
+      removeFile: '{filename} entfernen'
     }
   }
 })