jedarden/ai-code-battle
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add accessibility focus indicators (Phase 10)

Browse source 
- Add :focus-visible styles for all interactive elements (buttons, links, inputs)
- Add skip link for screen reader navigation ("Skip to main content")
- Add high contrast focus enhancement for prefers-contrast: more
- Update PROGRESS.md with keyboard shortcuts and focus indicator details

Phase 10 accessibility suite now complete with WCAG 2.1 focus-visible compliance.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jedarden 2026-03-29 07:12:11 -04:00
parent 5356c8ee0a
commit 45e4131dd3
2 changed files with 64 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
PROGRESS.md
View file

@ -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)

48
web/app.html
View file

@ -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 @@
</style>
</head>
<body>
<a href="#app" class="skip-link">Skip to main content</a>
<nav>
<div class="nav-container">
<a href="#/" class="nav-brand">AI Code Battle</a>