Log accessibility violations

The current setup allows us to fail integration tests where there are
accessibility (WCAG) violations using `visitAndCheckAccessibility`, but
it doesn't seem to tell us anything about the violation. Using the UI,
you can see which element is in violation of a rule, but not why. The
automated tests in axe DevTools seem not to always report a violation on
the same element

This adds logging to make it clear which rules have been violated
(though it probably doesn't tell you where, so you might need to combine
it with the UI-based testing)

This is mostly adapted from the cypress-axe GitHub README (['Using the
violationCallback argument'][1] and ['In your spec file'][2]), but also
[another MoJ project][3]

[1]: https://github.com/component-driven/cypress-axe#using-the-violationcallback-argument
[2]: https://github.com/component-driven/cypress-axe#in-your-spec-file
[3]: ministryofjustice/bichard7-next-ui@db4e33e

cypress.config.ts

@@ -32,6 +32,16 @@ export default defineConfig({
         ...courses,
         ...prisons,
         ...tokenVerification,
+        log(message) {
+          console.log(message)
+
+          return null
+        },
+        table(tableData) {
+          console.table(tableData)
+
+          return null
+        },
       })
 
       on('after:spec', (_spec: Cypress.Spec, results: CypressCommandLine.RunResult) => {

integration_tests/support/commands.ts

@@ -1,10 +1,30 @@
+import type { Result } from 'axe-core'
+
 Cypress.Commands.add('signIn', (options = { failOnStatusCode: true }) => {
   cy.request('/')
   return cy.task<string>('getSignInUrl').then((url: string) => cy.visit(url, options))
 })
 
+const logAccessibilityViolations = (violations: Result[]) => {
+  cy.task(
+    'log',
+    `${violations.length} accessibility violation${violations.length === 1 ? '' : 's'} ${
+      violations.length === 1 ? 'was' : 'were'
+    } detected`,
+  )
+
+  const violationsData = violations.map(({ id, impact, description, nodes }) => ({
+    id,
+    impact,
+    description,
+    nodes: nodes.length,
+  }))
+
+  cy.task('table', violationsData)
+}
+
 Cypress.Commands.add('visitAndCheckAccessibility', (url: string) => {
   cy.visit(url)
   cy.injectAxe()
-  cy.checkA11y()
+  cy.checkA11y(undefined, undefined, logAccessibilityViolations)
 })