Conversation
- Updated light and dark theme styles to improve WCAG AA compliance by adjusting color contrasts for muted foregrounds. - Introduced high-contrast themes in the configuration for better accessibility. - Removed the 'color-contrast' rule from a11y tests to streamline known issues with third-party libraries. This update aims to enhance the overall accessibility of the application, ensuring a better experience for users with visual impairments.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
bot
added
www
WalkthroughUpdated muted-foreground CSS variables for light and dark themes, added fumadocs-specific overrides, switched MDX code themes to high-contrast variants, imported the new overrides, and re-enabled the Axe "color-contrast" rule in accessibility tests. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Dev
participant Repo
participant Build as Site Build
participant CSS as CSS (theme + fd overrides)
participant MDX as MDX Renderer
participant A11Y as Playwright A11y Test
Dev->>Repo: push commit (theme CSS, fd.css, globals import, source.config.ts, tests)
Repo->>Build: trigger build
Build->>CSS: load theme files + fd overrides (globals.css imports)
Build->>MDX: render MDX using high-contrast themes
MDX-->>Build: code blocks with high-contrast colors
Build->>A11Y: run accessibility tests (color-contrast enabled)
A11Y-->>Build: report issues / pass results
Note right of A11Y `#DDEEFF`: "color-contrast" now validated (WCAG AA)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Poem
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 selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (2)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/www/app/styles/theme/dark.css(1 hunks)apps/www/app/styles/theme/light.css(1 hunks)apps/www/source.config.ts(1 hunks)tooling/playwright-www/tests/a11y.test.ts(0 hunks)
💤 Files with no reviewable changes (1)
- tooling/playwright-www/tests/a11y.test.ts
⏰ 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). (2)
- GitHub Check: test-e2e (e2e)
- GitHub Check: test-e2e (a11y)
🔇 Additional comments (1)
apps/www/source.config.ts (1)
166-168: Theme identifiers verified—code is correct.The Shiki theme identifiers
github-light-high-contrastandgithub-dark-high-contrastare valid and included in Shiki's bundled themes. The accessibility-focused theme selection is appropriate.
- Updated muted foreground colors in light and dark themes to improve WCAG AA compliance, ensuring better contrast ratios. - Introduced a new CSS variable for muted foreground colors in the `fd.css` file to maintain accessibility standards across different themes. This update aims to enhance the overall accessibility of the application, providing a better experience for users with visual impairments.
…on---shiki-syntax-highlighting-and-fumadocs-ui-muted-text
- Updated muted foreground color contrast ratios in light and dark themes to improve WCAG AA compliance. - Added fd.css to global styles for better theme integration. This update aims to further enhance the accessibility of the application, ensuring a better experience for users with visual impairments.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/www/app/styles/components/fd.css (1)
4-16: CSS overrides are WCAG AA compliant with correct variable naming; update inline contrast ratio comments for accuracy.The
--color-fd-muted-foregroundvariable name is correct and confirmed in fumadocs documentation. The light mode color (hsl(240 4% 40%)) achieves 6.03:1 contrast on white and the dark mode color (hsl(240 5% 70%)) achieves 9.63:1 contrast on black, both exceeding the WCAG AA minimum of 4.5:1.However, the inline comments state 6.13:1 and 8.88:1 respectively—update these to reflect the actual calculated values (6.03:1 and 9.63:1) for documentation accuracy.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/www/app/globals.css(1 hunks)apps/www/app/styles/components/fd.css(1 hunks)
🔇 Additional comments (1)
apps/www/app/globals.css (1)
8-8: CSS import placement looks good.The fd.css import is appropriately positioned in the cascade—after theme and alert styles but before base styles—ensuring fumadocs-specific overrides are applied and available to downstream styles without being inadvertently overridden.
…on---shiki-syntax-highlighting-and-fumadocs-ui-muted-text
yamcodes
deleted the
264-fix-color-contrast-accessibility-violation---shiki-syntax-highlighting-and-fumadocs-ui-muted-text
branch
1 participant
This update aims to enhance the overall accessibility of the application, ensuring a better experience for users with visual impairments.
Closes #264
Summary by CodeRabbit
Style
Accessibility
Tests