fix(TDS-7317): fix missing aria-describedby attribute (#5252)

Talend · Apr 7, 2024 · 34a52b9 · 34a52b9
1 parent b3f28a7
commit 34a52b9
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 1 deletion.
diff --git a/.changeset/neat-queens-film.md b/.changeset/neat-queens-film.md
@@ -0,0 +1,5 @@
+---
+"@talend/react-forms": patch
+---
+
+fix missing aria-describedby attribute
diff --git a/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap b/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap
@@ -29,6 +29,7 @@ exports[`ComponentForm #render should render a UIForm 1`] = `
           class="theme-inputShell"
         >
           <input
+            aria-describedby="_datasetMetadata_name-description _datasetMetadata_name-error"
             aria-invalid="false"
             class="theme-input"
             id="_datasetMetadata_name"

diff --git a/packages/containers/src/Form/__snapshots__/Form.test.js.snap b/packages/containers/src/Form/__snapshots__/Form.test.js.snap
@@ -18,6 +18,7 @@ exports[`Container(Form) should render a Form 1`] = `
       class="theme-inputShell"
     >
       <input
+        aria-describedby="name-description name-error"
         aria-invalid="false"
         class="theme-input"
         id="name"

diff --git a/packages/forms/src/UIForm/Widget/__snapshots__/Widget.component.test.js.snap b/packages/forms/src/UIForm/Widget/__snapshots__/Widget.component.test.js.snap
@@ -14,6 +14,7 @@ exports[`Widget component should render widget 1`] = `
     class="theme-inputShell theme-inputShell_borderError"
   >
     <input
+      aria-describedby="myForm_user_firstname-description myForm_user_firstname-error"
       aria-invalid="true"
       class="theme-input"
       id="myForm_user_firstname"

diff --git a/packages/forms/src/UIForm/fields/Text/Text.component.js b/packages/forms/src/UIForm/fields/Text/Text.component.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 
 import { Form } from '@talend/design-system';
 
+import { generateDescriptionId, generateErrorId } from '../../Message/generateId';
 import { getLabelProps } from '../../utils/labels';
 import { convertValue, extractDataAttributes } from '../../utils/properties';
 
@@ -28,7 +29,8 @@ export default function Text(props) {
 	if (type === 'hidden') {
 		return <input id={id} type={type} value={value} />;
 	}
-
+	const descriptionId = generateDescriptionId(id);
+	const errorId = generateErrorId(id);
 	let fieldProps = {
 		id,
 		autoComplete,
@@ -46,6 +48,7 @@ export default function Text(props) {
 		hasError: !isValid,
 		'aria-invalid': !isValid,
 		'aria-required': schema.required,
+		'aria-describedby': `${descriptionId} ${errorId}`,
 		...extractDataAttributes(rest),
 	};
 

diff --git a/packages/forms/src/UIForm/fields/Text/__snapshots__/Text.component.test.js.snap b/packages/forms/src/UIForm/fields/Text/__snapshots__/Text.component.test.js.snap
@@ -15,6 +15,7 @@ exports[`Text field should render input 1`] = `
     class="theme-inputShell"
   >
     <input
+      aria-describedby="myForm-description myForm-error"
       aria-invalid="false"
       aria-required="true"
       class="theme-input"

diff --git a/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/Array.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/Array.component.test.js.snap
@@ -107,6 +107,7 @@ exports[`Array component should render array 1`] = `
                 class="theme-inputShell"
               >
                 <input
+                  aria-describedby="talend-array-0_comments_0_comments_0_name-description talend-array-0_comments_0_comments_0_name-error"
                   aria-invalid="false"
                   aria-required="true"
                   class="theme-input"
@@ -130,6 +131,7 @@ exports[`Array component should render array 1`] = `
                 class="theme-inputShell"
               >
                 <input
+                  aria-describedby="talend-array-0_comments_0_comments_0_email-description talend-array-0_comments_0_comments_0_email-error"
                   aria-invalid="false"
                   class="theme-input"
                   id="talend-array-0_comments_0_comments_0_email"
@@ -319,6 +321,7 @@ exports[`Array component should render array 1`] = `
                 class="theme-inputShell"
               >
                 <input
+                  aria-describedby="talend-array-1_comments_1_comments_1_name-description talend-array-1_comments_1_comments_1_name-error"
                   aria-invalid="false"
                   aria-required="true"
                   class="theme-input"
@@ -342,6 +345,7 @@ exports[`Array component should render array 1`] = `
                 class="theme-inputShell"
               >
                 <input
+                  aria-describedby="talend-array-1_comments_1_comments_1_email-description talend-array-1_comments_1_comments_1_email-error"
                   aria-invalid="false"
                   class="theme-input"
                   id="talend-array-1_comments_1_comments_1_email"
@@ -532,6 +536,7 @@ exports[`Array component should render array 1`] = `
                 class="theme-inputShell"
               >
                 <input
+                  aria-describedby="talend-array-2_comments_2_comments_2_name-description talend-array-2_comments_2_comments_2_name-error"
                   aria-invalid="false"
                   aria-required="true"
                   class="theme-input"
@@ -555,6 +560,7 @@ exports[`Array component should render array 1`] = `
                 class="theme-inputShell"
               >
                 <input
+                  aria-describedby="talend-array-2_comments_2_comments_2_email-description talend-array-2_comments_2_comments_2_email-error"
                   aria-invalid="false"
                   class="theme-input"
                   id="talend-array-2_comments_2_comments_2_email"

diff --git a/packages/forms/src/UIForm/fieldsets/Columns/__snapshots__/Columns.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Columns/__snapshots__/Columns.component.test.js.snap
@@ -43,6 +43,7 @@ exports[`Columns widget should render columns 1`] = `
                 class="theme-inputShell"
               >
                 <input
+                  aria-describedby="lastname-description lastname-error"
                   aria-invalid="false"
                   class="theme-input"
                   id="lastname"
@@ -92,6 +93,7 @@ exports[`Columns widget should render columns 1`] = `
                 class="theme-inputShell"
               >
                 <input
+                  aria-describedby="firstname-description firstname-error"
                   aria-invalid="false"
                   aria-required="true"
                   class="theme-input"
@@ -116,6 +118,7 @@ exports[`Columns widget should render columns 1`] = `
                 class="theme-inputShell"
               >
                 <input
+                  aria-describedby="age-description age-error"
                   aria-invalid="false"
                   class="theme-input"
                   id="age"
@@ -143,6 +146,7 @@ exports[`Columns widget should render columns 1`] = `
             class="theme-inputShell"
           >
             <input
+              aria-describedby="singleInput-description singleInput-error"
               aria-invalid="false"
               class="theme-input"
               id="singleInput"

diff --git a/packages/forms/src/UIForm/fieldsets/Fieldset/__snapshots__/Fieldset.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Fieldset/__snapshots__/Fieldset.component.test.js.snap
@@ -23,6 +23,7 @@ exports[`Fieldset widget should render fieldset 1`] = `
         class="theme-inputShell"
       >
         <input
+          aria-describedby="user_firstname-description user_firstname-error"
           aria-invalid="false"
           class="theme-input"
           id="user_firstname"
@@ -42,6 +43,7 @@ exports[`Fieldset widget should render fieldset 1`] = `
         class="theme-inputShell"
       >
         <input
+          aria-describedby="user_lastname-description user_lastname-error"
           aria-invalid="false"
           class="theme-input"
           id="user_lastname"

diff --git a/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap
@@ -74,6 +74,7 @@ exports[`Tabs widget should render tabs 1`] = `
               class="theme-inputShell"
             >
               <input
+                aria-describedby="user_firstname-description user_firstname-error"
                 aria-invalid="false"
                 class="theme-input"
                 id="user_firstname"
@@ -93,6 +94,7 @@ exports[`Tabs widget should render tabs 1`] = `
               class="theme-inputShell"
             >
               <input
+                aria-describedby="user_lastname-description user_lastname-error"
                 aria-invalid="false"
                 class="theme-input"
                 id="user_lastname"
@@ -134,6 +136,7 @@ exports[`Tabs widget should render tabs 1`] = `
               class="theme-inputShell"
             >
               <input
+                aria-describedby="comment-description comment-error"
                 aria-invalid="false"
                 class="theme-input"
                 id="comment"