Adds simple aXe testing to the Design System #784

aliuk2012 · 2019-02-04T10:34:19Z

Instead of testing all the pages in the service, it was decided that it
would be best to check page templates instead of specific components which
should be tested in GOV.UK Frontend.

Home page - layout template ✅
Component page - layout-pane template ✅
Patterns - Gender and Sex page - layout-pane template ✅
Cookie page - layout-single-page-prose template ✅
Get in touch Page - layout-single-page template ✅
Sitemap page - layout-sitemap template ✅

fixes #620

govuk-design-system-ci · 2019-02-04T10:37:25Z

You can preview this change here:

Built with commit 5d28805

https://deploy-preview-784--govuk-design-system-preview.netlify.com

NickColley

Looks good, a few comments...

NickColley · 2019-02-04T13:07:42Z

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", exampleSuffix: 'second' ,html: true, nunjucks: true, open: false, size: "s", id: "default-2"}) }}


Nice, did you check all examples that have 'id: default-2'? Or just the ones covered in these tests...

I only checked the radio example.

__tests__/accessiblity_audit.test.js

src/styles/layout/common-two-thirds-one-third/index.njk

NickColley · 2019-02-04T13:11:59Z

__tests__/accessiblity_audit.test.js

+  done()
+})
+
+describe('Accessibility Audit', () => {


Al and I paired on this a bit, so would appreciate someone else to review this bit.

__tests__/accessiblity_audit.test.js

src/styles/layout/common-two-thirds-one-third/index.njk

36degrees · 2019-02-04T13:17:07Z

views/partials/_example.njk

@@ -23,7 +24,7 @@
        example in a new window
      </a>
    </span>
-    <iframe title="{{ exampleTitle }}" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable{% if params.size %} app-example__frame--{{ params.size }}{% endif %}" src="{{ exampleURL }}" frameBorder="0"></iframe>
+    <iframe title="{{ exampleTitle }}{{ exampleTitleSuffix }} example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable{% if params.size %} app-example__frame--{{ params.size }}{% endif %}" src="{{ exampleURL }}" frameBorder="0"></iframe>


Would it be simpler to just allow the exampleTitle to be passed in as a param, rather than suffixing? This partial's already got quite a lot going on, so anything we can do to avoid adding more complexity is a win in my eyes.

Is it intentional that we're adding 'example' to every title?

__tests__/accessiblity_audit.test.js

NickColley · 2019-02-25T18:03:45Z

I have addressed @36degrees concerns of complexity by making the logic to generate the iframe ids dependant on the titles.

This means since titles need to be unique as well as ids, we only need to have a way to change the title.

I have chosen to use a titleSuffix option rather than the suggestion of overwriting it entirely as I think it's less likely for the title to go out of sync this way.

Instead of testing all the pages in the service, it was decided that it would be best to check page templates instead of specific components which should be tested in GOV.UK Frontend. 1. Home page - layout template ✅ 2. Component page - layout-pane template ✅ 3. Patterns - Gender and Sex page - layout-pane template ✅ 4. Cookie page - layout-single-page-prose template ✅ 5. Get in touch Page - layout-single-page template ✅ 6. Sitemap page - layout-sitemap template ✅

Since we're now using the title to generate the ID, add a suffix the title and avoid having to set a new ID manually.

hannalaakso

LGTM, thanks both 🙌

hannalaakso · 2019-02-26T13:29:14Z

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"}) }}


Non blocking suggestion: I wonder if calling it idSuffix would be more accurate.

I think since we're adding a suffix to the title it makes sense as is, people using this partial no longer need to understand how the id works?

hannalaakso · 2019-02-26T13:32:52Z

__tests__/accessiblity_audit.test.js

+  // 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']


Just an observation: I wasn't able to reproduce this error locally when I removed ['.app-phase-banner__wrapper'] from thingsToExclude (unlike ['#app-site-search__input'] which threw up an error when removed from thingsToExclude).

But I can see the error when running Axe in the browser.

I'll investigate and do a follow up PR if it makes sense to thanks Hanna.

We seem to have introduced a bug that produces invalid IDs for example markup

Roll back #784

This reverts commit dc6c2c4.

Looks like this came in by mistake in #784: https://github.com/alphagov/govuk-design-system/pull/784/files#diff-7883ebc5245f0aeaea5ee02bb00d6d56L23

@hannalaakso

Fixes the accessibility audit tests so we can exclude multiple different selectors from tests. Previously the selector `.app-phase-banner__wrapper` was in the list of things to exclude, but was not being excluded (see [comment from @hannalaakso in PR #784][1]). It isn't clear from the `axe-puppeteer` documentation, but `AxePuppeteer.exclude` accepts only one argument, which is either a string or a list of strings. If a list of strings is provided, this is used to select an element within an iframe [[2]]. So to exclude several different elements, we need to call `.exclude` multiple times. The easiest way to call `.exclude` multiple times for each test is to create a function (replacing the `thingsToExclude` object), which this commit does. This is required to upgrade `axe-core` to version 3.5.0 or greater. The tests we passing before this commit because the rule ['all page content must be contained by landmarks'][3] was not working fully: it treated regions as being part of the `html` element (and thus not covered by `.include('body')`) [[4]]. [1]: https://github.com/alphagov/govuk-design-system/pull/784/files#r260285048 [2]: https://deque.com/axe/core-documentation/api-documentation/#context-parameter [3]: https://dequeuniversity.com/rules/axe/4.3/region [4]: dequelabs/axe-core#1980

aliuk2012 force-pushed the al/axe-tests branch 2 times, most recently from f952340 to 88df654 Compare February 4, 2019 13:02

aliuk2012 changed the title ~~[WIP] Adds simple aXe testing to the Design System~~ Adds simple aXe testing to the Design System Feb 4, 2019

NickColley approved these changes Feb 4, 2019

View reviewed changes

NickColley reviewed Feb 4, 2019

View reviewed changes

36degrees reviewed Feb 4, 2019

View reviewed changes

NickColley force-pushed the al/axe-tests branch 2 times, most recently from a6b18e6 to 6c6184d Compare February 25, 2019 17:56

aliuk2012 and others added 6 commits February 25, 2019 18:06

Adds axe-puppeteer for accessiblity testing

e8d6008

Fixes accessiblity issue with missing heading level in an example.

28c2718

Ensure back to top component anchors to top of page

853e81b

Fixes "Element's title attribute is not unique" issue

3c09165

Replace overriden ID with titleSuffix

5d28805

Since we're now using the title to generate the ID, add a suffix the title and avoid having to set a new ID manually.

NickColley force-pushed the al/axe-tests branch from 6c6184d to 5d28805 Compare February 25, 2019 18:06

hannalaakso approved these changes Feb 26, 2019

View reviewed changes

NickColley merged commit 786bfba into master Feb 26, 2019

NickColley deleted the al/axe-tests branch February 26, 2019 13:42

hannalaakso added a commit that referenced this pull request Feb 27, 2019

Roll back #784

03bf1d1

We seem to have introduced a bug that produces invalid IDs for example markup

hannalaakso added a commit that referenced this pull request Feb 27, 2019

Roll back #784

9b50fda

We seem to have introduced a bug that produces invalid IDs for example markup

hannalaakso added a commit that referenced this pull request Feb 27, 2019

Roll back #784

dc6c2c4

We seem to have introduced a bug that produces invalid IDs for example markup

hannalaakso added a commit that referenced this pull request Feb 27, 2019

Merge pull request #809 from alphagov/fix-broken-example-ids

d3c7074

Roll back #784

hannalaakso mentioned this pull request Feb 27, 2019

Roll back https://github.com/alphagov/govuk-design-system/pull/784 #809

Merged

hannalaakso added a commit that referenced this pull request Mar 1, 2019

Revert "Roll back #784"

82bfeeb

This reverts commit dc6c2c4.

hannalaakso mentioned this pull request Mar 1, 2019

Fix generating example IDs #813

Merged

NickColley pushed a commit that referenced this pull request Mar 1, 2019

Revert "Roll back #784"

d85dee7

This reverts commit dc6c2c4.

richardTowers added a commit that referenced this pull request Mar 30, 2019

Fix mismatched <h2> </h3> in layout example

1545e33

Looks like this came in by mistake in #784: https://github.com/alphagov/govuk-design-system/pull/784/files#diff-7883ebc5245f0aeaea5ee02bb00d6d56L23

richardTowers mentioned this pull request Mar 30, 2019

Fix mismatched <h2> </h3> in layout example #842

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds simple aXe testing to the Design System #784

Adds simple aXe testing to the Design System #784

aliuk2012 commented Feb 4, 2019 •

edited

Loading

govuk-design-system-ci commented Feb 4, 2019 •

edited

Loading

NickColley left a comment

NickColley Feb 4, 2019

aliuk2012 Feb 5, 2019

NickColley Feb 4, 2019

36degrees Feb 4, 2019

NickColley commented Feb 25, 2019

hannalaakso left a comment

hannalaakso Feb 26, 2019

NickColley Feb 26, 2019

hannalaakso Feb 26, 2019

NickColley Feb 26, 2019

Adds simple aXe testing to the Design System #784

Adds simple aXe testing to the Design System #784

Conversation

aliuk2012 commented Feb 4, 2019 • edited Loading

govuk-design-system-ci commented Feb 4, 2019 • edited Loading

NickColley left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickColley commented Feb 25, 2019

hannalaakso left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aliuk2012 commented Feb 4, 2019 •

edited

Loading

govuk-design-system-ci commented Feb 4, 2019 •

edited

Loading