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} 个文件。',