Run key accessibility scans in dark mode too#1905
Merged
Merged
Conversation
Dark mode was only spot-checked on the homepage and one blog post, so the Axe
multi-page scan, the color-contrast check, and the mobile/tablet viewport scans
all ran in light mode only. Contrast is the axe rule most sensitive to theme, so
a dark-mode-only regression on the About/Resume/Contact/Talks pages or at a given
viewport would have gone uncaught.
Parameterize those scans over a COLOR_SCHEMES = ['light', 'dark'] list via
page.emulateMedia({ colorScheme }). emulateMedia only overrides colorScheme, so
the reducedMotion preference set in beforeEach persists. All variants pass locally
against the built preview, confirming the site is clean in dark mode rather than
the tests being vacuous.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Dark mode was only spot-checked on the homepage and one blog post. The Axe multi-page scan (About/Resume/Contact/Talks), the color-contrast check, and the mobile/tablet viewport scans all ran in light mode only.
color-contrastis the axe rule most sensitive to theme, so a dark-mode-only regression on a secondary page or at a given viewport would have gone uncaught.What
Parameterize those scans over
COLOR_SCHEMES = ['light', 'dark']viapage.emulateMedia({ colorScheme }):40 → 49 tests.
emulateMediaonly overridescolorScheme, so thereducedMotion: 'reduce'set inbeforeEachpersists — which matters, since that's what prevents axe's fade-in animation false-positives on cards.The 404 page is left light-only on purpose (low value; its layout mirrors pages already covered in both themes).
Verification
All 49 tests pass locally against the built
astro preview, including every new dark-mode variant — confirming the site is genuinely clean in dark mode rather than the assertions being vacuous.🤖 Generated with Claude Code