From 6c841c6a33dd229ddac11dd329aeabcd7a322c82 Mon Sep 17 00:00:00 2001 From: Brett Kyle Date: Wed, 14 Feb 2024 14:52:51 +0000 Subject: [PATCH] Document non-compliance with enhanced colour contrast (WCAG2.2 AAA) --- .../accordion/accessibility.puppeteer.test.mjs | 15 ++++++++++++++- .../button/accessibility.puppeteer.test.mjs | 14 +++++++++++++- .../accessibility.puppeteer.test.mjs | 16 +++++++++++++++- .../details/accessibility.puppeteer.test.mjs | 15 ++++++++++++++- .../accessibility.puppeteer.test.mjs | 14 +++++++++++++- .../header/accessibility.puppeteer.test.mjs | 15 ++++++++++++++- .../hint/accessibility.puppeteer.test.mjs | 15 ++++++++++++++- .../accessibility.puppeteer.test.mjs | 8 +++++++- .../pagination/accessibility.puppeteer.test.mjs | 14 +++++++++++++- .../accessibility.puppeteer.test.mjs | 15 ++++++++++++++- .../accessibility.puppeteer.test.mjs | 14 +++++++++++++- .../tabs/accessibility.puppeteer.test.mjs | 15 ++++++++++++++- .../tag/accessibility.puppeteer.test.mjs | 15 ++++++++++++++- .../task-list/accessibility.puppeteer.test.mjs | 16 +++++++++++++++- 14 files changed, 187 insertions(+), 14 deletions(-) diff --git a/src/govuk/components/accordion/accessibility.puppeteer.test.mjs b/src/govuk/components/accordion/accessibility.puppeteer.test.mjs index 91a9eabf8d..43421ada6e 100644 --- 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 index 8fb3f8b905..979d2cf6f6 100644 --- 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 index 7059db8a68..e2d3374d49 100644 --- 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 index 112fd4e184..411dcc6dc9 100644 --- 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 index 1c8298717d..07d66e3e4c 100644 --- 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 index 3d29371c15..ddd76a16e6 100644 --- 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 index 62f7fbdd5c..8485615f36 100644 --- 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 index 71651d6276..886311748a 100644 --- 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 index 6ac2824032..9486eff2d4 100644 --- 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 index d12dfe36dd..e2e70ad3b6 100644 --- 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 index eabd1eb5f1..4a8dde399d 100644 --- 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 index 1566f8517a..a6f05f0259 100644 --- 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 index 6e43df037d..b7c7cf804a 100644 --- 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 index 1777873cc9..3369c9014e 100644 --- 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) })