andrei/maternal-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement WCAG 2.1 AA accessibility foundation (Phase 1)

Browse Source 
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>
This commit is contained in:
Andrei
2025-10-02 21:35:45 +00:00
parent 9772ed3349
commit 29960e7d24
30 changed files with 3377 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
maternal-web/components/auth/MFAVerificationDialog.tsx
View File

@@ -107,29 +107,36 @@ export function MFAVerificationDialog({
};
return (
<Dialog open={open} onClose={handleCancel} maxWidth="sm" fullWidth>
<DialogTitle>
<Dialog
open={open}
onClose={handleCancel}
maxWidth="sm"
fullWidth
aria-labelledby="mfa-dialog-title"
aria-describedby="mfa-dialog-description"
>
<DialogTitle id="mfa-dialog-title">
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Security color="primary" />
<Security color="primary" aria-hidden="true" />
<Typography variant="h6">Two-Factor Authentication</Typography>
</Box>
</DialogTitle>
<DialogContent>
{mfaMethod === 'totp' ? (
<>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }} id="mfa-dialog-description">
Enter the 6-digit code from your authenticator app to continue.
</Typography>
</>
) : (
<>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }} id="mfa-dialog-description">
{codeSent
? 'A 6-digit verification code has been sent to your email.'
: 'Sending verification code to your email...'}
</Typography>
{isSendingCode && (
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }} role="status" aria-label="Sending verification code">
<CircularProgress size={24} />
</Box>
)}
@@ -137,7 +144,7 @@ export function MFAVerificationDialog({
)}
{error && (
<Alert severity="error" sx={{ mb: 3 }}>
<Alert severity="error" sx={{ mb: 3 }} role="alert">
{error}
</Alert>
)}
@@ -153,6 +160,7 @@ export function MFAVerificationDialog({
disabled={isVerifying || isSendingCode}
autoFocus
inputProps={{
'aria-label': 'Six digit verification code',
style: { textAlign: 'center', fontSize: '1.5rem', letterSpacing: '0.5rem' },
maxLength: 6,
}}

18
maternal-web/components/children/ChildDialog.tsx
View File

@@ -87,12 +87,22 @@ export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false
};
return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle>{child ? 'Edit Child' : 'Add Child'}</DialogTitle>
<Dialog
open={open}
onClose={onClose}
maxWidth="sm"
fullWidth
aria-labelledby="child-dialog-title"
aria-describedby="child-dialog-description"
>
<DialogTitle id="child-dialog-title">{child ? 'Edit Child' : 'Add Child'}</DialogTitle>
<DialogContent>
<Box sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
<Box
id="child-dialog-description"
sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}
>
{error && (
<Alert severity="error" onClose={() => setError('')}>
<Alert severity="error" onClose={() => setError('')} role="alert">
{error}
</Alert>
)}

16
maternal-web/components/children/DeleteConfirmDialog.tsx
View File

@@ -26,13 +26,21 @@ export function DeleteConfirmDialog({
isLoading = false,
}: DeleteConfirmDialogProps) {
return (
<Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
<DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Warning color="warning" />
<Dialog
open={open}
onClose={onClose}
maxWidth="xs"
fullWidth
aria-labelledby="delete-dialog-title"
aria-describedby="delete-dialog-description"
role="alertdialog"
>
<DialogTitle id="delete-dialog-title" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Warning color="warning" aria-hidden="true" />
Confirm Delete
</DialogTitle>
<DialogContent>
<Typography variant="body1">
<Typography variant="body1" id="delete-dialog-description">
Are you sure you want to delete <strong>{childName}</strong>?
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>

8
maternal-web/components/common/EmailVerificationBanner.tsx
View File

@@ -85,11 +85,11 @@ export const EmailVerificationBanner: React.FC = () => {
borderRadius: 2,
textTransform: 'none',
fontWeight: 600,
borderColor: 'warning.main',
color: 'warning.dark',
borderColor: '#D97706',
color: '#92400E',
'&:hover': {
borderColor: 'warning.dark',
bgcolor: 'warning.light',
borderColor: '#92400E',
bgcolor: '#FEF3C7',
},
}}
>

36
maternal-web/components/common/SkipNavigation.tsx Normal file
View File

@@ -0,0 +1,36 @@
'use client';
import React from 'react';
/**
* SkipNavigation Component
*
* Provides a "Skip to main content" link for keyboard users,
* allowing them to bypass repetitive navigation and jump directly to the main content.
*
* This is a WCAG 2.1 Level A requirement (2.4.1 Bypass Blocks).
*
* The link is visually hidden until it receives keyboard focus,
* at which point it appears at the top of the page.
*/
export function SkipNavigation() {
const handleSkip = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
const mainContent = document.getElementById('main-content');
if (mainContent) {
mainContent.focus();
mainContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
};
return (
<a
href="#main-content"
className="skip-link"
onClick={handleSkip}
aria-label="Skip to main content"
>
Skip to main content
</a>
);
}

18
maternal-web/components/family/InviteMemberDialog.tsx
View File

@@ -74,12 +74,22 @@ export function InviteMemberDialog({
};
return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle>Invite Family Member</DialogTitle>
<Dialog
open={open}
onClose={onClose}
maxWidth="sm"
fullWidth
aria-labelledby="invite-dialog-title"
aria-describedby="invite-dialog-description"
>
<DialogTitle id="invite-dialog-title">Invite Family Member</DialogTitle>
<DialogContent>
<Box sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
<Box
id="invite-dialog-description"
sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}
>
{error && (
<Alert severity="error" onClose={() => setError('')}>
<Alert severity="error" onClose={() => setError('')} role="alert">
{error}
</Alert>
)}

15
maternal-web/components/family/JoinFamilyDialog.tsx
View File

@@ -55,17 +55,24 @@ export function JoinFamilyDialog({
};
return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle>Join a Family</DialogTitle>
<Dialog
open={open}
onClose={onClose}
maxWidth="sm"
fullWidth
aria-labelledby="join-family-dialog-title"
aria-describedby="join-family-dialog-description"
>
<DialogTitle id="join-family-dialog-title">Join a Family</DialogTitle>
<DialogContent>
<Box sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
{error && (
<Alert severity="error" onClose={() => setError('')}>
<Alert severity="error" onClose={() => setError('')} role="alert">
{error}
</Alert>
)}
<Typography variant="body2" color="text.secondary">
<Typography variant="body2" color="text.secondary" id="join-family-dialog-description">
Enter the share code provided by the family administrator to join their family.
</Typography>

16
maternal-web/components/family/RemoveMemberDialog.tsx
View File

@@ -26,13 +26,21 @@ export function RemoveMemberDialog({
isLoading = false,
}: RemoveMemberDialogProps) {
return (
<Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
<DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Warning color="warning" />
<Dialog
open={open}
onClose={onClose}
maxWidth="xs"
fullWidth
aria-labelledby="remove-member-dialog-title"
aria-describedby="remove-member-dialog-description"
role="alertdialog"
>
<DialogTitle id="remove-member-dialog-title" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Warning color="warning" aria-hidden="true" />
Remove Family Member
</DialogTitle>
<DialogContent>
<Typography variant="body1">
<Typography variant="body1" id="remove-member-dialog-description">
Are you sure you want to remove <strong>{memberName}</strong> from your family?
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>

10
maternal-web/components/layouts/MobileNav/MobileNav.tsx
View File

@@ -50,8 +50,8 @@ export const MobileNav = () => {
return (
<>
<AppBar position="static" elevation={1} sx={{ bgcolor: 'background.paper' }}>
<Toolbar>
<AppBar position="static" elevation={1} sx={{ bgcolor: 'background.paper' }} component="header">
<Toolbar component="nav" aria-label="Primary navigation">
<IconButton
edge="start"
color="primary"
@@ -60,7 +60,7 @@ export const MobileNav = () => {
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1, color: 'primary.main', fontWeight: 600 }}>
<Typography variant="h6" component="div" sx={{ flexGrow: 1, color: '#DB7093', fontWeight: 600 }}>
Maternal
</Typography>
<IconButton
@@ -79,10 +79,12 @@ export const MobileNav = () => {
anchor="left"
open={drawerOpen}
onClose={() => setDrawerOpen(false)}
aria-label="Mobile navigation menu"
>
<Box
sx={{ width: 280 }}
role="presentation"
role="navigation"
aria-label="Main menu"
>
<Box sx={{ p: 3, bgcolor: 'primary.light' }}>
<Avatar sx={{ width: 64, height: 64, bgcolor: 'primary.main', mb: 2 }}>U</Avatar>

2
maternal-web/components/layouts/TabBar/TabBar.tsx
View File

@@ -24,6 +24,8 @@ export const TabBar = () => {
return (
<Paper
component="nav"
aria-label="Primary navigation"
sx={{
position: 'fixed',
bottom: 0,

50
maternal-web/components/providers/AxeProvider.tsx Normal file
View File

@@ -0,0 +1,50 @@
'use client';
import React, { useEffect } from 'react';
/**
* AxeProvider - Development-time accessibility testing
*
* Integrates axe-core to automatically test for accessibility violations
* during development. Violations are logged to the browser console.
*
* Only runs in development mode to avoid performance impact in production.
*/
export function AxeProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
if (process.env.NODE_ENV === 'development') {
import('@axe-core/react').then((axe) => {
const React = require('react');
const ReactDOM = require('react-dom');
axe.default(React, ReactDOM, 1000, {
// Configuration options
rules: [
{
id: 'color-contrast',
enabled: true,
},
{
id: 'label',
enabled: true,
},
{
id: 'button-name',
enabled: true,
},
{
id: 'link-name',
enabled: true,
},
],
});
console.log('🔍 Axe accessibility testing enabled in development mode');
}).catch((error) => {
console.warn('Failed to load @axe-core/react:', error);
});
}
}, []);
return <>{children}</>;
}

18
maternal-web/components/providers/FocusManagementProvider.tsx Normal file
View File

@@ -0,0 +1,18 @@
'use client';
import { useFocusOnRouteChange } from '@/hooks/useFocusManagement';
/**
* Focus Management Provider
*
* Integrates focus management hooks into the application
* - Manages focus on route changes
* - Announces navigation to screen readers
* - Improves keyboard navigation experience
*/
export function FocusManagementProvider({ children }: { children: React.ReactNode }) {
// Manage focus on route changes
useFocusOnRouteChange();
return <>{children}</>;
}

45
maternal-web/components/voice/VoiceFloatingButton.tsx
View File

@@ -342,8 +342,15 @@ export function VoiceFloatingButton() {
</Tooltip>
{/* Voice input dialog */}
<Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
<DialogTitle>
<Dialog
open={open}
onClose={handleClose}
maxWidth="sm"
fullWidth
aria-labelledby="voice-dialog-title"
aria-describedby="voice-dialog-status"
>
<DialogTitle id="voice-dialog-title">
Voice Command
{classificationResult && !classificationResult.error && (
<Chip
@@ -351,6 +358,7 @@ export function VoiceFloatingButton() {
color="success"
size="small"
sx={{ ml: 2 }}
aria-label={`Detected activity: ${classificationResult.type || classificationResult.intent}, confidence ${classificationResult.confidenceLevel || Math.round((classificationResult.confidence || 0) * 100) + ' percent'}`}
/>
)}
</DialogTitle>
@@ -362,6 +370,8 @@ export function VoiceFloatingButton() {
<IconButton
color={isListening ? 'error' : 'primary'}
onClick={isListening ? handleStopListening : handleStartListening}
aria-label={isListening ? 'Stop listening' : 'Start listening'}
aria-pressed={isListening}
sx={{
width: 80,
height: 80,
@@ -377,12 +387,12 @@ export function VoiceFloatingButton() {
},
}}
>
{isListening ? <MicIcon sx={{ fontSize: 48 }} /> : <MicOffIcon sx={{ fontSize: 48 }} />}
{isListening ? <MicIcon sx={{ fontSize: 48 }} aria-hidden="true" /> : <MicOffIcon sx={{ fontSize: 48 }} aria-hidden="true" />}
</IconButton>
</Box>
{/* Status text with detailed processing stages */}
<Typography variant="body1" color="text.secondary" gutterBottom>
<Typography variant="body1" color="text.secondary" gutterBottom id="voice-dialog-status" role="status" aria-live="polite">
{processingStatus === 'listening' && 'Listening... Speak now'}
{processingStatus === 'understanding' && 'Understanding your request...'}
{processingStatus === 'saving' && identifiedActivity && `Adding to ${identifiedActivity.charAt(0).toUpperCase() + identifiedActivity.slice(1)} tracker...`}
@@ -401,8 +411,8 @@ export function VoiceFloatingButton() {
{/* Processing indicator with status */}
{processingStatus && (
<Box sx={{ mt: 2, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<CircularProgress size={20} sx={{ mr: 1 }} />
<Box sx={{ mt: 2, display: 'flex', alignItems: 'center', justifyContent: 'center' }} role="status" aria-live="polite">
<CircularProgress size={20} sx={{ mr: 1 }} aria-hidden="true" />
<Typography variant="body2" color="text.secondary">
{processingStatus === 'listening' && 'Listening...'}
{processingStatus === 'understanding' && 'Understanding...'}
@@ -413,7 +423,7 @@ export function VoiceFloatingButton() {
{/* Classification result */}
{classificationResult && !classificationResult.error && (
<Alert severity="success" sx={{ mt: 2 }}>
<Alert severity="success" sx={{ mt: 2 }} role="status">
<Typography variant="body2" gutterBottom>
<strong>Understood:</strong> {classificationResult.type || classificationResult.intent}
</Typography>
@@ -422,7 +432,7 @@ export function VoiceFloatingButton() {
{/* Error messages */}
{(error || (classificationResult && classificationResult.error)) && (
<Alert severity="error" sx={{ mt: 2 }}>
<Alert severity="error" sx={{ mt: 2 }} role="alert">
{error || classificationResult.message}
</Alert>
)}
@@ -466,10 +476,17 @@ export function VoiceFloatingButton() {
)}
{/* Unknown Intent Dialog */}
<Dialog open={showUnknownDialog} onClose={() => setShowUnknownDialog(false)} maxWidth="sm" fullWidth>
<DialogTitle>Could Not Understand Command</DialogTitle>
<Dialog
open={showUnknownDialog}
onClose={() => setShowUnknownDialog(false)}
maxWidth="sm"
fullWidth
aria-labelledby="unknown-command-dialog-title"
aria-describedby="unknown-command-dialog-description"
>
<DialogTitle id="unknown-command-dialog-title">Could Not Understand Command</DialogTitle>
<DialogContent>
<Box sx={{ mb: 3 }}>
<Box sx={{ mb: 3 }} id="unknown-command-dialog-description">
<Typography variant="body2" color="text.secondary" gutterBottom>
You said: "{transcript}"
</Typography>
@@ -479,11 +496,15 @@ export function VoiceFloatingButton() {
</Box>
<FormControl fullWidth sx={{ mt: 2 }}>
<InputLabel>Activity Type</InputLabel>
<InputLabel id="activity-type-label">Activity Type</InputLabel>
<Select
value={manualTrackingType}
onChange={(e) => setManualTrackingType(e.target.value)}
label="Activity Type"
labelId="activity-type-label"
inputProps={{
'aria-label': 'Select activity type for manual tracking',
}}
>
<MenuItem value="feeding">Feeding</MenuItem>
<MenuItem value="sleep">Sleep</MenuItem>