LionInputFile: Customize the text content of the selected files for screen reader if uploadOnSelect is enabled (#2509)

* update lion input file component and en translations

* update tests for input file

* add changeset

* add german and russian translations

* chore: add NL translations and fix small 2 bugs in fileNameDescriptionLabels

* fix lint error

---------

Co-authored-by: gerjanvangeest <Gerjan.van.Geest@ing.com>

.changeset/sharp-buses-speak.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+LionInputFile: Customize the text content of the selected files for screen reader if uploadOnSelect is enabled

packages/ui/components/input-file/src/LionInputFile.js

@@ -758,15 +758,39 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
     const selectedFiles = this.querySelector('[slot="after"]');
     if (selectedFiles) {
       if (!this._selectedFilesMetaData || this._selectedFilesMetaData.length === 0) {
+        if (this.uploadOnSelect) {
+          selectedFiles.textContent = /** @type {string} */ (
+            this.msgLit('lion-input-file:noFilesUploaded')
+          );
+        } else {
           selectedFiles.textContent = /** @type {string} */ (
             this.msgLit('lion-input-file:noFilesSelected')
           );
+        }
       } else if (this._selectedFilesMetaData.length === 1) {
+        const { name } = this._selectedFilesMetaData[0].systemFile;
+        if (this.uploadOnSelect) {
           selectedFiles.textContent = /** @type {string} */ (
-          errorMessage || this._selectedFilesMetaData[0].systemFile.name
+            errorMessage || this.msgLit('lion-input-file:fileUploaded') + (name ?? '')
           );
         } else {
-        selectedFiles.textContent = `${this.msgLit('lion-input-file:numberOfFiles', {
+          selectedFiles.textContent = /** @type {string} */ (
+            errorMessage || this.msgLit('lion-input-file:fileSelected') + (name ?? '')
+          );
+        }
+      } else if (this.uploadOnSelect) {
+        selectedFiles.textContent = `${this.msgLit('lion-input-file:filesUploaded', {
+          numberOfFiles: this._selectedFilesMetaData.length,
+        })} ${
+          errorMessage
+            ? this.msgLit('lion-input-file:generalValidatorMessage', {
+                validatorMessage: errorMessage,
+                listOfErroneousFiles: erroneousFilesNames.join(', '),
+              })
+            : ''
+        }`;
+      } else {
+        selectedFiles.textContent = `${this.msgLit('lion-input-file:filesSelected', {
           numberOfFiles: this._selectedFilesMetaData.length,
         })} ${
           errorMessage

packages/ui/components/input-file/src/LionSelectedFileList.js

@@ -212,7 +212,6 @@ export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitE
 
         .sr-only {
           position: absolute;
-          top: 0;
           width: 1px;
           height: 1px;
           overflow: hidden;

packages/ui/components/input-file/test/lion-input-file.test.js

@@ -1197,7 +1197,29 @@ describe('lion-input-file', () => {
         );
       });
 
-      it('after contains upload name of file when SUCCESS', async () => {
+      it('after contains upload name of file when uploadOnSelect is true and status is SUCCESS', async () => {
+        const uploadResponse = [
+          {
+            name: 'file1.txt',
+            status: 'SUCCESS',
+            errorMessage: '',
+            downloadUrl: '/downloadFile',
+          },
+        ];
+        const el = await fixture(html`
+          <lion-input-file label="Select" upload-on-select></lion-input-file>
+        `);
+
+        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('No files uploaded.');
+        // @ts-expect-error
+        el.uploadResponse = uploadResponse;
+        await el.updateComplete;
+        expect(el.querySelector('[slot="after"]')?.textContent).to.equal(
+          'Uploaded file: file1.txt',
+        );
+      });
+
+      it('after contains upload name of file when uploadOnSelect is false and status is SUCCESS', async () => {
         const uploadResponse = [
           {
             name: 'file1.txt',
@@ -1212,7 +1234,9 @@ describe('lion-input-file', () => {
         // @ts-expect-error
         el.uploadResponse = uploadResponse;
         await el.updateComplete;
-        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('file1.txt');
+        expect(el.querySelector('[slot="after"]')?.textContent).to.equal(
+          'Selected file: file1.txt',
+        );
       });
 
       it('after contains upload validator message of file when FAIL', async () => {
@@ -1233,7 +1257,34 @@ describe('lion-input-file', () => {
         expect(el.querySelector('[slot="after"]')?.textContent).to.equal('something went wrong');
       });
 
-      it('after contains upload status of files when multiple files have been uploaded', async () => {
+      it('after contains upload status of files when uploadOnSelect is true and multiple files have been selected', async () => {
+        const uploadResponse = [
+          {
+            name: 'file1.txt',
+            status: 'SUCCESS',
+            errorMessage: '',
+            downloadUrl: '/downloadFile',
+          },
+          {
+            name: 'file2.txt',
+            status: 'FAIL',
+            errorMessage: 'something went wrong',
+            downloadUrl: '/downloadFile',
+          },
+        ];
+        const el = await fixture(html`
+          <lion-input-file label="Select" multiple upload-on-select></lion-input-file>
+        `);
+        // @ts-expect-error
+        el.uploadResponse = uploadResponse;
+
+        await el.updateComplete;
+        expect(el.querySelector('[slot="after"]')?.textContent?.trim()).to.equal(
+          'Uploaded files: 2 files. "something went wrong", for file2.txt.',
+        );
+      });
+
+      it('after contains upload status of files when uploadOnSelect is false and multiple files have been selected', async () => {
         const uploadResponse = [
           {
             name: 'file1.txt',
@@ -1256,7 +1307,7 @@ describe('lion-input-file', () => {
 
         await el.updateComplete;
         expect(el.querySelector('[slot="after"]')?.textContent?.trim()).to.equal(
-          '2 files. "something went wrong", for file2.txt.',
+          'Selected files: 2 files. "something went wrong", for file2.txt.',
         );
       });
     });

packages/ui/components/input-file/translations/bg.js

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Моля, качете файл от тип {allowedTypesArray} или {allowedTypesLastItem} с макс. размер {maxSize}.',
   dragAndDropText: 'Плъзнете и пуснете Вашите файлове тук или',
-  fileNameDescriptionLabel: 'Име на файл: {fileName}',
+  fileNameDescriptionLabel: 'Име на файл: ',
   generalValidatorMessage: '"{validatorMessage}", за {listOfErroneousFiles}.',
   noFilesSelected: 'Не са избрани файлове.',
   numberOfFiles: '{numberOfFiles} файла.',

packages/ui/components/input-file/translations/cs.js

@@ -5,7 +5,7 @@ export default {
   allowedFileValidatorComplex:
     'Nahrajte soubor typu {allowedTypesArray} nebo {allowedTypesLastItem} s max. velikostí {maxSize}.',
   dragAndDropText: 'Přetáhněte soubory sem nebo',
-  fileNameDescriptionLabel: 'Název souboru: {fileName}',
+  fileNameDescriptionLabel: 'Název souboru: ',
   generalValidatorMessage: '"{validatorMessage}", pro {listOfErroneousFiles}.',
   noFilesSelected: 'Nebyly vybrány žádné soubory.',
   numberOfFiles: '{numberOfFiles} soubory/souborů.',

packages/ui/components/input-file/translations/de.js

@@ -4,9 +4,14 @@ export default {
   allowedFileValidatorComplex:
     'Laden Sie eine {allowedTypesArray} oder {allowedTypesLastItem}-Datei mit max. {maxSize} hoch.',
   dragAndDropText: 'Ziehen Sie Ihre Dateien per Drag & Drop hierher oder',
-  fileNameDescriptionLabel: 'Dateiname: {fileName}',
+  fileNameDescriptionLabel: 'Dateiname: ',
   generalValidatorMessage: '"{validatorMessage}", für {listOfErroneousFiles}.',
   noFilesSelected: 'Keine Dateien ausgewählt.',
+  noFilesUploaded: 'Keine Dateien hochgeladen.',
+  fileSelected: 'Ausgewählte Datei: ',
+  fileUploaded: 'Hochgeladene Datei: ',
+  filesSelected: 'Ausgewählte Dateien: {numberOfFiles} Dateien.',
+  filesUploaded: 'Hochgeladene Dateien: {numberOfFiles} Dateien.',
   numberOfFiles: '{numberOfFiles} Dateien.',
   removeButtonLabel: 'Datei {fileName} entfernen',
   selectTextDuplicateFileName: 'Eine Datei mit demselben Dateinamen war bereits vorhanden.',

packages/ui/components/input-file/translations/en.js

@@ -4,10 +4,14 @@ export default {
   allowedFileValidatorComplex:
     'Please select a {allowedTypesArray} or {allowedTypesLastItem} file with max {maxSize}.',
   dragAndDropText: 'Drag & Drop your files here or', // TODO: or what? Why is Drag & Drop capitalized?
-  fileNameDescriptionLabel: 'File name: {fileName}',
+  fileNameDescriptionLabel: 'File name: ',
   generalValidatorMessage: '"{validatorMessage}", for {listOfErroneousFiles}.',
   noFilesSelected: 'No files selected.',
-  numberOfFiles: '{numberOfFiles} files.',
+  noFilesUploaded: 'No files uploaded.',
+  fileSelected: 'Selected file: ',
+  fileUploaded: 'Uploaded file: ',
+  filesSelected: 'Selected files: {numberOfFiles} files.',
+  filesUploaded: 'Uploaded files: {numberOfFiles} files.',
   removeButtonLabel: 'Remove {fileName} file',
   selectTextDuplicateFileName: 'A file with same filename was already present.',
   selectTextMultipleFile: 'Select files',

packages/ui/components/input-file/translations/es.js

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Cargue un archivo {allowedTypesArray} o {allowedTypesLastItem} de {maxSize} como máximo.',
   dragAndDropText: 'Arrastre y suelte los archivos aquí o',
-  fileNameDescriptionLabel: 'Nombre de archivo: {fileName}',
+  fileNameDescriptionLabel: 'Nombre de archivo: ',
   generalValidatorMessage: '"{validatorMessage}", para {listOfErroneousFiles}.',
   noFilesSelected: 'No se han seleccionado archivos.',
   numberOfFiles: '{numberOfFiles} archivos.',

packages/ui/components/input-file/translations/fr.js

@@ -5,7 +5,7 @@ export default {
   allowedFileValidatorComplex:
     'Veuillez télécharger un fichier {allowedTypesArray} ou {allowedTypesLastItem} avec une taille maximale de {maxSize}.',
   dragAndDropText: 'Glissez et déposez vos fichiers ici ou',
-  fileNameDescriptionLabel: 'Nom de fichier: {fileName}',
+  fileNameDescriptionLabel: 'Nom de fichier: ',
   generalValidatorMessage: '"{validatorMessage}", pour {listOfErroneousFiles}.',
   noFilesSelected: 'Aucun fichier sélectionné.',
   numberOfFiles: '{numberOfFiles} fichiers.',

packages/ui/components/input-file/translations/hu.js

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Töltsön fel egy legfeljebb {maxSize} méretű {allowedTypesArray} vagy {allowedTypesLastItem} fájlt.',
   dragAndDropText: 'Húzza át a fájlokat ide vagy',
-  fileNameDescriptionLabel: 'Fájlnév: {fileName}',
+  fileNameDescriptionLabel: 'Fájlnév: ',
   generalValidatorMessage: '"{validatorMessage}", ehhez: {listOfErroneousFiles}.',
   noFilesSelected: 'Nincs fájl kiválasztva.',
   numberOfFiles: '{numberOfFiles} fájl.',

packages/ui/components/input-file/translations/it.js

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Caricare un file {allowedTypesArray} o {allowedTypesLastItem} di {maxSize} max.',
   dragAndDropText: 'Trascinare i file qui o',
-  fileNameDescriptionLabel: 'Nome file: {fileName}',
+  fileNameDescriptionLabel: 'Nome file: ',
   generalValidatorMessage: '"{validatorMessage}", per {listOfErroneousFiles}.',
   noFilesSelected: 'Nessun file selezionato.',
   numberOfFiles: '{numberOfFiles} file.',

packages/ui/components/input-file/translations/nl.js

@@ -4,10 +4,15 @@ export default {
   allowedFileValidatorComplex:
     'Upload een {allowedTypesArray} of {allowedTypesLastItem}-bestand van maximaal {maxSize}.',
   dragAndDropText: 'Sleep uw bestanden hierheen of',
-  fileNameDescriptionLabel: 'Bestandsnaam: {fileName}',
+  fileNameDescriptionLabel: 'Bestandsnaam: ',
   generalValidatorMessage: '"{validatorMessage}", voor {listOfErroneousFiles}.',
   noFilesSelected: 'Geen bestanden geselecteerd.',
   numberOfFiles: '{numberOfFiles} bestanden.',
+  noFilesUploaded: 'Geen bestanden geüpload.',
+  fileSelected: 'Geselecteerd bestand: ',
+  fileUploaded: 'Geüpload bestand: ',
+  filesSelected: 'Geselecteerde bestanden: {numberOfFiles} bestanden.',
+  filesUploaded: 'Geüploade bestanden: {numberOfFiles} bestanden.',
   removeButtonLabel: 'Verwijder het bestand {fileName}',
   selectTextDuplicateFileName: 'Er bestaat al een bestand met dezelfde bestandsnaam.',
   selectTextMultipleFile: 'Selecteer bestanden',

packages/ui/components/input-file/translations/pl.js

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Prześlij plik {allowedTypesArray} lub {allowedTypesLastItem} o maks. rozmiarze {maxSize}.',
   dragAndDropText: 'Przeciągnij i upuść pliki tutaj lub',
-  fileNameDescriptionLabel: 'Nazwa pliku: {fileName}',
+  fileNameDescriptionLabel: 'Nazwa pliku: ',
   generalValidatorMessage: '"{validatorMessage}", dla {listOfErroneousFiles}.',
   noFilesSelected: 'Nie wybrano żadnych plików.',
   numberOfFiles: 'Liczba plików: {numberOfFiles}.',

packages/ui/components/input-file/translations/ro.js

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Încărcaţi un fişier {allowedTypesArray} sau {allowedTypesLastItem} de max. {maxSize}.',
   dragAndDropText: 'Glisaţi şi fixaţi fişierele aici sau',
-  fileNameDescriptionLabel: 'Nume fişier: {fileName}',
+  fileNameDescriptionLabel: 'Nume fişier: ',
   generalValidatorMessage: '"{validatorMessage}", pentru {listOfErroneousFiles}.',
   noFilesSelected: 'Niciun fișier selectat.',
   numberOfFiles: '{numberOfFiles} fișiere.',

packages/ui/components/input-file/translations/ru.js

@@ -4,10 +4,14 @@ export default {
   allowedFileValidatorComplex:
     'Загрузите файл {allowedTypesArray} или {allowedTypesLastItem} размером не более {maxSize}.',
   dragAndDropText: 'Перетащите файлы сюда или',
-  fileNameDescriptionLabel: 'Название файла: {fileName}',
+  fileNameDescriptionLabel: 'Название файла: ',
   generalValidatorMessage: '"{validatorMessage}", для {listOfErroneousFiles}.',
-  noFilesSelected: 'Файлы не выбраны.',
+  noFilesSelected: 'Не выбрано ни одного файла.',
-  numberOfFiles: 'Файлов: {numberOfFiles}.',
+  noFilesUploaded: 'Не загружено ни одного файла.',
+  fileSelected: 'Выбранный файл: ',
+  fileUploaded: 'Загруженный файл: ',
+  filesSelected: 'Выбранные файлы: {numberOfFiles} файлов.',
+  filesUploaded: 'Загруженные файлы: {numberOfFiles} файлов.',
   removeButtonLabel: 'Удалить файл {fileName}',
   selectTextDuplicateFileName: 'Файл с таким названием уже существует.',
   selectTextMultipleFile: 'Выберите файлы',

packages/ui/components/input-file/translations/sk.js

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Nahrajte súbor {allowedTypesArray} alebo {allowedTypesLastItem} s maximálnou veľkosťou {maxSize}.',
   dragAndDropText: 'Súbory presuňte sem alebo',
-  fileNameDescriptionLabel: 'Názov súboru: {fileName}',
+  fileNameDescriptionLabel: 'Názov súboru: ',
   generalValidatorMessage: '"{validatorMessage}", pre {listOfErroneousFiles}.',
   noFilesSelected: 'Neboli vybrané žiadne súbory.',
   numberOfFiles: 'Počet súborov: {numberOfFiles}.',

packages/ui/components/input-file/translations/uk.js

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     'Завантажте файл {allowedTypesArray} або {allowedTypesLastItem} розміром до {maxSize}.',
   dragAndDropText: 'Перетягніть файли сюди або',
-  fileNameDescriptionLabel: 'Ім’я файлу: {fileName}',
+  fileNameDescriptionLabel: 'Ім’я файлу: ',
   generalValidatorMessage: '"{validatorMessage}", для {listOfErroneousFiles}.',
   noFilesSelected: 'Не вибрано жодного файлу.',
   numberOfFiles: '{numberOfFiles} файли(-ів).',

packages/ui/components/input-file/translations/zh.js

@@ -4,7 +4,7 @@ export default {
   allowedFileValidatorComplex:
     '请上传最大 {maxSize} 的 {allowedTypesArray} 或 {allowedTypesLastItem} 文件。',
   dragAndDropText: '将您的文件拖放到此处，或',
-  fileNameDescriptionLabel: '文件名: {fileName}',
+  fileNameDescriptionLabel: '文件名: ',
   generalValidatorMessage: '"{validatorMessage}", 例如 {listOfErroneousFiles}。',
   noFilesSelected: '未选择任何文件。',
   numberOfFiles: '{numberOfFiles}  个文件。',