Merge pull request #217 from thebiggive/DON-1156-check-homepage-accessibility

DON-1156: Check homepage accessibility

Author: NoelLH

features/read-home-page.feature

@@ -0,0 +1,7 @@
+Feature: Read the homepage
+
+    As someone interested in understand Big Give, I should be able to read the homepage.
+
+    Scenario: Reading the homepage
+      Given I am on the home page
+      Then there should be no accessibility violations detected

pages/DonateStartPage.ts

@@ -302,7 +302,11 @@ export default class DonateStartPage {
         );
 
         // Axe accessibility check just before hitting donate.
-        await checkNoAccessibilityViolations({ withAngularStepperException: true, withSalesforceHeaderException: false });
+        await checkNoAccessibilityViolations({
+            withAngularStepperException: true,
+            withSalesforceHeaderException: false,
+            withContrastRatioException: false,
+        });
 
         await clickSelector(submitBtnSelector);
     }

steps/HomePage.ts

@@ -0,0 +1,20 @@
+import {Given, Then} from "@cucumber/cucumber";
+import {goToUrl} from "../support/util";
+import checkNoAccessibilityViolations from "../support/a11y";
+
+Given(
+    'I am on the home page',
+    async () => {
+        const baseurl = process.env.BASE_URL;
+        if (!baseurl) throw new Error('BASE_URL not defined in enviornment');
+
+        await goToUrl(baseurl + "?noredirect=");
+    }
+);
+Then(
+    /^there should be no accessibility violations detected$/,
+    async function () {
+    await checkNoAccessibilityViolations(
+        {withAngularStepperException: false, withSalesforceHeaderException: false, withContrastRatioException: true}
+    );
+});

steps/pledge.ts

@@ -29,7 +29,11 @@ Given(
     "I open the pledge campaign's pledge form",
     async () => {
         await page.open();
-        await checkNoAccessibilityViolations({ withAngularStepperException: false, withSalesforceHeaderException: true });
+        await checkNoAccessibilityViolations({
+            withAngularStepperException: false,
+            withSalesforceHeaderException: true,
+            withContrastRatioException: false,
+        });
     }
 );
 

support/a11y.ts

@@ -6,7 +6,7 @@ import AxeBuilder from '@axe-core/webdriverio';
  * incompletes.
  */
 export default async function checkNoAccessibilityViolations(
-    options = {withAngularStepperException: false, withSalesforceHeaderException: false}
+    options = {withAngularStepperException: false, withSalesforceHeaderException: false, withContrastRatioException: false}
 ){
     console.log('Running Axe accessibility check...');
 
@@ -30,6 +30,11 @@ export default async function checkNoAccessibilityViolations(
         builder.exclude('header.lf-header_navigation');
     }
 
+    if (options.withContrastRatioException){
+        // known issue of low contrast in footer
+        builder.exclude('#footer-primary-heading');
+    }
+
     const result = await builder.analyze();
 
     const violationCount = result.violations.length;