Merge pull request #784 from alphagov/al/axe-tests

Adds simple aXe testing to the Design System

__tests__/accessiblity_audit.test.js

@@ -0,0 +1,103 @@
+/* eslint-env jest */
+const configPaths = require('../config/paths.json')
+const PORT = configPaths.testPort
+const { AxePuppeteer } = require('axe-puppeteer')
+
+let browser
+let page
+let baseUrl = 'http://localhost:' + PORT
+const thingsToExclude = [
+  // axe reports there is "no label associated with the text field", when there is one.
+  ['#app-site-search__input'],
+  // axe reports that the phase banner is not inside a landmark, which is intentional.
+  ['.app-phase-banner__wrapper']
+]
+beforeAll(async (done) => {
+  browser = global.browser
+  page = await browser.newPage()
+  done()
+})
+
+afterAll(async (done) => {
+  await page.close()
+  done()
+})
+
+describe('Accessibility Audit', () => {
+  describe('Home page - layout.njk', () => {
+    it('validates', async () => {
+      await page.goto(baseUrl + '/', { waitUntil: 'load' })
+      const results =
+        await new AxePuppeteer(page)
+          .include(['body'])
+          .exclude(...thingsToExclude)
+          .analyze()
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('Component page - layout-pane.njk', () => {
+    it('validates', async () => {
+      await page.goto(baseUrl + '/components/radios/', { waitUntil: 'load' })
+      const results =
+        await new AxePuppeteer(page)
+          .include(['body'])
+          .exclude(...thingsToExclude)
+          .analyze()
+
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('Patterns page - layout-pane.njk', () => {
+    it('validates', async () => {
+      await page.goto(baseUrl + '/patterns/gender-or-sex/', { waitUntil: 'load' })
+      const results =
+        await new AxePuppeteer(page)
+          .include(['body'])
+          .exclude(...thingsToExclude)
+          .analyze()
+
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('Cookies page - layout-single-page-prose.njk', () => {
+    it('validates', async () => {
+      await page.goto(baseUrl + '/cookies/', { waitUntil: 'load' })
+      const results =
+        await new AxePuppeteer(page)
+          .include(['body'])
+          .exclude(...thingsToExclude)
+          .analyze()
+
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('Get in touch page - layout-single-page.njk', () => {
+    it('validates', async () => {
+      await page.goto(baseUrl + '/get-in-touch/', { waitUntil: 'load' })
+      const results =
+        await new AxePuppeteer(page)
+          .include(['body'])
+          .exclude(...thingsToExclude)
+          .analyze()
+
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('Site Map page - layout-sitemap.njk', () => {
+    it('validates', async () => {
+      await page.goto(baseUrl + '/sitemap/', { waitUntil: 'load' })
+      const results =
+        await new AxePuppeteer(page)
+          .include(['body'])
+          .exclude(...thingsToExclude)
+          .analyze()
+
+      expect(results.violations).toEqual([])
+    })
+  })
+})

lib/metalsmith.js

@@ -217,7 +217,8 @@ module.exports = metalsmith(__dirname) // __dirname defined by node.js: name of
         getMacroOptions: getMacroOptions
       },
       filters: {
-        highlight: highlighter
+        highlight: highlighter,
+        kebabCase: string => string.replace(/\s+/g, '-').toLowerCase()
       },
 
       // Markdown engine options

package.json

@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "accessible-autocomplete": "^1.6.2",
+    "axe-puppeteer": "^1.0.0",
     "fs-extra": "^7.0.1",
     "iframe-resizer": "^3.5.16",
     "jest": "^23.6.0",

src/components/back-link/index.md.njk

@@ -33,7 +33,7 @@ If this is not possible, you should hide the back link when JavaScript is not av
 
 There are 2 ways to use the back link component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "back-link", example: "default", html: true, nunjucks: true, open: false, id: "default-2"}) }}
+{{ example({group: "components", item: "back-link", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }}
 
 ## Research on this component
 

src/components/breadcrumbs/index.md.njk

@@ -29,7 +29,7 @@ The breadcrumbs component should include the user’s current page, which should
 
 There are 2 ways to use the breadcrumbs component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, open: false, id: "default-2"}) }}
+{{ example({group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }}
 
 ## Research on this component
 

src/components/checkboxes/index.md.njk

@@ -49,7 +49,7 @@ In some cases, it can be helpful to order them from most-to-least common options
 
 There are 2 ways to use the checkboxes component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "checkboxes", example: "default", html: true, nunjucks: true, open: false, size: "m", id: "default-2"}) }}
+{{ example({group: "components", item: "checkboxes", example: "default", html: true, nunjucks: true, open: false, size: "m", titleSuffix: "second"}) }}
 
 ### Checkbox items with hints
 

src/components/date-input/index.md.njk

@@ -35,7 +35,7 @@ Read more about [why and how to set legends as headings](../../get-started/label
 
 There are 2 ways to use the date input component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "date-input", example: "default", html: true, nunjucks: true, open: false, size: "s", id: "default-2"}) }}
+{{ example({group: "components", item: "date-input", example: "default", html: true, nunjucks: true, open: false, size: "s", titleSuffix: "second"}) }}
 
 Never automatically tab users between the fields of the date input because this can be confusing and may clash with normal keyboard controls.
 

src/components/details/index.md.njk

@@ -35,7 +35,7 @@ The details component is a short link that expands into more detailed help text
 
 There are 2 ways to use the details component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "details", example: "default", html: true, nunjucks: true, open: false, size: "s", id: "default-2"}) }}
+{{ example({group: "components", item: "details", example: "default", html: true, nunjucks: true, open: false, size: "s", titleSuffix: "second"}) }}
 
 ### Write clear link text
 

src/components/error-summary/index.md.njk

@@ -34,7 +34,7 @@ Read guidance on [writing good error messages](../error-message#be-clear-and-con
 
 There are 2 ways to use the error summary component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "error-summary", example: "default", html: true, nunjucks: true, open: false, size: "s", id: "default-2"}) }}
+{{ example({group: "components", item: "error-summary", example: "default", html: true, nunjucks: true, open: false, size: "s", titleSuffix: "second"}) }}
 
 ### Linking from the error summary to each answer
 

src/components/file-upload/index.md.njk

@@ -21,7 +21,7 @@ You should only ask users to upload something if it’s critical to the delivery
 
 There are 2 ways to use the file upload component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "file-upload", example: "default", html: true, nunjucks: true, open: false, id: "default-2"}) }}
+{{ example({group: "components", item: "file-upload", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }}
 
 ### Error messages
 

src/components/footer/index.md.njk

@@ -27,7 +27,7 @@ You can add links to:
 
 ### Default footer
 
-{{ example({group: "components", item: "footer", example: "default", id: "default-2", html: true, nunjucks: true, open: false, size: "m"}) }}
+{{ example({group: "components", item: "footer", example: "default", titleSuffix: "second", html: true, nunjucks: true, open: false, size: "m"}) }}
 
 ### Footer with secondary navigation
 

src/components/header/index.md.njk

@@ -31,7 +31,7 @@ You must not use the GOV.UK header if your service is not being hosted on one of
 
 Use the default header if your service has 5 pages or fewer.
 
-{{ example({group: "components", item: "header", example: "default", id: "default-2", html: true, nunjucks: true, open: false}) }}
+{{ example({group: "components", item: "header", example: "default", titleSuffix: "second", html: true, nunjucks: true, open: false}) }}
 
 ### Header with service name
 

src/components/inset-text/index.md.njk

@@ -31,7 +31,7 @@ Use inset text very sparingly - it’s less effective if it’s overused.
 
 There are 2 ways to use the inset text component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "inset-text", example: "default", html: true, nunjucks: true, open: false, size: "s", id: "default-2"}) }}
+{{ example({group: "components", item: "inset-text", example: "default", html: true, nunjucks: true, open: false, size: "s", titleSuffix: "second"}) }}
 
 ## Research on this component
 

src/components/panel/index.md.njk

@@ -29,7 +29,7 @@ If you add extra content to the panel, to meet colour contrast ratio requirement
 
 There are 2 ways to use the panel component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "panel", example: "default", html: true, nunjucks: true, open: false, size: "m", id: "default-2"}) }}
+{{ example({group: "components", item: "panel", example: "default", html: true, nunjucks: true, open: false, size: "m", titleSuffix: "second"}) }}
 
 ## Research on this component
 

src/components/phase-banner/index.md.njk

@@ -24,7 +24,7 @@ Your banner must be directly under the black GOV.UK header and colour bar.
 
 There are 2 ways to use the phase banner component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "phase-banner", example: "default", html: true, nunjucks: true, open: false, id: "default-2"}) }}
+{{ example({group: "components", item: "phase-banner", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }}
 
 {{ example({group: "components", item: "phase-banner", example: "beta", html: true, nunjucks: true, open: false}) }}
 

src/components/radios/index.md.njk

@@ -29,7 +29,7 @@ Read more about [why and how to set legends as headings](../../get-started/label
 
 Always position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.
 
-Unlike with checkboxes, users can only select one option from a list of radios. Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone. 
+Unlike with checkboxes, users can only select one option from a list of radios. Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone.
 
 If needed, add a hint explaining this, for example, 'Select one option'.
 
@@ -38,13 +38,13 @@ Do not pre-select radio options as this makes it more likely that users will:
 - not realise they've missed a question
 - submit the wrong answer
 
-Users cannot go back to having no option selected once they have selected one, without refreshing their browser window. Therefore, you should include 'None of the above' or 'I do not know' if they are valid options. 
+Users cannot go back to having no option selected once they have selected one, without refreshing their browser window. Therefore, you should include 'None of the above' or 'I do not know' if they are valid options.
 
-Order radio options alphabetically by default. 
+Order radio options alphabetically by default.
 
 In some cases, it can be helpful to order them from most-to-least common options. For example, you could order options for 'Where do you live?' based on population size.
 
-However you should do this with extreme caution as it can reinforce bias in your service. If in doubt, order alphabetically. 
+However you should do this with extreme caution as it can reinforce bias in your service. If in doubt, order alphabetically.
 
 There are 2 ways to use the radios component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
@@ -58,7 +58,7 @@ When there are more than 2 options, radios should be stacked, like so:
 
 If there are only 2 options, you can either stack the radios or display them inline, like so:
 
-{{ example({group: "components", item: "radios", example: "default", html: true, nunjucks: true, open: false, size: "s", id: "default-2"}) }}
+{{ example({group: "components", item: "radios", example: "default", html: true, nunjucks: true, open: false, size: "s", titleSuffix: "second"}) }}
 
 ### Radio items with hints
 
@@ -74,7 +74,7 @@ If one or more of your radio options is different from the others, it can help u
 
 ### Conditionally revealing content
 
-Using this component, you can add conditionally revealing content to stacked radios, so users only see content when it’s relevant to them. 
+Using this component, you can add conditionally revealing content to stacked radios, so users only see content when it’s relevant to them.
 
 For example, you could reveal an email address input only when a user chooses to be contacted by email.
 

src/components/select/index.md.njk

@@ -23,7 +23,7 @@ Asking questions means you’re less likely to need to use the select component,
 
 There are 2 ways to use the select component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com),  you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "select", example: "default", html: true, nunjucks: true, open: false, id: "default-2"}) }}
+{{ example({group: "components", item: "select", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }}
 
 ## Research on this component
 

src/components/skip-link/index.md.njk

@@ -27,7 +27,7 @@ The skip link component is visually hidden until a keyboard press activates it.
 
 There are 2 ways to use the skip link component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "skip-link", example: "default", html: true, nunjucks: true, open: false, id: "default-2"}) }}
+{{ example({group: "components", item: "skip-link", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }}
 
 ## Research on this component
 

src/components/summary-list/index.md.njk

@@ -39,7 +39,7 @@ For sighted users, the actions get their context from the other content in the r
 Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do.
 To give more context, add visually hidden text to the links. This means a screen reader user will hear a meaningful action, like ‘Change name’ or ‘Change date of birth’.
 
-{{ example({group: "components", item: "summary-list", example: "default", html: true, nunjucks: true, open: false, id: "default-2"}) }}
+{{ example({group: "components", item: "summary-list", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }}
 
 ### Summary list without actions
 

src/components/table/index.md.njk

@@ -33,7 +33,7 @@ Use table headers to tell users what the rows and columns represent. Use the `sc
 
 There are 2 ways to use the table component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "table", example: "default", html: true, nunjucks: true, open: false, size: "m", id: "default-2"}) }}
+{{ example({group: "components", item: "table", example: "default", html: true, nunjucks: true, open: false, size: "m", titleSuffix: "second"}) }}
 
 ## Numbers in a table
 

src/components/tabs/index.md.njk

@@ -64,7 +64,7 @@ The details component is less visually prominent than tabs, so tends to work bet
 
 There are 2 ways to use the tabs component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com/), you can use the Nunjucks macro.
 
-{{ example({group: "components", item: "tabs", example: "default", html: true, nunjucks: true, open: false, size: "xl", id: "default-2"}) }}
+{{ example({group: "components", item: "tabs", example: "default", html: true, nunjucks: true, open: false, size: "xl", titleSuffix: "second"}) }}
 
 The tabs component uses JavaScript. When JavaScript is not available, users will see the tabbed content on a single page, in order from first to last, with a table of contents that links to each of the sections.