Skip to content

Fix WCAG contrast, PDF export, mermaid rendering#2

Merged
lwsinclair merged 1 commit intodevelopfrom
update-mermaid-to-latest
Mar 18, 2026
Merged

Fix WCAG contrast, PDF export, mermaid rendering#2
lwsinclair merged 1 commit intodevelopfrom
update-mermaid-to-latest

Conversation

@lwsinclair
Copy link
Copy Markdown

Summary

  • WCAG contrast enforcement: automatic post-render pass that checks every mermaid text element against its background and flips to black/white if contrast ratio < 4.5:1
  • PDF/HTML export fix: mermaid diagrams now render correctly in export (28/28 pass) — fixed textContent vs innerHTML for mermaid v11
  • Surgical themeVariables: stopped overriding node text colours so mermaid handles its own contrast for nodes

Test plan

  • npx playwright test test/e2e/ — 8/8 tests pass
  • HTML export: 28/28 mermaid diagrams render as SVGs
  • PDF export: produces valid PDF
  • Mermaid rendering: 100% pass rate across 16 diagram types
  • XSS protection: unchanged

🤖 Generated with Claude Code

…ments

Contrast enforcement:
- Add automatic WCAG 2.1 contrast ratio checker that runs after every
  mermaid render — walks all SVG text elements, computes luminance
  contrast against detected background, flips to black or white if
  ratio < 4.5:1 (AA threshold)
- Detects backgrounds from parent rects/polygons (including inline
  styles), foreignObject backgrounds, and falls back to page canvas
- Works across all themes and accent colours automatically

PDF/HTML export fixes:
- Fix mermaid export: use textContent instead of innerHTML for v11
  compatibility (mermaid.run() reads textContent, not parsed HTML)
- Add startOnLoad: false and parse() validation before run() in export
- Individual diagram rendering with suppressErrors so one failure
  doesn't block the rest

Mermaid themeVariables:
- Stop overriding node text colours (primaryTextColor, nodeTextColor
  etc.) — let mermaid's own themes handle node contrast correctly
- Only override edge label backgrounds and specific label colours

Testing:
- Add export e2e test: validates 28/28 mermaid diagrams render as
  SVGs in HTML export
- Add printToPDF test: validates PDF buffer is produced
- All 8 e2e tests pass (export, mermaid, launch, XSS)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@lwsinclair lwsinclair merged commit 4564c39 into develop Mar 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant