Andrei
29960e7d24
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>
124 lines
2.5 KiB
TypeScript
124 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { createTheme } from '@mui/material/styles';
|
|
|
|
export const maternalTheme = createTheme({
|
|
palette: {
|
|
primary: {
|
|
main: '#FFB6C1', // Light pink/rose
|
|
light: '#FFE4E1', // Misty rose
|
|
dark: '#DB7093', // Pale violet red
|
|
},
|
|
secondary: {
|
|
main: '#FFDAB9', // Peach puff
|
|
light: '#FFE5CC',
|
|
dark: '#FFB347', // Deep peach
|
|
},
|
|
background: {
|
|
default: '#FFF9F5', // Warm white
|
|
paper: '#FFFFFF',
|
|
},
|
|
text: {
|
|
primary: '#2D3748', // Dark gray - 4.5:1+ contrast
|
|
secondary: '#4A5568', // Darker gray for better contrast (7:1+ on white)
|
|
},
|
|
},
|
|
typography: {
|
|
fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
|
|
h1: {
|
|
fontSize: '2rem',
|
|
fontWeight: 600,
|
|
},
|
|
h2: {
|
|
fontSize: '1.75rem',
|
|
fontWeight: 600,
|
|
},
|
|
h3: {
|
|
fontSize: '1.5rem',
|
|
fontWeight: 600,
|
|
},
|
|
h4: {
|
|
fontSize: '1.25rem',
|
|
fontWeight: 600,
|
|
},
|
|
h5: {
|
|
fontSize: '1.125rem',
|
|
fontWeight: 600,
|
|
},
|
|
h6: {
|
|
fontSize: '1rem',
|
|
fontWeight: 600,
|
|
},
|
|
body1: {
|
|
fontSize: '1rem',
|
|
},
|
|
body2: {
|
|
fontSize: '0.875rem',
|
|
},
|
|
},
|
|
shape: {
|
|
borderRadius: 16,
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 24,
|
|
textTransform: 'none',
|
|
minHeight: 48, // Touch target size
|
|
fontSize: '1rem',
|
|
fontWeight: 500,
|
|
paddingLeft: 24,
|
|
paddingRight: 24,
|
|
},
|
|
sizeLarge: {
|
|
minHeight: 56,
|
|
fontSize: '1.125rem',
|
|
},
|
|
},
|
|
},
|
|
MuiTextField: {
|
|
styleOverrides: {
|
|
root: {
|
|
'& .MuiInputBase-root': {
|
|
minHeight: 48,
|
|
borderRadius: 16,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 20,
|
|
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
|
|
},
|
|
},
|
|
},
|
|
MuiPaper: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 16,
|
|
},
|
|
elevation1: {
|
|
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.06)',
|
|
},
|
|
elevation2: {
|
|
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
|
|
},
|
|
elevation3: {
|
|
boxShadow: '0 6px 30px rgba(0, 0, 0, 0.1)',
|
|
},
|
|
},
|
|
},
|
|
MuiChip: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 12,
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|