diff --git a/PROGRESS.md b/PROGRESS.md
index dd4fd9e..f203cde 100644
--- a/PROGRESS.md
+++ b/PROGRESS.md
@@ -4,9 +4,18 @@
**Status: ๐ In Progress**
-**Last Updated: 2026-03-29** (Narrative Engine)
+**Last Updated: 2026-03-29** (Accessibility Focus Indicators)
### Recent Changes (2026-03-29)
+- **Phase 10 Accessibility Focus Indicators** (`web/app.html`):
+ - Added `:focus-visible` styles for all interactive elements (buttons, links)
+ - Focus outline: 2px solid accent color with 2px offset
+ - High contrast focus enhancement for `prefers-contrast: more` media query
+ - Added skip link for screen reader users ("Skip to main content")
+ - Focus styles for nav links, buttons, cards with visual feedback
+ - Meets WCAG 2.1 focus visible requirements
+
+### Previous Changes (2026-03-29)
- **Phase 10 Narrative Engine** (`cmd/acb-index-builder/narrative.go`, `narrative_test.go`):
- LLM-powered chronicle generation per plan ยง15.5
- Story arc detection: Rise (>=200 rating gain), Fall (>=200 rating loss), Rivalry Intensifies (5+ matches with alternating wins), Upset of the Week, Evolution Milestone, Comeback (>=150 rating recovery)
@@ -435,12 +444,17 @@
### Phase 10 In Progress ๐
-- [x] Accessibility suite (`web/src/replay-viewer.ts`, `web/src/app.ts`)
+- [x] Accessibility suite (`web/src/replay-viewer.ts`, `web/src/app.ts`, `web/app.html`)
- Paul Tol color-blind safe palette (8 distinct colors)
- Shapes per player (circle, square, triangle, diamond, pentagon, hexagon)
- High contrast mode (brighter colors, darker walls)
- Reduced motion support (auto-detect prefers-reduced-motion)
- Accessibility controls UI in replay page
+ - Keyboard shortcuts: Space (play/pause), ArrowLeft/Right (step), Home/End (start/end)
+ - Screen reader region for turn announcements
+ - Focus indicators (`:focus-visible` styles) for all interactive elements
+ - Skip link for screen reader navigation
+ - High contrast focus enhancement (`prefers-contrast: more` media query)
- [x] Weekly meta report blog infrastructure
- Blog generation module in Go index builder (`cmd/acb-index-builder/blog.go`)
- Meta report content generation (leaderboard, strategies, rising/falling bots, rivalries)
diff --git a/web/app.html b/web/app.html
index 7b36d7c..caded88 100644
--- a/web/app.html
+++ b/web/app.html
@@ -600,6 +600,53 @@
border-color: var(--accent);
}
+ /* Accessibility: Focus indicators for keyboard navigation */
+ :focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+ }
+
+ .nav-link:focus-visible {
+ outline-offset: -2px;
+ background-color: var(--bg-tertiary);
+ }
+
+ .btn:focus-visible {
+ outline-offset: 2px;
+ box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4);
+ }
+
+ .bot-card:focus-visible,
+ .link-card:focus-visible {
+ outline-offset: 4px;
+ box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4);
+ }
+
+ /* Skip link for screen reader users */
+ .skip-link {
+ position: absolute;
+ top: -40px;
+ left: 0;
+ background: var(--accent);
+ color: white;
+ padding: 8px 16px;
+ text-decoration: none;
+ z-index: 1000;
+ transition: top 0.2s;
+ }
+
+ .skip-link:focus {
+ top: 0;
+ }
+
+ /* High contrast focus for accessibility mode */
+ @media (prefers-contrast: more) {
+ :focus-visible {
+ outline-width: 3px;
+ outline-style: solid;
+ }
+ }
+
.form-group .hint {
display: block;
color: var(--text-muted);
@@ -685,6 +732,7 @@
+ Skip to main content