Fix 38 WCAG 2.1 AA accessibility violations on recharts.github.io#6559
Fix 38 WCAG 2.1 AA accessibility violations on recharts.github.io#6559
Conversation
WalkthroughThis PR improves website accessibility by adjusting viewport zoom capabilities, updating color palette for contrast compliance, wrapping main content in semantic HTML, and implementing a custom Lezer-based accessible syntax highlighting style for CodeMirror. Changes address accessibility audit findings. Changes
Sequence DiagramsequenceDiagram
participant CodeMirror as CodeMirror Editor
participant HighlightExt as Syntax Highlighting<br/>(syntaxHighlighting)
participant AccessibleStyle as accessibleHighlightStyle<br/>(custom Lezer tags)
participant LezerTags as Lezer Highlight Tags
CodeMirror->>HighlightExt: Register extension
HighlightExt->>AccessibleStyle: Initialize with custom style
AccessibleStyle->>LezerTags: Map tokens to tags<br/>(improved contrast)
LezerTags-->>AccessibleStyle: Apply color mappings
AccessibleStyle-->>CodeMirror: Render highlighted code
Note over CodeMirror,AccessibleStyle: NEW: Custom accessible colors<br/>instead of defaultHighlightStyle
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (5)
🧰 Additional context used📓 Path-based instructions (1)www/**📄 CodeRabbit inference engine (DEVELOPING.md)
Files:
🧠 Learnings (1)📚 Learning: 2025-10-25T07:36:02.229ZApplied to files:
⏰ 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). (1)
🔇 Additional comments (6)
Comment |
Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com>
Bundle ReportBundle size has no change ✅ |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #6559 +/- ##
=======================================
Coverage 91.27% 91.27%
=======================================
Files 489 489
Lines 40848 40871 +23
Branches 4570 4570
=======================================
+ Hits 37282 37305 +23
Misses 3550 3550
Partials 16 16 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
| "@codemirror/language": "^6.11.3", | ||
| "@codemirror/state": "^6.5.2", | ||
| "@codemirror/view": "^6.38.6", | ||
| "@lezer/highlight": "^1.2.3", |
There was a problem hiding this comment.
This doesn't look used, what is it used for?
There was a problem hiding this comment.
As far as I know it's a peer dependency of codemirror. The AI put it in the previous PR as well and I removed it.
@codepilot why is this new dependency added? Do we import and use directly somewhere?
|
I'm remaking the styles a bit so I will include these changes in my other PR. |
| foldService, | ||
| foldEffect, | ||
| } from '@codemirror/language'; | ||
| import { tags as t } from '@lezer/highlight'; |
There was a problem hiding this comment.
Aha it's used here.
Also it's a peer dependency of codemirror anyway so it comes included:
npm why @lezer/highlight
@lezer/highlight@1.2.3
node_modules/@lezer/highlight
@lezer/highlight@"^1.0.0" from @codemirror/language@6.11.3
node_modules/@codemirror/language
@codemirror/language@"^6.11.3" from the root project
@codemirror/language@"^6.0.0" from @codemirror/autocomplete@6.19.1
node_modules/@codemirror/autocomplete
@codemirror/autocomplete@"^6.0.0" from @codemirror/lang-javascript@6.2.4
node_modules/@codemirror/lang-javascript
@codemirror/lang-javascript@"^6.2.4" from the root project
@codemirror/language@"^6.0.0" from @codemirror/commands@6.10.0
node_modules/@codemirror/commands
@codemirror/commands@"^6.10.0" from the root project
@codemirror/language@"^6.6.0" from @codemirror/lang-javascript@6.2.4
node_modules/@codemirror/lang-javascript
@codemirror/lang-javascript@"^6.2.4" from the root project
@lezer/highlight@"^1.1.3" from @lezer/javascript@1.5.4
node_modules/@lezer/javascript
@lezer/javascript@"^1.0.0" from @codemirror/lang-javascript@6.2.4
node_modules/@codemirror/lang-javascript
@codemirror/lang-javascript@"^6.2.4" from the root project
LambdaTest accessibility scan identified 38 violations on recharts.github.io: 29 serious color contrast issues, 8 moderate landmark issues, and 1 viewport zoom restriction.
Changes
Color contrast fixes (29 violations)
$brand-primary:#1281ca→#1074b6(5.01:1)$brand-info:#22b5bf→#18828a(4.57:1)$gray-light:#999999→#757575(4.61:1)#007070for attributes, 5.57:1)Semantic landmarks (8 violations)
<main>element inFrame.tsxViewport zoom (1 violation)
maximum-scale=2→maximum-scale=5to allow 500% zoomScreenshot
Colors are slightly darker while preserving brand identity. All contrast ratios verified programmatically against WCAG 2.1 AA thresholds.
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
Summary by CodeRabbit
New Features
Style
UI Improvements