From 246a6c5572cde13ba7a044a3fb114e2af54b3f95 Mon Sep 17 00:00:00 2001
From: kalasgarov <khayal.alasgarov@gsa.com>
Date: Wed, 20 Nov 2024 11:50:45 -0800
Subject: [PATCH] feat: improve accessibility for single field components
 tckt-000

---
 .../components/DateOfBirth/DateOfBirth.tsx    | 41 +++++++++++++------
 .../Form/components/EmailInput/EmailInput.tsx | 17 +++++---
 .../components/PhoneNumber/PhoneNumber.tsx    | 11 ++---
 .../SelectDropdown/SelectDropdown.tsx         | 23 +++++++----
 4 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx b/packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx
index 79f4432b..6e43a5cb 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';
@@ -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,14 +80,18 @@ 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">
@@ -81,22 +99,21 @@ 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)}
             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
index 31588db4..b49e14f9 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 ? `${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
index ee4adc1d..ab4c471f 100644
--- 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
index ab9c3485..49cd0a6f 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 ? `${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>
   );
 };