fix(project): improve form validation on account page

jwplayer · Apr 22, 2024 · 0dfa380 · 0dfa380
1 parent 7e11074
commit 0dfa380
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 13 deletions.
diff --git 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/...-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/...-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
@@ -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
@@ -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
@@ -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' });
   });