search

pa11y / pa11y-ci

Pa11y CI is a CI-centric accessibility test runner, built using Pa11y
https://pa11y.org
GNU Lesser General Public License v3.0
509 stars 62 forks source link

Documentation request: How to test dark mode? #237

Open ptmkenny opened 3 months ago

ptmkenny commented 3 months ago

I've been testing my website with pa11y-ci for a couple years now and made several improvements; thank you!

I recently added dark mode to my site. So now I want to use pa11y to test the contrast values for both "light" mode and "dark" mode. I assumed I would have to run pa11y twice, once to test "light" mode and then again to test "dark" mode.

However, I'm confused about how to get pa11y to request dark mode. I read through the configuration examples and there are a lot of options.

Puppeteer has Page.emulateMediaFeatures():

await page.emulateMediaFeatures([
  {name: 'prefers-color-scheme', value: 'dark'},
]);

Should I supply a page instance to puppeteer to test dark mode? Or is there a better way?

danyalaytekin commented 3 months ago

Hey @ptmkenny, thanks for using pa11y-ci and it's great to hear it's helping your testing. There's a related question over on pa11y's issues and it sounds like you and @aarongoldenthal have independently converged:

I'm currently unaware of another approach but I agree that "adding a dedicated option to simplify this would be beneficial" so I'll add an enhancement label on this side of the fence too.