fix(FileUpload): improve file removal a11y

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'
     }
   }
 })

src/runtime/locale/el.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Δεν υπάρχουν δεδομένα'
+    },
+    fileUpload: {
+      removeFile: 'Αφαίρεση {filename}'
     }
   }
 })

src/runtime/locale/en.ts

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

src/runtime/locale/es.ts

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

src/runtime/locale/et.ts

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

src/runtime/locale/fa_ir.ts

@@ -54,6 +54,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'داده‌ای موجود نیست'
+    },
+    fileUpload: {
+      removeFile: 'حذف {filename}'
     }
   }
 })

src/runtime/locale/fi.ts

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

src/runtime/locale/fr.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Aucune donnée'
+    },
+    fileUpload: {
+      removeFile: 'Supprimer {filename}'
     }
   }
 })

src/runtime/locale/he.ts

@@ -52,6 +52,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'אין נתונים להצגה'
+    },
+    fileUpload: {
+      removeFile: 'הסר {filename}'
     }
   }
 })

src/runtime/locale/hi.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'कोई डेटा नहीं'
+    },
+    fileUpload: {
+      removeFile: '{filename} हटाएं'
     }
   }
 })

src/runtime/locale/hu.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Nincs adat'
+    },
+    fileUpload: {
+      removeFile: '{filename} eltávolítása'
     }
   }
 })

src/runtime/locale/hy.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Տվյալներ չկան'
+    },
+    fileUpload: {
+      removeFile: 'Ջնջել {filename}'
     }
   }
 })

src/runtime/locale/id.ts

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

src/runtime/locale/it.ts

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

src/runtime/locale/ja.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'データがありません'
+    },
+    fileUpload: {
+      removeFile: '{filename}を削除'
     }
   }
 })

src/runtime/locale/kk.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Деректер жоқ'
+    },
+    fileUpload: {
+      removeFile: '{filename} жою'
     }
   }
 })

src/runtime/locale/km.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'មិនមានទិន្នន័យ'
+    },
+    fileUpload: {
+      removeFile: 'លុប {filename}'
     }
   }
 })

src/runtime/locale/ko.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: '데이터가 없습니다.'
+    },
+    fileUpload: {
+      removeFile: '{filename} 제거'
     }
   }
 })

src/runtime/locale/ky.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Маалымат жок'
+    },
+    fileUpload: {
+      removeFile: '{filename} өчүрүү'
     }
   }
 })

src/runtime/locale/lb.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Keng Donnéeën'
+    },
+    fileUpload: {
+      removeFile: '{filename} ewechhuelen'
     }
   }
 })

src/runtime/locale/lt.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Nėra duomenų'
+    },
+    fileUpload: {
+      removeFile: 'Pašalinti {filename}'
     }
   }
 })

src/runtime/locale/mn.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Мэдээлэл байхгүй'
+    },
+    fileUpload: {
+      removeFile: '{filename} устгах'
     }
   }
 })

src/runtime/locale/ms.ts

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

src/runtime/locale/nb_no.ts

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

src/runtime/locale/nl.ts

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

src/runtime/locale/pl.ts

@@ -53,6 +53,9 @@ export default defineLocale<Messages>({
     },
     table: {
       noData: 'Brak danych'
+    },
+    fileUpload: {
+      removeFile: 'Usuń {filename}'
     }
   }
 })

src/runtime/locale/pt.ts

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