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: 'Грешка',
+  validationError: 'Грешка,',
-  validationWarning: 'Предупреждение',
+  validationWarning: 'Предупреждение,',
-  validationSuccess: 'Успех',
+  validationSuccess: 'Успех,',
-  validationInfo: 'Информация',
+  validationInfo: 'Информация,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Chyba',
+  validationError: 'Chyba,',
-  validationWarning: 'Varování',
+  validationWarning: 'Varování,',
-  validationSuccess: 'Úspěch',
+  validationSuccess: 'Úspěch,',
-  validationInfo: 'Informace',
+  validationInfo: 'Informace,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Fehler',
+  validationError: 'Fehler,',
-  validationWarning: 'Warnhinweis',
+  validationWarning: 'Warnhinweis,',
-  validationSuccess: 'Erfolgreich',
+  validationSuccess: 'Erfolgreich,',
-  validationInfo: 'Info',
+  validationInfo: 'Info,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Error',
+  validationError: 'Error,',
-  validationWarning: 'Warning',
+  validationWarning: 'Warning,',
-  validationSuccess: 'Success',
+  validationSuccess: 'Success,',
-  validationInfo: 'Info',
+  validationInfo: 'Info,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Error',
+  validationError: 'Error,',
-  validationWarning: 'Advertencia',
+  validationWarning: 'Advertencia,',
-  validationSuccess: 'Satisfactorio',
+  validationSuccess: 'Satisfactorio,',
-  validationInfo: 'Información',
+  validationInfo: 'Información,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Erreur',
+  validationError: 'Erreur,',
-  validationWarning: 'Avertissement',
+  validationWarning: 'Avertissement,',
-  validationSuccess: 'Succès',
+  validationSuccess: 'Succès,',
-  validationInfo: 'Info',
+  validationInfo: 'Info,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Hiba',
+  validationError: 'Hiba,',
-  validationWarning: 'Figyelmeztetés',
+  validationWarning: 'Figyelmeztetés,',
-  validationSuccess: 'Sikeres',
+  validationSuccess: 'Sikeres,',
-  validationInfo: 'Információ',
+  validationInfo: 'Információ,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Errore',
+  validationError: 'Errore,',
-  validationWarning: 'Avvertenza',
+  validationWarning: 'Avvertenza,',
-  validationSuccess: 'Operazione riuscita',
+  validationSuccess: 'Operazione riuscita,',
-  validationInfo: 'Info',
+  validationInfo: 'Info,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Fout',
+  validationError: 'Fout,',
-  validationWarning: 'Waarschuwing',
+  validationWarning: 'Waarschuwing,',
-  validationSuccess: 'Succes',
+  validationSuccess: 'Succes,',
-  validationInfo: 'Informatie',
+  validationInfo: 'Informatie,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Błąd',
+  validationError: 'Błąd,',
-  validationWarning: 'Ostrzeżenie',
+  validationWarning: 'Ostrzeżenie,',
-  validationSuccess: 'Zrealizowano pomyślnie',
+  validationSuccess: 'Zrealizowano pomyślnie,',
-  validationInfo: 'Informacja',
+  validationInfo: 'Informacja,',
 };

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Eroare',
+  validationError: 'Eroare,',
-  validationWarning: 'Atenție',
+  validationWarning: 'Atenție,',
-  validationSuccess: 'Succes',
+  validationSuccess: 'Succes,',
-  validationInfo: 'Informații',
+  validationInfo: 'Informații,',
 };

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

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

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

@@ -1,6 +1,6 @@
 export default {
-  validationError: 'Chyba',
+  validationError: 'Chyba,',
-  validationWarning: 'Varovanie',
+  validationWarning: 'Varovanie,',
-  validationSuccess: 'Úspešné',
+  validationSuccess: 'Úspešné,',
-  validationInfo: 'Info',
+  validationInfo: 'Info,',
 };

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

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

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

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