fix: make navbar not focusable if hidden

also drop unused sidebarEl

Author: Bohreromir

src/lib/components/layout/sidebar/Sidebar.svelte

@@ -5,6 +5,7 @@
   import type { Component } from 'svelte';
   import IconChevronLeft from 'virtual:icons/material-symbols/chevron-left';
   import IconChevronRight from 'virtual:icons/material-symbols/chevron-right';
+  import { MediaQuery } from 'svelte/reactivity';
   import type { NavItem } from '$lib/types/navigation.js';
   import { getNavSections } from './nav-items.js';
 
@@ -20,6 +21,10 @@
 
   const sections = $derived(getNavSections({ storageBrowserEnabled }));
 
+  // make mobile navbar not focusable if its hidden
+  const isDesktop = new MediaQuery('min-width: 64rem', true);
+  const hiddenFromUser = $derived(!isDesktop.current && !mobileOpen);
+
   function isActive(href: string): boolean {
     if (href === '/') return page.url.pathname === '/';
     return page.url.pathname.startsWith(href);
@@ -40,8 +45,35 @@
   }
 
   let sidebarEl: HTMLElement | undefined = $state();
+
+  $effect(() => {
+    if (isDesktop.current || !mobileOpen || !sidebarEl) return;
+    sidebarEl.focus();
+  });
+
+  function handleWindowKeydown(event: KeyboardEvent) {
+    if (isDesktop.current || !mobileOpen) return;
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      mobileOpen = false;
+    }
+  }
+
+  // Tabbing off either end of the open panel would land on the page behind the
+  // backdrop, so send focus back to the top of the panel instead.
+  function handleFocusOut(event: FocusEvent) {
+    if (isDesktop.current || !mobileOpen) return;
+
+    const next = event.relatedTarget as Node | null;
+    if (next && sidebarEl?.contains(next)) return;
+
+    sidebarEl?.focus();
+  }
 </script>
 
+<svelte:window onkeydown={handleWindowKeydown} />
+
 {#snippet navIcon(IconComponent: Component)}
   <IconComponent class="h-5 w-5 shrink-0" aria-hidden="true" />
 {/snippet}
@@ -59,8 +91,11 @@
 <!-- Sidebar -->
 <aside
   bind:this={sidebarEl}
+  onfocusout={handleFocusOut}
   id="sidebar"
   aria-label={m.sidebar_label()}
+  tabindex="-1"
+  inert={hiddenFromUser}
   class="border-base-300 bg-base-200 fixed inset-y-0 left-0 z-50 flex flex-col border-r
     transition-[transform,width] duration-200 ease-out
     lg:relative lg:inset-auto lg:z-auto lg:translate-x-0