chore(project): apply aria-hidden and update e2e tests

Videodock · Apr 22, 2024 · 3f23ea7 · 3f23ea7
1 parent b35da4d
commit 3f23ea7
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 18 deletions.
diff --git a/...-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/...-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -487,6 +487,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           for="text-field_1235_ccc"
         >
           <span
+            aria-hidden="true"
             role="presentation"
           >
             *
@@ -989,6 +990,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           for="text-field_1235_ccc"
         >
           <span
+            aria-hidden="true"
             role="presentation"
           >
             *

diff --git a/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
@@ -59,7 +59,13 @@ const Checkbox: React.FC<Props> = ({
             readOnly={!editing}
           />
           <label htmlFor={id} lang={lang}>
-            {required ? <span role="presentation">*</span> : ''}
+            {required ? (
+              <span role="presentation" aria-hidden="true">
+                *
+              </span>
+            ) : (
+              ''
+            )}
             {checkboxLabel}
           </label>
         </div>

diff --git a/platforms/web/test-e2e/tests/register_test.ts b/platforms/web/test-e2e/tests/register_test.ts
@@ -66,19 +66,6 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.dontSeeElement(constants.loginFormSelector);
   });
 
-  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' });
-  });
-
   Scenario(`I get warned when filling in incorrect credentials - ${providerName}`, async ({ I }) => {
     I.fillField('Email', 'test');
     I.pressKey('Tab');

diff --git a/platforms/web/test-e2e/utils/steps_file.ts b/platforms/web/test-e2e/utils/steps_file.ts
@@ -129,7 +129,7 @@ const stepsObj = {
     const requiredTextInputNames: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+          .filter((element) => element.querySelector('label')?.innerText.includes('*'))
           .map((element) => (element.querySelector('input[type="text"]') as HTMLInputElement)?.name),
       [container, constants.customRegFields.crfTextInput],
     );
@@ -146,7 +146,7 @@ const stepsObj = {
     const requiredRadioValues: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !(element.querySelector('[data-testid="radio-header"]') as HTMLElement)?.innerText.includes('(Optional)'))
+          .filter((element) => (element.querySelector('[data-testid="radio-header"]') as HTMLElement)?.innerText.includes('*'))
           .map((element) => (element.querySelector('input[type="radio"]') as HTMLInputElement)?.value),
       [container, constants.customRegFields.crfRadioBox],
     );
@@ -164,7 +164,7 @@ const stepsObj = {
       const querySelector = ['crf-select', 'crf-country', 'crf-us_state'].map((testId) => `${container} [data-testid="${testId}"]`).join(', ');
 
       return Array.from(document.querySelectorAll(querySelector))
-        .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+        .filter((element) => element.querySelector('label')?.innerText.includes('*'))
         .map((element) => element.querySelector('select')?.name);
     }, container);
 
@@ -185,7 +185,7 @@ const stepsObj = {
     const requiredDatepickerIds: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+          .filter((element) => element.querySelector('label')?.innerText.includes('*'))
           .map((element) => element.id),
       [container, constants.customRegFields.crfDateField],
     );