Implemented comprehensive form accessibility improvements across all critical forms:
**Accessibility Attributes Added:**
- aria-required="true" on all required form fields
- aria-invalid on fields with validation errors
- aria-describedby linking error messages to inputs
- Unique id attributes on FormHelperText for error association
- role="alert" on error messages for screen reader announcements
- labelId on Select components for proper label association
- noValidate on forms to use custom validation
**Forms Updated:**
1. Login Form (app/(auth)/login/page.tsx)
- Email and password fields with full ARIA support
- Error message association with aria-describedby
2. Registration Form (app/(auth)/register/page.tsx)
- All text fields: name, email, password, DOB, parental email
- Checkbox fields: Terms, Privacy, COPPA consent
- Conditional required fields for minors
3. Child Dialog (components/children/ChildDialog.tsx)
- Name, birthdate, gender fields
- Dynamic aria-invalid based on validation state
4. Tracking Forms:
- Feeding form (app/track/feeding/page.tsx)
- Child selector, side selector, bottle type
- Food description with required validation
- Sleep form (app/track/sleep/page.tsx)
- Child selector, start/end time fields
- Quality and location selectors
**WCAG 2.1 Compliance:**
- ✅ 3.3.2 Labels or Instructions (AA)
- ✅ 4.1.3 Status Messages (AA)
- ✅ 1.3.1 Info and Relationships (A)
- ✅ 3.3.1 Error Identification (A)
**Documentation:**
- Updated REMAINING_FEATURES.md
- Marked Form Accessibility Enhancement as complete
- Status: 79 features completed (57%)
🎉 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add LOGIN_BIOMETRIC to AuditAction enum
- Import AuditAction and EntityType in AuthService
- Fix loginWithExternalAuth return type to match AuthResponse interface
- Update biometric API client to use correct response structure
- Update login page to access tokens from nested data structure
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add biometric authentication button with Face ID/Touch ID/Windows Hello support
- Check WebAuthn support and platform authenticator availability on mount
- Handle biometric login flow with proper error handling
- Show biometric button only when device supports it
- Add loading states and user-friendly error messages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements MFA verification dialog for login flow:
MFA Verification Features:
- MFAVerificationDialog component for code entry
- TOTP code input (6-digit authenticator app code)
- Email code input with auto-send on dialog open
- Backup code support mentioned in help text
- Resend email code functionality
- Auto-focus on code input field
- Large, centered code input for easy entry
- Real-time validation (6-digit code required)
Login Flow Integration:
- Detect MFA requirement from login API error
- Show MFA dialog when MFA is enabled for user
- Handle MFA verification success with token storage
- Allow cancellation to retry login
- Seamless transition after successful verification
User Experience:
- Email codes sent automatically
- Visual feedback for code sending/verification
- Error alerts for invalid codes
- Loading states for all async operations
- Clean, focused dialog design
- Tip about backup codes
Implementation Details:
- Integrated with existing login page
- Error handling for MFA-required responses
- Token storage after MFA verification
- Navigation after successful MFA
- Support for both TOTP and Email MFA methods
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
