Skip to content

fix(a11y): harden Mermaid validator and fix 20 pre-type accTitle/accDescr violations#1017

Merged
ashleyshaw merged 4 commits into
developfrom
fix/mermaid-validator-pre-type-attribute-guard
Jun 19, 2026
Merged

fix(a11y): harden Mermaid validator and fix 20 pre-type accTitle/accDescr violations#1017
ashleyshaw merged 4 commits into
developfrom
fix/mermaid-validator-pre-type-attribute-guard

Conversation

@ashleyshaw

@ashleyshaw ashleyshaw commented Jun 19, 2026

Copy link
Copy Markdown
Member

Linked issues

Closes #669

Context

  • Severity/Impact: Low
  • Affected versions/environments: All — validator produced false-positive "accessible" results for diagrams with accTitle/accDescr before the diagram type line

Root Cause

  • Mermaid blocks where accTitle or accDescr appeared before the diagram type declaration (e.g. flowchart TD) would pass the accessibility validator despite being incorrectly structured. GitHub's renderer requires the diagram type to be the first meaningful line; attributes placed above it are parsed incorrectly and invisible to screen readers.

Fix Summary

  • Added a guard in scripts/validation/validate-mermaid-accessibility.js that detects when accTitle/accDescr is the first meaningful line and returns an error immediately (same early-return pattern as the existing YAML front-matter guard).
  • Corrected all 20 affected diagrams across 9 files by moving each diagram type declaration to the first position.
  • Added required branded footers to all 8 modified documentation files.

Verification

  • node scripts/validation/validate-mermaid-accessibility.js — 60/60 diagrams accessible, 0 non-compliant
  • Frontmatter version and last_updated bumped on all modified markdown files
  • All 9 affected files confirmed corrected
  • Footer validation passes on all changed files

Risk & Rollback

  • Risk level: Low
  • Rollback plan: revert commit fa8b722

Changelog

Fixed

  • Mermaid validator hardened to reject accTitle/accDescr placed before diagram type — Added a guard in scripts/validation/validate-mermaid-accessibility.js that rejects any Mermaid block where accTitle or accDescr appears before the diagram type declaration. Corrected all 20 affected diagrams across 9 files. 60/60 diagrams are now compliant.

Checklist (Global DoD / PR)

  • All AC met and demonstrated
  • Tests added/updated (unit/E2E as appropriate)
  • Accessibility checklist completed (where relevant):
    • Semantic HTML and heading order verified
    • Keyboard navigation and visible focus states verified
    • ARIA used only where needed
    • Contrast and non-colour cues reviewed (WCAG 2.2 AA or higher)
  • Docs/readme/changelog updated (if user-facing)
  • Security checklist completed (where relevant):
    • Untrusted input validated and sanitised
    • Output escaped for its rendering context
    • Privileged actions enforce nonce and capability checks
    • No secrets/sensitive data introduced; OWASP risks reviewed
  • Code/design reviews approved
  • CI green; linked issues closed; release notes prepared (if shipping)

🤖 Generated with Claude Code

https://claude.ai/code/session_01AuT8NQeGYY9UQHLsX3MMHc

…escr violations

Added a guard in validate-mermaid-accessibility.js that rejects Mermaid blocks
where accTitle or accDescr appears before the diagram type declaration. GitHub's
renderer requires the diagram type (e.g. `flowchart TD`) to be the first
meaningful line; accessibility attributes placed above it are invisible to screen
readers and incorrectly indicate a compliant block.

Corrected all 20 affected diagrams across 9 files by moving each diagram type
declaration to the first position. All 60 diagrams now pass at 100% compliance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AuT8NQeGYY9UQHLsX3MMHc
@coderabbitai

coderabbitai Bot commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@ashleyshaw, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 46 minutes and 28 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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 5e258846-d3b1-4ee0-af57-5bef7e009ec9

📥 Commits

Reviewing files that changed from the base of the PR and between 184ff65 and 805782c.

📒 Files selected for processing (11)
  • .github/instructions/.archive/frontmatter.instructions.md
  • .github/instructions/.archive/tests.instructions.md
  • .github/reports/mermaid/diagram-validation-2025-12-11.md
  • CHANGELOG.md
  • CONTRIBUTING.md
  • docs/HUSKY_PRECOMMITS.md
  • instructions/automation.instructions.md
  • instructions/documentation-formats.instructions.md
  • instructions/linting.instructions.md
  • instructions/quality-assurance.instructions.md
  • scripts/validation/validate-mermaid-accessibility.js
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/mermaid-validator-pre-type-attribute-guard

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions

github-actions Bot commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

✅ Template check passed after update. Thanks for fixing the PR description.

@github-actions

github-actions Bot commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

🎨 Mermaid Diagram Validation

✅ All Mermaid diagram checks passed.

Check Result
✅ Syntax (diagram type, direction, bracket matching) Passed
✅ Accessibility (accTitle / accDescr present) Passed
✅ Colour contrast (WCAG 2.2 AA ≥ 4.5:1) Passed

@github-actions

github-actions Bot commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

🔍 Reviewer Summary for PR #1017

CI Status:success
Files changed: 11
Risk Distribution: 0 critical, 3 high, 0 medium, 8 low

Recommendations

  • Ready to proceed pending human review

@github-actions

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request hardens the Mermaid diagram accessibility validator in scripts/validation/validate-mermaid-accessibility.js to reject diagrams where accTitle or accDescr are placed before the diagram type declaration. It also updates 20 affected diagrams across 9 documentation files to ensure compliance, and documents these changes in the CHANGELOG. I have no feedback to provide as there are no review comments.

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.

Footer validation (validate:footers) requires all changed markdown files
to carry the LightSpeed branded footer. Auto-fixed with --fix flag.
Also resolved setext heading style conflict in quality-assurance.instructions.md.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AuT8NQeGYY9UQHLsX3MMHc
@ashleyshaw ashleyshaw marked this pull request as ready for review June 19, 2026 11:35
@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

@ashleyshaw ashleyshaw enabled auto-merge (squash) June 19, 2026 11:35
@github-actions github-actions Bot added status:needs-review Awaiting code review type:bug Bug or defect priority:normal Default priority area:documentation Docs & guides area:scripts Scripts & tooling lang:js JavaScript/TypeScript lang:md Markdown content/docs type:chore Chore / small hygiene change meta:needs-changelog Requires a changelog entry before merge labels Jun 19, 2026
@coderabbitai coderabbitai Bot requested a review from krugazul June 19, 2026 11:36
@github-actions github-actions Bot removed the type:chore Chore / small hygiene change label Jun 19, 2026
@ashleyshaw ashleyshaw merged commit 5bf39c7 into develop Jun 19, 2026
25 checks passed
@ashleyshaw ashleyshaw deleted the fix/mermaid-validator-pre-type-attribute-guard branch June 19, 2026 11:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:documentation Docs & guides area:scripts Scripts & tooling lang:js JavaScript/TypeScript lang:md Markdown content/docs meta:needs-changelog Requires a changelog entry before merge priority:normal Default priority status:needs-review Awaiting code review type:bug Bug or defect

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Child of #652] Audit: Mermaid Diagram Accessibility (WCAG AA, Light/Dark Mode)

2 participants