feat: improve accessibility for single field components tckt-000

GSA-TTS · Nov 20, 2024 · 246a6c5 · 246a6c5
1 parent 5ee8954
commit 246a6c5
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 32 deletions.
diff --git a/packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx b/packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { useFormContext } from 'react-hook-form';
 import { type DateOfBirthProps } from '@atj/forms';
 import { type PatternComponent } from '../../index.js';
@@ -36,20 +37,33 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
         {required && <span className="required-indicator">*</span>}
       </legend>
       {hint && (
-        <span className="usa-hint" id="mdHint">
+        <span className="usa-hint" id={`hint-${monthId}`}>
           {hint}
         </span>
       )}
+      {error && (
+        <div
+          className="usa-error-message"
+          id={`input-error-message-${monthId}`}
+          role="alert"
+        >
+          {error.message}
+        </div>
+      )}
       <div className="usa-memorable-date">
         <div className="usa-form-group usa-form-group--month usa-form-group--select">
           <label className="usa-label" htmlFor={monthId}>
             Month
           </label>
           <select
-            className="usa-select"
+            className={classNames('usa-input', {
+              'usa-input--error': error,
+            })}
             id={monthId}
             {...register(monthId)}
-            aria-describedby="mdHint"
+            aria-describedby={
+              error ? `${monthId} input-error-message-${monthId}}` : monthId
+            }
           >
             <option key="default" value="">
               - Select -
@@ -66,37 +80,40 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
             Day
           </label>
           <input
-            className="usa-input"
-            aria-describedby="mdHint"
+            className={classNames('usa-input', {
+              'usa-input--error': error,
+            })}
             id={dayId}
             {...register(dayId)}
             minLength={2}
             maxLength={2}
             pattern="[0-9]*"
             inputMode="numeric"
+            aria-describedby={
+              error ? `${dayId} input-error-message-${dayId}}}` : dayId
+            }
           />
         </div>
         <div className="usa-form-group usa-form-group--year">
           <label className="usa-label" htmlFor={yearId}>
             Year
           </label>
           <input
-            className="usa-input"
-            aria-describedby="mdHint"
+            className={classNames('usa-input', {
+              'usa-input--error': error,
+            })}
             id={yearId}
             {...register(yearId)}
             minLength={4}
             maxLength={4}
             pattern="[0-9]*"
             inputMode="numeric"
+            aria-describedby={
+              error ? `${yearId} input-error-message-${yearId}}}` : yearId
+            }
           />
         </div>
       </div>
-      {error && (
-        <span className="error-message" style={{ color: 'red' }}>
-          {error.message}
-        </span>
-      )}
     </fieldset>
   );
 };
diff --git a/packages/design/src/Form/components/EmailInput/EmailInput.tsx b/packages/design/src/Form/components/EmailInput/EmailInput.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { useFormContext } from 'react-hook-form';
 import { type EmailInputProps } from '@atj/forms';
 import { type PatternComponent } from '../../index.js';
@@ -10,6 +11,7 @@ export const EmailInputPattern: PatternComponent<EmailInputProps> = ({
   error,
 }) => {
   const { register } = useFormContext();
+  const errorId = `input-error-message-${emailId}`;
 
   return (
     <fieldset className="usa-fieldset">
@@ -18,20 +20,23 @@ export const EmailInputPattern: PatternComponent<EmailInputProps> = ({
           {label}
           {required && <span className="required-indicator">*</span>}
         </label>
+        {error && (
+          <div className="usa-error-message" id={errorId} role="alert">
+            {error.message}
+          </div>
+        )}
         <input
-          className="usa-input margin-bottom-1"
+          className={classNames('usa-input margin-bottom-1', {
+            'usa-input--error': error,
+          })}
           id={emailId}
           type="email"
           autoCapitalize="off"
           autoCorrect="off"
           {...register(emailId, { required })}
+          aria-describedby={error ? `${emailId} ${errorId}}` : emailId}
         />
       </div>
-      {error && (
-        <span className="error-message" style={{ color: 'red' }}>
-          {error.message}
-        </span>
-      )}
     </fieldset>
   );
 };
diff --git a/packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx b/packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx
@@ -13,6 +13,7 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
   value,
 }) => {
   const { register } = useFormContext();
+  const errorId = `input-error-message-${phoneId}`;
 
   return (
     <fieldset className="usa-fieldset">
@@ -28,16 +29,12 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
           {required && <span className="required-indicator">*</span>}
         </label>
         {hint && (
-          <div className="usa-hint" id="primaryPnHint">
+          <div className="usa-hint" id={`hint-${phoneId}`}>
             {hint}
           </div>
         )}
         {error && (
-          <div
-            className="usa-error-message"
-            id={`input-error-message-${phoneId}`}
-            role="alert"
-          >
+          <div className="usa-error-message" id={errorId} role="alert">
             {error.message}
           </div>
         )}
@@ -49,7 +46,7 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
           type="tel"
           defaultValue={value}
           {...register(phoneId, { required })}
-          aria-describedby="primaryPnHint"
+          aria-describedby={error ? `${phoneId} ${errorId}` : phoneId}
         />
       </div>
     </fieldset>

diff --git a/packages/design/src/Form/components/SelectDropdown/SelectDropdown.tsx b/packages/design/src/Form/components/SelectDropdown/SelectDropdown.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import classNames from 'classnames';
 import { useFormContext } from 'react-hook-form';
-
 import { type SelectDropdownProps } from '@atj/forms';
 import { type PatternComponent } from '../../index.js';
 
@@ -12,13 +12,27 @@ export const SelectDropdownPattern: PatternComponent<SelectDropdownProps> = ({
   error,
 }) => {
   const { register } = useFormContext();
+  const errorId = `input-error-message-${selectId}`;
+
   return (
     <div className="usa-fieldset padding-top-2">
       <label className="usa-label" htmlFor={selectId}>
         {label}
         {required && <span className="required-indicator">*</span>}
       </label>
-      <select className="usa-select" id={selectId} {...register(selectId)}>
+      {error && (
+        <div className="usa-error-message" id={errorId} role="alert">
+          {error.message}
+        </div>
+      )}
+      <select
+        className={classNames('usa-input', {
+          'usa-input--error': error,
+        })}
+        id={selectId}
+        {...register(selectId, { required })}
+        aria-describedby={error ? `${selectId} ${errorId}` : selectId}
+      >
         <option key="default" value="">
           - Select -
         </option>
@@ -28,11 +42,6 @@ export const SelectDropdownPattern: PatternComponent<SelectDropdownProps> = ({
           </option>
         ))}
       </select>
-      {error && (
-        <span className="error-message" style={{ color: 'red' }}>
-          {error.message}
-        </span>
-      )}
     </div>
   );
 };