From 7af78d490aa61c867380bc8e98876bdf2452feb9 Mon Sep 17 00:00:00 2001
From: Khayal Alasgarov <khayal.alasgarov@gsa.gov>
Date: Wed, 4 Dec 2024 12:36:22 -0800
Subject: [PATCH] feat: improve accessibility for single field components
 tckt-393 (#387)

* feat: improve accessibility for single field components tckt-000

* refactor: improve accessibility and error handling for single field components tckt-393

---------

Co-authored-by: kalasgarov <khayal.alasgarov@gsa.com>
---
 .../components/DateOfBirth/DateOfBirth.tsx    | 56 ++++++++++++++-----
 .../Form/components/EmailInput/EmailInput.tsx | 17 ++++--
 .../components/PhoneNumber/PhoneNumber.tsx    | 16 +++---
 .../SelectDropdown/SelectDropdown.tsx         | 23 +++++---
 4 files changed, 77 insertions(+), 35 deletions(-)

diff --git a/packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx b/packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx
index 79f4432b..ff14afad 100644
--- 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';
@@ -18,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,
@@ -28,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">
@@ -36,20 +47,32 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
         {required && <span className="required-indicator">*</span>}
       </legend>
       {hint && (
-        <span className="usa-hint" id="mdHint">
+        <span className="usa-hint" id={hintId}>
           {hint}
         </span>
       )}
+      {error && (
+        <div className="usa-error-message" id={errorId} 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={
+              getAriaDescribedBy(
+                error ? errorId : null,
+                hint ? hintId : null
+              ) || undefined
+            }
           >
             <option key="default" value="">
               - Select -
@@ -66,14 +89,19 @@ 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)}
+            {...register(dayId, { required })}
             minLength={2}
             maxLength={2}
             pattern="[0-9]*"
             inputMode="numeric"
+            aria-describedby={getAriaDescribedBy(
+              error ? `input-error-message-${dayId}` : null,
+              hint ? hintId : null
+            )}
           />
         </div>
         <div className="usa-form-group usa-form-group--year">
@@ -81,22 +109,22 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
             Year
           </label>
           <input
-            className="usa-input"
-            aria-describedby="mdHint"
+            className={classNames('usa-input', {
+              'usa-input--error': !!error,
+            })}
             id={yearId}
-            {...register(yearId)}
+            {...register(yearId, { required })}
             minLength={4}
             maxLength={4}
             pattern="[0-9]*"
             inputMode="numeric"
+            aria-describedby={getAriaDescribedBy(
+              error ? `input-error-message-${yearId}` : null,
+              hint ? hintId : null
+            )}
           />
         </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
index 31588db4..2f2d9cc8 100644
--- 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 ? errorId : undefined}
         />
       </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
index ee4adc1d..2661a3d2 100644
--- a/packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx
+++ b/packages/design/src/Form/components/PhoneNumber/PhoneNumber.tsx
@@ -13,6 +13,8 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
   value,
 }) => {
   const { register } = useFormContext();
+  const errorId = `input-error-message-${phoneId}`;
+  const hintId = `hint-${phoneId}`;
 
   return (
     <fieldset className="usa-fieldset">
@@ -21,23 +23,18 @@ 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="primaryPnHint">
+          <div className="usa-hint" id={hintId}>
             {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,10 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
           type="tel"
           defaultValue={value}
           {...register(phoneId, { required })}
-          aria-describedby="primaryPnHint"
+          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
index ab9c3485..9ae3a59a 100644
--- 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 ? errorId : undefined}
+      >
         <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>
   );
 };