Document non-compliance with enhanced colour contrast (WCAG2.2 AAA)

alphagov · Feb 14, 2024 · 6c841c6 · 6c841c6
1 parent 5996f69
commit 6c841c6
Show file tree

Hide file tree

Showing 14 changed files with 187 additions and 14 deletions.
diff --git a/src/govuk/components/accordion/accessibility.puppeteer.test.mjs b/src/govuk/components/accordion/accessibility.puppeteer.test.mjs
@@ -2,13 +2,26 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/accordion', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects 'Show all sections', 'Show' and 'Hide' toggle links
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
+
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('accordion')
 
       for (const exampleName in examples) {
         await render(page, 'accordion', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/button/accessibility.puppeteer.test.mjs b/src/govuk/components/button/accessibility.puppeteer.test.mjs
@@ -2,13 +2,25 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/button', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects 'Save and continue' button
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('button')
 
       for (const exampleName in examples) {
         await render(page, 'button', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/cookie-banner/accessibility.puppeteer.test.mjs b/src/govuk/components/cookie-banner/accessibility.puppeteer.test.mjs
@@ -2,13 +2,27 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/cookie-banner', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects 'Accept analytics cookies', 'Reject analytics cookies' buttons,
+       * and 'View cookie preferences' link
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
+
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('cookie-banner')
 
       for (const exampleName in examples) {
         await render(page, 'cookie-banner', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/details/accessibility.puppeteer.test.mjs b/src/govuk/components/details/accessibility.puppeteer.test.mjs
@@ -2,13 +2,26 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/details', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects 'Help with nationality' summary text
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
+
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('details')
 
       for (const exampleName in examples) {
         await render(page, 'details', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/exit-this-page/accessibility.puppeteer.test.mjs b/src/govuk/components/exit-this-page/accessibility.puppeteer.test.mjs
@@ -2,13 +2,25 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/exit-this-page', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects link to '/full-page-examples/announcements'
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('exit-this-page')
 
       for (const exampleName in examples) {
         await render(page, 'exit-this-page', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/header/accessibility.puppeteer.test.mjs b/src/govuk/components/header/accessibility.puppeteer.test.mjs
@@ -2,13 +2,26 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/header', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects header link 'Navigation item 1'
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
+
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('header')
 
       for (const exampleName in examples) {
         await render(page, 'header', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/hint/accessibility.puppeteer.test.mjs b/src/govuk/components/hint/accessibility.puppeteer.test.mjs
@@ -2,13 +2,26 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/hint', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects 'P60' link
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
+
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('hint')
 
       for (const exampleName in examples) {
         await render(page, 'hint', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/notification-banner/accessibility.puppeteer.test.mjs b/src/govuk/components/notification-banner/accessibility.puppeteer.test.mjs
@@ -10,7 +10,13 @@ describe('/components/notification-banner', () => {
        * Ignore 'Element has a tabindex greater than 0' for custom
        * tabindex tests
        */
-      tabindex: { enabled: false }
+      tabindex: { enabled: false },
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects 'new planning guidance' link
+       */
+      'color-contrast-enhanced': { enabled: false }
     }
   })
 

diff --git a/src/govuk/components/pagination/accessibility.puppeteer.test.mjs b/src/govuk/components/pagination/accessibility.puppeteer.test.mjs
@@ -2,13 +2,25 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/pagination', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects 'Page one' and 'Page three' pagination links
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('pagination')
 
       for (const exampleName in examples) {
         await render(page, 'pagination', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/phase-banner/accessibility.puppeteer.test.mjs b/src/govuk/components/phase-banner/accessibility.puppeteer.test.mjs
@@ -2,13 +2,26 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/phase-banner', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects 'feedback' link
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
+
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('phase-banner')
 
       for (const exampleName in examples) {
         await render(page, 'phase-banner', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/summary-list/accessibility.puppeteer.test.mjs b/src/govuk/components/summary-list/accessibility.puppeteer.test.mjs
@@ -2,13 +2,25 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/summary-list', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects 'name', 'date of birth' and 'contact information' links
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('summary-list')
 
       for (const exampleName in examples) {
         await render(page, 'summary-list', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/tabs/accessibility.puppeteer.test.mjs b/src/govuk/components/tabs/accessibility.puppeteer.test.mjs
@@ -2,6 +2,19 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/tabs', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects 'Anchor' link
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
+
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('tabs')
@@ -11,7 +24,7 @@ describe('/components/tabs', () => {
           // Log errors for invalid examples
           .catch(({ message }) => console.warn(message))
 
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/tag/accessibility.puppeteer.test.mjs b/src/govuk/components/tag/accessibility.puppeteer.test.mjs
@@ -2,13 +2,26 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/tag', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects '.govuk-tag--green' tag
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
+
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('tag')
 
       for (const exampleName in examples) {
         await render(page, 'tag', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

diff --git a/src/govuk/components/task-list/accessibility.puppeteer.test.mjs b/src/govuk/components/task-list/accessibility.puppeteer.test.mjs
@@ -2,13 +2,27 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/task-list', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects 'Company Directors', 'Registered company details' and
+       * 'Business plan' links
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
+
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('task-list')
 
       for (const exampleName in examples) {
         await render(page, 'task-list', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 60000)
   })