feat: improve accessibility for ssn input tckt-364

GSA-TTS · Nov 22, 2024 · da9ddb7 · da9ddb7
1 parent 8898cc1
commit da9ddb7
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx b/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx
@@ -5,11 +5,14 @@ import { type SocialSecurityNumberProps } from '@atj/forms';
 
 import { type PatternComponent } from '../../index.js';
 
+
 export const SocialSecurityNumberPattern: PatternComponent<
   SocialSecurityNumberProps
 > = ({ ssnId, hint, label, required, error, value }) => {
   const { register } = useFormContext();
   const errorId = `input-error-message-${ssnId}`;
+  const hintId = `hint-${ssnId}`;
+
 
   return (
     <fieldset className="usa-fieldset">
@@ -24,7 +27,7 @@ export const SocialSecurityNumberPattern: PatternComponent<
           {required && <span className="required-indicator">*</span>}
         </label>
         {hint && (
-          <div className="usa-hint" id={`hint-${ssnId}`}>
+          <div className="usa-hint" id={hintId}>
             {hint}
           </div>
         )}
@@ -41,7 +44,7 @@ export const SocialSecurityNumberPattern: PatternComponent<
           type="text"
           defaultValue={value}
           {...register(ssnId, { required })}
-          aria-describedby={error ? `${ssnId} ${errorId}` : ssnId}
+          aria-describedby={`${ssnId}${hint ? ` ${hintId}` : ''}${error ? ` ${errorId}` : ''}`}
         />
       </div>
     </fieldset>