feat: WCAG 2.1 AA accessibility audit and fixes

[fatherlinux]

Summary

Comprehensive WCAG 2.1 AA accessibility audit and fixes for Acquacotta.

• Semantic HTML: Added skip navigation, <main> landmark, ARIA tab pattern for navigation, role="dialog" on all 6 modals
• Keyboard accessibility: Focus trap + Escape key on modals, arrow key navigation in tablist, keyboard-operable timer dial (slider role)
• Screen readers: aria-live region for timer status announcements, sr-only labels for timer inputs, aria-label on icon-only buttons, aria-hidden on decorative SVG
• Visual: Fixed color contrast (--text-secondary 3.8:1 → 4.8:1+), added :focus-visible ring on all interactive elements, increased footer link size
• Charts: Added role="img" and aria-label to all canvas elements

Closes #73

Test plan

• Container builds successfully
• All 40 existing tests pass
• Accessibility tree shows proper roles (tab, tabpanel, dialog, slider, timer)
• All ARIA attributes render correctly (verified via curl + JS checks)
• Lighthouse accessibility score >= 90
• Keyboard-only walkthrough of timer, history, reports, settings views
• Screen reader spot-check

🤖 Generated with Claude Code

[gemini-code-assist]

Code Review

This pull request implements a comprehensive accessibility overhaul based on a WCAG 2.1 AA audit. Key changes include the introduction of semantic HTML landmarks, ARIA roles for navigation and status updates, improved color contrast, and robust keyboard navigation features like modal focus trapping and arrow-key controls for the timer. Review feedback identified a few remaining accessibility issues, specifically the lack of a visual focus indicator for the timer dial, a mismatch in ARIA value attributes, and a logic bug where keyboard increments could exceed the visual timer's maximum duration.

[gemini-code-assist]

The .timer-display element is focusable via keyboard (tabindex="0") but lacks a visual focus indicator. This violates WCAG 2.1 Success Criterion 2.4.7 (Focus Visible). Adding a focus ring ensures keyboard users can identify when the timer dial is currently focused.

Suggested change

	button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
	a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
	button:focus-visible, .timer-display:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
	a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

[gemini-code-assist]

The aria-valuemax attribute is set to 60, but the visual timer dial and interaction logic are constrained by maxDragSeconds (currently 25 minutes). This value should be updated to match the actual maximum allowed by the component to provide accurate information to screen reader users.

Suggested change

	timerDisplay.setAttribute('aria-valuemax', '60');
	timerDisplay.setAttribute('aria-valuemax', maxDragSeconds / 60);

[gemini-code-assist]

The keyboard handler allows setting the timer duration up to 60 minutes (60 * 60), but the visual timer ring logic in updateTimerDisplay is hardcoded to a maximum of 25 minutes (maxDragSeconds). Setting a value higher than 25 minutes will cause the ring to render incorrectly. The keyboard increments should be clamped to maxDragSeconds to maintain consistency with the visual representation and the mouse/touch interaction logic.

Suggested change

	if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
	e.preventDefault();
	remainingSeconds = Math.min((remainingSeconds || 0) + step, 60 * 60);
	updateTimerDisplay();
	const mins = Math.ceil(remainingSeconds / 60);
	timerDisplay.setAttribute('aria-valuenow', mins);
	timerDisplay.setAttribute('aria-valuetext', mins + ' minutes');
	} else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
	e.preventDefault();
	remainingSeconds = Math.max((remainingSeconds || 0) - step, 60);
	updateTimerDisplay();
	const mins = Math.ceil(remainingSeconds / 60);
	timerDisplay.setAttribute('aria-valuenow', mins);
	timerDisplay.setAttribute('aria-valuetext', mins + ' minutes');
	}
	if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
	e.preventDefault();
	remainingSeconds = Math.min((remainingSeconds || 0) + step, maxDragSeconds);
	updateTimerDisplay();
	const mins = Math.ceil(remainingSeconds / 60);
	timerDisplay.setAttribute('aria-valuenow', mins);
	timerDisplay.setAttribute('aria-valuetext', mins + ' minutes');
	} else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
	e.preventDefault();
	remainingSeconds = Math.max((remainingSeconds || 0) - step, step);
	updateTimerDisplay();
	const mins = Math.ceil(remainingSeconds / 60);
	timerDisplay.setAttribute('aria-valuenow', mins);
	timerDisplay.setAttribute('aria-valuetext', mins + ' minutes');
	}