fix(form-core): improve validation feedback message for screen readers to make it one sentence (#2471)

.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.

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 })}
         `,
       )}

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 () => {

packages/ui/components/form-core/translations/bg.js

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Грешка',
-  validationWarning: 'Предупреждение',
-  validationSuccess: 'Успех',
-  validationInfo: 'Информация',
+  validationError: 'Грешка,',
+  validationWarning: 'Предупреждение,',
+  validationSuccess: 'Успех,',
+  validationInfo: 'Информация,',
 };

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,',
 };

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,',
 };

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,',
 };

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,',
 };

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,',
 };

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ó,',
 };

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,',
 };

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,',
 };

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,',
 };

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,',
 };

packages/ui/components/form-core/translations/ru.js

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Ошибка',
-  validationWarning: 'Предупреждение',
-  validationSuccess: 'Успешно',
-  validationInfo: 'Информация',
+  validationError: 'Ошибка,',
+  validationWarning: 'Предупреждение,',
+  validationSuccess: 'Успешно,',
+  validationInfo: 'Информация,',
 };

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,',
 };

packages/ui/components/form-core/translations/uk.js

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Помилка',
-  validationWarning: 'Попередження',
-  validationSuccess: 'Успішно',
-  validationInfo: 'Інформація',
+  validationError: 'Помилка,',
+  validationWarning: 'Попередження,',
+  validationSuccess: 'Успішно,',
+  validationInfo: 'Інформація,',
 };

packages/ui/components/form-core/translations/zh.js

@@ -1,6 +1,6 @@
 export default {
-  validationError: '错误',
-  validationWarning: '警告',
-  validationSuccess: '成功',
-  validationInfo: '信息',
+  validationError: '错误，',
+  validationWarning: '警告，',
+  validationSuccess: '成功，',
+  validationInfo: '信息，',
 };