Revert "Roll back #784"

This reverts commit dc6c2c4.

__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

@@ -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
 

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.
 

src/components/tag/index.md.njk

@@ -19,7 +19,7 @@ Use the tag component to indicate the status of something, such as an item on a
 
 There are 2 ways to use the tag 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: "tag", example: "default", html: true, nunjucks: true, open: false, id: "default-2"}) }}
+{{ example({group: "components", item: "tag", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }}
 
 ## Research on this component
 

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

@@ -23,7 +23,7 @@ Do not use the text input component if you need to let users enter longer answer
 
 There are 2 ways to use the text 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: "text-input", example: "default", html: true, nunjucks: true, open: dalse, size: "s", id: "default-2"}) }}
+{{ example({group: "components", item: "text-input", example: "default", html: true, nunjucks: true, open: dalse, size: "s", titleSuffix: "second"}) }}
 
 ### Label text inputs
 

src/components/textarea/index.md.njk

@@ -27,7 +27,7 @@ Do not use the textarea component if you need to let users enter shorter answers
 
 There are 2 ways to use the textarea 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: "textarea", example: "default", html: true, nunjucks: true, open: false, size: "m", id: "default-2"}) }}
+{{ example({group: "components", item: "textarea", example: "default", html: true, nunjucks: true, open: false, size: "m", titleSuffix: "second"}) }}
 
 ### Label textareas