Add pa11y-ci for automated accessibility tests

[XhmikosR]

This is mostly a POC and it will need a lot more tweaking and some of my other PRs finished first, like #29208.

• Look into ignoring some classes known to fail in hideElements (*-success, etc) ("hideElements": "[class*=-success], [class*=-info]")
• Maybe ignore examples from color contrast check?
• See if we can use html reporter (https://github.com/pa11y/pa11y-reporter-html)
• Find a way to use the HTML reporter but still log the results in CLI
• See if we can drop delay-cli
• Upload HTML report on CI
• See if we can use npx maybe, since Chromium is a huge download or see if we can cache puppeteer on CI

[XhmikosR]

I've made some progress with this a few days ago. I added the HTML results to CI so one can download them and review them. The pa11-ci tests run only on Node.js 12 so you need to visit this action to get the results.

AFAICT we need to ignore some selectors that we know that will fail color contrast (and maybe all of the examples?), and we can try fixing the remaining issues.

Any help is welcome. :)

[ffoodd]

FWIW, pa11y has a --wait argument, than can be passed as an argument in CLI or in the json config file. Not tried in CI but will do soon, could allow to remove the delay-cli dep.

Also while working on this, I temporarily disabled contrast checking since there were too many failures (more than 15.000!) by using:

"ignore": [
      "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18"
    ]

Result is much more readable :)

Still working on it but I might have more to share soon!

[patrickhlauke]

Is this PR still worth pursuing at this point, or do we need a fresh take on it?

[XhmikosR]

There's no need for a fresh take in it, I can rebase it. We need to solve the TODO I have in the OP.