Feat / WCAG validation per page using axe-playwright

[langemike]

Description

With this PR, we now perform a WCAG check per page using axe-playwright.

Due to these accessibility tests, new issues have been found and fixed:

1. aria-rowindex and aria-colindex should start with 1 according to the docs (docs)
2. The featured shelf was missing a (hidden) h2, which made the header order illogical (Axe DevTools extension couldn't detect this one)
3. The role img was missing on the lock icon in VideoListItem
4. A label element was missing for the Select component
5. The heading hierarchy is fixed on the Search page

Update June 4th: Temporary wait functions are necessary (sadly)

The accessibility tests always fail on the first run, but succeed on all subsequent runs (e.g. when you locally rerun, they always pass).

It looks like we need to implement proper page load handling and find an alternative to the temporary I.wait() in our accessibility tests . It appears that the I.waitForLoaderDone() function is not sufficient to address the issue in all tests, therefore we resorted to a wait function for now as a temporary fix (I've created a ticket for this research: OTT-1884)

Update June 5th

🚧 Work in Progress: Tests still fail after implementing a wait of 2 seconds in the checkA11y function. We need to further investigate and find a solution, see Slack thread for more info: Thread.

---

Original ticket: https://videodock.atlassian.net/browse/OTT-1134
Other tickets that are solved, see userstory: OTT-1593

Solely run the a11y tests

Change codecept start script to:

"codecept:desktop": "cd test-e2e && rm -rf \"./output/desktop\" && codeceptjs run --config ./codecept.desktop.cjs"

Change test config to only run a11y tests:

tests: ['./tests/**/*.js', './tests/**/accessibility_test.ts'],

For a more verbose output, add logging to if (impactedViolations.length > 0) check:

console.dir(impactedViolations, { depth: null });

[langemike]

This seems like a weird convention. I also see this is not your idea, but it is used like this in other tests. Is this really needed to make it work? I have the assumption it could be left empty and still work.

Also, I would move the let within the scope of this scenario.

[langemike]

Amazingly no failures for the player!? Awesome!

[langemike]

@ChristiaanScheermeijer maybe we should push this through next sprint and submit it as a PR in the OSS repo. Even without e2e tests for some of the modals (there is still an open ticket for that). It is beneficial to have this in the OSS repo so nobody accidentally breaks accessibility.

If @MelissaDTH is back on Monday, maybe she could finish off this PR and do some of the modals later.