Fixed accessibility issues in forms

mitodl · Sep 20, 2021 · d31363e · d31363e
1 parent f0079ef
commit d31363e
Show file tree

Hide file tree

Showing 9 changed files with 145 additions and 25 deletions.
diff --git a/static/js/components/forms/ChangeEmailForm.js b/static/js/components/forms/ChangeEmailForm.js
@@ -47,19 +47,27 @@ const ChangeEmailForm = ({ onSubmit, user }: Props) => (
             <label htmlFor="email">Email</label>
             <Field
               name="email"
+              id="email"
               className="form-control"
               component={EmailInput}
+              aria-describedby="emailError"
             />
-            <ErrorMessage name="email" component={FormError} />
+            <ErrorMessage name="email" id="emailError" component={FormError} />
           </div>
           <div className="form-group">
             <label htmlFor="confirmPassword">Confirm Password</label>
             <Field
+              id="confirmPassword"
               name="confirmPassword"
               className="form-control"
               component={PasswordInput}
+              aria-describedby="confirmPasswordError"
+            />
+            <ErrorMessage
+              name="confirmPassword"
+              id="confirmPasswordError"
+              component={FormError}
             />
-            <ErrorMessage name="confirmPassword" component={FormError} />
           </div>
           <div className="light-gray-text">
             Password required to change email address

diff --git a/static/js/components/forms/ChangePasswordForm.js b/static/js/components/forms/ChangePasswordForm.js
@@ -35,28 +35,46 @@ const ChangePasswordForm = ({ onSubmit }: Props) => (
             <label htmlFor="oldPassword">Old Password</label>
             <Field
               name="oldPassword"
+              id="oldPassword"
               className="form-control"
               component={PasswordInput}
+              aria-describedby="oldPasswordError"
+            />
+            <ErrorMessage
+              name="oldPassword"
+              id="oldPasswordError"
+              component={FormError}
             />
-            <ErrorMessage name="oldPassword" component={FormError} />
           </div>
           <div className="form-group">
             <label htmlFor="newPassword">New Password</label>
             <Field
               name="newPassword"
+              id="newPassword"
               className="form-control"
               component={PasswordInput}
+              aria-describedby="newPasswordError"
+            />
+            <ErrorMessage
+              name="newPassword"
+              id="newPasswordError"
+              component={FormError}
             />
-            <ErrorMessage name="newPassword" component={FormError} />
           </div>
           <div className="form-group">
             <label htmlFor="confirmPassword">Confirm Password</label>
             <Field
               name="confirmPassword"
+              id="confirmPassword"
               className="form-control"
               component={PasswordInput}
+              aria-describedby="confirmPasswordError"
+            />
+            <ErrorMessage
+              name="confirmPassword"
+              id="confirmPasswordError"
+              component={FormError}
             />
-            <ErrorMessage name="confirmPassword" component={FormError} />
           </div>
         </section>
         <div className="row submit-row no-gutters justify-content-end">

diff --git a/static/js/components/forms/EmailForm.js b/static/js/components/forms/EmailForm.js
@@ -32,11 +32,13 @@ const EmailForm = ({ onSubmit, children }: EmailFormProps) => (
           <label htmlFor="email">Email</label>
           <Field
             name="email"
+            id="email"
             className="form-control"
             component={EmailInput}
             autoComplete="email"
+            aria-describedby="emailError"
           />
-          <ErrorMessage name="email" component={FormError} />
+          <ErrorMessage name="email" id="emailError" component={FormError} />
         </div>
         {children && <div className="form-group">{children}</div>}
         <div className="row submit-row no-gutters justify-content-end">

diff --git a/static/js/components/forms/LoginPasswordForm.js b/static/js/components/forms/LoginPasswordForm.js
@@ -29,10 +29,16 @@ const LoginPasswordForm = ({ onSubmit }: LoginPasswordFormProps) => (
           <label htmlFor="password">Password</label>
           <Field
             name="password"
+            id="password"
             className="form-control"
             component={PasswordInput}
+            aria-describedby="passwordError"
+          />
+          <ErrorMessage
+            name="password"
+            id="passwordError"
+            component={FormError}
           />
-          <ErrorMessage name="password" component={FormError} />
         </div>
         <div className="form-group">
           <Link to={routes.login.forgot.begin} className="link-black">

diff --git a/static/js/components/forms/ProfileFormFields.js b/static/js/components/forms/ProfileFormFields.js
@@ -116,10 +116,16 @@ export const LegalAddressFields = ({
       <Field
         type="text"
         name="legal_address.first_name"
+        id="legal_address.first_name"
         className="form-control"
         autoComplete="given-name"
+        aria-describedby="legal_address.first_name_error"
+      />
+      <ErrorMessage
+        name="legal_address.first_name"
+        id="legal_address.first_name_error"
+        component={FormError}
       />
-      <ErrorMessage name="legal_address.first_name" component={FormError} />
     </div>
     <div className="form-group">
       <label htmlFor="legal_address.last_name" className="font-weight-bold">
@@ -128,10 +134,16 @@ export const LegalAddressFields = ({
       <Field
         type="text"
         name="legal_address.last_name"
+        id="legal_address.last_name"
         className="form-control"
         autoComplete="family-name"
+        aria-describedby="legal_address.last_name_error"
+      />
+      <ErrorMessage
+        name="legal_address.last_name"
+        id="legal_address.last_name_error"
+        component={FormError}
       />
-      <ErrorMessage name="legal_address.last_name" component={FormError} />
     </div>
     <div className="form-group">
       <label htmlFor="name" className="row">
@@ -145,10 +157,12 @@ export const LegalAddressFields = ({
       <Field
         type="text"
         name="name"
+        id="name"
         className="form-control"
         autoComplete="name"
+        aria-describedby="nameError"
       />
-      <ErrorMessage name="name" component={FormError} />
+      <ErrorMessage name="name" id="nameError" component={FormError} />
     </div>
     <div className="form-group">
       <label htmlFor="username" className="row">
@@ -172,8 +186,18 @@ export const LegalAddressFields = ({
         <label htmlFor="password" className="font-weight-bold">
           Password<span className="required">*</span>
         </label>
-        <Field type="password" name="password" className="form-control" />
-        <ErrorMessage name="password" component={FormError} />
+        <Field
+          type="password"
+          name="password"
+          id="password"
+          aria-describedby="passwordError"
+          className="form-control"
+        />
+        <ErrorMessage
+          name="password"
+          id="passwordError"
+          component={FormError}
+        />
         <div className="label-secondary">
           Passwords must contain at least 8 characters and at least 1 number and
           1 letter.
@@ -188,8 +212,10 @@ export const LegalAddressFields = ({
       <Field
         component="select"
         name="legal_address.country"
+        id="legal_address.country"
         className="form-control"
         autoComplete="country"
+        aria-describedby="legal_address.country_error"
       >
         <option value="">-----</option>
         {countries
@@ -200,7 +226,11 @@ export const LegalAddressFields = ({
           ))
           : null}
       </Field>
-      <ErrorMessage name="legal_address.country" component={FormError} />
+      <ErrorMessage
+        name="legal_address.country"
+        id="legal_address.country_error"
+        component={FormError}
+      />
     </div>
   </React.Fragment>
 )
@@ -217,14 +247,20 @@ export const ProfileFields = () => (
           <Field
             component="select"
             name="profile.gender"
+            id="profile.gender"
             className="form-control"
+            aria-describedby="profile.genderError"
           >
             <option value="">-----</option>
             <option value="f">Female</option>
             <option value="m">Male</option>
             <option value="o">Other / Prefer not to say</option>
           </Field>
-          <ErrorMessage name="profile.gender" component={FormError} />
+          <ErrorMessage
+            name="profile.gender"
+            id="profile.genderError"
+            component={FormError}
+          />
         </div>
         <div className="col">
           <label htmlFor="profile.birth_year" className="font-weight-bold">
@@ -233,7 +269,9 @@ export const ProfileFields = () => (
           <Field
             component="select"
             name="profile.birth_year"
+            id="profile.birth_year"
             className="form-control"
+            aria-describedby="profile.birth_year_error"
           >
             <option value="">-----</option>
             {reverse(range(seedYear - 120, seedYear - 14)).map((year, i) => (
@@ -242,23 +280,47 @@ export const ProfileFields = () => (
               </option>
             ))}
           </Field>
-          <ErrorMessage name="profile.birth_year" component={FormError} />
+          <ErrorMessage
+            name="profile.birth_year"
+            id="profile.birth_year_error"
+            component={FormError}
+          />
         </div>
       </div>
     </div>
     <div className="form-group">
       <label htmlFor="profile.company" className="font-weight-bold">
         Company*
       </label>
-      <Field type="text" name="profile.company" className="form-control" />
-      <ErrorMessage name="profile.company" component={FormError} />
+      <Field
+        type="text"
+        name="profile.company"
+        id="profile.company"
+        aria-describedby="profile.companyError"
+        className="form-control"
+      />
+      <ErrorMessage
+        name="profile.company"
+        id="profile.companyError"
+        component={FormError}
+      />
     </div>
     <div className="form-group">
       <label htmlFor="profile.job_title" className="font-weight-bold">
         Job Title*
       </label>
-      <Field type="text" name="profile.job_title" className="form-control" />
-      <ErrorMessage name="profile.job_title" component={FormError} />
+      <Field
+        type="text"
+        name="profile.job_title"
+        id="profile.job_title"
+        aria-describedby="profile.job_title_error"
+        className="form-control"
+      />
+      <ErrorMessage
+        name="profile.job_title"
+        id="profile.job_title_error"
+        component={FormError}
+      />
     </div>
     <div className="form-group dotted" />
     <div className="form-group">
@@ -268,6 +330,7 @@ export const ProfileFields = () => (
       <Field
         component="select"
         name="profile.industry"
+        id="profile.industry"
         className="form-control"
       >
         <option value="">-----</option>
@@ -285,6 +348,7 @@ export const ProfileFields = () => (
       <Field
         component="select"
         name="profile.job_function"
+        id="profile.job_function"
         className="form-control"
       >
         <option value="">-----</option>
@@ -302,6 +366,7 @@ export const ProfileFields = () => (
       <Field
         component="select"
         name="profile.company_size"
+        id="profile.company_size"
         className="form-control"
       >
         <option value="">-----</option>
@@ -324,6 +389,7 @@ export const ProfileFields = () => (
           <Field
             component="select"
             name="profile.years_experience"
+            id="profile.years_experience"
             className="form-control"
           >
             <option value="">-----</option>
@@ -344,6 +410,7 @@ export const ProfileFields = () => (
           <Field
             component="select"
             name="profile.leadership_level"
+            id="profile.leadership_level"
             className="form-control"
           >
             <option value="">-----</option>
@@ -368,6 +435,7 @@ export const ProfileFields = () => (
           <Field
             component="select"
             name="profile.highest_education"
+            id="profile.highest_education"
             className="form-control"
           >
             <option value="">-----</option>

diff --git a/static/js/components/forms/RegisterEmailForm.js b/static/js/components/forms/RegisterEmailForm.js
@@ -40,11 +40,13 @@ const RegisterEmailForm = ({ onSubmit }: Props) => (
           <label htmlFor="email">Email</label>
           <Field
             name="email"
+            id="email"
             className="form-control"
             autoComplete="email"
             component={EmailInput}
+            aria-describedby="emailError"
           />
-          <ErrorMessage name="email" component={FormError} />
+          <ErrorMessage name="email" id="emailError" component={FormError} />
         </div>
         {SETTINGS.recaptchaKey ? (
           <div className="form-group">

diff --git a/static/js/components/forms/ResetPasswordForm.js b/static/js/components/forms/ResetPasswordForm.js
@@ -31,19 +31,31 @@ const ResetPasswordForm = ({ onSubmit }: Props) => (
           <label htmlFor="newPassword">New Password</label>
           <Field
             name="newPassword"
+            id="newPassword"
             className="form-control"
             component={PasswordInput}
+            aria-describedby="newPasswordError"
+          />
+          <ErrorMessage
+            name="newPassword"
+            id="newPasswordError"
+            component={FormError}
           />
-          <ErrorMessage name="newPassword" component={FormError} />
         </div>
         <div className="form-group">
           <label htmlFor="confirmPassword">Confirm Password</label>
           <Field
             name="confirmPassword"
+            id="confirmPassword"
             className="form-control"
             component={PasswordInput}
+            aria-describedby="confirmPasswordError"
+          />
+          <ErrorMessage
+            name="confirmPassword"
+            id="confirmPasswordError"
+            component={FormError}
           />
-          <ErrorMessage name="confirmPassword" component={FormError} />
         </div>
         <div className="row submit-row no-gutters justify-content-end">
           <button