🐛 Bug: Audit and fix accessibility for browser reporter

JoshuaKGoldberg commented 7 months ago

Bug Report Checklist

[X] I have read and agree to Mocha's Code of Conduct and Contributing Guidelines
[X] I have searched for related issues and issues with the faq label, but none matched my issue.
[X] I have 'smoke tested' the code to be tested by running it outside the real test suite to get a better sense of whether the problem is in the code under test, my usage of Mocha, or Mocha itself.
[X] I want to provide a PR to resolve this

Expected

There should be no web accessibility issues with the browser reporter.

Actual

A quick axe DevTools scan reveals 3 Elements must meet minimum color contrast ratio thresholds issues.

Minimal, Reproducible Example

See index.html from https://github.com/mochajs/mocha-examples/pull/72.

Versions

Mocha 10.4.0.

Additional Info

This has been an issue for a while. I wanted to wait until after #5113 to bring it up, so as to not get in the way of that PR. 🙂

mark-wiemer commented 2 weeks ago

Oh, I can look at this!

mark-wiemer commented 1 week ago

The short answer is that at Microsoft we use Playwright and axe-core for automated a11y testing. We'd have to know what browsers are supported (#5226). The other constraint is that axe-core doesn't simulate user experience, so we'd have to use Playwright to get the page into all the states we'd expect that might have an impact on user experience: all tests passing, some failing, all failing, pending, skipped, etc.

Once automated bugs are fixed (or at least logged) we'd look at manual testing via Accessibility Insights for Web. It's a browser extension that has a ~20-part assessment to go through WCAG 2.1 AA and guide testers through manually checking all parts of a website, including high contrast support, screen readers, and other experiences using assistive technology.

Just noting this for now, not sure if I'll have time to look at things this month, but I haven't forgotten about this one :)

mochajs / mocha