TehRiehlDealandClaude Opus 5
75d0584952
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>
76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
// ==========================================================================
|
|
// CONFIG — non-colour tunables (colours live in `theme.ts`).
|
|
//
|
|
// Centralises the magic numbers that were previously scattered through
|
|
// SkillTree.svelte so behaviour can be tuned in one place.
|
|
// ==========================================================================
|
|
|
|
/**
|
|
* Viewport width (px) below which the mobile layout/behaviour kicks in.
|
|
* NOTE: JS treats `< 768` as mobile; CSS media queries use `max-width: 767px`.
|
|
* Both make 768px the first desktop width — keep that pairing if you change this.
|
|
*/
|
|
export const MOBILE_BREAKPOINT = 768;
|
|
|
|
/** Pan/zoom limits and step sizes. */
|
|
export const ZOOM = {
|
|
min: 0.3,
|
|
max: 2.5,
|
|
keyStep: 0.1,
|
|
wheelIn: 1.1,
|
|
wheelOut: 0.9
|
|
} as const;
|
|
|
|
/** Background parallax lag factors (fraction of tree movement). */
|
|
export const PARALLAX = {
|
|
star: 0.1,
|
|
nebula: 0.07,
|
|
gradient: 0.05
|
|
} as const;
|
|
|
|
/** Node radii by size (desktop px); mobile multiplies by MOBILE_RADIUS_FACTOR. */
|
|
export const NODE_RADII: Record<string, number> = {
|
|
'x-large': 75,
|
|
large: 30,
|
|
medium: 25,
|
|
small: 20,
|
|
default: 14
|
|
};
|
|
export const MOBILE_RADIUS_FACTOR = 0.8;
|
|
|
|
/** Keyboard pan distance per arrow-key press (px). */
|
|
export const PAN_SPEED = 50;
|
|
|
|
/** Background particle counts (desktop / mobile). */
|
|
export const PARTICLE_COUNTS = {
|
|
distantStars: { desktop: 200, mobile: 100 },
|
|
mediumStars: { desktop: 60, mobile: 30 },
|
|
brightStars: { desktop: 15, mobile: 8 },
|
|
dust: { desktop: 30, mobile: 15 }
|
|
} as const;
|
|
|
|
/** Entrance-animation timings (seconds), split by device. */
|
|
export const TIMINGS = {
|
|
titleDuration: { desktop: 2.5, mobile: 1.5 },
|
|
zoomDuration: { desktop: 4.5, mobile: 2.5 },
|
|
nodeStagger: { desktop: 0.08, mobile: 0.05 }
|
|
} as const;
|
|
|
|
/**
|
|
* Whether the visitor has asked for reduced motion.
|
|
*
|
|
* This site is unusually motion-heavy — a multi-second forced zoom, a staggered
|
|
* entrance, ~480 looping tweens and a continuous dust ticker — and none of it
|
|
* was previously conditional. Read at call time, not module load, so it is
|
|
* correct under SSR/prerender and picks up an OS-level change on reload.
|
|
*/
|
|
export function prefersReducedMotion(): boolean {
|
|
if (typeof window === 'undefined' || !window.matchMedia) return false;
|
|
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
}
|
|
|
|
/** Helper: pick a desktop/mobile value. */
|
|
export function byDevice<T>(pair: { desktop: T; mobile: T }, isMobile: boolean): T {
|
|
return isMobile ? pair.mobile : pair.desktop;
|
|
}
|