Justin Visser
d9b3812306
Walked the spec section 8 checklist against the running app. Two gaps fixed: the menus now close on Tab instead of leaking focus behind the open menu (the opener restores focus), and the hero's mobile About note restores focus to its trigger on close. Audit results, item by item: - Keyboard: all controls reachable and operable; menus arrow-cycle, Esc/Tab close with focus restore; the only trap is the focus modal. - Focus indicator: global 2 px ink outline with 2 px offset. - Player keys: Space/arrows/Home/End global except text inputs; the scrubber is a native range with aria-valuetext "Round x of y". - Reduced motion: no autoplay, page settles on the final round, discrete swaps, 1000 ms cadence, smooth scrolling and crossfades off. - Contrast: informative text uses --ink-3 or stronger; --ink-4 appears only on text duplicated in the data table or decorative numerals. - Node state is shape-encoded (disc / donut / small dot / halo ring). - Network SVGs aria-hidden; each panel is a labelled region whose text carries the result; the collapsed ResultsTable is a real table with th scope headers behind a keyboard disclosure. - One polite live region announces runs, pauses, scrub releases, and the final state; rounds are not announced during playback. - FocusModal: dialog semantics, trap, Esc, focus restore. ErrorBanner and inline 400 notes use role=alert. lang=en, header/main/footer. - Touch targets 44 px on mobile; node hit halos 24 px. - 200% zoom at 1366 px (683 px viewport) reflows to the mobile stack with nothing lost (verified by screenshot). |
||
|---|---|---|
| .. | ||
| .vscode | ||
| public | ||
| src | ||
| .editorconfig | ||
| .gitattributes | ||
| .gitignore | ||
| .oxlintrc.json | ||
| .prettierignore | ||
| .prettierrc.json | ||
| env.d.ts | ||
| eslint.config.ts | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| tsconfig.vitest.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
web
This template should help get you started developing with Vue 3 in Vite.
Recommended IDE Setup
VS Code + Vue (Official) (and disable Vetur).
Recommended Browser Setup
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
- Firefox:
Type Support for .vue Imports in TS
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Compile and Hot-Reload for Development
npm run dev
Type-Check, Compile and Minify for Production
npm run build
Run Unit Tests with Vitest
npm run test:unit
Lint with ESLint
npm run lint