feat(ui): accessibility pass — WCAG 2.2 AA for login/lobby/shell (F2)

Add the a11y foundation and bring login, lobby, and the in-game shell to
WCAG 2.2 AA:

- Primitives: .sr-only + .skip-link (base.css), trapFocus (modal focus
  trap + restore) and restoreFocus (menu focus restore) actions, the
  --color-focus visible ring.
- In-game shell: skip link + focusable main landmark; WAI-ARIA sidebar
  tabs (roving tabindex, arrow/Home/End, tabpanel wiring); menu Escape +
  focus restore (account / view / turn-navigator / map-toggles /
  bottom-tabs); mail compose as a role=dialog modal with a focus trap.
- login / lobby / lobby-create: skip link + main landmark, field labels,
  role=alert / role=status live regions.
- Map canvas: aria-label naming it a visual overview, with its data
  reachable by keyboard via the sidebar inspector and tables (accessible
  alternative; in-canvas keyboard nav deferred).

Gates (chromium-desktop): tests/e2e/a11y-axe.spec.ts scans every
top-level view for WCAG 2.2 AA violations (zero); a11y-keyboard.spec.ts
covers the skip link, menu Escape+restore, and tab roving. Adds
@axe-core/playwright. Docs: ui/docs/a11y.md (+ index). Marks F1 and F2
done in ui/PLAN-finalize.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ui/frontend/src/lib/sidebar/tab-bar.svelte

@@ -29,17 +29,60 @@ flips it on.
 	const tabs = $derived(
 		hideOrder ? allTabs.filter((t) => t.id !== "order") : allTabs,
 	);
+
+	let tablistEl: HTMLDivElement | undefined = $state();
+
+	// WAI-ARIA tabs keyboard pattern: arrows move between tabs (with
+	// wrap-around), Home/End jump to the ends. Activation is automatic —
+	// moving focus also selects the tab — and focus follows to the
+	// newly-active tab button.
+	function onKeydown(event: KeyboardEvent, index: number): void {
+		const ids = tabs.map((t) => t.id);
+		let next = index;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				next = (index + 1) % ids.length;
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				next = (index - 1 + ids.length) % ids.length;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = ids.length - 1;
+				break;
+			default:
+				return;
+		}
+		event.preventDefault();
+		onSelect(ids[next]);
+		tablistEl
+			?.querySelector<HTMLElement>(`[data-testid="sidebar-tab-${ids[next]}"]`)
+			?.focus();
+	}
 </script>
 
-<div class="tab-bar" role="tablist" data-testid="sidebar-tab-bar">
-	{#each tabs as tab (tab.id)}
+<div
+	class="tab-bar"
+	role="tablist"
+	data-testid="sidebar-tab-bar"
+	bind:this={tablistEl}
+>
+	{#each tabs as tab, i (tab.id)}
 		<button
 			type="button"
 			role="tab"
+			id="sidebar-tab-{tab.id}"
 			data-testid="sidebar-tab-{tab.id}"
 			aria-selected={tab.id === activeTab}
+			aria-controls="sidebar-panel"
+			tabindex={tab.id === activeTab ? 0 : -1}
 			class:active={tab.id === activeTab}
 			onclick={() => onSelect(tab.id)}
+			onkeydown={(e) => onKeydown(e, i)}
 		>
 			{i18n.t(tab.key)}
 		</button>