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>
2025-05-13 13:00:20 +02:00 · 2025-05-13 13:00:20 +02:00 · f9f55193c3
commit f9f55193c3
parent 07b089e80f
19 changed files with 127 additions and 30 deletions
--- a/.changeset/sharp-buses-speak.md
+++ b/.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
--- a/packages/ui/components/input-file/src/LionInputFile.js
+++ b/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) {
-        selectedFiles.textContent = /** @type {string} */ (
-          this.msgLit('lion-input-file:noFilesSelected')
-        );
+        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) {
-        selectedFiles.textContent = /** @type {string} */ (
-          errorMessage || this._selectedFilesMetaData[0].systemFile.name
-        );
+        const { name } = this._selectedFilesMetaData[0].systemFile;
+        if (this.uploadOnSelect) {
+          selectedFiles.textContent = /** @type {string} */ (
+            errorMessage || this.msgLit('lion-input-file:fileUploaded') + (name ?? '')
+          );
+        } else {
+          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:numberOfFiles', {
+        selectedFiles.textContent = `${this.msgLit('lion-input-file:filesSelected', {
          numberOfFiles: this._selectedFilesMetaData.length,
        })} ${
          errorMessage
--- a/packages/ui/components/input-file/src/LionSelectedFileList.js
+++ b/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;
--- a/packages/ui/components/input-file/test/lion-input-file.test.js
+++ b/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.',
        );
      });
    });
--- a/packages/ui/components/input-file/translations/bg.js
+++ b/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} файла.',
--- a/packages/ui/components/input-file/translations/cs.js
+++ b/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ů.',
--- a/packages/ui/components/input-file/translations/de.js
+++ b/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.',
--- a/packages/ui/components/input-file/translations/en.js
+++ b/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',
--- a/packages/ui/components/input-file/translations/es.js
+++ b/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.',
--- a/packages/ui/components/input-file/translations/fr.js
+++ b/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.',
--- a/packages/ui/components/input-file/translations/hu.js
+++ b/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.',
--- a/packages/ui/components/input-file/translations/it.js
+++ b/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.',
--- a/packages/ui/components/input-file/translations/nl.js
+++ b/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',
--- a/packages/ui/components/input-file/translations/pl.js
+++ b/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}.',
--- a/packages/ui/components/input-file/translations/ro.js
+++ b/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.',
--- a/packages/ui/components/input-file/translations/ru.js
+++ b/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: 'Файлы не выбраны.',
-  numberOfFiles: 'Файлов: {numberOfFiles}.',
+  noFilesSelected: 'Не выбрано ни одного файла.',
+  noFilesUploaded: 'Не загружено ни одного файла.',
+  fileSelected: 'Выбранный файл: ',
+  fileUploaded: 'Загруженный файл: ',
+  filesSelected: 'Выбранные файлы: {numberOfFiles} файлов.',
+  filesUploaded: 'Загруженные файлы: {numberOfFiles} файлов.',
  removeButtonLabel: 'Удалить файл {fileName}',
  selectTextDuplicateFileName: 'Файл с таким названием уже существует.',
  selectTextMultipleFile: 'Выберите файлы',
--- a/packages/ui/components/input-file/translations/sk.js
+++ b/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}.',
--- a/packages/ui/components/input-file/translations/uk.js
+++ b/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} файли(-ів).',
--- a/packages/ui/components/input-file/translations/zh.js
+++ b/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}  个文件。',