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:
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user