Added aria attributes for signup-form error state

no issue

- improves markup for assistive tech

Author: kevinansfield

apps/signup-form/src/components/pages/form-view.tsx

@@ -30,7 +30,7 @@ export const FormView: React.FC<FormProps & {
             {description && <p className='mb-4 text-center font-medium md:mb-5'>{description}</p>}
             <div className='relative w-full max-w-[440px]'>
                 <Form error={error} {...formProps} />
-                <p className={`h-5 w-full text-left text-red-500 ${error ? 'visible' : 'invisible'}`} data-testid="error-message">{error}</p>
+                <p className={`h-5 w-full text-left text-red-500 ${error ? 'visible' : 'invisible'}`} data-testid="error-message" id="error-message">{error}</p>
             </div>
 
         </div>
@@ -61,6 +61,8 @@ const Form: React.FC<FormProps> = ({isMinimal, loading, success, error, buttonCo
         <>
             <form className={`relative flex w-full rounded-[.5rem] border bg-white p-[3px] text-grey-900 transition hover:border-grey-400 focus-visible:border-grey-500 ${error ? '!border-red-500' : 'border-grey-300'}`} noValidate={true} onSubmit={submitHandler}>
                 <input
+                    aria-describedby={error ? 'error-message' : undefined}
+                    aria-invalid={error ? 'true' : 'false'}
                     className={`w-full px-2 py-1 focus-visible:outline-none disabled:bg-white xs:p-2`}
                     data-testid="input"
                     disabled={loading || success}