From 5930c69a2147d1dce2f08a3cf7b26d8a2e8f673d Mon Sep 17 00:00:00 2001
From: kalasgarov <khayal.alasgarov@gsa.com>
Date: Fri, 22 Nov 2024 09:53:13 -0800
Subject: [PATCH] feat: improve accessibility for ssn input tckt-364

---
 .../components/SocialSecurityNumber/SocialSecurityNumber.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx b/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx
index 743e78ed..bd7ffd8c 100644
--- a/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx
+++ b/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx
@@ -10,6 +10,7 @@ export const SocialSecurityNumberPattern: PatternComponent<
 > = ({ 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 +25,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 +42,7 @@ export const SocialSecurityNumberPattern: PatternComponent<
           type="text"
           defaultValue={value}
           {...register(ssnId, { required })}
-          aria-describedby={error ? `${ssnId} ${errorId}` : ssnId}
+          aria-describedby={`${hint ? `${hintId}` : ''}${error ? ` ${errorId}` : ''}`.trim() || undefined}
         />
       </div>
     </fieldset>