diff --git a/docs/BACKLOG.md b/docs/BACKLOG.md new file mode 100644 index 0000000..710e49c --- /dev/null +++ b/docs/BACKLOG.md @@ -0,0 +1,463 @@ +# Maternal App - Development Backlog + +**Last Updated**: October 3, 2025 +**Status**: Active Development + +This document tracks remaining tasks, future enhancements, and technical debt items for the Maternal App project. + +--- + +## πŸ”΄ High Priority (Pre-Launch) + +### 1. Date/Time Localization Refinement +**Status**: 70% Complete +**Estimated Effort**: 1-2 hours +**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 10 + +**Completed**: +- βœ… `useLocalizedDate` hook created and implemented +- βœ… Activity timestamps use `formatDistanceToNow` + +**Remaining**: +- [ ] Apply date-fns locale to all remaining date displays +- [ ] Child birth dates formatting with proper locale +- [ ] Analytics date ranges with locale-specific formatting +- [ ] Ensure consistent date formatting across all components + +**Files to Update**: +- `app/children/page.tsx` - Birth date display +- `app/insights/page.tsx` - Date range selectors +- `components/features/analytics/InsightsDashboard.tsx` - Chart date labels +- Any remaining hardcoded date formats + +--- + +### 2. Number Formatting Consistency +**Status**: 70% Complete +**Estimated Effort**: 1-2 hours +**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 11 + +**Completed**: +- βœ… `useFormatting` hook created with Intl.NumberFormat + +**Remaining**: +- [ ] Apply number formatting throughout app +- [ ] Weight/height values with locale-specific formatting +- [ ] Activity counts and statistics with proper number separators +- [ ] Decimal formatting consistency (1,000.50 vs 1.000,50) + +**Files to Update**: +- `app/children/page.tsx` - Weight/height display +- `app/insights/page.tsx` - Statistics and counts +- `components/features/analytics/InsightsDashboard.tsx` - Chart values +- All tracking forms with numeric inputs + +--- + +### 3. Comprehensive Testing Suite +**Status**: Not Started +**Estimated Effort**: 2-4 hours +**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 14 + +**Test Coverage Needed**: +- [ ] Translation coverage test (verify no missing keys) +- [ ] Language switching test (all 7 languages) +- [ ] Unit conversion test (ml↔oz, kg↔lb, cm↔in) +- [ ] Date/time formatting test across locales +- [ ] Layout stability test (ensure no UI breaks with long translations) +- [ ] Number formatting test per locale +- [ ] Measurement unit persistence test +- [ ] Language persistence test across sessions + +**Test Files to Create**: +- `__tests__/i18n/translation-coverage.test.ts` +- `__tests__/i18n/language-switching.test.ts` +- `__tests__/utils/unit-conversion.test.ts` +- `__tests__/utils/date-formatting.test.ts` +- `__tests__/utils/number-formatting.test.ts` + +--- + +## 🟑 Medium Priority (Post-Launch) + +### 4. Dynamic HTML Lang Attribute +**Status**: Not Started +**Estimated Effort**: 30 minutes +**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 1.4 + +**Description**: Update `` attribute dynamically when language changes for better SEO and accessibility. + +**Files to Update**: +- `app/layout.tsx` - Add dynamic lang attribute based on i18n state + +**Implementation**: +```typescript +// app/layout.tsx +export default function RootLayout({ children }) { + const { i18n } = useTranslation(); + + useEffect(() => { + document.documentElement.lang = i18n.language; + }, [i18n.language]); + + // ... +} +``` + +--- + +### 5. Redux State Integration for User Preferences +**Status**: Not Started +**Estimated Effort**: 1-2 hours +**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 5.1 + +**Description**: Currently using localStorage and API calls. Should integrate with Redux for better state management. + +**Files to Update**: +- `store/slices/userSlice.ts` - Add language and measurementUnit to state + +**Implementation**: +```typescript +interface UserState { + // ... existing fields + language: string; + measurementUnit: 'metric' | 'imperial'; +} +``` + +--- + +### 6. Component Localization Review +**Status**: Partially Complete +**Estimated Effort**: 2-3 hours +**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 9.2 + +**Components Completed**: +- βœ… AppShell, MobileNav, TabBar +- βœ… LanguageSelector, MeasurementUnitSelector +- βœ… Main pages (dashboard, track, children, family, settings, ai-assistant, insights) + +**Components to Review**: +- [ ] `components/common/` - Common dialogs, buttons, alerts +- [ ] `components/features/` - Activity cards, forms +- [ ] `components/children/` - ChildDialog, DeleteConfirmDialog +- [ ] `components/family/` - Family member components +- [ ] Error boundaries and fallback UIs +- [ ] Loading states and skeletons + +--- + +## 🟒 Low Priority (Future Enhancements) + +### 7. Professional Translation Review +**Status**: All Translations Complete +**Estimated Effort**: External service, 1-2 weeks +**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 13.2 + +**Description**: All 7 languages have been machine-translated with cultural context. Native speaker review recommended before production launch. + +**Languages to Review**: +- [ ] Spanish (es-ES) - Native speaker validation +- [ ] French (fr-FR) - Native speaker validation +- [ ] Portuguese (pt-BR) - Native speaker validation +- [ ] Simplified Chinese (zh-CN) - Native speaker validation +- [ ] German (de-DE) - Native speaker validation +- [ ] Italian (it-IT) - Native speaker validation + +**Deliverables**: +- Cultural appropriateness verification +- Grammar and syntax corrections +- Parenting terminology accuracy +- Regional variations (if needed) + +--- + +### 8. Developer Documentation +**Status**: Not Started +**Estimated Effort**: 1-2 hours +**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md Phase 15 + +**Documents to Create**: +- [ ] `docs/LOCALIZATION_GUIDE.md` - How to add translations, languages, best practices +- [ ] Update `docs/implementation-gaps.md` - Mark localization as complete +- [ ] `docs/UNIT_CONVERSION_GUIDE.md` - How unit conversions work + +**Content Needed**: +```markdown +# LOCALIZATION_GUIDE.md +- How to add new translation keys +- How to add new languages +- Translation file structure +- Best practices (interpolation, pluralization) +- How to test translations + +# UNIT_CONVERSION_GUIDE.md +- Storage strategy (always metric) +- Display strategy (user preference) +- How to use UnitInput component +- How to add new unit types +``` + +--- + +### 9. Additional Language Support +**Status**: Not Started +**Estimated Effort**: 2-3 hours per language +**Related**: Future enhancement + +**Potential Languages**: +- [ ] Arabic (ar-SA) - Requires RTL support +- [ ] Hindi (hi-IN) - Large user base +- [ ] Japanese (ja-JP) - Advanced market +- [ ] Korean (ko-KR) - Advanced market +- [ ] Russian (ru-RU) - Large user base + +**Technical Requirements for RTL**: +- RTL layout support in CSS +- Mirror UI components +- Text alignment adjustments +- Icon direction handling + +--- + +### 10. Additional Unit Types +**Status**: Not Started +**Estimated Effort**: 2-3 hours +**Related**: LOCALIZATION_IMPLEMENTATION_PLAN.md - Future Enhancements + +**Unit Types to Add**: +- [ ] Temperature (Β°C / Β°F) - For fever tracking +- [ ] Time format preference (12h / 24h) +- [ ] Date format preference (MM/DD/YYYY vs DD/MM/YYYY) +- [ ] Regional variations (UK vs US imperial) + +**Implementation**: +- Update `lib/utils/unitConversion.ts` +- Update `components/forms/UnitInput.tsx` +- Add to user preferences schema +- Add to onboarding flow + +--- + +### 11. Translation Management System +**Status**: Not Started +**Estimated Effort**: 4-6 hours +**Priority**: Low (Nice to have) + +**Description**: Implement a system for managing translations outside of JSON files for easier collaboration with translators. + +**Options**: +1. **Local Tool**: Custom admin panel for translation management +2. **Third-Party**: Integration with services like Lokalise, Crowdin, or POEditor + +**Benefits**: +- Non-developers can update translations +- Translation memory and consistency +- Automatic missing key detection +- Version control for translations +- Collaboration with professional translators + +--- + +## πŸ”§ Technical Debt + +### 12. Remove Unused MobileNav Component +**Status**: Identified +**Estimated Effort**: 15 minutes +**Priority**: Low + +**Description**: `components/layouts/MobileNav/MobileNav.tsx` is no longer used since we unified the header. Consider removing or archiving. + +**Files to Update**: +- Delete or archive `components/layouts/MobileNav/MobileNav.tsx` +- Remove imports from AppShell if not already removed + +--- + +### 13. Optimize Translation Bundle Size +**Status**: Not Started +**Estimated Effort**: 2-3 hours +**Priority**: Medium + +**Description**: Currently loading all translations. Implement lazy loading per namespace and language. + +**Implementation**: +- Configure i18next backend plugin +- Load translations on demand +- Cache loaded translations +- Preload critical namespaces (common, errors) + +**Expected Impact**: +- Reduce initial bundle size by ~60-70% +- Faster initial page load +- Better performance on slow connections + +--- + +### 14. Accessibility (a11y) Audit +**Status**: Not Started +**Estimated Effort**: 3-4 hours +**Priority**: High (Pre-Launch) + +**Areas to Review**: +- [ ] Keyboard navigation throughout app +- [ ] Screen reader compatibility (ARIA labels) +- [ ] Color contrast ratios (WCAG AA compliance) +- [ ] Focus management in dialogs +- [ ] Form validation messages accessibility +- [ ] Error messages accessibility +- [ ] Language selector accessibility + +**Tools to Use**: +- axe DevTools +- WAVE browser extension +- Screen reader testing (NVDA/JAWS) + +--- + +### 15. Performance Optimization +**Status**: Not Started +**Estimated Effort**: 2-4 hours +**Priority**: Medium + +**Optimization Opportunities**: +- [ ] Implement code splitting for routes +- [ ] Lazy load heavy components (charts, analytics) +- [ ] Optimize image loading (next/image) +- [ ] Implement virtual scrolling for long lists +- [ ] Reduce re-renders with React.memo +- [ ] Optimize bundle size analysis + +**Metrics to Track**: +- First Contentful Paint (FCP) < 1.5s +- Largest Contentful Paint (LCP) < 2.5s +- Time to Interactive (TTI) < 3.5s +- Cumulative Layout Shift (CLS) < 0.1 + +--- + +## πŸ“‹ Future Features + +### 16. Offline Mode Enhancements +**Status**: Basic offline support exists +**Estimated Effort**: 6-8 hours +**Priority**: Medium + +**Enhancements Needed**: +- [ ] Better offline indicator UI +- [ ] Sync queue visualization +- [ ] Conflict resolution UI +- [ ] Offline data persistence improvements +- [ ] Background sync when connection restored + +--- + +### 17. Voice Input Multi-Language Support +**Status**: Works with backend language detection +**Estimated Effort**: 2-3 hours +**Priority**: Low + +**Enhancements Needed**: +- [ ] Language-specific voice models +- [ ] Accent/dialect support +- [ ] Voice command examples per language +- [ ] Improved transcription accuracy + +--- + +### 18. Export/Import Data +**Status**: Not Started +**Estimated Effort**: 4-6 hours +**Priority**: Medium + +**Features**: +- [ ] Export activity data (CSV, PDF) +- [ ] Export analytics reports +- [ ] GDPR data export compliance +- [ ] Import data from other baby tracking apps +- [ ] Backup/restore functionality + +--- + +### 19. Dark Mode +**Status**: Not Started +**Estimated Effort**: 3-4 hours +**Priority**: Low + +**Implementation**: +- [ ] Add dark mode toggle in settings +- [ ] Create dark theme palette +- [ ] Test all components in dark mode +- [ ] Persist preference +- [ ] System preference detection + +--- + +### 20. Push Notifications Localization +**Status**: Backend supports multi-language +**Estimated Effort**: 2-3 hours +**Priority**: Medium + +**Features**: +- [ ] Send notifications in user's preferred language +- [ ] Localized notification templates +- [ ] Time zone awareness +- [ ] Customizable notification preferences + +--- + +## πŸ“Š Progress Tracking + +**Total Tasks**: 20 +**High Priority**: 3 tasks (15%) +**Medium Priority**: 3 tasks (15%) +**Low Priority**: 14 tasks (70%) + +**Estimated Total Effort**: 40-60 hours (1-1.5 weeks) + +--- + +## 🎯 Recommended Implementation Order + +### Sprint 1 (Pre-Launch - Critical) +1. Date/Time Localization Refinement (1-2h) +2. Number Formatting Consistency (1-2h) +3. Comprehensive Testing Suite (2-4h) +4. Accessibility Audit (3-4h) + +**Total**: 7-12 hours + +### Sprint 2 (Post-Launch - Week 1) +5. Dynamic HTML Lang Attribute (30m) +6. Component Localization Review (2-3h) +7. Performance Optimization (2-4h) +8. Developer Documentation (1-2h) + +**Total**: 6-10 hours + +### Sprint 3 (Post-Launch - Week 2) +9. Redux State Integration (1-2h) +10. Professional Translation Review (External) +11. Optimize Translation Bundle Size (2-3h) +12. Remove Unused Components (15m) + +**Total**: 3-5 hours + +### Future Sprints +13-20. Feature enhancements and nice-to-haves + +--- + +## πŸ“ Notes + +- This backlog should be reviewed and updated monthly +- Priority levels may change based on user feedback +- Effort estimates are rough and may vary +- Consider user feedback for prioritization +- Some tasks may become obsolete with new requirements + +--- + +**Document Owner**: Development Team +**Review Frequency**: Monthly +**Next Review**: November 3, 2025 diff --git a/docs/maternal-app-ui-improvements.md b/docs/maternal-app-ui-improvements.md deleted file mode 100644 index 6f72726..0000000 --- a/docs/maternal-app-ui-improvements.md +++ /dev/null @@ -1,882 +0,0 @@ -# Maternal App - UI Consistency & Alignment Guide - -## Overview -This document provides comprehensive instructions for fixing UI/UX inconsistencies across the Maternal app. The main dashboard screen serves as the design reference for all other screens. - -## Reference Design Pattern (Main Dashboard) -The main dashboard successfully implements: -- **6 symmetric action cards** with consistent spacing -- **Soft rounded corners** (borderRadius: 16-20px) -- **Consistent color palette** with meaningful color associations -- **Clear visual hierarchy** with proper typography scaling -- **Adequate whitespace** between sections -- **Mobile-first responsive design** - -## Global Design Tokens to Apply - -### Spacing System -```javascript -const spacing = { - xs: 8, // 0.5rem - sm: 12, // 0.75rem - md: 16, // 1rem (base unit) - lg: 24, // 1.5rem - xl: 32, // 2rem - xxl: 48, // 3rem - xxxl: 64 // 4rem -} -``` - -### Color Palette -```javascript -const colors = { - primary: { - main: '#EC407A', // Pink (Feeding) - light: '#FFB3C1', - dark: '#C2185B' - }, - secondary: { - sleep: '#2196F3', // Blue - diaper: '#FF9800', // Orange - medicine: '#F44336', // Red - activities: '#66BB6A', // Green - assistant: '#FF7043' // Deep Orange - }, - background: { - default: '#FFF5F7', // Light pink background - paper: '#FFFFFF', - card: '#FFF0F3' // Slightly pink card background - }, - text: { - primary: '#2D3436', - secondary: '#636E72', - disabled: '#B2BEC3' - } -} -``` - -### Typography Scale -```javascript -const typography = { - h1: { fontSize: '2rem', fontWeight: 600, lineHeight: 1.2 }, - h2: { fontSize: '1.5rem', fontWeight: 600, lineHeight: 1.3 }, - h3: { fontSize: '1.25rem', fontWeight: 500, lineHeight: 1.4 }, - body1: { fontSize: '1rem', fontWeight: 400, lineHeight: 1.5 }, - body2: { fontSize: '0.875rem', fontWeight: 400, lineHeight: 1.5 }, - caption: { fontSize: '0.75rem', fontWeight: 400, lineHeight: 1.4 } -} -``` - -## Screen-Specific Fixes - -### 1. Track Activity Screen (`/track`) - -**Current Issues:** -- Icons and labels not properly centered -- Inconsistent spacing between activity options -- No visual feedback on hover/press - -**Required Fixes:** -```javascript -// Container structure - - - Track Activity - - - Select an activity to track - - - - {activities.map(activity => ( - - - {activity.icon} - - {activity.label} - - - - ))} - - -``` - -### 2. AI Assistant Screen (`/ai-assistant`) - -**Current Issues:** -- Chat history sidebar has poor alignment -- Suggested questions buttons inconsistent -- Input field not properly styled -- No proper container padding - -**Required Fixes:** -```javascript -// Main layout structure - - {/* Sidebar */} - - - Chat History - - - {/* Chat list items */} - - {chats.map(chat => ( - - - - ))} - - - - - {/* Main content */} - - {/* Header */} - - - - - - - AI Parenting Assistant - - Ask me anything about parenting and childcare - - - - - - {/* Chat area */} - - {/* Welcome message */} - - - Hi Andrei! How can I help you today? - - - {/* Suggested questions */} - - {suggestions.map(suggestion => ( - - {}} - sx={{ - width: '100%', - py: 2, - borderRadius: 2, - fontSize: '0.875rem', - bgcolor: 'background.paper', - border: 1, - borderColor: 'divider', - '&:hover': { - bgcolor: 'primary.light', - borderColor: 'primary.main' - } - }} - /> - - ))} - - - - - {/* Input area */} - - - - - - ) - }} - /> - - This AI assistant provides general information. Always consult healthcare professionals for medical advice. - - - - - -``` - -### 3. Insights & Analytics Screen (`/insights`) - -**Current Issues:** -- Time period tabs not properly styled -- Stats cards have inconsistent heights -- Charts not properly aligned -- Legend placement issues - -**Required Fixes:** -```javascript -// Container and layout - - Insights & Analytics - - Track patterns and get insights about your child's activities - - - {/* Time period selector */} - - - - - - - {/* Stats cards */} - - {stats.map(stat => ( - - - {stat.icon} - {stat.value} - - {stat.label} - - - - ))} - - - {/* Charts grid */} - - {charts.map(chart => ( - - - - {chart.icon} {chart.title} - - - {/* Chart component here */} - - - - ))} - - -``` - -### 4. Children Management Screen (`/children`) - -**Current Issues:** -- Child card not properly structured -- Age text alignment issues -- Action buttons placement - -**Required Fixes:** -```javascript - - - - Children - - Manage your family's children profiles - - - - - - - {children.map(child => ( - - - - - {child.name[0]} - - - {child.name} - - {child.gender} - - - - {child.birthDate} - - - Age: {child.age} - - - - - - - - - - - - - - - - - - ))} - - -``` - -### 5. Family Management Screen (`/family`) - -**Current Issues:** -- Share code styling inconsistent -- Member list alignment -- Proper spacing between sections - -**Required Fixes:** -```javascript - - - - Family - - Manage your family members and share access - - - - - - - - - - - - Family Share Code - - Share this code with family members to give them access to your family's data - - - - - - - - - - - - Family Members ({members.length}) - - - {members.map(member => ( - - - - {member.name[0]} - - - - - - ))} - - - - - -``` - -## Mobile-First Responsive Guidelines - -### Breakpoint System -```javascript -const breakpoints = { - xs: 0, // Mobile phones - sm: 600, // Small tablets - md: 900, // Tablets - lg: 1200, // Desktop - xl: 1536 // Large screens -} -``` - -### Mobile-Specific Rules -1. **Touch targets**: Minimum 48x48px for all interactive elements -2. **Padding**: Use `px: { xs: 2, sm: 3 }` for container padding -3. **Font sizes**: Scale down by 10-15% on mobile -4. **Grid columns**: Use `xs={12}` for single column on mobile, `sm={6}` for two columns on tablets -5. **Navigation**: Hide sidebar on mobile, use bottom navigation or hamburger menu -6. **Modals**: Full screen on mobile, centered dialog on desktop - -### Component Responsiveness -```javascript -// Responsive spacing -sx={{ - p: { xs: 2, sm: 3, md: 4 }, - m: { xs: 1, sm: 2, md: 3 } -}} - -// Responsive typography -sx={{ - fontSize: { xs: '1rem', sm: '1.125rem', md: '1.25rem' } -}} - -// Responsive grid - - -``` - -## Common MUI Theme Overrides -```javascript -const theme = createTheme({ - palette: { - primary: { main: '#EC407A' }, - background: { - default: '#FFF5F7', - paper: '#FFFFFF' - } - }, - shape: { - borderRadius: 12 - }, - components: { - MuiButton: { - styleOverrides: { - root: { - borderRadius: 12, - textTransform: 'none', - fontWeight: 500, - padding: '10px 24px' - } - } - }, - MuiPaper: { - styleOverrides: { - root: { - borderRadius: 16, - boxShadow: 'none', - border: '1px solid rgba(0,0,0,0.08)' - } - } - }, - MuiTextField: { - styleOverrides: { - root: { - '& .MuiOutlinedInput-root': { - borderRadius: 12 - } - } - } - } - } -}); -``` - -## Implementation Checklist -- [ ] Apply consistent spacing using the defined spacing system -- [ ] Update all color values to use the defined palette -- [ ] Ensure all interactive elements have proper hover/active states -- [ ] Add proper transitions (0.2s ease) for all interactive elements -- [ ] Verify mobile responsiveness for all screens -- [ ] Test touch target sizes on mobile (minimum 48x48px) -- [ ] Ensure consistent border radius (12-16px for cards, 8-12px for buttons) -- [ ] Add proper loading states for async operations -- [ ] Implement consistent error messaging styles -- [ ] Verify text hierarchy and readability on all screen sizes - -## Testing Requirements -1. Test on iPhone SE (375px width) for minimum mobile size -2. Test on iPad (768px width) for tablet view -3. Test on desktop (1920px width) for full experience -4. Verify touch interactions on actual mobile devices -5. Check color contrast ratios for accessibility (WCAG AA compliance) -6. Test with both light and dark system preferences - -## Critical Accessibility Fixes (Console Errors) - -### 1. Color Contrast Issues (WCAG AA Compliance) - -**Problem**: Elements don't meet minimum color contrast ratio thresholds (4.5:1 for normal text, 3:1 for large text) - -**Fix for the color palette**: -```javascript -const colors = { - primary: { - main: '#D81B60', // Darker pink for better contrast (was #EC407A) - light: '#FFB3C1', - dark: '#AD1457' // Even darker for text on light backgrounds - }, - secondary: { - sleep: '#1976D2', // Darker blue (was #2196F3) - diaper: '#F57C00', // Darker orange (was #FF9800) - medicine: '#D32F2F', // Darker red (was #F44336) - activities: '#388E3C', // Darker green (was #66BB6A) - assistant: '#E64A19' // Darker deep orange (was #FF7043) - }, - background: { - default: '#FFF5F7', - paper: '#FFFFFF', - card: '#FFF0F3' - }, - text: { - primary: 'rgba(0, 0, 0, 0.87)', // Higher opacity for better contrast - secondary: 'rgba(0, 0, 0, 0.6)', // Darker secondary text - disabled: 'rgba(0, 0, 0, 0.38)' - } -} -``` - -**Fix for MUI TextField labels**: -```javascript -// Global theme override for input labels -const theme = createTheme({ - components: { - MuiInputLabel: { - styleOverrides: { - root: { - color: 'rgba(0, 0, 0, 0.87)', // Darker label color - '&.Mui-focused': { - color: '#AD1457' // Dark pink when focused - }, - '&.MuiFormLabel-filled': { - color: 'rgba(0, 0, 0, 0.87)' // Ensure filled state has good contrast - } - } - } - }, - MuiOutlinedInput: { - styleOverrides: { - root: { - '& .MuiOutlinedInput-notchedOutline': { - borderColor: 'rgba(0, 0, 0, 0.38)' // Darker border - }, - '&:hover .MuiOutlinedInput-notchedOutline': { - borderColor: 'rgba(0, 0, 0, 0.87)' - }, - '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: '#AD1457' - } - } - } - }, - MuiButton: { - styleOverrides: { - containedPrimary: { - backgroundColor: '#D81B60', - '&:hover': { - backgroundColor: '#AD1457' - } - } - } - } - } -}); -``` - -### 2. Viewport Meta Tag Issue - -**Problem**: Zooming and scaling must not be disabled (critical accessibility issue) - -**Fix for viewport meta tag**: -```html - - - - - - -``` - -**For Next.js apps**: -```javascript -// In pages/_document.js or app/layout.js - - - -``` - -### 3. Additional Accessibility Enhancements - -**Form Input Enhancements**: -```javascript - -``` - -**Button Accessibility**: -```javascript - -``` - -**Focus Indicators**: -```javascript -// Global focus styles -const theme = createTheme({ - components: { - MuiButtonBase: { - styleOverrides: { - root: { - '&:focus-visible': { - outline: '2px solid #AD1457', - outlineOffset: '2px' - } - } - } - } - } -}); -``` - -### 4. Testing for Accessibility - -**Use these tools to verify fixes**: -1. **axe DevTools**: Browser extension for accessibility testing -2. **Chrome DevTools Lighthouse**: Run accessibility audit -3. **WAVE**: WebAIM's accessibility evaluation tool -4. **Contrast Checker**: Use WebAIM's contrast checker to verify color combinations - -**Minimum contrast ratios to maintain**: -- Normal text: 4.5:1 -- Large text (18pt or 14pt bold): 3:1 -- UI components and graphics: 3:1 - -**Quick contrast check for main colors**: -```javascript -// Verified color combinations with good contrast -const safeColorCombos = { - // Text on backgrounds - darkTextOnLight: '#000000 on #FFF5F7', // 20.3:1 βœ“ - primaryTextOnWhite: '#D81B60 on #FFFFFF', // 4.7:1 βœ“ - whiteOnPrimary: '#FFFFFF on #D81B60', // 4.7:1 βœ“ - - // Labels and secondary text - labelOnWhite: 'rgba(0,0,0,0.87) on #FFFFFF', // 16:1 βœ“ - secondaryTextOnWhite: 'rgba(0,0,0,0.6) on #FFFFFF', // 7.4:1 βœ“ -} -``` - -## Additional Notes -- Maintain the soft, nurturing aesthetic with accessible color choices -- Keep interactions smooth and delightful with subtle animations -- Prioritize clarity and ease of use for sleep-deprived parents -- Ensure all text is easily readable at a glance -- Use icons consistently from the same icon library (Material Icons) -- Maintain visual hierarchy with proper use of whitespace -- Always test with screen readers and keyboard navigation \ No newline at end of file