andrei/maternal-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
195 Commits 2 Branches 1 Tag
27476300139f2b8e07e43c948905549cffa5944d
Commit Graph

2 Commits

Author SHA1 Message Date
Andrei
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
Andrei
48f45f1b04 Add MFA Verification UI during login 
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>
 2025-10-01 21:09:42 +00:00