[POC] Add workflows for accessibility #852

csouchet · 2023-02-09T09:42:59Z

No description provided.

github-actions · 2023-02-09T10:09:33Z

♻️ PR Preview c779d11 has been successfully destroyed since this PR has been closed.

_{🤖 By surge-preview}

csouchet · 2023-02-09T13:29:33Z

.flDDCN.Link__LinkInButton-sc-1epbwti-1.jeiKGq

The Demo button failed.

tbouffard · 2023-02-09T13:45:02Z

.github/workflows/lighthouse.yml

+      # Using the Lighthouse GitHub Action
+      # @see https://github.com/marketplace/actions/lighthouse-ci-action
+      - name: Run Lighthouse GitHub Action
+        uses: treosh/lighthouse-ci-action@v9


❓ could we also check https://github.com/foo-software/lighthouse-check-action which seems to offer more options? in another workflow for example.

src/components/seo.tsx

process-analytics-bot

Device	URL
mobile	https://process-analytics-process-analytics-dev-site_preview-pr-852.surge.sh/

Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead

process-analytics-bot

Device	URL
desktop	https://process-analytics-process-analytics-dev-site_preview-pr-852.surge.sh/

Device	URL
mobile	https://process-analytics-process-analytics-dev-site_preview-pr-852.surge.sh/

Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead

csouchet · 2023-02-09T17:01:50Z

Result

Never returns any errors :

♿️ A11Y CI with a11ytester-action / a11ytester-action-CLI
♿️ A11Y CI with a11ywatch / a11ywatch-CLI (pull_request)

♿️ A11Y CI with Lighthouse Check: There is no information on what doesn't work well.

For the others, they are complementary. Sometimes, there are the same errors. Sometimes, there are different errors.

process-analytics-bot · 2023-09-22T12:42:41Z

♿️ Pa11y report

Audited website : https://process-analytics-process-analytics-dev-site_preview-pr-852.surge.sh/

Running Pa11y on 1 URLs:

 > https://process-analytics-process-analytics-dev-site_preview-pr-852.surge.sh/ - 21 errors

Errors in https://process-analytics-process-analytics-dev-site_preview-pr-852.surge.sh/:

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 4.92:1. Recommendation:  change background to #060606.

   (#gatsby-focus-wrapper > main > div > div > div > div > div:nth-child(3) > a)

   <a class="MuiTypography-root MuiTypography-inherit MuiLink-root
   MuiLink-underlineNone MuiButtonBase-root MuiButton-root MuiButton-contained
   MuiButton-containedSecondary MuiButton-sizeMedium
   MuiButton-containedSizeMedium MuiButton-root MuiButton-conta...

 • The heading structure is not logically nested. This h5 element should be an
   h3 to be properly nested.

   (#libraries > div > div > div > div:nth-child(1) > div > div > div >
   div:nth-child(1) > div > div:nth-child(1) > h5)

   <h5 class="MuiTypography-root MuiTypography-h5
   css-fk5k8x">bpmn-visualization</h5>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#libraries > div > div > div > div:nth-child(1) > div > div > div >
   div:nth-child(1) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline
   css-187pqnf">TypeScript</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#libraries > div > div > div > div:nth-child(2) > div > div > div >
   div:nth-child(1) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">R</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#libraries > div > div > div > div:nth-child(3) > div > div > div >
   div:nth-child(1) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline
   css-187pqnf">Experimental</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#libraries > div > div > div > div:nth-child(4) > div > div > div >
   div:nth-child(1) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline
   css-187pqnf">Javascript</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#news > div > div > div:nth-child(1) > div:nth-child(1) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">3 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#news > div > div > div:nth-child(1) > div:nth-child(2) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">3 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#news > div > div > div:nth-child(1) > div:nth-child(3) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">4 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#news > div > div > div:nth-child(1) > div:nth-child(4) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">2 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#news > div > div > div:nth-child(1) > div:nth-child(5) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">5 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#news > div > div > div:nth-child(1) > div:nth-child(6) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">4 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 4.92:1. Recommendation:  change background to #060606.

   (#news > div > div > div:nth-child(2) > a)

   <a class="MuiButtonBase-root MuiButton-root MuiButton-text
   MuiButton-textQuaternary MuiButton-sizeMedium MuiButton-textSizeMedium
   MuiButton-root MuiButton-text MuiButton-textQuaternary MuiButton-sizeMedium
   MuiButton-textSizeMedium css-jpjv08" tabinde...

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#blog > div > div > div:nth-child(1) > div:nth-child(1) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">8 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#blog > div > div > div:nth-child(1) > div:nth-child(2) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">8 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#blog > div > div > div:nth-child(1) > div:nth-child(3) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">6 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#blog > div > div > div:nth-child(1) > div:nth-child(4) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">3 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#blog > div > div > div:nth-child(1) > div:nth-child(5) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">12 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 1.84:1. Recommendation:  change text colour to #00664a.

   (#blog > div > div > div:nth-child(1) > div:nth-child(6) > div > div > a >
   div > div:nth-child(2) > div > div:nth-child(2) > span)

   <span class="MuiTypography-root MuiTypography-overline css-187pqnf">2 min
   read</span>

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 4.92:1. Recommendation:  change background to #060606.

   (#blog > div > div > div:nth-child(2) > a)

   <a class="MuiButtonBase-root MuiButton-root MuiButton-text
   MuiButton-textQuaternary MuiButton-sizeMedium MuiButton-textSizeMedium
   MuiButton-root MuiButton-text MuiButton-textQuaternary MuiButton-sizeMedium
   MuiButton-textSizeMedium css-jpjv08" tabinde...

 • This element has insufficient contrast at this conformance level. Expected a
   contrast ratio of at least 7:1, but text in this element has a contrast
   ratio of 4.92:1. Recommendation:  change background to #060606.

   (#gatsby-focus-wrapper > main > section:nth-child(8) > div > div > div >
   div:nth-child(1) > form > div > div:nth-child(2) > button)

   <button class="MuiButtonBase-root MuiButton-root MuiButton-contained
   MuiButton-containedSecondary MuiButton-sizeMedium
   MuiButton-containedSizeMedium MuiButton-root MuiButton-contained
   MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-contai...

✘ 0/1 URLs passed

This report has been generated using pa11y-ci.

process-analytics-bot · 2023-09-22T12:42:52Z

♿️ Axe report

Audited website : https://process-analytics-process-analytics-dev-site_preview-pr-852.surge.sh/

Running axe-core 4.8.2 in chrome-headless

Testing https://process-analytics-process-analytics-dev-site_preview-pr-852.surge.sh/ ... please wait, this may take a minute.
 0 violations found!
Testing complete of 1 pages

Please note that only 20% to 50% of all accessibility issues can automatically be detected. 
Manual testing is always required. For more information see:
https://dequeuniversity.com/curriculum/courses/testingmethods

This report has been generated using @axe-core/cli.

process-analytics-bot · 2023-09-22T12:42:53Z

⚡️🏠 Lighthouse report

Audited website : https://process-analytics-process-analytics-dev-site_preview-pr-852.surge.sh/
Complete report is here. Here's the summary:

Category	Score
🔴 Performance	48
🟢 Accessibility	99
🟠 Best practices	83
🟢 SEO	92
🟠 PWA	78
This report has been generated using lighthouse.

csouchet · 2023-09-22T13:51:31Z

replaced by #1161, #1162, #1163, #1164, #1165, #1166

csouchet added chore Build, CI/CD or repository tasks (issues/PR maintenance, environments, ...) poc 💫 Experimentation to discuss about future implementation. Not intended to be merged labels Feb 9, 2023

csouchet force-pushed the accessibility_auto_tests branch 2 times, most recently from 15b0305 to 6d78989 Compare February 9, 2023 10:05

csouchet force-pushed the accessibility_auto_tests branch from ea57baa to 586274d Compare February 9, 2023 10:48

tbouffard reviewed Feb 9, 2023

View reviewed changes

process-analytics-bot reviewed Feb 9, 2023

View reviewed changes

csouchet force-pushed the accessibility_auto_tests branch from 4b61fc5 to 3588c8c Compare February 9, 2023 15:39

process-analytics-bot reviewed Feb 9, 2023

View reviewed changes

csouchet mentioned this pull request Feb 10, 2023

fix: reduce the number of accessibility issues #855

Merged

csouchet force-pushed the accessibility_auto_tests branch 3 times, most recently from 6cbac67 to c4b4ed1 Compare February 20, 2023 16:25

process-analytics deleted a comment from process-analytics-bot Feb 20, 2023

csouchet force-pushed the accessibility_auto_tests branch from c4b4ed1 to d0e8ef2 Compare April 12, 2023 12:17

csouchet force-pushed the accessibility_auto_tests branch from d0e8ef2 to 360f1b8 Compare July 7, 2023 12:33

csouchet force-pushed the accessibility_auto_tests branch 2 times, most recently from 249601b to fbfe615 Compare August 1, 2023 11:35

csouchet added 9 commits August 3, 2023 14:18

Add workflows for accessibility from SnowCamp

2dcc12e

Add a11ywatch workflow

7ab4a5d

Add a11ytester-action workflow

21d957f

Test to fix env

4f54f83

Try to fix a11ytester-action workflow

4e619f7

TMP

3d0fb39

Remove needs

deefc3f

Add .pa11yci file

a623c85

Add files for lighthouse

0943d13

csouchet added 6 commits August 3, 2023 14:18

Fix token

a675a9e

Update tokens

ad6f677

Update workflows

c4e0c98

Add new workflow for Lighthouse Check

7d2d0bd

Change workflow

be15051

Update workflow for Lighthouse Check

49ed8a4

csouchet force-pushed the accessibility_auto_tests branch from fbfe615 to 49ed8a4 Compare August 3, 2023 12:18

csouchet and others added 2 commits September 22, 2023 14:32

Merge branch 'main' into accessibility_auto_tests

7828e2a

Bump the version of actions

c779d11

csouchet closed this Sep 22, 2023

csouchet deleted the accessibility_auto_tests branch September 22, 2023 13:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[POC] Add workflows for accessibility #852

[POC] Add workflows for accessibility #852

csouchet commented Feb 9, 2023

github-actions bot commented Feb 9, 2023 •

edited

Loading

csouchet commented Feb 9, 2023

tbouffard Feb 9, 2023

process-analytics-bot left a comment •

edited

Loading

process-analytics-bot left a comment •

edited

Loading

csouchet commented Feb 9, 2023 •

edited

Loading

process-analytics-bot commented Sep 22, 2023

process-analytics-bot commented Sep 22, 2023

process-analytics-bot commented Sep 22, 2023

csouchet commented Sep 22, 2023

[POC] Add workflows for accessibility #852

[POC] Add workflows for accessibility #852

Conversation

csouchet commented Feb 9, 2023

github-actions bot commented Feb 9, 2023 • edited Loading

csouchet commented Feb 9, 2023

tbouffard Feb 9, 2023

Choose a reason for hiding this comment

process-analytics-bot left a comment • edited Loading

Choose a reason for hiding this comment

process-analytics-bot left a comment • edited Loading

Choose a reason for hiding this comment

csouchet commented Feb 9, 2023 • edited Loading

Result

process-analytics-bot commented Sep 22, 2023

♿️ Pa11y report

process-analytics-bot commented Sep 22, 2023

♿️ Axe report

process-analytics-bot commented Sep 22, 2023

⚡️🏠 Lighthouse report

csouchet commented Sep 22, 2023

github-actions bot commented Feb 9, 2023 •

edited

Loading

process-analytics-bot left a comment •

edited

Loading

process-analytics-bot left a comment •

edited

Loading

csouchet commented Feb 9, 2023 •

edited

Loading