[Epic] Use Axe and Playwright for automated a11y testing

[alexgibson]

Description

Whilst using automated tooling is not a silver bullet for accessibility (a11y) testing, there are still a large number of common issues that can be highlighted/detected through automation that can be useful for investigation.

This is an issue to investigate and trial using Axe for automated accessibility testing via Playwright.

Rather than combine this into our regular CI integration tests (where issues might block a deployment), this could run these tests as a separate job on a clock schedule (e.g. once per day).

Combining Axe with Playwright is potentially useful as we can have tests interacting with the browser (clicking on elements, resizing the view port etc) before scanning for issues.

---

Success Criteria

Beta Give feedback

1. Add a11y tests for global components such as navigation, footer, subnav.
2. Add a11y tests for key, high-traffic pages for both desktop and mobile screen sizes.
3. Run a11y tests in automation on a daily basis, reporting failures in www-notify on Slack.
4. Create readable test reports, and surface those through automation.
5. Add documentation for a11y testing.
6. File a11y bugs.
7. Expand coverage.
8. Add newsletter component scan
9. Update a11y-checker to scan redesigned footer #15136
   Needs Review P3 Review: µ +3

A11y bugs

Beta Give feedback

1. [a11y] home page donate promo heading color contrast issue #14999
   Bug 🐛 Frontend Good First Bug Help wanted 👋 a11y +5
2. [a11y] home page donate banner should have unique role/label/title #15000
   Bug 🐛 Frontend Good First Bug Help wanted 👋 a11y +5
   
3. [a11y] about page heading levels and landmark issues #15001
   Bug 🐛 Frontend Good First Bug Help wanted 👋 a11y +5
   
4. [a11y] products page heading level issue #15002
   Bug 🐛 Frontend Good First Bug Help wanted 👋 a11y +5
   
5. [a11y] VPN guarantee copy does not meet minimum color contrast threshold #15003
   Bug 🐛 Frontend Good First Bug Help wanted 👋 a11y +5
6. Navigation JS fixes not picked up from upstream Protocol #14770
   Bug 🐛 a11y +2
7. [a11y] sub nav component contains nested interactive elements #15005
   Bug 🐛 Frontend Good First Bug Help wanted 👋 a11y +5
   
8. [a11y] Insufficient color contrast issue on /firefox/all/ page #15060
   Bug 🐛 Frontend P3 a11y +4
   
9. [a11y] Home page - Aside should not be contained in another landmark #15078
   Bug 🐛 Good First Bug Help wanted 👋 P3 a11y +5
10. [a11y] challeng-the-default page contains aria-hidden elements that are still keyboard focusable #15137
    Bug 🐛 Help wanted 👋 P3 a11y +4
    
11. [a11y] Leadership page accessibility improvements #15335
    Bug 🐛 Help wanted 👋 a11y +3
12. [a11y] Newsletter complementary landmark should be top level (/about/manifesto/) #15336
    Bug 🐛 Good First Bug Help wanted 👋 a11y +4
    
13. [a11y] /advertising page is missing a main landmark #15337
    Bug 🐛 Good First Bug Help wanted 👋 a11y +4
14. [a11y] /careers pages accessibility improvements #15338
    Bug 🐛 Good First Bug Help wanted 👋 a11y +4
    
15. [a11y] /contact page accessibility improvements #15339
    Bug 🐛 Help wanted 👋 a11y +3
16. [a11y] Firefox /enterprise page accessibility improvements #15341
    Bug 🐛 Good First Bug Help wanted 👋 a11y +4
    
17. [a11y] /privacy page accessibility improvements #15343
    Bug 🐛 Help wanted 👋 a11y +3
18. [a11y] VPN download page accessibility improvements #15344
    Bug 🐛 Help wanted 👋 a11y +3