Merge pull request #102 from ministryofjustice/CBA-197-add-automated-accessibility-tests

libuk · web-flow · commit d92a0d4749e6 · 2025-02-13T09:30:08.000Z
Add automated accessibility tests
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -3,6 +3,7 @@ import { resetStubs } from './integration_tests/mockApis/wiremock'
 import auth from './integration_tests/mockApis/auth'
 import tokenVerification from './integration_tests/mockApis/tokenVerification'
 import applications from './integration_tests/mockApis/applications'
+import accessibilityViolations from './integration_tests/tasks/accessibilityViolations'
 
 export default defineConfig({
   chromeWebSecurity: false,
@@ -21,6 +22,7 @@ export default defineConfig({
         ...auth,
         ...tokenVerification,
         ...applications,
+        ...accessibilityViolations,
       })
     },
     baseUrl: 'http://localhost:3007',
diff --git a/integration_tests/mockApis/auth.ts b/integration_tests/mockApis/auth.ts
@@ -69,7 +69,7 @@ const redirect = () =>
         'Content-Type': 'text/html',
         Location: 'http://localhost:3007/sign-in/callback?code=codexxxx&state=stateyyyy',
       },
-      body: '<html><body>Sign in page<h1>Sign in</h1></body></html>',
+      body: '<html lang="en"><head><title>Sign in</title></head><body><main>Sign in page<h1>Sign in</h1></main></body></html>',
     },
   })
 
@@ -84,7 +84,7 @@ const signOut = () =>
       headers: {
         'Content-Type': 'text/html',
       },
-      body: '<html><body>Sign in page<h1>Sign in</h1></body></html>',
+      body: '<html lang="en"><head><title>Sign in</title></head><body><main>Sign in page<h1>Sign in</h1></main></body></html>',
     },
   })
 
@@ -99,7 +99,7 @@ const manageDetails = () =>
       headers: {
         'Content-Type': 'text/html',
       },
-      body: '<html><body><h1>Your account details</h1></body></html>',
+      body: '<html lang="en"><head><title>Sign in</title></head><body><main><h1>Your account details</h1></main></body></html>',
     },
   })
 
diff --git a/integration_tests/pages/page.ts b/integration_tests/pages/page.ts
@@ -1,3 +1,5 @@
+import 'cypress-axe'
+import { Result } from 'axe-core'
 import errorLookups from '../../server/i18n/en/errors.json'
 
 export type PageElement = Cypress.Chainable<JQuery>
@@ -17,6 +19,16 @@ export default abstract class Page {
 
   checkOnPage(): void {
     cy.get('h1').contains(this.title)
+    cy.injectAxe()
+    cy.configureAxe({
+      rules: [
+        // Temporary rule whilst this issue is resolved https://github.com/w3c/aria/issues/1404
+        { id: 'aria-allowed-attr', reviewOnFail: true },
+        // Ignore the "All page content should be contained by landmarks", which conflicts with GOV.UK guidance (https://design-system.service.gov.uk/components/back-link/#how-it-works)
+        { id: 'region', reviewOnFail: true, selector: '.govuk-back-link' },
+      ],
+    })
+    cy.checkA11y(undefined, undefined, this.logAccessibilityViolations)
   }
 
   checkNameIsNotInDocumentTitle(): void {
@@ -55,4 +67,18 @@ export default abstract class Page {
   signOut = (): PageElement => cy.get('[data-qa=signOut]')
 
   manageDetails = (): PageElement => cy.get('[data-qa=manageDetails]')
+
+  logAccessibilityViolations(violations: Result[]): void {
+    cy.task('logAccessibilityViolationsSummary', `Accessibility violations detected: ${violations.length}`)
+
+    const violationData = violations.map(({ id, impact, description, nodes }) => ({
+      id,
+      impact,
+      description,
+      nodes: nodes.length,
+      nodeTargets: nodes.map(node => node.target).join(' - '),
+    }))
+
+    cy.task('logAccessibilityViolationsTable', violationData)
+  }
 }
diff --git a/integration_tests/tasks/accessibilityViolations.ts b/integration_tests/tasks/accessibilityViolations.ts
@@ -0,0 +1,16 @@
+import { Result } from 'axe-core'
+
+export default {
+  logAccessibilityViolationsSummary: (message: string): null => {
+    // eslint-disable-next-line no-console
+    console.log(message)
+
+    return null
+  },
+  logAccessibilityViolationsTable: (violations: Result[]): null => {
+    // eslint-disable-next-line no-console
+    console.table(violations)
+
+    return null
+  },
+}
diff --git a/integration_tests/tsconfig.json b/integration_tests/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "es5",
     "noEmit": true,
     "lib": ["es5", "dom", "es2015.promise"],
-    "types": ["cypress", "express", "express-session"],
+    "types": ["cypress", "cypress-axe", "express", "express-session"],
     "esModuleInterop": true,
     "skipLibCheck": true,
     "paths": {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -154,9 +154,11 @@
     "@typescript-eslint/parser": "^8.23.0",
     "audit-ci": "^7.1.0",
     "aws-sdk-client-mock": "^4.1.0",
+    "axe-core": "^4.10.2",
     "chokidar": "^3.6.0",
     "concurrently": "^9.1.2",
     "cypress": "^14.0.2",
+    "cypress-axe": "^1.6.0",
     "cypress-multi-reporters": "^2.0.5",
     "esbuild": "^0.23.1",
     "esbuild-plugin-clean": "^1.0.1",
