7a85bbb402
feat: Implement dual theme system with purple/pink and high contrast modes
...
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled
Added comprehensive theme switching system with two color palettes:
**New Default Theme: Purple/Pink Gradient**
- Primary: #8b52ff (vibrant purple) → #d194e6 (light purple)
- Secondary: #ff7094 (pink) → #ffb3e4 (light pink)
- Modern, energetic gradient aesthetic
- Created purpleTheme.ts with full MUI theme configuration
**High Contrast Theme: Warm Peach (Original)**
- Renamed maternalTheme to highContrastTheme
- Larger text sizes (7.5% increase for accessibility)
- Stronger shadows and bolder fonts
- Optimized for readability and accessibility
**Theme Infrastructure:**
1. **ThemeContext** (contexts/ThemeContext.tsx)
- Created theme context provider with useThemeContext hook
- Theme modes: 'standard' (purple) | 'highContrast' (peach)
- localStorage persistence with key: maternal_theme_preference
- Prevents flash of wrong theme on load
2. **ThemeRegistry Updates** (components/ThemeRegistry.tsx)
- Wrapped with ThemeContextProvider
- Dynamic theme switching via useThemeContext
- Maintains backward compatibility
3. **Settings Page Toggle** (app/settings/page.tsx)
- Added theme switcher in Preferences section
- Switch control with descriptive labels
- Explains High Contrast benefits
- Instant theme switching without reload
4. **CSS Variables** (app/globals.css)
- Added --color-1 through --color-5 for purple gradient
- Added --warm-1 through --warm-5 for peach palette
- Available for custom styling
**Features:**
✅ Instant theme switching (no page reload)
✅ Persistent preference across sessions
✅ Accessibility-focused high contrast mode
✅ Modern purple/pink gradient as default
✅ Smooth transitions between themes
✅ All existing components work with both themes
**Files Created:**
- contexts/ThemeContext.tsx
- styles/themes/purpleTheme.ts
- styles/themes/highContrastTheme.ts
**Files Modified:**
- components/ThemeRegistry.tsx
- app/settings/page.tsx
- app/globals.css
Resolves: High Priority Feature #12 - Secondary Color Palette & Accessibility Toggle
🎉 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-10-04 13:47:02 +00:00
29960e7d24
feat: Implement WCAG 2.1 AA accessibility foundation (Phase 1)
...
Complete Phase 1 accessibility implementation with comprehensive WCAG 2.1 Level AA compliance foundation.
**Accessibility Tools Setup:**
- ESLint jsx-a11y plugin with 18 accessibility rules
- Axe-core for runtime accessibility testing in dev mode
- jest-axe for automated testing
- Accessibility utility functions (9 functions)
**Core Features:**
- Skip navigation link (WCAG 2.4.1 Bypass Blocks)
- 45+ ARIA attributes across 15 components
- Keyboard navigation fixes (Quick Actions now keyboard accessible)
- Focus management on route changes with screen reader announcements
- Color contrast WCAG AA compliance (4.5:1+ ratio, tested with Axe)
- Proper heading hierarchy (h1→h2) across all pages
- Semantic landmarks (header, nav, main)
**Components Enhanced:**
- 6 dialogs with proper ARIA labels (Child, InviteMember, DeleteConfirm, RemoveMember, JoinFamily, MFAVerification)
- Voice input with aria-live regions
- Navigation components with semantic landmarks
- Quick Action cards with keyboard support
**WCAG Success Criteria Met (8):**
- 1.3.1 Info and Relationships (Level A)
- 2.1.1 Keyboard (Level A)
- 2.4.1 Bypass Blocks (Level A)
- 4.1.2 Name, Role, Value (Level A)
- 1.4.3 Contrast Minimum (Level AA)
- 2.4.3 Focus Order (Level AA)
- 2.4.6 Headings and Labels (Level AA)
- 2.4.7 Focus Visible (Level AA)
**Files Created (7):**
- .eslintrc.json - ESLint accessibility config
- components/providers/AxeProvider.tsx - Dev-time testing
- components/common/SkipNavigation.tsx - Skip link
- lib/accessibility.ts - Utility functions
- hooks/useFocusManagement.ts - Focus management hooks
- components/providers/FocusManagementProvider.tsx - Provider
- docs/ACCESSIBILITY_PROGRESS.md - Progress tracking
**Files Modified (17):**
- Frontend: 20 components/pages with accessibility improvements
- Backend: ai-rate-limit.service.ts (del → delete method)
- Docs: implementation-gaps.md updated
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-10-02 21:35:45 +00:00
