2 Commits

Include renames

Author	SHA1	Message	Date
TehRiehlDealandClaude Opus 5	75d0584952	a11y: audit phase 3 — keyboard access, reduced motion, focus management ... The site claimed comprehensive accessibility. It had a Level A keyboard failure, no reduced-motion support of any kind, and a dialog whose ARIA actively lied about the page state. Keyboard access to nodes (WCAG 2.1.1, Level A): - Nodes are PixiJS Containers with no DOM representation, so there was no way to reach or activate one by keyboard. The only keyboard vocabulary was pan/zoom/reset. New TreeNavigator.svelte renders the same data.ts as a real WAI-ARIA tree: roving tabindex, Up/Down traversal, Right/Left to expand and collapse, Home/End, Enter/Space to open the same modal a click opens. Focusing a row pans the canvas to that node so the two stay in sync. - The canvas advertised role="application", which tells screen readers to suppress their own navigation and forward every key — appropriate only for a widget implementing a full keyboard model, which it did not. Now role="img" with a description, still focusable for pan/zoom. - .sr-only content is revealed on :focus-within. Previously ~20 links were in the tab order while clipped to 1x1px, so a sighted keyboard user tabbed into nothing (WCAG 2.4.7). Added a skip link as the first focusable element. Focus management: - The modal set aria-modal="true" — telling AT that everything outside does not exist — while focus stayed on the canvas behind it and Tab walked the hidden text version underneath. Focus now moves into the dialog on open, is trapped there, and is restored to the trigger on close. - Removed two onkeydown Escape handlers (modal + stats backdrop) that could never fire: a role="presentation" div with no tabindex is never a keydown target. Their aria-labels were discarded by the role too. - The 300ms mobile touch-bleed guard was applied to every close path, so Escape or the X immediately after opening silently did nothing. It now guards only outside-dismissal, which is what it was for. Reduced motion (WCAG 2.3.3 / 2.2.2): - Previously respected nowhere, on a site built from a 4.5s forced zoom, an ~8s staggered entrance, ~480 looping tweens and a continuous dust ticker. The entrance now jumps to the finished state, the dust ticker is not registered, and all six ambient loops route through one guard that simply never creates them. Plus the CSS media query the GSAP tweens can't reach. Other: - StatsPanel used aria-hidden while containing tabindex="0" children — an axe aria-hidden-focus violation. Now `inert`, which removes it from the a11y tree and the tab order together. - Branch headers were div+role="button" handling Enter but not Space. Now real buttons with aria-controls. - The global keydown listener had no scope guard: it preventDefault()ed arrow keys unconditionally, so the 380px scrollable stats panel could not be scrolled by keyboard, and Ctrl combos were not excluded. Ctrl+wheel (browser and trackpad zoom) is no longer swallowed either. - Focus rings lived in SkillTree's *scoped* style block, so they never reached NodeModal or StatsPanel children. Moved to app.css. - Second <h1> in StatsPanel demoted; the page heading is SeoContent's. - getBeamIntensity used a truthiness check on yearsOfExperience, so 0 fell through to the default. Tests 16 -> 27: reduced-motion helper (all four branches), hierarchy building including cycle/orphan handling, and a data-integrity check that every parentId resolves to a real node. Verified in the production build: Tab reveals the text version with a visible focus ring; arrow keys traverse the tree and expand/collapse (rows 5->6); Enter opens the modal with focus landing on Close; Shift+Tab stays trapped; Escape restores focus to the originating tree item. Not verified end-to-end: the reduced-motion JS branch. This environment can't emulate the media query — patching matchMedia after navigation always races module init — so that branch is covered by unit tests and review, not observation. Worth a manual pass with DevTools > Rendering. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-08-09 01:03:36 -07:00
TehRiehlDealandClaude Opus 4.8	6c652e7138	refactor: centralize theme/config/utils + fix data and console bugs ... Phase 1 of the cohesion refactor (behavior-preserving): Single source of truth: - New src/lib/theme.ts: category colors (moved from data.ts, re-exported for back-compat), derived hex strings, nebula palette, UI colors, CSS var map - New src/lib/config.ts: breakpoint, zoom, parallax, node radii, particle counts, animation timings (previously scattered magic numbers) - New src/lib/utils/tree.ts: getNodeById, getNodeRadius, getDistanceFromOrigin, getBeamIntensity (pure helpers lifted out of onMount) - New src/lib/utils/stats.ts: branch ids/labels, proficiency order, and the stats-panel aggregation helpers (deduped from inline copies) - SkillTree.svelte now imports all of the above; removed the duplicated getCategoryColorHex, stats helpers, branch id/label lists, and inline magic numbers - Populated src/lib/index.ts barrel Bug fixes: - data.ts: tmdbAPI pypiUrl pointed at tvdbAPI -> corrected to tmdbAPI - Removed/ gated stray console.log noise (skill-tree-loaded, SW logs) - Removed dead vars (maxAlpha, glowMaxAlpha) and unused catch binding Tooling: ESLint + Prettier now clean; added Vitest unit tests for the new pure utils (14 tests). svelte-check: 0 errors. build: ok. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-03 09:40:27 -07:00