Add calendar keyboard navigation (P4.2 complete)
All checks were successful
Deploy / deploy (push) Successful in 2m26s

Implement keyboard navigation for MonthView calendar:
- ArrowLeft/Right: navigate to previous/next day
- ArrowUp/Down: navigate to previous/next week (7 days)
- Home/End: navigate to first/last day of month
- Boundary navigation triggers month change

Features:
- Added role="grid" for proper ARIA semantics
- Added data-day attribute to DayCell for focus management
- Wrapped navigation handlers in useCallback for stability

Tests: 9 new tests for keyboard navigation (790 total)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-11 21:55:18 +00:00
parent 649fa29df2
commit 4015f1ba3a
4 changed files with 242 additions and 18 deletions

View File

@@ -4,7 +4,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta
## Current State Summary
### Overall Status: 781 tests passing across 43 test files
### Overall Status: 790 tests passing across 43 test files
### Library Implementation
| File | Status | Gap Analysis |
@@ -73,7 +73,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta
| `DayCell` | **COMPLETE** | Phase-colored day with click handler |
| `MiniCalendar` | **COMPLETE** | Compact calendar widget with phase colors, navigation, legend (23 tests) |
| `OnboardingBanner` | **COMPLETE** | Setup prompts for new users with icons and action buttons, 16 tests |
| `MonthView` | **COMPLETE** | Calendar grid with DayCell integration, navigation controls, phase legend |
| `MonthView` | **COMPLETE** | Calendar grid with DayCell integration, navigation controls, phase legend, keyboard navigation |
### Test Coverage
| Test File | Status |
@@ -107,7 +107,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta
| `src/app/api/health/route.test.ts` | **EXISTS** - 14 tests (healthy/unhealthy states, PocketBase connectivity, error handling) |
| `src/app/history/page.test.tsx` | **EXISTS** - 26 tests (rendering, data loading, pagination, date filtering, styling) |
| `src/app/api/metrics/route.test.ts` | **EXISTS** - 15 tests (Prometheus format validation, metric types, route handling) |
| `src/components/calendar/month-view.test.tsx` | **EXISTS** - 21 tests (calendar grid, phase colors, navigation, legend) |
| `src/components/calendar/month-view.test.tsx` | **EXISTS** - 30 tests (calendar grid, phase colors, navigation, legend, keyboard navigation) |
| `src/app/calendar/page.test.tsx` | **EXISTS** - 23 tests (rendering, navigation, ICS subscription, token regeneration) |
| `src/app/settings/page.test.tsx` | **EXISTS** - 29 tests (form rendering, validation, submission, accessibility) |
| `src/app/settings/garmin/page.test.tsx` | **EXISTS** - 27 tests (connection status, token management) |
@@ -727,17 +727,17 @@ Enhancements from spec requirements that improve user experience.
- `src/components/dashboard/onboarding-banner.test.tsx` - 16 tests covering rendering, interactions, dismissal
- **Why:** Helps new users complete setup for full functionality
### P4.2: Accessibility Improvements (PARTIAL COMPLETE)
### P4.2: Accessibility Improvements COMPLETE
- [x] Skip navigation link
- [x] Semantic HTML landmarks (main elements)
- [x] Screen reader labels for calendar buttons
- [ ] Keyboard navigation for calendar
- [x] Keyboard navigation for calendar
- **Spec Reference:** specs/dashboard.md accessibility requirements
- **Implementation Details:**
- Skip navigation link added to layout with sr-only styling
- Semantic HTML landmarks (main element) added to login and settings pages
- Aria-labels added to DayCell calendar buttons with date and phase information
- Tests added: layout.test.tsx (3 tests), accessibility tests in login/settings page tests
- Keyboard navigation: ArrowLeft/Right for prev/next day, ArrowUp/Down for prev/next week, Home/End for first/last day, boundary navigation triggers month change
- **Files:**
- `src/app/layout.tsx` - Added skip navigation link with sr-only styling
- `src/app/layout.test.tsx` - 3 tests for skip link rendering and accessibility
@@ -746,11 +746,10 @@ Enhancements from spec requirements that improve user experience.
- `src/app/settings/page.tsx` - Wrapped content in main element
- `src/app/settings/page.test.tsx` - Added 2 accessibility tests (29 total)
- `src/app/page.tsx` - Added id="main-content" to existing main element
- `src/components/calendar/day-cell.tsx` - Added aria-label with date/phase info
- `src/components/calendar/day-cell.tsx` - Added aria-label with date/phase info, dataDay prop
- `src/components/calendar/day-cell.test.tsx` - Added 4 accessibility tests (27 total)
- `src/components/calendar/month-view.test.tsx` - Updated tests to match new aria-labels
- **Remaining Work:**
- Keyboard navigation for calendar (arrow keys to navigate between dates)
- `src/components/calendar/month-view.tsx` - Added role="grid", keyboard navigation handler
- `src/components/calendar/month-view.test.tsx` - Added 9 keyboard navigation tests (30 total)
- **Why:** Required for accessibility compliance
### P4.3: Dark Mode Configuration
@@ -837,7 +836,6 @@ P4.* UX Polish ────────> After core functionality complete
| Priority | Task | Effort | Notes |
|----------|------|--------|-------|
| Low | P4.2 Keyboard Navigation | Small | Calendar arrow key navigation pending |
| Low | P4.3-P4.6 UX Polish | Various | After core complete |
### Dependency Summary