From 3f8a2c511aca9e902df1adff231aaaed4d6f12b6 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 9 May 2026 20:26:44 -0400
Subject: [PATCH] fix(web): MobileNavDrawer focus uses querySelector, not
 conditional bind:this
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

bind:this requires an Identifier or MemberExpression — a ternary
like {i === 0 ? firstNavLink : undefined} is invalid. Replaced
with a single bind on the <aside> root, then querySelector('nav a')
to locate the first nav link at focus time. Same behaviour, valid
Svelte.

Caught by CI svelte-check on 268e12a (failed before the @const
fix landed in 1536860):
  src/lib/components/MobileNavDrawer.svelte:91:13
  https://svelte.dev/e/bind_invalid_expression

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/src/lib/components/MobileNavDrawer.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/MobileNavDrawer.svelte b/web/src/lib/components/MobileNavDrawer.svelte
index f9f2d7c7..5fa68d13 100644
--- a/web/src/lib/components/MobileNavDrawer.svelte
+++ b/web/src/lib/components/MobileNavDrawer.svelte
@@ -6,7 +6,7 @@
   import { mobileNav, closeMobileNav } from '$lib/stores/mobileNav.svelte';
 
   let previouslyFocused: HTMLElement | null = null;
-  let firstNavLink: HTMLAnchorElement | undefined = $state();
+  let drawerEl: HTMLElement | undefined = $state();
 
   const navItems = [
     { href: '/',                label: 'Home' },
@@ -36,7 +36,10 @@
   $effect(() => {
     if (mobileNav.value) {
       previouslyFocused = document.activeElement as HTMLElement | null;
-      Promise.resolve().then(() => firstNavLink?.focus());
+      Promise.resolve().then(() => {
+        const first = drawerEl?.querySelector<HTMLAnchorElement>('nav a');
+        first?.focus();
+      });
     } else if (previouslyFocused) {
       previouslyFocused.focus();
       previouslyFocused = null;
@@ -62,6 +65,7 @@
 {/if}
 
 <aside
+  bind:this={drawerEl}
   aria-label="Main navigation"
   aria-hidden={!mobileNav.value}
   inert={!mobileNav.value}
@@ -85,10 +89,9 @@
 
   <nav class="flex-1 overflow-y-auto p-2">
     <ul>
-      {#each navItems as item, i (item.href)}
+      {#each navItems as item (item.href)}
         <li>
           <a
-            bind:this={i === 0 ? firstNavLink : undefined}
             href={item.href}
             onclick={onLinkClick}
             class="flex items-center min-h-[44px] rounded px-3 py-2 hover:bg-surface-hover"