feat(mermaid): WCAG 2.2 AA colour contrast validation and updated diagram standards#977
Conversation
|
Warning Review limit reached
More reviews will be available in 43 minutes and 30 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more credits in the billing tab to continue. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (16)
📝 WalkthroughWalkthroughThe PR fixes the Mermaid colour-contrast validator script to strip inline ChangesMermaid Colour-Contrast Validator Fixes, CI Scoping, and Tooling Exclusions
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Mermaid Diagram Validation✅ All Mermaid diagram checks passed.
|
🔍 Reviewer Summary for PR #977CI Status: ❌ Recommendations
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new validation script, validate-mermaid-colour-contrast.js, and updates the repository's Mermaid diagram instructions and prompts to enforce WCAG 2.2 AA colour contrast standards. It also adds corresponding npm scripts to package.json for local and CI validation. The review feedback highlights critical improvements for the validation script, specifically recommending that unparseable or invalid fill and color values be explicitly flagged as errors rather than silently ignored, and that inline comments (%%) be stripped from style declarations to prevent parsing false positives.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| const fillHex = parseColour(fill); | ||
| if (!fillHex) { | ||
| // Cannot validate non-hex / CSS variable fills — skip silently | ||
| return issues; | ||
| } |
There was a problem hiding this comment.
If the fill color cannot be parsed (for example, due to a typo like #fee2e or an invalid hex length), parseColour returns null. Currently, this causes the validator to silently skip contrast checks for the node, which can lead to silent bypasses of invalid colors.\n\nWe should explicitly flag unparseable or invalid color formats as errors to ensure the robustness of the validation gate.
const fillHex = parseColour(fill);
if (!fillHex) {
issues.push({
level: "error",
message: "Node \"" + nodeId + "\": fill \"" + fill + "\" could not be parsed. Ensure it is a valid hex code (#3 or #6 digits) or approved named color.",
});
return issues;
}| const colorHex = parseColour(color); | ||
| if (!colorHex) return issues; |
There was a problem hiding this comment.
Similarly to the fill color, if an explicit color is provided but cannot be parsed (e.g., due to a typo or invalid format), it is currently silently ignored and the node is treated as passing.\n\nWe should flag unparseable text colors as errors to prevent silent bypasses.
const colorHex = parseColour(color);
if (!colorHex) {
issues.push({
level: "error",
message: "Node \"" + nodeId + "\": color \"" + color + "\" could not be parsed. Ensure it is a valid hex code (#3 or #6 digits) or approved named color.",
});
return issues;
}![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
github-actions
Bot
added
status:needs-review
There was a problem hiding this comment.
Pull request overview
Adds Mermaid diagram enforcement for WCAG 2.2 AA colour contrast, plus repo guidance and CI to catch contrast/accessibility regressions when Markdown (and MDX) content changes.
Changes:
- Added a Mermaid
stylecolour-contrast validator and wired it intonpmscripts. - Introduced a PR/branch GitHub Actions workflow to run Mermaid validators and comment results on PRs.
- Updated Mermaid documentation standards and the “update diagrams” prompt to reflect the new palette/validation process.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
scripts/validation/validate-mermaid-colour-contrast.js |
New WCAG contrast validator for Mermaid style declarations, including reporting. |
package.json |
Adds validate:mermaid-contrast and an aggregate validate:mermaid script. |
instructions/mermaid.instructions.md |
Updates Mermaid standards to v2.0 (palette, structure, validation workflow guidance). |
.github/workflows/validate-mermaid-pr.yml |
Adds CI validation for Mermaid diagrams on PRs/feature branches and posts PR comments. |
.github/prompts/update-mermaid-diagrams.prompt.md |
Replaces stub with actionable repo-standard update instructions. |
| "high-contrast": "#000000", | ||
| }; | ||
|
|
||
| const MD_FILES = globSync("**/*.md", { |
| ```text | ||
| ```mermaid | ||
| --- | ||
| accTitle: Short accessible title (max 80 chars) | ||
| accDescr: Single-sentence description for simple diagrams |
| ```text | ||
| ```mermaid | ||
| --- | ||
| accTitle: Complex workflow title | ||
| accDescr { |
| - name: Validate colour contrast (WCAG 2.2 AA) | ||
| id: contrast | ||
| if: steps.has_diagrams.outputs.result == 'true' | ||
| run: npm run validate:mermaid-contrast | ||
| continue-on-error: true |
| /** | ||
| * Expand 3-digit hex to 6-digit. | ||
| * @param {string} hex | ||
| * @returns {string} 6-digit hex without leading # | ||
| */ | ||
| function normaliseHex(hex) { |
- Add accTitle/accDescr header block to .github/ISSUE_TEMPLATE/README.md diagram - Upgrade all old-style single-property fills to approved WCAG AA palette triples in README.md, docs/AGENT_CREATION.md, profile/README.md, scripts/README.md, and tests/README.md (36 contrast errors → 0) - Strip inline %% comments before parsing style lines (Round 2 Gemini fix) - Flag unparseable fill and color values as errors instead of silently skipping Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
github-actions
Bot
added
area:tests
…le READMEs Pre-existing links to non-existent files (run-all-tests.sh, TEST_COVERAGE_SUMMARY.md, test-helper.bash, coverage/README.md, etc.) caused lint-and-links CI failures on PR #977 since those files are part of the diff. Fixed by removing or redirecting to existing targets. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
|
@Mergifyio queue |
1 similar comment
|
@Mergifyio queue |
coderabbitai
Bot
added
area:a11y
…standards Adds a new colour contrast validator, a PR-triggered workflow, and comprehensive mermaid diagram standards to address dark-mode contrast failures where fill-only style declarations render with white text (~1.1:1 contrast ratio) rather than the intended dark text. - scripts/validation/validate-mermaid-colour-contrast.js: new WCAG AA checker that detects fill declarations missing explicit color, calculates relative luminance and contrast ratio per the WCAG 2.2 formula, and produces a dated report under .github/reports/mermaid/ - .github/workflows/validate-mermaid-pr.yml: new workflow triggered on pull_request and feature branch pushes for any changed .md files; runs syntax, accessibility, and contrast checks; posts a summary comment on the PR and fails the build on contrast errors - instructions/mermaid.instructions.md: updated to v2.0 with approved WCAG AA colour palette (fill+color+stroke triples, all ≥ 4.5:1), canonical emoji vocabulary, Phosphor icon limitation note, required accTitle/accDescr header block structure, and repo-wide update process - package.json: adds validate:mermaid-contrast and validate:mermaid (runs all three validators in sequence) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
lint-staged@17.0.7 requires Node >=22.22.1; the previous node-version: 20 caused npm ci to fail with EBADENGINE on every run of validate-mermaid-pr. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
Validator fixes (scripts/validation/validate-mermaid-colour-contrast.js): - Hex regex now strictly matches 3 or 6 digits only; 4/5-digit strings previously caused NaN luminance and silent validation bypass - Negative lookbehind (?<!-) on fill/color prevents false positives from hyphenated CSS properties like stop-color or stroke-color - Missing-color logic now checks both light (#333333) and dark (#ffffff) modes independently, reporting the correct failure mode and eliminating duplicate warning+error entries for the same declaration - Line numbers (diagram.startLine + style.line) added to console output, findings array, and markdown report for precise file navigation Workflow fix (.github/workflows/validate-mermaid-pr.yml): - Changed-files step now uses heredoc syntax for GITHUB_OUTPUT; plain `echo "files=..."` failed with "Invalid format" on multi-line values Prompt update (.github/prompts/update-mermaid-diagrams.prompt.md): - Replaced empty stub with full instructions referencing v2.0 palette, correct validator commands, and per-diagram fix checklist Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: Ash Shaw <ashley@lightspeedwp.agency>
- Add accTitle/accDescr header block to .github/ISSUE_TEMPLATE/README.md diagram - Upgrade all old-style single-property fills to approved WCAG AA palette triples in README.md, docs/AGENT_CREATION.md, profile/README.md, scripts/README.md, and tests/README.md (36 contrast errors → 0) - Strip inline %% comments before parsing style lines (Round 2 Gemini fix) - Flag unparseable fill and color values as errors instead of silently skipping Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
- Add .mdx support to contrast validator glob (Copilot comment) - Refactor globSync to lazy helper to avoid eager repo scan (Gemini comment) - Exclude .claude/ worktrees from glob and Jest testPathIgnorePatterns - Pass --changed-files to contrast validator in CI workflow (Copilot comment) - Fix nested triple-backtick fences using 4-backtick outer fences so inner mermaid fence examples render correctly in GitHub Markdown (Copilot comment) - Bump version and last_updated frontmatter in all modified docs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
…le READMEs Pre-existing links to non-existent files (run-all-tests.sh, TEST_COVERAGE_SUMMARY.md, test-helper.bash, coverage/README.md, etc.) caused lint-and-links CI failures on PR #977 since those files are part of the diff. Fixed by removing or redirecting to existing targets. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
Regenerated accessibility, validation, and colour-contrast reports following the WCAG 2.2 AA diagram updates on this branch. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
Claude Code's internal worktree directory should not be tracked. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
Resolves front-matter-validate CI failure (version 1.0.0 → 1.1.0, last_updated 2026-05-31 → 2026-06-18) and lint-and-links 404 by correcting the broken Mermaid accessibility docs URL. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
Five files had body changes (via the develop merge bringing in PR #982 and other commits) without a corresponding version bump, causing the front-matter-validate CI check to fail. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
tests/README.md (1)
372-379:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winTriple-footer repetition suggests a merge or copy-paste error. 🔄
Lines 372–379 repeat the same footer text three times:
*Built by 🧱 LightSpeedWP with ☕, 🚀, and open-source spirit!* [Contributors](...)Should appear only once at the end of the file. Please consolidate.
🧹 Proposed fix
See `TEST_COVERAGE_SUMMARY.md` for full coverage details and examples. --- *Built by 🧱 LightSpeedWP with ☕, 🚀, and open-source spirit!* [Contributors](https://github.com/lightspeedwp/lsx-demo-theme/graphs/contributors) - -*Built by 🧱 LightSpeedWP with ☕, 🚀, and open-source spirit!* -[Contributors](https://github.com/lightspeedwp/lsx-demo-theme/graphs/contributors) - -*Built by 🧱 LightSpeedWP with ☕, 🚀, and open-source spirit!* -[Contributors](https://github.com/lightspeedwp/lsx-demo-theme/graphs/contributors)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/README.md` around lines 372 - 379, The footer section in tests/README.md contains the same footer text repeated three times consecutively, which appears to be a copy-paste or merge error. Remove the duplicate instances of the footer block containing "Built by 🧱 LightSpeedWP with ☕, 🚀, and open-source spirit!" and its associated Contributors link, keeping only a single occurrence at the end of the file to maintain proper document structure and avoid redundancy.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.github/reports/mermaid-accessibility-report.md:
- Line 4: The report has a critical data integrity issue where the summary
metrics (showing 0 non-compliant diagrams and 100% compliance rate) contradict
the detailed findings section which lists 21 diagrams with missing accessibility
attributes. Update the summary section to accurately reflect the actual
compliance metrics derived from the detailed results section, ensuring the
"Accessible diagrams" count, "Non-compliant diagrams" count, and "Compliance
rate" percentage all align with the 21 failures documented in the detailed
findings. Additionally, verify whether the `.claude/worktrees/` directory should
be included or excluded from the accessibility validator scope per the PR
objectives, and either remove those findings from the detailed results if they
should be excluded, or update the validator configuration and documentation to
clarify that `.claude/` directories are intentionally being scanned separately.
In @.github/workflows/validate-mermaid-pr.yml:
- Around line 112-115: The workflow step contains a shell injection
vulnerability where ${{ steps.changed.outputs.files }} is directly interpolated
into the run command at line 113. Move the steps.changed.outputs.files
expression into an env: section at the step level instead, then reference it as
an environment variable within the run: block. This prevents shell
metacharacters in filenames from being executed by the runner shell. Update the
CHANGED variable assignment to use the environment variable instead of the
direct expression interpolation.
In `@CHANGELOG.md`:
- Line 30: The CHANGELOG.md entry for the Mermaid WCAG 2.2 AA colour contrast
validation feature is missing the required issue link. Currently it only
contains the PR reference ([`#977`]) at the end of line 30. Append the
corresponding issue link in the same format after the PR link to comply with the
coding guideline that requires both PR and issue references for all [Unreleased]
entries.
---
Outside diff comments:
In `@tests/README.md`:
- Around line 372-379: The footer section in tests/README.md contains the same
footer text repeated three times consecutively, which appears to be a copy-paste
or merge error. Remove the duplicate instances of the footer block containing
"Built by 🧱 LightSpeedWP with ☕, 🚀, and open-source spirit!" and its
associated Contributors link, keeping only a single occurrence at the end of the
file to maintain proper document structure and avoid redundancy.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: aa90482b-e6cb-4d41-b762-cefbebd60161
⛔ Files ignored due to path filters (1)
.github/reports/mermaid-diagram-accessibility-spreadsheet.csvis excluded by!**/*.csv
📒 Files selected for processing (12)
.github/ISSUE_TEMPLATE/README.md.github/reports/mermaid-accessibility-report.md.github/reports/mermaid-validation-report.md.github/reports/mermaid/colour-contrast-report-2026-06-18.md.github/workflows/validate-mermaid-pr.yml.gitignore.jest.config.cjsCHANGELOG.mdREADME.mdinstructions/mermaid.instructions.mdscripts/validation/validate-mermaid-colour-contrast.jstests/README.md
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Mergify Merge Queue
- GitHub Check: Mergify Merge Protections
- GitHub Check: Summary
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{md,markdown,txt,instructions.md}
📄 CodeRabbit inference engine (CLAUDE.md)
Language: Use UK English throughout (optimise, organisation, colour, behaviour).
Files:
README.mdCHANGELOG.mdtests/README.mdinstructions/mermaid.instructions.md
**/*.md
📄 CodeRabbit inference engine (AGENTS.md)
All documentation must follow Markdown formatting standards and include YAML frontmatter as specified in instructions/documentation-formats.instructions.md
Files:
README.mdCHANGELOG.mdtests/README.mdinstructions/mermaid.instructions.md
**/*.{php,js,ts,jsx,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{php,js,ts,jsx,tsx}: Follow WordPress Coding Standards for PHP files, ESLint/Prettier for JS/TS files, and PHPCS/WPCS for PHP files.
Security: Validate all input, escape all output, use nonces, never commit secrets.
Files:
scripts/validation/validate-mermaid-colour-contrast.js
**/*.{js,ts,jsx,tsx,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Performance: Avoid unnecessary JS, defer/lazy-load where possible, prefer native blocks.
Files:
scripts/validation/validate-mermaid-colour-contrast.js
**/*.{php,js,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Do not enqueue editor-only WordPress assets on the front end (and vice versa).
Files:
scripts/validation/validate-mermaid-colour-contrast.js
**/*.{php,js,css,html}
📄 CodeRabbit inference engine (AGENTS.md)
Follow WordPress Coding Standards (CSS, HTML, JavaScript, PHP) and inline-documentation standards at all times
Files:
scripts/validation/validate-mermaid-colour-contrast.js
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
JavaScript and TypeScript files must follow linting standards defined in instructions/languages.instructions.md, including JSDoc documentation
Files:
scripts/validation/validate-mermaid-colour-contrast.js
**/*.{js,ts}
⚙️ CodeRabbit configuration file
**/*.{js,ts}: Review JavaScript/TypeScript:
- Ensure code is linted and follows project style guides.
- Check for dead code, unused variables, and clear function naming.
- Validate accessibility and performance optimisations.
- Ensure tests are isolated and do not depend on external state.
- Check for descriptive test names and clear test structure.
Files:
scripts/validation/validate-mermaid-colour-contrast.js
CHANGELOG.md
⚙️ CodeRabbit configuration file
CHANGELOG.md: Review CHANGELOG.md:
- Confirm entries follow Keep a Changelog 1.1.0 format.
- Each entry under [Unreleased] must include a PR link and issue link.
- Verify entries use the correct section headings (Added, Changed, Fixed, Deprecated, Removed, Security, Documentation, Performance).
- Check UK English spelling throughout.
Files:
CHANGELOG.md
**/tests/*.*
⚙️ CodeRabbit configuration file
**/tests/*.*: Review all test files:
- All test files must have a header (purpose, author, date, related files).
- Use clear, descriptive test names and logical structure.
- Include both positive and negative test cases.
- Be discoverable from the main agent/test index.
- Pass all style checks and linting.
Files:
tests/README.md
**/*.instructions.md
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.instructions.md: Do not create instruction files with a 'references' frontmatter field; use inline links or footer sections instead.
Instruction files must follow the pattern: frontmatter + role declaration + Overview + General Rules + Detailed Guidance + Examples + Validation + References.
Files:
instructions/mermaid.instructions.md
instructions/**
⚙️ CodeRabbit configuration file
instructions/**: Review portable instruction files:
- Verify frontmatter follows the canonical pattern (file_type, version, last_updated, owners, tags, status, domain, stability).
- Flag any
references:frontmatter field — prohibited by CLAUDE.md.- Confirm the file has: Overview, General Rules, Detailed Guidance, Examples, Validation, and Cross-References sections.
- Check that language is UK English throughout.
Files:
instructions/mermaid.instructions.md
**/.github/ISSUE_TEMPLATE/*.md
⚙️ CodeRabbit configuration file
**/.github/ISSUE_TEMPLATE/*.md: Review issue template files:
- Ensure valid markdown syntax, logical structure, and clear instructions.
- Validate YAML frontmatter for required fields (title, description, labels).
- Check for accessibility (clear headings, no ambiguous language).
- Confirm templates reference related documentation.
Files:
.github/ISSUE_TEMPLATE/README.md
**/.github/workflows/*.yml
⚙️ CodeRabbit configuration file
**/.github/workflows/*.yml: Review GitHub Actions workflows for this governance repo:
- Security: check for least-privilege permissions (use
permissions:at job level, default to read-only).- Secret handling: ensure secrets are passed via env vars, not interpolated directly into run: steps to prevent injection.
- Action pinning: prefer SHA-pinned actions over mutable tags (e.g.
actions/checkout@v4is acceptable; SHA pins are better).- No
pull_request_targetwith untrusted code execution unless explicitly justified.- Avoid storing sensitive outputs as unmasked step outputs.
- Check for reusable workflow patterns and matrix strategies where appropriate.
- Validate
on:triggers: ensure branch/path filters are present to avoid unnecessary runs.- Confirm workflows are documented, DRY, and maintainable.
- Ensure agent-triggered workflows use
workflow_dispatchwith defined inputs.
Files:
.github/workflows/validate-mermaid-pr.yml
🪛 LanguageTool
.github/reports/mermaid-accessibility-report.md
[uncategorized] ~37-~37: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/DISCUSSION_TEMPLATE/README.md - .claude...
(GITHUB)
[uncategorized] ~38-~38: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/ISSUE_TEMPLATE/README.md - .claude/work...
(GITHUB)
[uncategorized] ~39-~39: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/PULL_REQUEST_TEMPLATE/README.md - .clau...
(GITHUB)
[uncategorized] ~40-~40: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/README.md - .claude/worktrees/agent-a9b...
(GITHUB)
[uncategorized] ~41-~41: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/SAVED_REPLIES/README.md - .claude/workt...
(GITHUB)
[uncategorized] ~42-~42: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/agents/README.md - .claude/worktrees/ag...
(GITHUB)
[uncategorized] ~43-~43: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/instructions/.archive/README.md - .clau...
(GITHUB)
[uncategorized] ~44-~44: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/instructions/README.md - .claude/worktr...
(GITHUB)
[uncategorized] ~45-~45: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/metrics/README.md - .claude/worktrees/a...
(GITHUB)
[uncategorized] ~46-~46: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/README.md - .claude/worktrees/...
(GITHUB)
[uncategorized] ~47-~47: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/active/openspec/README.md - .c...
(GITHUB)
[uncategorized] ~48-~48: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/active/openspec/changes/test-c...
(GITHUB)
[uncategorized] ~49-~49: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/active/template-enforcement-go...
(GITHUB)
[uncategorized] ~50-~50: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/active/template-enforcement-go...
(GITHUB)
[uncategorized] ~51-~51: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/active/test-coverage-implement...
(GITHUB)
[uncategorized] ~52-~52: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/active/test-coverage-implement...
(GITHUB)
[uncategorized] ~53-~53: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/active/wave-5-documentation-au...
(GITHUB)
[uncategorized] ~54-~54: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/archived/awesome-github-site/R...
(GITHUB)
[uncategorized] ~55-~55: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/archived/awesome-github-site/o...
(GITHUB)
[uncategorized] ~56-~56: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/archived/awesome-github-site/p...
(GITHUB)
[uncategorized] ~57-~57: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/archived/awesome-github-site/p...
(GITHUB)
[uncategorized] ~58-~58: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/adoption-workstream-...
(GITHUB)
[uncategorized] ~59-~59: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/agent-skill-memory-p...
(GITHUB)
[uncategorized] ~60-~60: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/awesome-github-site/...
(GITHUB)
[uncategorized] ~61-~61: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/awesome-github-site/...
(GITHUB)
[uncategorized] ~62-~62: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/awesome-github-site/...
(GITHUB)
[uncategorized] ~63-~63: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/awesome-github-site/...
(GITHUB)
[uncategorized] ~64-~64: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/branch-governance-ha...
(GITHUB)
[uncategorized] ~65-~65: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/branch-governance-ha...
(GITHUB)
[uncategorized] ~66-~66: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/github-workflow-cons...
(GITHUB)
[uncategorized] ~67-~67: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/github-workflow-cons...
(GITHUB)
[uncategorized] ~68-~68: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/issue-35-instruction...
(GITHUB)
[uncategorized] ~69-~69: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/issue-670-readme-ref...
(GITHUB)
[uncategorized] ~70-~70: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/label-governance-sta...
(GITHUB)
[uncategorized] ~71-~71: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/label-governance-sta...
(GITHUB)
[uncategorized] ~72-~72: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/plugin-pack-waves/RE...
(GITHUB)
[uncategorized] ~73-~73: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/plugin-pack-waves/is...
(GITHUB)
[uncategorized] ~74-~74: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/plugin-pack-waves/op...
(GITHUB)
[uncategorized] ~75-~75: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/portable-ai-plugin-r...
(GITHUB)
[uncategorized] ~76-~76: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/refactor-migrate-pro...
(GITHUB)
[uncategorized] ~77-~77: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/refactor-migrate-pro...
(GITHUB)
[uncategorized] ~78-~78: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/root-cleanup-depende...
(GITHUB)
[uncategorized] ~79-~79: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/root-cleanup-depende...
(GITHUB)
[uncategorized] ~80-~80: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/projects/completed/wave-5-documentation...
(GITHUB)
[uncategorized] ~81-~81: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/prompts/README.md - .claude/worktrees/a...
(GITHUB)
[uncategorized] ~82-~82: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/reports/README.md - .claude/worktrees/a...
(GITHUB)
[uncategorized] ~83-~83: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/rulesets/README.md - .claude/worktrees/...
(GITHUB)
[uncategorized] ~84-~84: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/schemas/README.md - .claude/worktrees/a...
(GITHUB)
[uncategorized] ~85-~85: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/tests/fixtures/pr-templates/README.md -...
(GITHUB)
[uncategorized] ~86-~86: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-a9b97b2c5ae3e0432/.github/workflows/README.md - .claude/worktrees...
(GITHUB)
[uncategorized] ~122-~122: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/DISCUSSION_TEMPLATE/README.md - .claude...
(GITHUB)
[uncategorized] ~123-~123: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/ISSUE_TEMPLATE/README.md - .claude/work...
(GITHUB)
[uncategorized] ~124-~124: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/PULL_REQUEST_TEMPLATE/README.md - .clau...
(GITHUB)
[uncategorized] ~125-~125: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/README.md - .claude/worktrees/agent-ad0...
(GITHUB)
[uncategorized] ~126-~126: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/SAVED_REPLIES/README.md - .claude/workt...
(GITHUB)
[uncategorized] ~127-~127: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/agents/README.md - .claude/worktrees/ag...
(GITHUB)
[uncategorized] ~128-~128: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/instructions/.archive/README.md - .clau...
(GITHUB)
[uncategorized] ~129-~129: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/instructions/README.md - .claude/worktr...
(GITHUB)
[uncategorized] ~130-~130: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/metrics/README.md - .claude/worktrees/a...
(GITHUB)
[uncategorized] ~131-~131: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/projects/README.md - .claude/worktrees/...
(GITHUB)
[uncategorized] ~132-~132: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/projects/archived/portable-ai-plugin-re...
(GITHUB)
[uncategorized] ~133-~133: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/prompts/README.md - .claude/worktrees/a...
(GITHUB)
[uncategorized] ~134-~134: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/reports/README.md - .claude/worktrees/a...
(GITHUB)
[uncategorized] ~135-~135: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/schemas/README.md - .claude/worktrees/a...
(GITHUB)
[uncategorized] ~136-~136: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/workflows/README.md - .claude/worktrees...
(GITHUB)
[uncategorized] ~261-~261: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/ISSUE_TEMPLATE/README.md — Diagram #1 (...
(GITHUB)
[uncategorized] ~266-~266: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/README.md — Diagram #1 (flowchart) - M...
(GITHUB)
[uncategorized] ~271-~271: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/README.md — Diagram #2 (sequenceDiagram...
(GITHUB)
[uncategorized] ~276-~276: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/README.md — Diagram #3 (graph) - Missi...
(GITHUB)
[uncategorized] ~281-~281: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/README.md — Diagram #4 (flowchart) - M...
(GITHUB)
[uncategorized] ~286-~286: The official name of this software platform is spelled with a capital “H”.
Context: ...aude/worktrees/agent-ad0b044aa1f4b21f2/.github/projects/README.md — Diagram #1 (graph)...
(GITHUB)
instructions/mermaid.instructions.md
[uncategorized] ~49-~49: Possible missing comma found.
Context: ...wchart LR ... ```` For complex diagrams use the block form: ````textmermai...
(AI_HYDRA_LEO_MISSING_COMMA)
🪛 zizmor (1.25.2)
.github/workflows/validate-mermaid-pr.yml
[info] 113-113: code injection via template expansion (template-injection): may expand into attacker-controllable code
(template-injection)
🔇 Additional comments (10)
instructions/mermaid.instructions.md (1)
38-47: Code fence lengthening is a sharp move for nested Markdown rendering. 👏Using
````text(4 backticks) instead of```text(3) to wrap examples of```mermaidblocks is exactly right—prevents the inner fence from being interpreted as a close tag by GitHub's parser. This is a legitimate and necessary fix for clarity in the rendered docs.Also applies to: 51-64, 66-71
README.md (1)
5-5: E node colour update aligns with approved WCAG AA palette. ✨Line 423 correctly applies the "Error / Alert" semantic role (
fill:#fee2e2,color:#7f1d1d,stroke:#b91c1c``) with verified 8.7:1 contrast ratio. Nice consistency with the updated Mermaid standards ininstructions/mermaid.instructions.md.Also applies to: 423-423
.github/reports/mermaid-validation-report.md (1)
1-72: LGTM!.github/reports/mermaid/colour-contrast-report-2026-06-18.md (1)
14-14: LGTM!Also applies to: 21-21
.github/ISSUE_TEMPLATE/README.md (1)
6-6: LGTM!Also applies to: 66-76, 78-80
tests/README.md (2)
5-5: Version bump looks good, ✓
359-360:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winDuplicate link entry—remove one. 🎯
Lines 359–360 both link to "Schema Validation" with identical text. This is a copy-paste artefact that should be removed entirely (keep one, delete the duplicate on line 360).
🧹 Proposed fix
- [Schema Validation](../schema/README.md) — JSON schema validation and configuration - [Schema Validation](../schema/README.md) — JSON schema validation and configuration + [Schema Validation](../schema/README.md) — JSON schema validation and configuration> Likely an incorrect or invalid review comment.scripts/validation/validate-mermaid-colour-contrast.js (1)
36-46: LGTM!Also applies to: 215-218, 256-260, 300-306
.gitignore (1)
23-24: LGTM!.jest.config.cjs (1)
66-66: LGTM!
ashleyshaw
force-pushed
the
feat/mermaid-wcag-contrast-validation
branch
from
e9dbf8d to
c954d6d
Compare
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
…dings - Add accTitle/accDescr to all 8 Mermaid diagrams in docs/AGENT_CREATION.md to fix the validate:mermaid-accessibility CI failure - Bump frontmatter versions on three files whose bodies changed during the rebase: mermaid-validation-report.md (1.1.0→1.2.0), README.md (3.1→3.2), instructions/mermaid.instructions.md (v2.1→v2.2), and bump AGENT_CREATION.md (v1.3→v1.4) for the diagram additions - Fix shell injection in validate-mermaid-pr.yml contrast step: move steps.changed.outputs.files expression into env: section (CodeRabbit/zizmor) - Add issue link #976 to CHANGELOG.md [Unreleased] entry (CodeRabbit) - Remove duplicate footer in tests/README.md (CodeRabbit) - Remove unused WCAG_AA_LARGE_TEXT and MERMAID_THEME_TEXT_DEFAULTS constants from validate-mermaid-colour-contrast.js (github-code-quality) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
Body was updated in the mermaid diagram accessibility sweep but the version field was not incremented, causing frontmatter freshness validation to fail. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WRoeVXiGpLFGHCVddGCQb2
|
@coderabbitai review Generated by Claude Code |
|
✅ Action performedReview finished.
|
Linked issues
Closes #976
Changelog
Added
scripts/validation/validate-mermaid-colour-contrast.js: WCAG 2.2 AA colour contrast validator for all Mermaidstyledeclarations across all.mdfiles; detects missing explicitcoloralongsidefilland calculates relative luminance contrast ratios per the WCAG 2.2 formula; reports precise line numbers in findings.github/workflows/validate-mermaid-pr.yml: PR and feature-branch workflow that runs all three mermaid validators (syntax, accessibility, contrast) on changed.mdfiles, posts a summary comment, and blocks merge on contrast failuresnpm run validate:mermaid-contrastandnpm run validate:mermaidscriptsChanged
instructions/mermaid.instructions.mdupdated to v2.0: approved WCAG AA colour palette (7 semantic fill/color/stroke triples, all ≥ 4.5:1 in light and dark mode), canonical emoji vocabulary, Phosphor icon limitation, requiredaccTitle/accDescrheader block, repo-wide update process.github/prompts/update-mermaid-diagrams.prompt.md: replaced empty stub with full instructions referencing v2.0 palette, correct validator commands, and per-diagram fix checklistFixed
fill/colorregex prevents false positives from hyphenated CSS properties (stop-color,stroke-color)GITHUB_OUTPUTnow uses heredoc syntax; plainecho "files=..."failed with "Invalid format" on multi-line valuesChecklist (Global DoD / PR)
Summary
Adds a WCAG 2.2 AA colour contrast validator and automated PR workflow to catch dark-mode contrast failures in Mermaid diagrams. The root cause:
style X fill:#e1f5fewithout explicitcolor— Mermaid inherits white text in dark mode, ~1.1:1 contrast against light pastel fills. Found 36 errors on first run across the repository.Supersedes closed PR #975 (same content, renamed from
claude/prefix to compliantfeat/prefix).Follow-up: #976 tracks the repo-wide palette sweep to fix all 47 existing diagram files.
🤖 Generated with Claude Code
https://claude.ai/code/session_01LXjmeDonrDybfPZsH6Aa6w
Generated by Claude Code