Improve a11y of remove button in dashboard (#3088)

* Improve a11y of remove button in dashboard

* Update `en_US.js`

* Update fr_FR.js

* Update `nl_NL.js`

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js

@@ -17,8 +17,8 @@ function EditButton ({
       <button
         className="uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--edit"
         type="button"
-        aria-label={`${i18n('editFile')} ${file.meta.name}`}
-        title={i18n('editFile')}
+        aria-label={i18n('editFile', { file: file.meta.name })}
+        title={i18n('editFile', { file: file.meta.name })}
         onClick={() => onClick()}
       >
         <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="14" height="14" viewBox="0 0 14 14">
@@ -34,13 +34,13 @@ function EditButton ({
   return null
 }
 
-function RemoveButton ({ i18n, onClick }) {
+function RemoveButton ({ i18n, onClick, file }) {
   return (
     <button
       className="uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--remove"
       type="button"
-      aria-label={i18n('removeFile')}
-      title={i18n('removeFile')}
+      aria-label={i18n('removeFile', { file: file.meta.name })}
+      title={i18n('removeFile', { file: file.meta.name })}
       onClick={() => onClick()}
     >
       <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="18" height="18" viewBox="0 0 18 18">
@@ -119,6 +119,7 @@ module.exports = function Buttons (props) {
       {showRemoveButton ? (
         <RemoveButton
           i18n={i18n}
+          file={file}
           uppy={uppy}
           onClick={() => props.uppy.removeFile(file.id, 'removed-by-user')}
         />

packages/@uppy/dashboard/src/index.js

@@ -61,8 +61,8 @@ module.exports = class Dashboard extends UIPlugin {
         copyLink: 'Copy link',
         back: 'Back',
         addMore: 'Add more',
-        removeFile: 'Remove file',
-        editFile: 'Edit file',
+        removeFile: 'Remove file %{file}',
+        editFile: 'Edit file %{file}',
         editing: 'Editing %{file}',
         finishEditingFile: 'Finish editing file',
         save: 'Save',

packages/@uppy/locales/src/en_US.js

@@ -47,7 +47,7 @@ en_US.strings = {
   dropPasteImportBoth: 'Drop files here, %{browseFiles}, %{browseFolders} or import from:',
   dropPasteImportFiles: 'Drop files here, %{browseFiles} or import from:',
   dropPasteImportFolders: 'Drop files here, %{browseFolders} or import from:',
-  editFile: 'Edit file',
+  editFile: 'Edit file %{file}',
   editing: 'Editing %{file}',
   emptyFolderAdded: 'No files were added from empty folder',
   encoding: 'Encoding...',
@@ -111,7 +111,7 @@ en_US.strings = {
     '0': 'We could not fully recover 1 file. Please re-select it and resume the upload.',
     '1': 'We could not fully recover %{smart_count} files. Please re-select them and resume the upload.',
   },
-  removeFile: 'Remove file',
+  removeFile: 'Remove file %{file}',
   reSelect: 'Re-select',
   resetFilter: 'Reset filter',
   resume: 'Resume',

packages/@uppy/locales/src/fr_FR.js

@@ -41,7 +41,7 @@ fr_FR.strings = {
   dropPasteImportBoth: 'Déposer les fichiers ici, coller, %{browse} ou importer de',
   dropPasteImportFiles: 'Déposer les fichiers ici, coller, %{browse} ou importer de',
   dropPasteImportFolders: 'Déposer les fichiers ici, coller, %{browse} ou importer de',
-  editFile: 'Modifier fichier',
+  editFile: 'Modifier le fichier %{file}',
   editing: 'Modification en cours de %{file}',
   emptyFolderAdded: 'Aucun fichier n\'a été ajouté depuis un dossier vide',
   encoding: 'Traitement...',
@@ -87,7 +87,7 @@ fr_FR.strings = {
   recording: 'Enregistrement',
   recordingLength: 'Durée d\'enregistrement %{recording_length}',
   recordingStoppedMaxSize: 'L\'enregistrement s\'est arrété car la taille du fichier dépasse la limite',
-  removeFile: 'Effacer le fichier',
+  removeFile: 'Effacer le fichier %{file}',
   resetFilter: 'Réinitialiser filtre',
   resume: 'Reprendre',
   resumeUpload: 'Reprendre le téléchargement',

packages/@uppy/locales/src/nl_NL.js

@@ -35,7 +35,7 @@ nl_NL.strings = {
   dropPasteImportBoth: 'Sleep hier je bestanden naartoe, plak, %{browse} of importeer vanuit',
   dropPasteImportFiles: 'Sleep hier je bestanden naartoe, plak, %{browse} of importeer vanuit',
   dropPasteImportFolders: 'Sleep hier je bestanden naartoe, plak, %{browse} of importeer vanuit',
-  editFile: 'Bestand aanpassen',
+  editFile: 'Bestand aanpassen %{file}',
   editing: 'Bezig %{file} aan te passen',
   emptyFolderAdded: 'Er werden geen bestanden toegevoegd uit de lege map',
   encoding: 'Coderen...',
@@ -72,7 +72,7 @@ nl_NL.strings = {
   },
   recordingLength: 'Opnameduur %{recording_length}',
   recordingStoppedMaxSize: 'Opname gestopt omdat de bestandsgrootte de limiet bijna overschrijdt',
-  removeFile: 'Bestand verwijderen',
+  removeFile: 'Verwijder bestand %{file}',
   resetFilter: 'Filter resetten',
   resume: 'Hervatten',
   resumeUpload: 'Upload hervatten',