From d9b381230602ab1bc4320161abe9bb38446690ef Mon Sep 17 00:00:00 2001
From: Justin Visser <justinfvisser@gmail.com>
Date: Wed, 10 Jun 2026 18:22:11 +0200
Subject: [PATCH] web: accessibility audit fixes, slice 12 of M3

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).
---
 web/src/components/HeroHeadline.vue | 7 ++++++-
 web/src/components/PanelMenu.vue    | 5 ++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/components/HeroHeadline.vue b/web/src/components/HeroHeadline.vue
index f0220d7..541cd5f 100644
--- a/web/src/components/HeroHeadline.vue
+++ b/web/src/components/HeroHeadline.vue
@@ -33,6 +33,11 @@ const segments = computed<NarrativeSegment[]>(() =>
 
 const aboutOpen = ref(false)
 const noteButton = ref<HTMLButtonElement | null>(null)
+
+function closeAbout() {
+  aboutOpen.value = false
+  noteButton.value?.focus()
+}
 </script>
 
 <template>
@@ -58,7 +63,7 @@ const noteButton = ref<HTMLButtonElement | null>(null)
         </svg>
         {{ preset.disclaimerShort }}
       </button>
-      <AboutPopover v-if="aboutOpen" :anchor="noteButton" @close="aboutOpen = false" />
+      <AboutPopover v-if="aboutOpen" :anchor="noteButton" @close="closeAbout" />
     </span>
   </div>
 </template>
diff --git a/web/src/components/PanelMenu.vue b/web/src/components/PanelMenu.vue
index fc72e10..9d405e7 100644
--- a/web/src/components/PanelMenu.vue
+++ b/web/src/components/PanelMenu.vue
@@ -21,7 +21,10 @@ function menuButtons(): HTMLButtonElement[] {
 }
 
 function onKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
+  if (event.key === 'Escape' || event.key === 'Tab') {
+    // Tab closes like Esc instead of leaking focus behind the menu; the
+    // opener restores focus and the next Tab continues from there.
+    event.preventDefault()
     emit('close')
     return
   }