feat(a11y): add high-contrast + CVD theme preferences #7
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add user-facing theme settings for color vision accessibility and high contrast mode, similar to GitHub's accessibility theming. Features: - Color mode selection: System / Light / Dark - Vision themes: Default / Protanopia & Deuteranopia / Tritanopia - High contrast toggle for enhanced visibility - Preferences persist in localStorage - FOUC prevention via inline script - Full keyboard accessibility Technical: - Theme applied via data attributes on <html> - CSS variables for all color combinations - Respects prefers-color-scheme media query - Forced colors mode support (Windows High Contrast) Testing: - 27 Playwright E2E tests covering all functionality - Tests for persistence, accessibility, and CSS application Co-authored-by: Paul-Vincent Roll <paviro@me.com>
thc1006
changed the title
There was a problem hiding this comment.
Pull request overview
This pull request adds comprehensive accessibility theme preferences to the application, allowing users to customize color modes, vision-specific color palettes, and contrast levels. The implementation includes robust E2E testing, FOUC prevention, and full keyboard navigation support.
Changes:
- Added user-facing theme settings modal with color mode (System/Light/Dark), vision themes (Default/Protanopia & Deuteranopia/Tritanopia), and high contrast toggle
- Implemented theme persistence via localStorage with validation and error handling
- Created comprehensive E2E test suite with 27 tests covering all theme functionality
Reviewed changes
Copilot reviewed 10 out of 12 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| playwright.config.ts | Adds Playwright configuration for E2E testing with CI optimizations |
| package.json | Adds @playwright/test dependency and test scripts |
| package-lock.json | Updates lock file with Playwright packages |
| e2e/theme-settings.spec.ts | Comprehensive E2E tests covering modal behavior, theme persistence, keyboard navigation, and accessibility |
| app/utils/themeStorage.ts | Utility functions for reading/saving theme preferences with validation and system preference detection |
| app/types.ts | Type definitions for theme preferences (ColorMode, VisionTheme, ContrastLevel) |
| app/components/ThemeProvider.tsx | React context provider managing theme state and applying changes to DOM |
| app/components/ui/SettingsModal.tsx | Settings modal component with radio groups for color mode/vision and toggle for contrast |
| app/components/Footer.tsx | Adds Settings button to footer for opening theme modal |
| app/layout.tsx | Adds inline script for FOUC prevention and ThemeProvider wrapper |
| app/globals.css | Extensive CSS variables for all theme combinations, high contrast mode, forced colors support |
| .gitignore | Adds Playwright output directories to gitignore |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add prefers-contrast auto-detection (respects system high contrast) - Add prefers-reduced-motion support to disable animations - Configure Tailwind darkMode to use data-color-mode attribute - Add aria-describedby to all radio inputs and contrast switch - Add aria-label to contrast switch button - Add browser fallback for prefers-contrast: high (earlier draft) - Fix JSON.parse error handling for corrupted localStorage All 27 E2E tests passing. Co-authored-by: Paul-Vincent Roll <paviro@me.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 13 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add listener for both prefers-contrast: more and high for consistency - Extract hasExplicitContrastPreference() helper to avoid duplicate code - Increase focus ring offset to 4px in high contrast mode for better visibility - Use systemPrefersHighContrast() in listener for consistent detection logic All 27 E2E tests passing. Co-authored-by: Paul-Vincent Roll <paviro@me.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds Accessibility Theme Preferences to Relationship Menu:
Related discussion: #DISCUSSION_LINK
Closes #ISSUE_NUMBER
Problem / Motivation
The app currently supports light/dark mode, but lacks:
This can make it harder to distinguish states like selected/active/focus or emphasis.
Changes
light | darkdefault | pd | tritannormal | highrelationshipMenu.themeSteps to Test
npm installnpm run devExpected Behavior
Actual Behavior (Before)
Environment
Screenshots / Screen recordings
Accessibility Notes
prefers-color-schemeprefers-contrastforced-colors(should remain usable)Risks / Rollback
Checklist
Co-authored-by: Paul-Vincent Roll paviro@me.com