fix(web): MobileNavDrawer focus uses querySelector, not conditional bind:this

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>
This commit is contained in:
2026-05-09 20:26:44 -04:00
parent 1536860e59
commit 3f8a2c511a
@@ -6,7 +6,7 @@
import { mobileNav, closeMobileNav } from '$lib/stores/mobileNav.svelte'; import { mobileNav, closeMobileNav } from '$lib/stores/mobileNav.svelte';
let previouslyFocused: HTMLElement | null = null; let previouslyFocused: HTMLElement | null = null;
let firstNavLink: HTMLAnchorElement | undefined = $state(); let drawerEl: HTMLElement | undefined = $state();
const navItems = [ const navItems = [
{ href: '/', label: 'Home' }, { href: '/', label: 'Home' },
@@ -36,7 +36,10 @@
$effect(() => { $effect(() => {
if (mobileNav.value) { if (mobileNav.value) {
previouslyFocused = document.activeElement as HTMLElement | null; 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) { } else if (previouslyFocused) {
previouslyFocused.focus(); previouslyFocused.focus();
previouslyFocused = null; previouslyFocused = null;
@@ -62,6 +65,7 @@
{/if} {/if}
<aside <aside
bind:this={drawerEl}
aria-label="Main navigation" aria-label="Main navigation"
aria-hidden={!mobileNav.value} aria-hidden={!mobileNav.value}
inert={!mobileNav.value} inert={!mobileNav.value}
@@ -85,10 +89,9 @@
<nav class="flex-1 overflow-y-auto p-2"> <nav class="flex-1 overflow-y-auto p-2">
<ul> <ul>
{#each navItems as item, i (item.href)} {#each navItems as item (item.href)}
<li> <li>
<a <a
bind:this={i === 0 ? firstNavLink : undefined}
href={item.href} href={item.href}
onclick={onLinkClick} onclick={onLinkClick}
class="flex items-center min-h-[44px] rounded px-3 py-2 hover:bg-surface-hover" class="flex items-center min-h-[44px] rounded px-3 py-2 hover:bg-surface-hover"