Hardening responsiveness and SEO

hdyc-svelte/src/lib/components/Sidebar.svelte

@@ -131,12 +131,31 @@
   }
 
   export let open = false;
+  $: isSidebarHidden = !isDesktop && !open;
+
+  function closeSidebar() {
+    open = false;
+  }
+
+  function handleWindowKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && open && !isDesktop) {
+      closeSidebar();
+    }
+  }
 </script>
 
-<aside class="sidebar" class:open id="site-navigation" aria-hidden={open ? 'false' : 'true'}>
+<svelte:window on:keydown={handleWindowKeydown} />
+
+<aside
+  class="sidebar"
+  class:open={open}
+  id="site-navigation"
+  aria-hidden={isSidebarHidden ? 'true' : undefined}
+  inert={isSidebarHidden}
+>
   <div class="sidebar-header">
     <h3>All Converters</h3>
-    <button class="close-btn" on:click={() => (open = false)} aria-label="Close sidebar">✕</button>
+    <button type="button" class="close-btn" on:click={closeSidebar} aria-label="Close sidebar">✕</button>
   </div>
   <nav aria-label="Calculator categories">
     {#each categoryUnitGroups as group}
@@ -200,10 +219,8 @@
   </nav>
 </aside>
 
-{#if open}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="overlay" on:click={() => (open = false)}></div>
+{#if open && !isDesktop}
+  <button type="button" class="overlay" aria-label="Close sidebar" on:click={closeSidebar}></button>
 {/if}
 
 <style>
@@ -243,6 +260,11 @@
     cursor: pointer;
     padding: 0.25rem;
   }
+  .close-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--accent-glow);
+    border-radius: 8px;
+  }
 
   nav {
     padding: 0.5rem 0;
@@ -265,6 +287,10 @@
   .cat-toggle:hover {
     background: var(--hover-bg);
   }
+  .cat-toggle:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--accent-glow);
+  }
   .cat-toggle.active {
     color: var(--accent);
     font-weight: 600;
@@ -306,6 +332,11 @@
     color: var(--accent);
     background: var(--hover-bg);
   }
+  .cat-list li a:focus-visible {
+    outline: none;
+    color: var(--accent);
+    background: var(--hover-bg);
+  }
   .cat-list li a.current {
     color: var(--accent);
     font-weight: 600;
@@ -337,6 +368,10 @@
   .unit-toggle:hover {
     background: var(--hover-bg);
   }
+  .unit-toggle:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--accent-glow);
+  }
   .unit-toggle.expanded {
     color: var(--accent);
     font-weight: 600;
@@ -362,9 +397,15 @@
     color: var(--accent);
     background: var(--hover-bg);
   }
+  .unit-list li a:focus-visible {
+    outline: none;
+    color: var(--accent);
+    background: var(--hover-bg);
+  }
 
   .overlay {
     display: none;
+    border: 0;
   }
 
   @media (max-width: 1024px) {