diff --git a/.changeset/sharp-buses-speak.md b/.changeset/sharp-buses-speak.md new file mode 100644 index 000000000..589179440 --- /dev/null +++ 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 diff --git a/packages/ui/components/input-file/src/LionInputFile.js b/packages/ui/components/input-file/src/LionInputFile.js index 113866008..a73ab54b1 100644 --- 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 diff --git a/packages/ui/components/input-file/src/LionSelectedFileList.js b/packages/ui/components/input-file/src/LionSelectedFileList.js index 63d57af91..c595f4b9d 100644 --- 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; diff --git a/packages/ui/components/input-file/test/lion-input-file.test.js b/packages/ui/components/input-file/test/lion-input-file.test.js index b4c7db52e..79354cda1 100644 --- 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` + + `); + + 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` + + `); + // @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.', ); }); }); diff --git a/packages/ui/components/input-file/translations/bg.js b/packages/ui/components/input-file/translations/bg.js index 5ae2a9dfb..2c10cb168 100644 --- 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} файла.', diff --git a/packages/ui/components/input-file/translations/cs.js b/packages/ui/components/input-file/translations/cs.js index 8557272c7..c89dbbcd2 100644 --- 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ů.', diff --git a/packages/ui/components/input-file/translations/de.js b/packages/ui/components/input-file/translations/de.js index 375cb676e..1366d850c 100644 --- 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.', diff --git a/packages/ui/components/input-file/translations/en.js b/packages/ui/components/input-file/translations/en.js index 9362bc084..180e678aa 100644 --- 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', diff --git a/packages/ui/components/input-file/translations/es.js b/packages/ui/components/input-file/translations/es.js index 7718c4fda..4dab3e7c0 100644 --- 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.', diff --git a/packages/ui/components/input-file/translations/fr.js b/packages/ui/components/input-file/translations/fr.js index 1d702f592..14bb0ae66 100644 --- 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.', diff --git a/packages/ui/components/input-file/translations/hu.js b/packages/ui/components/input-file/translations/hu.js index 7540a8269..d49cb25da 100644 --- 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.', diff --git a/packages/ui/components/input-file/translations/it.js b/packages/ui/components/input-file/translations/it.js index 48bfc86c4..4de1fe637 100644 --- 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.', diff --git a/packages/ui/components/input-file/translations/nl.js b/packages/ui/components/input-file/translations/nl.js index 71e8414f9..05c5d3468 100644 --- 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', diff --git a/packages/ui/components/input-file/translations/pl.js b/packages/ui/components/input-file/translations/pl.js index ec899f89e..180a6b59d 100644 --- 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}.', diff --git a/packages/ui/components/input-file/translations/ro.js b/packages/ui/components/input-file/translations/ro.js index ddd573b75..9c6601d04 100644 --- 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.', diff --git a/packages/ui/components/input-file/translations/ru.js b/packages/ui/components/input-file/translations/ru.js index 32cf5df97..fd69a5c12 100644 --- 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: 'Выберите файлы', diff --git a/packages/ui/components/input-file/translations/sk.js b/packages/ui/components/input-file/translations/sk.js index e03f96ac8..b07498335 100644 --- 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}.', diff --git a/packages/ui/components/input-file/translations/uk.js b/packages/ui/components/input-file/translations/uk.js index fedfdbec6..3e0b2ad47 100644 --- 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} файли(-ів).', diff --git a/packages/ui/components/input-file/translations/zh.js b/packages/ui/components/input-file/translations/zh.js index ac7f1e416..6d68e8f09 100644 --- 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} 个文件。',