fix(html/axe): use literal overlay colors to avoid clobbering brand#14471
Merged
Conversation
…r brand (#14468) The axe report's sass bundle declared `$body-bg`, `$body-color`, and `$link-color` defaults in its user SassLayer, which precede brand's user defaults during sass compilation and so clobbered brand colors on the page. Since the axe report is developer chrome (not document content), its overlay rules now use literal hex values instead of theme-derived SCSS variables. Brand and theme colors win on the page; the overlay stays readable regardless of how the page is themed. Same treatment applied to the revealjs report slide (force #fff slide background via data-background-color and #222 text) and the dashboard report offcanvas (override --bs-offcanvas-bg/-color to axe defaults).
Collaborator
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
cscheid
approved these changes
May 1, 2026
Member
cscheid
left a comment
cscheid
left a comment
There was a problem hiding this comment.
Thank you, looks good! We'll fire off a new prerelease build for you right away.
Member
Reminder: We can't until we sort our properly Mac signing |
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
4 participants
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.
Closes #14468.
Bug
Setting
axe:on an HTML format clobbered brand-definedbackground,foreground, andlink.color. The axe sass bundle declared$body-bg,$body-color, and$link-colordefaults in its user SassLayer, which precede brand's user defaults during sass compilation, so axe's white/dark/blue defaults won via!defaultresolution. Affected every output mode (true,console,document) since the bundle is added unconditionally.Approach
The axe report is developer chrome, not document content — its colors should not depend on (and should not override) the page's brand or theme. The overlay's readability matters most when the page itself has poor contrast, since that's exactly what axe is reporting.
So instead of fighting over
$body-*defaults, the overlay rules now use literal hex values scoped to axe selectors. Brand and theme colors win on the page; the overlay always looks like itself. Colors picked to pass WCAG AAA contrast against white (#222body text = 16:1,#0747a6links = 8.5:1) — appropriate for a debugging tool meant to surface accessibility issues.What changed
src/format/html/format-html-axe.ts): replaced$body-bg/$body-color/$link-colorreferences in the axe rules with literal#fff/#222/#0747a6. Dropped the!defaultdeclarations entirely — they're no longer needed.data-background-color="#fff"on the appended section (inaxe-check.js) so reveal paints the slide white via its own.slide-backgroundmechanism. Slide-scopedcolor: #222keeps text readable.--bs-offcanvas-bgand--bs-offcanvas-colorfor.quarto-axe-offcanvasso the panel ignores Bootstrap/brand offcanvas theming.Tests
Four new smoke-all tests under
tests/docs/smoke-all/2026/05/01/:issue-14468-axe-brand.qmd— HTML + axe + brand: brand wins on body, axe overlay keeps#ffffallback.issue-14468-axe-revealjs.qmd— revealjs + axe + brand: report slide rule hascolor: #222; no\$body-*SCSS leakage.issue-14468-axe-dashboard.qmd— dashboard + axe + brand: offcanvas has--bs-offcanvas-bg: #fff.issue-14468-axe-no-brand.qmd— HTML + axe, no brand: Bootstrap defaults still apply (regression guard).All 9 existing axe tests in
tests/docs/smoke-all/accessibility/continue to pass.