diff --git a/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx b/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx index 743e78ed..9f9a18d2 100644 --- 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 (
@@ -24,7 +27,7 @@ export const SocialSecurityNumberPattern: PatternComponent< {required && *} {hint && ( -
+
{hint}
)} @@ -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}` : ''}`} />