refactor: improve accessibility and error handling for single field c…

…omponents tckt-393
GSA-TTS · Nov 27, 2024 · 81d49d2 · 81d49d2
1 parent 9d270c3
commit 81d49d2
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 23 deletions.
diff --git a/packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx b/packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx
@@ -19,6 +19,14 @@ const months = [
   { value: '12', label: 'December' },
 ];
 
+const getAriaDescribedBy = (
+  errorId: string | null,
+  hintId: string | null
+): string | undefined => {
+  const ids = [errorId, hintId].filter(Boolean).join(' ');
+  return ids || undefined;
+};
+
 export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
   monthId,
   dayId,
@@ -29,6 +37,8 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
   error,
 }) => {
   const { register } = useFormContext();
+  const errorId = `input-error-message-${monthId}`;
+  const hintId = `hint-${monthId}`;
 
   return (
     <fieldset className="usa-fieldset">
@@ -37,16 +47,12 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
         {required && <span className="required-indicator">*</span>}
       </legend>
       {hint && (
-        <span className="usa-hint" id={`hint-${monthId}`}>
+        <span className="usa-hint" id={hintId}>
           {hint}
         </span>
       )}
       {error && (
-        <div
-          className="usa-error-message"
-          id={`input-error-message-${monthId}`}
-          role="alert"
-        >
+        <div className="usa-error-message" id={errorId} role="alert">
           {error.message}
         </div>
       )}
@@ -57,12 +63,15 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
           </label>
           <select
             className={classNames('usa-input', {
-              'usa-input--error': error,
+              'usa-input--error': !!error,
             })}
             id={monthId}
             {...register(monthId)}
             aria-describedby={
-              error ? `${monthId} input-error-message-${monthId}}` : monthId
+              getAriaDescribedBy(
+                error ? errorId : null,
+                hint ? hintId : null
+              ) || undefined
             }
           >
             <option key="default" value="">
@@ -81,17 +90,18 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
           </label>
           <input
             className={classNames('usa-input', {
-              'usa-input--error': error,
+              'usa-input--error': !!error,
             })}
             id={dayId}
-            {...register(dayId)}
+            {...register(dayId, { required })}
             minLength={2}
             maxLength={2}
             pattern="[0-9]*"
             inputMode="numeric"
-            aria-describedby={
-              error ? `${dayId} input-error-message-${dayId}}}` : dayId
-            }
+            aria-describedby={getAriaDescribedBy(
+              error ? `input-error-message-${dayId}` : null,
+              hint ? hintId : null
+            )}
           />
         </div>
         <div className="usa-form-group usa-form-group--year">
@@ -100,17 +110,18 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
           </label>
           <input
             className={classNames('usa-input', {
-              'usa-input--error': error,
+              'usa-input--error': !!error,
             })}
             id={yearId}
-            {...register(yearId)}
+            {...register(yearId, { required })}
             minLength={4}
             maxLength={4}
             pattern="[0-9]*"
             inputMode="numeric"
-            aria-describedby={
-              error ? `${yearId} input-error-message-${yearId}}}` : yearId
-            }
+            aria-describedby={getAriaDescribedBy(
+              error ? `input-error-message-${yearId}` : null,
+              hint ? hintId : null
+            )}
           />
         </div>
       </div>

diff --git a/packages/design/src/Form/components/EmailInput/EmailInput.tsx b/packages/design/src/Form/components/EmailInput/EmailInput.tsx
@@ -34,7 +34,7 @@ export const EmailInputPattern: PatternComponent<EmailInputProps> = ({
           autoCapitalize="off"
           autoCorrect="off"
           {...register(emailId, { required })}
-          aria-describedby={error ? `${emailId} ${errorId}}` : emailId}
+          aria-describedby={error ? errorId : undefined}
         />
       </div>
     </fieldset>

diff --git a/packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx b/packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx
@@ -14,6 +14,7 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
 }) => {
   const { register } = useFormContext();
   const errorId = `input-error-message-${phoneId}`;
+  const hintId = `hint-${phoneId}`;
 
   return (
     <fieldset className="usa-fieldset">
@@ -22,14 +23,13 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
           className={classNames('usa-label', {
             'usa-label--error': error,
           })}
-          id={`input-message-${phoneId}`}
           htmlFor={phoneId}
         >
           {label}
           {required && <span className="required-indicator">*</span>}
         </label>
         {hint && (
-          <div className="usa-hint" id={`hint-${phoneId}`}>
+          <div className="usa-hint" id={hintId}>
             {hint}
           </div>
         )}
@@ -46,7 +46,10 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
           type="tel"
           defaultValue={value}
           {...register(phoneId, { required })}
-          aria-describedby={error ? `${phoneId} ${errorId}` : phoneId}
+          aria-describedby={
+            `${hint ? `${hintId}` : ''}${error ? ` ${errorId}` : ''}`.trim() ||
+            undefined
+          }
         />
       </div>
     </fieldset>

diff --git a/packages/design/src/Form/components/SelectDropdown/SelectDropdown.tsx b/packages/design/src/Form/components/SelectDropdown/SelectDropdown.tsx
@@ -31,7 +31,7 @@ export const SelectDropdownPattern: PatternComponent<SelectDropdownProps> = ({
         })}
         id={selectId}
         {...register(selectId, { required })}
-        aria-describedby={error ? `${selectId} ${errorId}` : selectId}
+        aria-describedby={error ? errorId : undefined}
       >
         <option key="default" value="">
           - Select -