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>
66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import { BottomNavigation, BottomNavigationAction, Paper } from '@mui/material';
|
|
import {
|
|
Home,
|
|
Timeline,
|
|
Chat,
|
|
Insights,
|
|
Settings,
|
|
} from '@mui/icons-material';
|
|
|
|
export const TabBar = () => {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const tabs = [
|
|
{ label: 'Home', icon: <Home />, value: '/' },
|
|
{ label: 'Track', icon: <Timeline />, value: '/track' },
|
|
{ label: 'AI Chat', icon: <Chat />, value: '/ai-assistant' },
|
|
{ label: 'Insights', icon: <Insights />, value: '/insights' },
|
|
{ label: 'Settings', icon: <Settings />, value: '/settings' },
|
|
];
|
|
|
|
return (
|
|
<Paper
|
|
component="nav"
|
|
aria-label="Primary navigation"
|
|
sx={{
|
|
position: 'fixed',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
zIndex: 1000,
|
|
}}
|
|
elevation={3}
|
|
>
|
|
<BottomNavigation
|
|
value={pathname}
|
|
onChange={(event, newValue) => {
|
|
router.push(newValue);
|
|
}}
|
|
showLabels
|
|
sx={{
|
|
height: 64,
|
|
'& .MuiBottomNavigationAction-root': {
|
|
minWidth: 60,
|
|
'&.Mui-selected': {
|
|
color: 'primary.main',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
{tabs.map((tab) => (
|
|
<BottomNavigationAction
|
|
key={tab.value}
|
|
label={tab.label}
|
|
icon={tab.icon}
|
|
value={tab.value}
|
|
/>
|
|
))}
|
|
</BottomNavigation>
|
|
</Paper>
|
|
);
|
|
};
|