From 37b24e51ff454d41093edd1990b54237bc3481cf Mon Sep 17 00:00:00 2001
From: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
Date: Mon, 24 Nov 2025 08:39:19 +0100
Subject: [PATCH] fix(form-core): improve validation feedback message for
 screen readers to make it one sentence (#2471)

---
 .changeset/poor-queens-doubt.md                           | 5 +++++
 .../form-core/src/validate/LionValidationFeedback.js      | 4 ++--
 .../test/validate/lion-validation-feedback.test.js        | 4 ++--
 packages/ui/components/form-core/translations/bg.js       | 8 ++++----
 packages/ui/components/form-core/translations/cs.js       | 8 ++++----
 packages/ui/components/form-core/translations/de.js       | 8 ++++----
 packages/ui/components/form-core/translations/en.js       | 8 ++++----
 packages/ui/components/form-core/translations/es.js       | 8 ++++----
 packages/ui/components/form-core/translations/fr.js       | 8 ++++----
 packages/ui/components/form-core/translations/hu.js       | 8 ++++----
 packages/ui/components/form-core/translations/it.js       | 8 ++++----
 packages/ui/components/form-core/translations/nl.js       | 8 ++++----
 packages/ui/components/form-core/translations/pl.js       | 8 ++++----
 packages/ui/components/form-core/translations/ro.js       | 8 ++++----
 packages/ui/components/form-core/translations/ru.js       | 8 ++++----
 packages/ui/components/form-core/translations/sk.js       | 8 ++++----
 packages/ui/components/form-core/translations/uk.js       | 8 ++++----
 packages/ui/components/form-core/translations/zh.js       | 8 ++++----
 18 files changed, 69 insertions(+), 64 deletions(-)
 create mode 100644 .changeset/poor-queens-doubt.md

diff --git a/.changeset/poor-queens-doubt.md b/.changeset/poor-queens-doubt.md
new file mode 100644
index 000000000..098970558
--- /dev/null
+++ b/.changeset/poor-queens-doubt.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[form-core] improve validation feedback message for screen readers to make it one sentence.
diff --git a/packages/ui/components/form-core/src/validate/LionValidationFeedback.js b/packages/ui/components/form-core/src/validate/LionValidationFeedback.js
index 743f79bbc..fc8f670bc 100644
--- a/packages/ui/components/form-core/src/validate/LionValidationFeedback.js
+++ b/packages/ui/components/form-core/src/validate/LionValidationFeedback.js
@@ -87,11 +87,11 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
       ${this.feedbackData &&
       this.feedbackData.map(
         ({ message, type, validator }) => html`
-          <div class="validation-feedback__type">
+          <span class="validation-feedback__type">
             ${message && type
               ? this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)
               : nothing}
-          </div>
+          </span>
           ${this._messageTemplate({ message, type, validator })}
         `,
       )}
diff --git a/packages/ui/components/form-core/test/validate/lion-validation-feedback.test.js b/packages/ui/components/form-core/test/validate/lion-validation-feedback.test.js
index 464cba4e3..399a03534 100644
--- a/packages/ui/components/form-core/test/validate/lion-validation-feedback.test.js
+++ b/packages/ui/components/form-core/test/validate/lion-validation-feedback.test.js
@@ -61,12 +61,12 @@ describe('lion-validation-feedback', () => {
     await el.updateComplete;
 
     const validationFeedbackType = el.shadowRoot?.querySelector('.validation-feedback__type');
-    expect(validationFeedbackType?.textContent?.trim()).to.equal('Error');
+    expect(validationFeedbackType?.textContent?.trim()).to.equal('Error,');
 
     el.feedbackData = [{ message: 'hello', type: 'info', validator: new AlwaysInvalid() }];
     await el.updateComplete;
 
-    expect(validationFeedbackType?.textContent?.trim()).to.equal('Info');
+    expect(validationFeedbackType?.textContent?.trim()).to.equal('Info,');
   });
 
   it('it does not share the type if there is no message', async () => {
diff --git a/packages/ui/components/form-core/translations/bg.js b/packages/ui/components/form-core/translations/bg.js
index a840e7bb9..3b64b2694 100644
--- a/packages/ui/components/form-core/translations/bg.js
+++ b/packages/ui/components/form-core/translations/bg.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Грешка',
-  validationWarning: 'Предупреждение',
-  validationSuccess: 'Успех',
-  validationInfo: 'Информация',
+  validationError: 'Грешка,',
+  validationWarning: 'Предупреждение,',
+  validationSuccess: 'Успех,',
+  validationInfo: 'Информация,',
 };
diff --git a/packages/ui/components/form-core/translations/cs.js b/packages/ui/components/form-core/translations/cs.js
index e7a1c71e1..765f56e4f 100644
--- a/packages/ui/components/form-core/translations/cs.js
+++ b/packages/ui/components/form-core/translations/cs.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Chyba',
-  validationWarning: 'Varování',
-  validationSuccess: 'Úspěch',
-  validationInfo: 'Informace',
+  validationError: 'Chyba,',
+  validationWarning: 'Varování,',
+  validationSuccess: 'Úspěch,',
+  validationInfo: 'Informace,',
 };
diff --git a/packages/ui/components/form-core/translations/de.js b/packages/ui/components/form-core/translations/de.js
index a13a98316..8d6835468 100644
--- a/packages/ui/components/form-core/translations/de.js
+++ b/packages/ui/components/form-core/translations/de.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Fehler',
-  validationWarning: 'Warnhinweis',
-  validationSuccess: 'Erfolgreich',
-  validationInfo: 'Info',
+  validationError: 'Fehler,',
+  validationWarning: 'Warnhinweis,',
+  validationSuccess: 'Erfolgreich,',
+  validationInfo: 'Info,',
 };
diff --git a/packages/ui/components/form-core/translations/en.js b/packages/ui/components/form-core/translations/en.js
index 6b814e841..336daaeb5 100644
--- a/packages/ui/components/form-core/translations/en.js
+++ b/packages/ui/components/form-core/translations/en.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Error',
-  validationWarning: 'Warning',
-  validationSuccess: 'Success',
-  validationInfo: 'Info',
+  validationError: 'Error,',
+  validationWarning: 'Warning,',
+  validationSuccess: 'Success,',
+  validationInfo: 'Info,',
 };
diff --git a/packages/ui/components/form-core/translations/es.js b/packages/ui/components/form-core/translations/es.js
index 2337fe71e..ee9480a7c 100644
--- a/packages/ui/components/form-core/translations/es.js
+++ b/packages/ui/components/form-core/translations/es.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Error',
-  validationWarning: 'Advertencia',
-  validationSuccess: 'Satisfactorio',
-  validationInfo: 'Información',
+  validationError: 'Error,',
+  validationWarning: 'Advertencia,',
+  validationSuccess: 'Satisfactorio,',
+  validationInfo: 'Información,',
 };
diff --git a/packages/ui/components/form-core/translations/fr.js b/packages/ui/components/form-core/translations/fr.js
index 7e9b4c04d..dbaec52ad 100644
--- a/packages/ui/components/form-core/translations/fr.js
+++ b/packages/ui/components/form-core/translations/fr.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Erreur',
-  validationWarning: 'Avertissement',
-  validationSuccess: 'Succès',
-  validationInfo: 'Info',
+  validationError: 'Erreur,',
+  validationWarning: 'Avertissement,',
+  validationSuccess: 'Succès,',
+  validationInfo: 'Info,',
 };
diff --git a/packages/ui/components/form-core/translations/hu.js b/packages/ui/components/form-core/translations/hu.js
index 615849468..cd4d0d6d7 100644
--- a/packages/ui/components/form-core/translations/hu.js
+++ b/packages/ui/components/form-core/translations/hu.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Hiba',
-  validationWarning: 'Figyelmeztetés',
-  validationSuccess: 'Sikeres',
-  validationInfo: 'Információ',
+  validationError: 'Hiba,',
+  validationWarning: 'Figyelmeztetés,',
+  validationSuccess: 'Sikeres,',
+  validationInfo: 'Információ,',
 };
diff --git a/packages/ui/components/form-core/translations/it.js b/packages/ui/components/form-core/translations/it.js
index 9d617e9ce..da49bbbb4 100644
--- a/packages/ui/components/form-core/translations/it.js
+++ b/packages/ui/components/form-core/translations/it.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Errore',
-  validationWarning: 'Avvertenza',
-  validationSuccess: 'Operazione riuscita',
-  validationInfo: 'Info',
+  validationError: 'Errore,',
+  validationWarning: 'Avvertenza,',
+  validationSuccess: 'Operazione riuscita,',
+  validationInfo: 'Info,',
 };
diff --git a/packages/ui/components/form-core/translations/nl.js b/packages/ui/components/form-core/translations/nl.js
index 96feb4a04..206f80613 100644
--- a/packages/ui/components/form-core/translations/nl.js
+++ b/packages/ui/components/form-core/translations/nl.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Fout',
-  validationWarning: 'Waarschuwing',
-  validationSuccess: 'Succes',
-  validationInfo: 'Informatie',
+  validationError: 'Fout,',
+  validationWarning: 'Waarschuwing,',
+  validationSuccess: 'Succes,',
+  validationInfo: 'Informatie,',
 };
diff --git a/packages/ui/components/form-core/translations/pl.js b/packages/ui/components/form-core/translations/pl.js
index cf4537d94..8dd25e93b 100644
--- a/packages/ui/components/form-core/translations/pl.js
+++ b/packages/ui/components/form-core/translations/pl.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Błąd',
-  validationWarning: 'Ostrzeżenie',
-  validationSuccess: 'Zrealizowano pomyślnie',
-  validationInfo: 'Informacja',
+  validationError: 'Błąd,',
+  validationWarning: 'Ostrzeżenie,',
+  validationSuccess: 'Zrealizowano pomyślnie,',
+  validationInfo: 'Informacja,',
 };
diff --git a/packages/ui/components/form-core/translations/ro.js b/packages/ui/components/form-core/translations/ro.js
index 3ee0d50af..cd31e46d0 100644
--- a/packages/ui/components/form-core/translations/ro.js
+++ b/packages/ui/components/form-core/translations/ro.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Eroare',
-  validationWarning: 'Atenție',
-  validationSuccess: 'Succes',
-  validationInfo: 'Informații',
+  validationError: 'Eroare,',
+  validationWarning: 'Atenție,',
+  validationSuccess: 'Succes,',
+  validationInfo: 'Informații,',
 };
diff --git a/packages/ui/components/form-core/translations/ru.js b/packages/ui/components/form-core/translations/ru.js
index 76d3e222d..9815c3187 100644
--- a/packages/ui/components/form-core/translations/ru.js
+++ b/packages/ui/components/form-core/translations/ru.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Ошибка',
-  validationWarning: 'Предупреждение',
-  validationSuccess: 'Успешно',
-  validationInfo: 'Информация',
+  validationError: 'Ошибка,',
+  validationWarning: 'Предупреждение,',
+  validationSuccess: 'Успешно,',
+  validationInfo: 'Информация,',
 };
diff --git a/packages/ui/components/form-core/translations/sk.js b/packages/ui/components/form-core/translations/sk.js
index f28709006..c9cc34f10 100644
--- a/packages/ui/components/form-core/translations/sk.js
+++ b/packages/ui/components/form-core/translations/sk.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Chyba',
-  validationWarning: 'Varovanie',
-  validationSuccess: 'Úspešné',
-  validationInfo: 'Info',
+  validationError: 'Chyba,',
+  validationWarning: 'Varovanie,',
+  validationSuccess: 'Úspešné,',
+  validationInfo: 'Info,',
 };
diff --git a/packages/ui/components/form-core/translations/uk.js b/packages/ui/components/form-core/translations/uk.js
index 3ad008f32..b5ff80172 100644
--- a/packages/ui/components/form-core/translations/uk.js
+++ b/packages/ui/components/form-core/translations/uk.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Помилка',
-  validationWarning: 'Попередження',
-  validationSuccess: 'Успішно',
-  validationInfo: 'Інформація',
+  validationError: 'Помилка,',
+  validationWarning: 'Попередження,',
+  validationSuccess: 'Успішно,',
+  validationInfo: 'Інформація,',
 };
diff --git a/packages/ui/components/form-core/translations/zh.js b/packages/ui/components/form-core/translations/zh.js
index 32ef915e2..5ac44bdf8 100644
--- a/packages/ui/components/form-core/translations/zh.js
+++ b/packages/ui/components/form-core/translations/zh.js
@@ -1,6 +1,6 @@
 export default {
-  validationError: '错误',
-  validationWarning: '警告',
-  validationSuccess: '成功',
-  validationInfo: '信息',
+  validationError: '错误，',
+  validationWarning: '警告，',
+  validationSuccess: '成功，',
+  validationInfo: '信息，',
 };