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>
This commit is contained in:
TehRiehlDealandClaude Opus 5 committed
1 parent
f83a317520
commit
75d0584952
13 files changed
+749
-56
No files matched your search
@@ -0,0 +1,225 @@
|
||||
<script lang="ts">
|
||||
// Accessible counterpart to the canvas.
|
||||
//
|
||||
// The skill tree is drawn entirely in WebGL: nodes are PixiJS Containers with
|
||||
// no DOM representation, so before this there was no way to reach a node by
|
||||
// keyboard or have one announced. The canvas advertised role="application",
|
||||
// which tells screen readers to hand every key to the app — for a widget that
|
||||
// implemented no keyboard model at all.
|
||||
//
|
||||
// This renders the same data.ts as a real WAI-ARIA tree: roving tabindex,
|
||||
// arrow-key traversal, Enter/Space to open the same modal a click opens.
|
||||
// Visually hidden until focused, then shown, so it doubles as a skip-target
|
||||
// for sighted keyboard users instead of ~20 invisible tab stops.
|
||||
import { treeNodes, type TreeNode } from '$lib/data';
|
||||
import { buildHierarchy, flattenVisible } from '$lib/utils/tree';
|
||||
import { categoryColorHex } from '$lib/theme';
|
||||
import { SvelteSet } from 'svelte/reactivity';
|
||||
|
||||
const {
|
||||
onActivate,
|
||||
onFocusNode
|
||||
}: {
|
||||
/** Enter/Space on a node — opens the same modal as a canvas click. */
|
||||
onActivate: (node: TreeNode) => void;
|
||||
/** Focus moved to a node — pans the canvas so the two stay in sync. */
|
||||
onFocusNode?: (node: TreeNode) => void;
|
||||
} = $props();
|
||||
|
||||
const roots = buildHierarchy(treeNodes);
|
||||
|
||||
// SvelteSet, not $state(new Set()) — Svelte does not proxy a plain Set, so
|
||||
// in-place mutation is untracked. (This is the same trap that silently broke
|
||||
// the stats panel's expand/collapse.)
|
||||
const expanded = new SvelteSet<string>(roots.map((r) => r.node.id));
|
||||
let activeId = $state(roots[0]?.node.id ?? '');
|
||||
|
||||
const rows = $derived(flattenVisible(roots, (id) => expanded.has(id)));
|
||||
|
||||
function setExpanded(id: string, open: boolean) {
|
||||
if (open) expanded.add(id);
|
||||
else expanded.delete(id);
|
||||
}
|
||||
|
||||
function focusRow(index: number) {
|
||||
const row = rows[index];
|
||||
if (!row) return;
|
||||
activeId = row.branch.node.id;
|
||||
document.getElementById(`tn-${row.branch.node.id}`)?.focus();
|
||||
onFocusNode?.(row.branch.node);
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent, index: number) {
|
||||
const { branch } = rows[index];
|
||||
const hasChildren = branch.children.length > 0;
|
||||
const isOpen = expanded.has(branch.node.id);
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
focusRow(Math.min(index + 1, rows.length - 1));
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
focusRow(Math.max(index - 1, 0));
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
e.preventDefault();
|
||||
if (hasChildren && !isOpen) setExpanded(branch.node.id, true);
|
||||
else if (hasChildren) focusRow(index + 1);
|
||||
break;
|
||||
case 'ArrowLeft': {
|
||||
e.preventDefault();
|
||||
if (hasChildren && isOpen) {
|
||||
setExpanded(branch.node.id, false);
|
||||
break;
|
||||
}
|
||||
// Otherwise move to the parent row.
|
||||
const parentId = branch.node.parentId;
|
||||
const parentIndex = rows.findIndex((r) => r.branch.node.id === parentId);
|
||||
if (parentIndex !== -1) focusRow(parentIndex);
|
||||
break;
|
||||
}
|
||||
case 'Home':
|
||||
e.preventDefault();
|
||||
focusRow(0);
|
||||
break;
|
||||
case 'End':
|
||||
e.preventDefault();
|
||||
focusRow(rows.length - 1);
|
||||
break;
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
e.preventDefault();
|
||||
onActivate(branch.node);
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="tree-nav">
|
||||
<h2 id="tree-nav-label" tabindex="-1">Skill tree navigator</h2>
|
||||
<p class="tree-nav-hint">
|
||||
Arrow keys move between entries, Right and Left expand and collapse, Enter opens details.
|
||||
</p>
|
||||
|
||||
<ul role="tree" aria-labelledby="tree-nav-label">
|
||||
{#each rows as { branch, level }, index (branch.node.id)}
|
||||
{@const node = branch.node}
|
||||
{@const hasChildren = branch.children.length > 0}
|
||||
<li
|
||||
role="treeitem"
|
||||
id="tn-{node.id}"
|
||||
aria-level={level}
|
||||
aria-expanded={hasChildren ? expanded.has(node.id) : undefined}
|
||||
aria-selected={activeId === node.id}
|
||||
tabindex={activeId === node.id ? 0 : -1}
|
||||
style="--node-color: {categoryColorHex[node.category]}; --level: {level}"
|
||||
onkeydown={(e) => handleKeydown(e, index)}
|
||||
onclick={() => onActivate(node)}
|
||||
onfocus={() => {
|
||||
activeId = node.id;
|
||||
onFocusNode?.(node);
|
||||
}}
|
||||
>
|
||||
<span class="tn-dot" aria-hidden="true"></span>
|
||||
<span class="tn-label">{node.label}</span>
|
||||
<span class="tn-category">{node.category}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
* Visually hidden until something inside it takes focus. Same idea as a skip
|
||||
* link: invisible to mouse users, but a sighted keyboard user gets a real,
|
||||
* visible panel instead of focus vanishing into a 1x1px clip region.
|
||||
*/
|
||||
.tree-nav {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.tree-nav:focus-within {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1200;
|
||||
width: min(24rem, 92vw);
|
||||
height: auto;
|
||||
max-height: 90vh;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
clip: auto;
|
||||
white-space: normal;
|
||||
background: linear-gradient(145deg, var(--panel-from) 0%, var(--panel-to) 100%);
|
||||
border: 1px solid var(--color-gold);
|
||||
border-radius: 0 0 10px 0;
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.tree-nav h2 {
|
||||
margin: 0 0 0.25rem;
|
||||
color: var(--color-gold);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tree-nav-hint {
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
padding-left: calc(0.5rem + (var(--level) - 1) * 0.85rem);
|
||||
border-radius: 6px;
|
||||
color: #e8e8f0;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li:hover,
|
||||
li[aria-selected='true'] {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.tn-dot {
|
||||
flex: 0 0 auto;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--node-color);
|
||||
}
|
||||
|
||||
.tn-label {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.tn-category {
|
||||
flex: 0 0 auto;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user