fix(a11y): surface-aware syntax highlighting, fix dark mode heading and button contrast#431
Merged
Merged
Conversation
perasperaactual
force-pushed
the
fix/a11y-batch-2-contrast
branch
from
73eddd7 to
c2c1d94
Compare
Contributor
✅ Visual Regression Test ResultsStatus: ✅ All visual tests passed! All screenshots match the baseline. No visual regressions detected! 🎉 |
Contributor
⚡ Performance Benchmark Results✅ Build Time Benchmarks: PASSED✅ Bundle Size Benchmarks: PASSED❌ Runtime Vitals Benchmarks: FAILED📝 Note: Detailed results are available in the job logs. 🎯 Performance Budgets:
Updated: 2026-05-16T15:40:37.188Z |
…de + button contrast
perasperaactual
force-pushed
the
fix/a11y-batch-2-contrast
branch
from
c2c1d94 to
7ea6002
Compare
Contributor
✅ Visual Regression Test ResultsStatus: ✅ All visual tests passed! All screenshots match the baseline. No visual regressions detected! 🎉 |
Contributor
♿ Accessibility Test ResultsOverall Status: ✅ 0/0 tests passed 🦮 WCAG 2.1 AA ComplianceNo WCAG test results available ⌨️ Keyboard NavigationNo keyboard navigation test results available 📊 Detailed ReportDownload the full HTML accessibility report from the workflow artifacts for:
🔍 Testing ChecklistOur accessibility tests verify:
Powered by @axe-core/playwright and Playwright |
perasperaactual
added a commit
that referenced
this pull request
May 17, 2026
…#435) * fix(ci): resolve js-yaml override conflict breaking changeset pre exit * fix(ci): handle modify/delete conflict on pre.json during back-merge rebase (#426) Co-authored-by: Stackwright Bot <bot@per-aspera.dev> * fix(ci): loop over pre.json conflicts during back-merge rebase (#428) Co-authored-by: Stackwright Bot <bot@per-aspera.dev> * chore: re-enter prerelease mode after back-merge * fix(a11y): tabindex on code blocks, skip link, fix timeline heading level (#430) Co-authored-by: Stackwright Bot <bot@per-aspera.dev> * chore: bump prerelease versions * fix(a11y): use surface luminance for syntax highlighting, fix dark mode + button contrast (#431) Co-authored-by: Stackwright Bot <bot@per-aspera.dev> * fix(a11y): FAQ keyboard trap, video accessible name, test false positive guards (#432) * docs(a11y): document intentional Chromium-only CI scope for accessibility tests * fix(a11y): migrate FAQ to Radix Accordion, video accessible name, fix trap/carousel test guards * chore: update lockfile for @radix-ui/react-accordion in @stackwright/core * test(core): update FAQ test for Radix Accordion refactor The FAQ component was refactored to use Radix UI Accordion in this PR. Update the stale test to click the trigger before asserting answer visibility, and rename it to accurately reflect the new DOM structure. --------- Co-authored-by: Stackwright Bot <bot@per-aspera.dev> --------- Co-authored-by: Stackwright Bot <bot@per-aspera.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com>
perasperaactual
added a commit
that referenced
this pull request
May 18, 2026
* fix(ci): resolve js-yaml override conflict breaking changeset pre exit * fix(ci): handle modify/delete conflict on pre.json during back-merge rebase (#426) Co-authored-by: Stackwright Bot <bot@per-aspera.dev> * fix(ci): loop over pre.json conflicts during back-merge rebase (#428) Co-authored-by: Stackwright Bot <bot@per-aspera.dev> * chore: re-enter prerelease mode after back-merge * fix(a11y): tabindex on code blocks, skip link, fix timeline heading level (#430) Co-authored-by: Stackwright Bot <bot@per-aspera.dev> * chore: bump prerelease versions * fix(a11y): use surface luminance for syntax highlighting, fix dark mode + button contrast (#431) Co-authored-by: Stackwright Bot <bot@per-aspera.dev> * fix(a11y): FAQ keyboard trap, video accessible name, test false positive guards (#432) * docs(a11y): document intentional Chromium-only CI scope for accessibility tests * fix(a11y): migrate FAQ to Radix Accordion, video accessible name, fix trap/carousel test guards * chore: update lockfile for @radix-ui/react-accordion in @stackwright/core * test(core): update FAQ test for Radix Accordion refactor The FAQ component was refactored to use Radix UI Accordion in this PR. Update the stale test to click the trigger before asserting answer visibility, and rename it to accurately reflect the new DOM structure. --------- Co-authored-by: Stackwright Bot <bot@per-aspera.dev> * fix(example-app): update logo * docs(readme): align value communication with project reality - Add problem statement paragraph explaining AI amplification of architectural decisions - Add "Who Is This For?" section with practical audience descriptions - Tighten Safe by Construction section with "schema is the security policy" lede - Add SBOM Generation subsection (lifted from CLAUDE.md where it was buried) - Add Regulated Environments subsection; remove buried blockquote callout - Add Quick Start heading to properly frame the git clone block * docs(stackwright-docs): align site content with README value framing - Homepage: add Who Is This For? section; update Safe by Construction card to surface SBOM - Pro page: update Enterprise Ready card with PKI/CAC, CISA, and SBOM specifics - Architecture page: update Auditable Surface Area card to mention SBOM formats --------- Co-authored-by: Stackwright Bot <bot@per-aspera.dev> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.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.
Summary
Color contrast fixes from the CI accessibility audit. Stacks on top of #430 — merge that first.
Root cause
The docs theme is dark-mode-first: its light mode has a dark navy surface (
#1A2C46) and its dark mode has a near-white surface (#F5F5F5). The syntax highlighter was choosing token palettes based oncolorMode === 'dark', which is exactly backwards for this theme, causing 30–42 failing elements per page.Changes
CodeBlock.tsx— replacescolorMode === 'dark'with a luminance check ontheme.colors.surface. Token palette now adapts to the actual rendered surface color regardless of how the theme names its modes. Uses existinghexToRgb+getLuminancefromcolorUtils.ts.stackwright.yml— changesdarkColors.primaryfrom#D97706(amber-600, ~2.77:1 on light backgrounds) to#92400e(amber-800, ~5.82:1) — WCAG AA compliant on the#F5F5F5surface used in dark mode.ThemedButton.tsx— contained-variant buttons now auto-select text color (dark vs light) usinggetBetterTextColor()based on the resolved background, fixing the#fffon#FCC03Eissue (was 1.64:1, now uses dark text for sufficient contrast).Remaining known issues