Story 6.9: Responsive Timeline & Accessibility Polish

[steilerDev]

As a homeowner, I want the timeline page to work well on my tablet and phone, support keyboard navigation, and look correct in dark mode so that I can manage my project schedule from any device and the application is accessible to all users.

Parent Epic: #6 (EPIC-06: Timeline, Gantt Chart & Dependency Management)
Priority: Must Have

Description

This story is the responsive and accessibility polish pass for all timeline components built in Stories 6.4-6.8. It ensures the Gantt chart, calendar view, and milestone management work across all viewports and meet accessibility standards.

• Responsive adaptations:
  • Mobile (<768px): Gantt chart switches to a simplified list/card view or horizontally scrollable compact chart. Calendar defaults to weekly view. Sidebar collapses. Touch targets meet 44px minimum.
  • Tablet (768-1024px): Gantt chart is fully functional with touch drag-and-drop. Calendar and milestone panel adapt to available width. Sidebar may overlay.
  • Desktop (>1024px): Full experience as designed in Stories 6.4-6.8.
• Dark mode verification: all Gantt chart elements (bars, arrows, grid lines, tooltips, milestones), calendar cells, and milestone panel render correctly with dark mode tokens. No hardcoded colors.
• Keyboard navigation:
  • Arrow keys to move between work items in the Gantt sidebar
  • Enter/Space to select a work item (opens tooltip or detail)
  • Tab to move between interactive controls (zoom toggle, view toggle, auto-schedule button, milestone panel)
  • Escape to close tooltips, panels, and dialogs
• ARIA labels:
  • SVG elements (bars, arrows, diamonds) have role and aria-label attributes
  • Gantt chart region has role="img" with descriptive aria-label
  • Interactive elements have aria-expanded, aria-pressed where applicable
  • Tooltips are connected to their trigger via aria-describedby
• Screen reader support: timeline data is accessible in a meaningful way (e.g., accessible table representation or structured list alternative)

Acceptance Criteria

• 1. On mobile viewports (<768px), the timeline page presents a usable layout (simplified chart or card view) with touch-friendly controls (44px minimum touch targets)
• 2. On tablet viewports (768-1024px), the Gantt chart is fully functional including touch-based drag-and-drop
• 3. Dark mode renders all timeline elements correctly — bars, arrows, grid, tooltips, calendar cells, milestone markers — using design tokens (no hardcoded colors)
• 4. Arrow keys navigate between work items in the Gantt sidebar; the focused item is visually indicated
• 5. Enter/Space on a focused work item opens its tooltip or detail view
• 6. Tab moves focus between all interactive controls (zoom, view toggle, auto-schedule, milestone panel)
• 7. Escape closes any open tooltip, panel, or dialog
• 8. SVG bar elements have role="graphics-symbol" and descriptive aria-label (e.g., "Work item: Install Plumbing, April 1-5, In Progress")
• 9. SVG arrow elements have role="graphics-symbol" and aria-label describing the dependency (e.g., "Dependency: Excavation to Foundation, Finish-to-Start")
• 10. Milestone diamond markers have role="graphics-symbol" and descriptive aria-label
• 11. The Gantt chart container has role="img" with a summary aria-label (e.g., "Project timeline Gantt chart with 15 work items")
• 12. Tooltips are associated with their trigger via aria-describedby

UAT Scenarios

Scenario: Mobile timeline view
  Given I access the timeline page on a mobile device (viewport 375px wide)
  When the page loads
  Then I see a compact timeline view suitable for small screens
  And all interactive controls have a minimum touch target of 44px
  And I can scroll horizontally to see the full timeline

Scenario: Tablet drag-and-drop
  Given I access the timeline page on a tablet (viewport 768px)
  When I touch and drag a work item bar
  Then the bar moves with my finger
  And releasing the drag updates the work item dates

Scenario: Dark mode Gantt chart
  Given I have dark mode enabled
  When I view the Gantt chart
  Then bar colors are visible against the dark background
  And grid lines use a dark-mode-appropriate color
  And tooltips use dark mode styling
  And milestone diamonds are clearly visible

Scenario: Keyboard navigation through work items
  Given I am on the timeline page with the Gantt chart visible
  When I press Tab to focus the sidebar
  And I press the Down arrow key
  Then focus moves to the next work item in the sidebar
  And the focused item has a visible focus indicator
  When I press Enter
  Then the tooltip for that work item appears

Scenario: Screen reader reads work item bar
  Given a screen reader is active
  When focus reaches a Gantt bar for "Install Plumbing" (Apr 1-5, In Progress)
  Then the screen reader announces "Work item: Install Plumbing, April 1 to April 5, In Progress"

Scenario: Close tooltip with Escape
  Given a tooltip is open on the Gantt chart
  When I press Escape
  Then the tooltip closes
  And focus returns to the triggering element

Notes

Dependencies: Blocked by Story 6.6 (#243), Story 6.7 (#244), and Story 6.8 (#245) — all interactive Gantt features, milestones, and calendar must be complete before the accessibility and responsive polish pass.

Files to create/modify:

• client/src/components/gantt/GanttChart.tsx (add ARIA attributes, keyboard handlers)
• client/src/components/gantt/GanttChart.module.css (responsive breakpoints, dark mode overrides)
• client/src/components/gantt/GanttBar.tsx (add ARIA labels, focus handling)
• client/src/components/gantt/GanttArrows.tsx (add ARIA labels to SVG arrows)
• client/src/components/gantt/GanttMilestones.tsx (add ARIA labels to diamonds)
• client/src/components/gantt/GanttSidebar.tsx (keyboard navigation, focus management)
• client/src/components/gantt/GanttTooltip.tsx (aria-describedby linkage, escape handler)
• client/src/components/calendar/CalendarView.tsx (responsive layout, dark mode)
• client/src/components/calendar/CalendarView.module.css (responsive breakpoints)
• client/src/components/milestones/MilestonePanel.tsx (responsive, keyboard, ARIA)
• client/src/pages/TimelinePage.tsx (responsive layout orchestration)
• client/src/pages/TimelinePage.module.css (responsive breakpoints)