Merge pull request #224 from govuk-one-login/LIME-1514

LIME-1514: Added Axe Accessibility Script to run on page load

.pre-commit-config.yaml

@@ -9,7 +9,7 @@ repos:
         args: [ --allow-missing-credentials ]
     -   id: detect-private-key
 -   repo: https://github.com/awslabs/cfn-python-lint
-    rev: v1.22.3 # The version of cfn-lint to use
+    rev: v1.22.4 # The version of cfn-lint to use
     hooks:
     -   id: cfn-python-lint
         files: .template\.yaml$

eslint.config.mjs

@@ -31,7 +31,8 @@ export default [
         ...globals.browser,
         sinon: true,
         expect: true,
-        setupDefaultMocks: true
+        setupDefaultMocks: true,
+        axe: true
       }
     }
   },

package.json

@@ -42,7 +42,7 @@
     "@cucumber/cucumber": "10.0.1",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.15.0",
-    "@playwright/test": "^1.32.3",
+    "@playwright/test": "1.48.2",
     "chai": "4.5.0",
     "chai-as-promised": "7.1.1",
     "eslint": "9.14.0",
@@ -66,6 +66,7 @@
     "@govuk-one-login/frontend-analytics": "2.0.1",
     "@govuk-one-login/frontend-language-toggle": "1.1.0",
     "@govuk-one-login/frontend-passthrough-headers": "1.1.1",
+    "axe-playwright": "^2.0.3",
     "@govuk-one-login/frontend-vital-signs": "0.1.1",
     "axios": "1.6.1",
     "cfenv": "1.2.4",
@@ -87,7 +88,7 @@
     "nyc": "15.1.0",
     "reqres": "^3.0.1",
     "wait-on": "^7.0.1",
-    "wiremock": "^3.10.0"
+    "wiremock": "2.33.2"
   },
   "resolutions": {
     "strip-ansi": "^6.0.1",
@@ -96,5 +97,6 @@
     "i18next-fs-backend": "^2.1.1",
     "i18next-http-middleware": "3.3.0",
     "i18next": "22.4.14"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

test/browser/step_definitions/PassportStepDefs.js

@@ -2,13 +2,25 @@ const { Given, When, Then } = require("@cucumber/cucumber");
 
 const { PassportPage } = require("../pages/PassportPage.js");
 
+const { expect } = require("chai");
+
+const { injectAxe } = require("axe-playwright");
+
 Then(/^I can see CTA {string}$/, async function () {});
 
 Then(
   /^I should be on the Passport details entry page (.*)$/,
   async function (PassportPageTitle) {
     const passportPage = new PassportPage(this.page);
     await passportPage.assertPageTitle(PassportPageTitle);
+    await injectAxe(this.page);
+    // Run Axe for WCAG 2.2 AA rules
+    const wcagResults = await this.page.evaluate(() => {
+      return axe.run({
+        runOnly: ["wcag2aa"]
+      });
+    });
+    expect(wcagResults.violations, "WCAG 2.2 AAA violations found").to.be.empty;
   }
 );
 

test/browser/step_definitions/errors.js

@@ -4,11 +4,22 @@ const { expect } = require("chai");
 
 const { ErrorPage } = require("../pages");
 
+const { injectAxe } = require("axe-playwright");
+
 Then("they should see an error page", async function () {
   const errorPage = new ErrorPage(this.page);
 
   const errorTitle = await errorPage.getErrorTitle();
 
+  await injectAxe(this.page);
+  // Run Axe for WCAG 2.2 AA rules
+  const wcagResults = await this.page.evaluate(() => {
+    return axe.run({
+      runOnly: ["wcag2aa"]
+    });
+  });
+  expect(wcagResults.violations, "WCAG 2.2 AAA violations found").to.be.empty;
+
   expect(errorTitle.trim()).to.equal(
     errorPage.getSomethingWentWrongMessage().trim()
   );

test/browser/support/setup.js

@@ -8,9 +8,9 @@ BeforeAll(async function () {
     ? await chromium.launch()
     : await chromium.launch({
         // Not headless so we can watch test runs
-        headless: false,
+        headless: true,
         // Slow so we can see things happening
-        slowMo: 500
+        slowMo: 200
       });
 });