Skip to content

Commit

Permalink
Revert "Roll back #784"
Browse files Browse the repository at this point in the history
This reverts commit dc6c2c4.
  • Loading branch information
hannalaakso authored and NickColley committed Mar 1, 2019
1 parent e420f30 commit d85dee7
Show file tree
Hide file tree
Showing 34 changed files with 161 additions and 37 deletions.
103 changes: 103 additions & 0 deletions __tests__/accessiblity_audit.test.js
Original file line number Diff line number Diff line change
@@ -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([])
})
})
})
3 changes: 2 additions & 1 deletion lib/metalsmith.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
27 changes: 21 additions & 6 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/components/back-link/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/breadcrumbs/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/checkboxes/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/date-input/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion src/components/details/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/error-summary/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/file-upload/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/footer/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/header/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/inset-text/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/panel/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/phase-banner/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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}) }}

Expand Down
2 changes: 1 addition & 1 deletion src/components/radios/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/select/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/skip-link/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/summary-list/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/table/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/tabs/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion src/components/tag/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/text-input/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/textarea/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Loading

0 comments on commit d85dee7

Please sign in to comment.