From 0dfa380a07be113cdb691eaaa5b245a54f91afc2 Mon Sep 17 00:00:00 2001
From: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>
Date: Tue, 2 Apr 2024 12:05:12 +0200
Subject: [PATCH] fix(project): improve form validation on account page

---
 .../src/components/Form/FormSection.tsx        |  2 +-
 .../PersonalDetailsForm.test.tsx.snap          | 18 +++++++++---------
 .../src/components/TextField/TextField.tsx     |  2 +-
 .../DemoConfigDialog.test.tsx.snap             |  2 +-
 platforms/web/test-e2e/tests/register_test.ts  |  8 +++++++-
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/ui-react/src/components/Form/FormSection.tsx b/packages/ui-react/src/components/Form/FormSection.tsx
index eb4daf399..bd6737589 100644
--- a/packages/ui-react/src/components/Form/FormSection.tsx
+++ b/packages/ui-react/src/components/Form/FormSection.tsx
@@ -94,7 +94,7 @@ export function FormSection<TData extends GenericFormValues>({
 
         try {
           setFormState((s) => {
-            return { ...s, isBusy: true };
+            return { ...s, isBusy: true, errors: [] };
           });
           response = await onSubmit(values);
         } catch (error: unknown) {
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index fe029a7ed..e05b7b349 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_firstname"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="given-name"
           class="_input_e16c1b"
           id="text-field_1235_firstname"
@@ -63,7 +63,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_lastname"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="family-name"
           class="_input_e16c1b"
           id="text-field_1235_lastname"
@@ -98,7 +98,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_companyname"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="organization"
           class="_input_e16c1b"
           id="text-field_1235_companyname"
@@ -129,7 +129,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_address"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="address-line1"
           class="_input_e16c1b"
           id="text-field_1235_address"
@@ -164,7 +164,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_address2"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="address-line2"
           class="_input_e16c1b"
           id="text-field_1235_address2"
@@ -195,7 +195,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_city"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="address-level2"
           class="_input_e16c1b"
           id="text-field_1235_city"
@@ -227,7 +227,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_state"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="address-level1"
           class="_input_e16c1b"
           id="text-field_1235_state"
@@ -259,7 +259,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_postcode"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="postal-code"
           class="_input_e16c1b"
           id="text-field_1235_postcode"
@@ -291,7 +291,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_phonenumber"
-          aria-invalid="false"
+          aria-invalid="true"
           class="_input_e16c1b"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
diff --git a/packages/ui-react/src/components/TextField/TextField.tsx b/packages/ui-react/src/components/TextField/TextField.tsx
index 1b5787a6f..8f095daf9 100644
--- a/packages/ui-react/src/components/TextField/TextField.tsx
+++ b/packages/ui-react/src/components/TextField/TextField.tsx
@@ -69,7 +69,7 @@ const TextField: React.FC<Props> = ({
     const inputType = 'type' in otherInputProps ? otherInputProps.type : 'text';
 
     const ariaAttributes = {
-      'aria-invalid': Boolean(error && !value),
+      'aria-invalid': Boolean(error && !!value),
       'aria-describedby': helperTextId,
     } as const;
 
diff --git a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
index 01b11132f..b2103ad89 100644
--- a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
+++ b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
@@ -65,7 +65,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
               >
                 <input
                   aria-describedby="helper_text_1235_app-config"
-                  aria-invalid="false"
+                  aria-invalid="true"
                   autocapitalize="none"
                   class="_input_25c745"
                   id="text-field_1235_app-config"
diff --git a/platforms/web/test-e2e/tests/register_test.ts b/platforms/web/test-e2e/tests/register_test.ts
index c07a1cd11..41cafddc1 100644
--- a/platforms/web/test-e2e/tests/register_test.ts
+++ b/platforms/web/test-e2e/tests/register_test.ts
@@ -66,9 +66,15 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.dontSeeElement(constants.loginFormSelector);
   });
 
-  Scenario(`The Sign up modal will invalidate when directly pressing submit - ${providerName}`, async ({ I }) => {
+  Scenario(`The Sign up modal will invalidate upon submit only if a value is inputted - ${providerName}`, async ({ I }) => {
     I.click('Continue');
     I.seeElementInDOM('div[class*=formFeedback]'); // This element can be visually hidden through CSS
+    I.seeAttributesOnElements('input[name="email"]', { 'aria-invalid': 'false' });
+    I.seeAttributesOnElements('input[name="password"]', { 'aria-invalid': 'false' });
+
+    I.fillField('Email', 'test');
+    I.fillField('Password', 'test');
+    I.click('Continue');
     I.seeAttributesOnElements('input[name="email"]', { 'aria-invalid': 'true' });
     I.seeAttributesOnElements('input[name="password"]', { 'aria-invalid': 'true' });
   });