FileUploader: Support accessibility in FileList (#31454)

Co-authored-by: marker dao ® <[email protected]>

Author: marker-dao

packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts

@@ -652,12 +652,25 @@ class FileUploader extends Editor<FileUploaderProperties> {
     }
 
     this.$element().toggleClass(FILEUPLOADER_SHOW_FILE_LIST_CLASS, showFileList);
+    this._toggleFileContainerAria(Boolean(showFileList && this._files?.length));
     this._toggleFileUploaderEmptyClassName();
     this._updateFileNameMaxWidth();
 
     this._validationMessage?.repaint();
   }
 
+  _toggleFileContainerAria(applyAria: boolean): void {
+    const aria = {
+      role: applyAria ? 'list' : null,
+      'aria-label': applyAria
+        ? messageLocalization.format('dxFileUploader-fileListLabel')
+        : null,
+    };
+
+    // @ts-expect-error attr type should be extdened
+    this._$filesContainer?.attr(aria);
+  }
+
   _renderFile(file: FileUploaderItem): void {
     const { value } = file;
 
@@ -667,7 +680,8 @@ class FileUploader extends Editor<FileUploaderProperties> {
 
     const $fileContainer = $('<div>')
       .addClass(FILEUPLOADER_FILE_CONTAINER_CLASS)
-      .appendTo(this._$filesContainer);
+      .appendTo(this._$filesContainer)
+      .attr('role', 'listitem');
 
     this._renderFileIcon(value.name, $fileContainer);
 
@@ -800,6 +814,10 @@ class FileUploader extends Editor<FileUploaderProperties> {
         integrationOptions: {},
         hoverStateEnabled,
         stylingMode: _buttonStylingMode,
+        elementAttr: {
+          // @ts-expect-error foramat params should be extended
+          'aria-label': messageLocalization.format('dxFileUploader-removeFileButtonLabel', file?.value?.name ?? ''),
+        },
       },
     );
 
@@ -825,6 +843,10 @@ class FileUploader extends Editor<FileUploaderProperties> {
         icon: 'upload',
         hoverStateEnabled,
         stylingMode: _buttonStylingMode,
+        elementAttr: {
+          // @ts-expect-error foramat params should be extended
+          'aria-label': messageLocalization.format('dxFileUploader-uploadFileButtonLabel', file?.value?.name ?? ''),
+        },
       },
     );
 
@@ -859,6 +881,10 @@ class FileUploader extends Editor<FileUploaderProperties> {
     this.option({ value: valueCopy });
     this._preventRecreatingFiles = false;
 
+    if (this._files?.length === 0) {
+      this._toggleFileContainerAria(false);
+    }
+
     this._toggleFileUploaderEmptyClassName();
     this._resetInputValue(true);
   }

packages/devextreme/js/localization/messages/ar.json

@@ -88,6 +88,9 @@
         "dxFileUploader-invalidFileExtension": "نوع الملف غير مسموح به",
         "dxFileUploader-invalidMaxFileSize": "الملف كبير جدا",
         "dxFileUploader-invalidMinFileSize": "الملف صغير جدًا",
+        "dxFileUploader-fileListLabel": "File list",
+        "dxFileUploader-removeFileButtonLabel": "Remove file {0}",
+        "dxFileUploader-uploadFileButtonLabel": "Upload file {0}",
 
         "dxRangeSlider-ariaFrom": "من عند",
         "dxRangeSlider-ariaTill": "حتى",

packages/devextreme/js/localization/messages/bg.json

@@ -88,6 +88,9 @@
         "dxFileUploader-invalidFileExtension": "File type is not allowed",
         "dxFileUploader-invalidMaxFileSize": "File is too large",
         "dxFileUploader-invalidMinFileSize": "File is too small",
+        "dxFileUploader-fileListLabel": "File list",
+        "dxFileUploader-removeFileButtonLabel": "Remove file {0}",
+        "dxFileUploader-uploadFileButtonLabel": "Upload file {0}",
 
         "dxRangeSlider-ariaFrom": "От",
         "dxRangeSlider-ariaTill": "Till",

packages/devextreme/js/localization/messages/ca.json

@@ -88,6 +88,9 @@
         "dxFileUploader-invalidFileExtension": "El tipus de fitxer no està permès",
         "dxFileUploader-invalidMaxFileSize": "El fitxer és massa gran",
         "dxFileUploader-invalidMinFileSize": "El fitxer és massa petit",
+        "dxFileUploader-fileListLabel": "File list",
+        "dxFileUploader-removeFileButtonLabel": "Remove file {0}",
+        "dxFileUploader-uploadFileButtonLabel": "Upload file {0}",
 
         "dxRangeSlider-ariaFrom": "Des de",
         "dxRangeSlider-ariaTill": "Fins a",

packages/devextreme/js/localization/messages/cs.json

@@ -88,6 +88,9 @@
         "dxFileUploader-invalidFileExtension": "Nepovolený typ souboru",
         "dxFileUploader-invalidMaxFileSize": "Soubor je příliš velký",
         "dxFileUploader-invalidMinFileSize": "Soubor je příliš malý",
+        "dxFileUploader-fileListLabel": "File list",
+        "dxFileUploader-removeFileButtonLabel": "Remove file {0}",
+        "dxFileUploader-uploadFileButtonLabel": "Upload file {0}",
 
         "dxRangeSlider-ariaFrom": "Od",
         "dxRangeSlider-ariaTill": "Do",

packages/devextreme/js/localization/messages/da.json

@@ -88,6 +88,9 @@
         "dxFileUploader-invalidFileExtension": "Filtype er ikke tilladt",
         "dxFileUploader-invalidMaxFileSize": "Filen er for stor",
         "dxFileUploader-invalidMinFileSize": "Filen er for lille",
+        "dxFileUploader-fileListLabel": "File list",
+        "dxFileUploader-removeFileButtonLabel": "Remove file {0}",
+        "dxFileUploader-uploadFileButtonLabel": "Upload file {0}",
 
         "dxRangeSlider-ariaFrom": "Fra",
         "dxRangeSlider-ariaTill": "Indtil",

packages/devextreme/js/localization/messages/de.json

@@ -88,6 +88,9 @@
         "dxFileUploader-invalidFileExtension": "Unzulässiger Dateityp",
         "dxFileUploader-invalidMaxFileSize": "Datei ist zu groß",
         "dxFileUploader-invalidMinFileSize": "Datei ist zu klein",
+        "dxFileUploader-fileListLabel": "File list",
+        "dxFileUploader-removeFileButtonLabel": "Remove file {0}",
+        "dxFileUploader-uploadFileButtonLabel": "Upload file {0}",
 
         "dxRangeSlider-ariaFrom": "Von",
         "dxRangeSlider-ariaTill": "Bis",

packages/devextreme/js/localization/messages/el.json

@@ -88,6 +88,9 @@
         "dxFileUploader-invalidFileExtension": "Ο τυπος του αρχείου δεν είναι επιτρεπτός",
         "dxFileUploader-invalidMaxFileSize": "Το αρχείο είναι πολύ μεγάλο",
         "dxFileUploader-invalidMinFileSize": "Το αρχειο είναι πολυ μικρό",
+        "dxFileUploader-fileListLabel": "File list",
+        "dxFileUploader-removeFileButtonLabel": "Remove file {0}",
+        "dxFileUploader-uploadFileButtonLabel": "Upload file {0}",
 
         "dxRangeSlider-ariaFrom": "Από",
         "dxRangeSlider-ariaTill": "Εώς",

packages/devextreme/js/localization/messages/en.json

@@ -88,6 +88,9 @@
         "dxFileUploader-invalidFileExtension": "File type is not allowed",
         "dxFileUploader-invalidMaxFileSize": "File is too large",
         "dxFileUploader-invalidMinFileSize": "File is too small",
+        "dxFileUploader-fileListLabel": "File list",
+        "dxFileUploader-removeFileButtonLabel": "Remove file {0}",
+        "dxFileUploader-uploadFileButtonLabel": "Upload file {0}",
 
         "dxRangeSlider-ariaFrom": "From",
         "dxRangeSlider-ariaTill": "Till",

packages/devextreme/js/localization/messages/es.json

@@ -88,6 +88,9 @@
         "dxFileUploader-invalidFileExtension": "Tipo de archivo no está permitido",
         "dxFileUploader-invalidMaxFileSize": "Archivo es muy grande",
         "dxFileUploader-invalidMinFileSize": "Archivo es muy pequeño",
+        "dxFileUploader-fileListLabel": "File list",
+        "dxFileUploader-removeFileButtonLabel": "Remove file {0}",
+        "dxFileUploader-uploadFileButtonLabel": "Upload file {0}",
 
         "dxRangeSlider-ariaFrom": "Desde",
         "dxRangeSlider-ariaTill": "Hasta",