AC-2788::Form fields have visual labels that are not programmatically… (

#3786) * AC-2788::Form fields have visual labels that are not programmatically associated with their inputs (pattern: Form field(s) lack accessible name) * AC-2788:autocomplete.js were not formatted * AC-2788:updated the snapshot because tests are failing Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
magento · Jul 18, 2022 · 404d00d · 404d00d
1 parent 7eced81
commit 404d00d
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 27 deletions.
diff --git a/...ia-ui/lib/components/AccountInformationPage/__tests__/__snapshots__/editForm.spec.js.snap b/...ia-ui/lib/components/AccountInformationPage/__tests__/__snapshots__/editForm.spec.js.snap
@@ -152,6 +152,7 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
       >
         <label
           className="label"
+          htmlFor="Password"
         >
           Password
         </label>
@@ -420,6 +421,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
       >
         <label
           className="label"
+          htmlFor="Password"
         >
           Current Password
         </label>
@@ -510,6 +512,7 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
       >
         <label
           className="label"
+          htmlFor="Password"
         >
           New Password
         </label>

diff --git a/...nts/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap b/...nts/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap
@@ -153,6 +153,7 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
     >
       <label
         className="label"
+        htmlFor="Password"
       >
         Password
       </label>
@@ -475,6 +476,7 @@ exports[`CreateAccount renders errors 1`] = `
     >
       <label
         className="label"
+        htmlFor="Password"
       >
         Password
       </label>

diff --git a/.../venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap b/.../venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap
@@ -13,7 +13,9 @@ exports[`renders the correct tree 1`] = `
     />
   </h2>
   <div>
-    <label>
+    <label
+      htmlFor="firstName"
+    >
       First Name
     </label>
     <span
@@ -27,7 +29,7 @@ exports[`renders the correct tree 1`] = `
       <span>
         <input
           autoComplete="given-name"
-          id="customer.firstname"
+          id="firstName"
           name="customer.firstname"
           onBlur={[Function]}
           onChange={[Function]}
@@ -40,7 +42,9 @@ exports[`renders the correct tree 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="lastName"
+    >
       Last Name
     </label>
     <span
@@ -54,7 +58,7 @@ exports[`renders the correct tree 1`] = `
       <span>
         <input
           autoComplete="family-name"
-          id="customer.lastname"
+          id="lastName"
           name="customer.lastname"
           onBlur={[Function]}
           onChange={[Function]}
@@ -67,7 +71,9 @@ exports[`renders the correct tree 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="Email"
+    >
       Email
     </label>
     <span
@@ -81,7 +87,7 @@ exports[`renders the correct tree 1`] = `
       <span>
         <input
           autoComplete="email"
-          id="customer.email"
+          id="Email"
           name="customer.email"
           onBlur={[Function]}
           onChange={[Function]}
@@ -94,7 +100,9 @@ exports[`renders the correct tree 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="Password"
+    >
       Password
     </label>
     <span
@@ -108,7 +116,7 @@ exports[`renders the correct tree 1`] = `
       <span>
         <input
           autoComplete="new-password"
-          id="password"
+          id="Password"
           name="password"
           onBlur={[Function]}
           onChange={[Function]}
@@ -243,7 +251,9 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     />
   </h2>
   <div>
-    <label>
+    <label
+      htmlFor="firstName"
+    >
       First Name
     </label>
     <span
@@ -257,7 +267,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
       <span>
         <input
           autoComplete="given-name"
-          id="customer.firstname"
+          id="firstName"
           name="customer.firstname"
           onBlur={[Function]}
           onChange={[Function]}
@@ -270,7 +280,9 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="lastName"
+    >
       Last Name
     </label>
     <span
@@ -284,7 +296,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
       <span>
         <input
           autoComplete="family-name"
-          id="customer.lastname"
+          id="lastName"
           name="customer.lastname"
           onBlur={[Function]}
           onChange={[Function]}
@@ -297,7 +309,9 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="Email"
+    >
       Email
     </label>
     <span
@@ -311,7 +325,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
       <span>
         <input
           autoComplete="email"
-          id="customer.email"
+          id="Email"
           name="customer.email"
           onBlur={[Function]}
           onChange={[Function]}
@@ -324,7 +338,9 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
     <p />
   </div>
   <div>
-    <label>
+    <label
+      htmlFor="Password"
+    >
       Password
     </label>
     <span
@@ -338,7 +354,7 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
       <span>
         <input
           autoComplete="new-password"
-          id="password"
+          id="Password"
           name="password"
           onBlur={[Function]}
           onChange={[Function]}

diff --git a/packages/venia-ui/lib/components/CreateAccount/createAccount.js b/packages/venia-ui/lib/components/CreateAccount/createAccount.js
@@ -84,12 +84,14 @@ const CreateAccount = props => {
             </h2>
             <FormError errors={Array.from(errors.values())} />
             <Field
+                id="firstName"
                 label={formatMessage({
                     id: 'createAccount.firstNameText',
                     defaultMessage: 'First Name'
                 })}
             >
                 <TextInput
+                    id="firstName"
                     field="customer.firstname"
                     autoComplete="given-name"
                     validate={isRequired}
@@ -100,12 +102,14 @@ const CreateAccount = props => {
                 />
             </Field>
             <Field
+                id="lastName"
                 label={formatMessage({
                     id: 'createAccount.lastNameText',
                     defaultMessage: 'Last Name'
                 })}
             >
                 <TextInput
+                    id="lastName"
                     field="customer.lastname"
                     autoComplete="family-name"
                     validate={isRequired}
@@ -116,12 +120,14 @@ const CreateAccount = props => {
                 />
             </Field>
             <Field
+                id="Email"
                 label={formatMessage({
                     id: 'createAccount.emailText',
                     defaultMessage: 'Email'
                 })}
             >
                 <TextInput
+                    id="Email"
                     field="customer.email"
                     autoComplete="email"
                     validate={isRequired}
@@ -132,6 +138,7 @@ const CreateAccount = props => {
                 />
             </Field>
             <Password
+                id="Password"
                 autoComplete="new-password"
                 fieldName="password"
                 isToggleButtonHidden={false}

diff --git a/...lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap b/...lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap
@@ -76,7 +76,9 @@ exports[`should render formErrors 1`] = `
         <p />
       </div>
       <div>
-        <label>
+        <label
+          htmlFor="Password"
+        >
           New Password
         </label>
         <span
@@ -225,7 +227,9 @@ exports[`should render properly 1`] = `
         <p />
       </div>
       <div>
-        <label>
+        <label
+          htmlFor="Password"
+        >
           New Password
         </label>
         <span

diff --git a/packages/venia-ui/lib/components/Password/__tests__/__snapshots__/password.spec.js.snap b/packages/venia-ui/lib/components/Password/__tests__/__snapshots__/password.spec.js.snap
@@ -7,7 +7,9 @@ exports[`should render properly 1`] = `
   onSubmit={[Function]}
 >
   <div>
-    <label>
+    <label
+      htmlFor="Password"
+    >
       Password
     </label>
     <span
@@ -44,7 +46,9 @@ exports[`should render show button if visible is false 1`] = `
   onSubmit={[Function]}
 >
   <div>
-    <label>
+    <label
+      htmlFor="Password"
+    >
       Password
     </label>
     <span
@@ -121,7 +125,9 @@ exports[`should render toggle button if isToggleButtonHidden is false 1`] = `
   onSubmit={[Function]}
 >
   <div>
-    <label>
+    <label
+      htmlFor="Password"
+    >
       Password
     </label>
     <span

diff --git a/packages/venia-ui/lib/components/Password/password.js b/packages/venia-ui/lib/components/Password/password.js
@@ -40,7 +40,7 @@ const Password = props => {
     const fieldType = visible ? 'text' : 'password';
 
     return (
-        <Field label={label} classes={{ root: classes.root }}>
+        <Field id="Password" label={label} classes={{ root: classes.root }}>
             <TextInput
                 after={!isToggleButtonHidden && passwordButton}
                 autoComplete={autoComplete}

diff --git a/packages/venia-ui/lib/components/SearchBar/autocomplete.js b/packages/venia-ui/lib/components/SearchBar/autocomplete.js
@@ -137,9 +137,13 @@ const Autocomplete = props => {
 
     return (
         <div data-cy="Autocomplete-root" className={rootClassName}>
-            <div data-cy="Autocomplete-message" className={classes.message}>
+            <label
+                id="search_query"
+                data-cy="Autocomplete-message"
+                className={classes.message}
+            >
                 {message}
-            </div>
+            </label>
             <div className={classes.suggestions}>
                 <Suggestions
                     displayResult={displayResult}

diff --git a/packages/venia-ui/lib/components/SearchBar/searchField.js b/packages/venia-ui/lib/components/SearchBar/searchField.js
@@ -20,6 +20,7 @@ const SearchField = props => {
 
     return (
         <TextInput
+            id="search_query"
             after={resetButton}
             before={searchIcon}
             field="search_query"