feat: Add a11y tests and GitHub action #460

ethanWallace · 2025-01-17T13:48:01Z

Summary | Résumé

Add cypress e2e test to test the accessibility of all pages on the documentation site. Also updated an old GitHub workflow to run these tests on pull request into main and merge into main.

Also includes some accessibility fixes that were identified by the tests, mostly misaligned HTML and headings.

How to use

Run tests in browser

Run npm run start to start a local version of the documentation site
Run npm run cy:open
This will open the cypress interface in the browser of your choice to view the tests

Run tests in terminal

Run npm run cy:run
This will start the site and run the tests. The Site will be closed after the tests complete.

cds-snc/design-gc-conception#1192

* New baseComponentPreview shortcode * Switch English pages to use iframe * Switch French pages to use iframe * Add logic to retain proper height in iframes * Uncomment action in a11y test * PR feedback: code refinement

daine · 2025-02-01T01:59:13Z

Looks good, the tests are all successful. However, I can't get the build to finish (that's what's failing on the amplify side).
It's not proceeding to this log on the build process:

2025-01-31T18:03:57.709Z [INFO]: # Completed phase: build
## Completed Frontend Build
2025-01-31T18:03:57.718Z [INFO]: ## Build completed successfully

the last message is

2025-01-31T18:03:57.670Z [INFO]: [11ty] Copied 752 files / Wrote 284 files in 8.94 seconds (31.5ms each, v2.0.1)

Locally, here's what I'm getting when I run build:

[11ty] Copied 754 files / Wrote 343 files in 754.77 seconds (2200.5ms each, v2.0.1)
2 pages found without an <html> element.
Pages without an outer <html> element will not be processed by default.
If adding this element is not possible, use the root selector config to target a different root element.

It seems like a pagefind error of some sort?

ethanWallace · 2025-02-03T13:41:53Z

[11ty] Copied 754 files / Wrote 343 files in 754.77 seconds (2200.5ms each, v2.0.1)
2 pages found without an element.
Pages without an outer element will not be processed by default.
If adding this element is not possible, use the root selector config to target a different root element.

I was seeing those messages too until I deleted _site and ran build again so I don't think that is causing issues on this PR.

aws-amplify-ca-central-1 · 2025-02-04T13:17:16Z

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-460.djtlis5vpn8jd.amplifyapp.com

aws-amplify-ca-central-1 · 2025-02-04T13:17:21Z

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-460.d35vdwuoev573o.amplifyapp.com

ethanWallace · 2025-02-04T13:22:15Z

@daine I fixed the deployment issue.

I added a build:ci script to the package.json to run when someone runs test but since it started with build, it was also running when someone just ran the build script. That was preventing the deployment from moving onto the next step so that build:ci script has been renamed.

melaniebmn · 2025-02-04T23:18:04Z

src/en/components/radio/base.md

@@ -1,6 +1,6 @@
 ---
 layout: 'layouts/base.njk'
-github: https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-radio
+github: null
 figma: https://www.figma.com/file/mh2maMG2NBtk41k1O1UGHV/GC-Design-System?type=design&node-id=462-110&mode=design&t=juCIOMIg2VKfCrQA-0
 permalink: false
 tags: ['radioEN', 'header']


Should we remove the "radio" pages? It's been deprecated for quite a while now.

melaniebmn · 2025-02-04T23:20:23Z

src/fr/composants/bouton-radio/base.md

@@ -1,6 +1,6 @@
 ---
 layout: 'layouts/base.njk'
-github: https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-radio
+github: null
 figma: https://www.figma.com/file/o4SguSZdar2CCFzSkWNrmB/Syst%C3%A8me-de-design-GC?type=design&node-id=348-5024&mode=design&t=1DaL24vHpjRRfHHm-0
 permalink: false
 tags: ['radioFR', 'header']


Same comment - should we remove these pages?

melaniebmn · 2025-02-04T23:32:30Z

cypress/e2e/a11y-en.cy.js

+    'log',
+    `${violations.length} accessibility violation${
+      violations.length === 1 ? '' : 's'
+    } ${violations.length === 1 ? 'was' : 'were'} detected`,


Can we add the impact level here as well, please?

melaniebmn

Left a few comments, looks great otherwise! I'm excited to get this merged in :)

ethanWallace added 14 commits January 17, 2025 08:35

Add cypress test to test a11y on all pages

04f3118

Update a11y-tests.yml to use cypress test

98d2997

Various a11y fixes identified by testing

b650bb8

Update github action

d7fc509

Try to solve permission error

f268d28

Try to solve permission issue

932243b

Update a11y-tests.yml

799664e

Optimize test + dead links scan

d1998cf

Fix dead links

4c963c2

feat: Convert component previews to iframes (#466)

3015987

* New baseComponentPreview shortcode * Switch English pages to use iframe * Switch French pages to use iframe * Add logic to retain proper height in iframes * Uncomment action in a11y test * PR feedback: code refinement

Split EN/FR site a11y tests into seperate test files

9f8de1a

Add timeout to visit

0a359da

increase timeout time

f183664

Remove uppercase letter from url

3a11d85

ethanWallace marked this pull request as ready for review January 30, 2025 15:22

ethanWallace requested review from melaniebmn and daine and removed request for melaniebmn January 30, 2025 15:22

Fix scripts to allow preview build

73765db

melaniebmn reviewed Feb 4, 2025

View reviewed changes

This comment was marked as outdated.

Sign in to view

melaniebmn self-requested a review February 4, 2025 23:47

melaniebmn requested changes Feb 4, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add a11y tests and GitHub action #460

feat: Add a11y tests and GitHub action #460

ethanWallace commented Jan 17, 2025 •

edited

Loading

daine commented Feb 1, 2025 •

edited

Loading

ethanWallace commented Feb 3, 2025

aws-amplify-ca-central-1 bot commented Feb 4, 2025

aws-amplify-ca-central-1 bot commented Feb 4, 2025

ethanWallace commented Feb 4, 2025

melaniebmn Feb 4, 2025

melaniebmn Feb 4, 2025

melaniebmn Feb 4, 2025 •

edited

Loading

This comment was marked as outdated.

melaniebmn left a comment

feat: Add a11y tests and GitHub action #460

Are you sure you want to change the base?

feat: Add a11y tests and GitHub action #460

Conversation

ethanWallace commented Jan 17, 2025 • edited Loading

Summary | Résumé

How to use

Run tests in browser

Run tests in terminal

daine commented Feb 1, 2025 • edited Loading

ethanWallace commented Feb 3, 2025

aws-amplify-ca-central-1 bot commented Feb 4, 2025

aws-amplify-ca-central-1 bot commented Feb 4, 2025

ethanWallace commented Feb 4, 2025

melaniebmn Feb 4, 2025

Choose a reason for hiding this comment

melaniebmn Feb 4, 2025

Choose a reason for hiding this comment

melaniebmn Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

This comment was marked as outdated.

melaniebmn left a comment

Choose a reason for hiding this comment

ethanWallace commented Jan 17, 2025 •

edited

Loading

daine commented Feb 1, 2025 •

edited

Loading

melaniebmn Feb 4, 2025 •

edited

Loading