Improve layout/behavior and accessibility

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

@@ -75,7 +75,13 @@
 
     {#if !has3}
       <div class="swap-col">
-        <button class="swap-btn" on:click={swap} title="Swap values">
+        <button
+          type="button"
+          class="swap-btn"
+          on:click={swap}
+          title="Swap values"
+          aria-label="Swap conversion direction"
+        >
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M7 16l-4-4 4-4M17 8l4 4-4 4M3 12h18" />
           </svg>
@@ -111,7 +117,9 @@
   </div>
 
   <div class="calc-footer">
-    <button class="clear-btn" on:click={clear}>Clear</button>
+    <button type="button" class="clear-btn" on:click={clear} aria-label="Clear calculator inputs">
+      Clear
+    </button>
     {#if config.factor && config.type === 'standard'}
       <span class="formula-hint">
         1 {config.labels.in1} = {config.factor}{config.offset ? ` + ${config.offset}` : ''} {config.labels.in2}

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

@@ -48,16 +48,29 @@
       aria-label="Search conversions"
     />
     {#if query}
-      <button class="clear" on:click={() => { query = ''; selectedIndex = -1; }} aria-label="Clear search">✕</button>
+      <button
+        type="button"
+        class="clear"
+        on:click={() => {
+          query = '';
+          selectedIndex = -1;
+        }}
+        aria-label="Clear search"
+      >
+        ✕
+      </button>
     {/if}
   </div>
   {#if focused && results.length > 0}
-    <ul class="results">
+    <ul class="results" role="listbox" aria-label="Conversion suggestions">
       {#each results as result, i}
         <li>
           <button
+            type="button"
             class="result-item"
             class:selected={i === selectedIndex}
+            role="option"
+            aria-selected={i === selectedIndex}
             on:mousedown|preventDefault={() => navigateTo(result.slug)}
           >
             <span class="result-name">{result.name}</span>

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

@@ -69,20 +69,23 @@
     <h3>All Converters</h3>
     <button class="close-btn" on:click={() => (open = false)} aria-label="Close sidebar">✕</button>
   </div>
-  <nav>
+  <nav aria-label="Calculator categories">
     {#each categoryUnitGroups as group}
       <div class="cat-section">
         <button
+          type="button"
           class="cat-toggle"
           class:active={expandedCategory === group.key || currentPath.includes(`/category/${group.key}`)}
           on:click={() => toggle(group.key)}
+          aria-expanded={expandedCategory === group.key}
+          aria-controls={`cat-list-${group.key}`}
         >
           <span class="cat-icon">{group.meta.icon}</span>
           <span class="cat-label">{group.meta.label}</span>
           <span class="chevron" class:expanded={expandedCategory === group.key}>›</span>
         </button>
         {#if expandedCategory === group.key}
-          <ul class="cat-list">
+          <ul class="cat-list" id={`cat-list-${group.key}`}>
             {#each group.units as unit (unit.label)}
               <li class="unit-item">
                 <button
@@ -99,7 +102,11 @@
                   <ul class="unit-list">
                     {#each unit.conversions as calc}
                       <li>
-                        <a href="/{calc.slug}" class:current={currentPath === `/${calc.slug}`}>
+                        <a
+                          href="/{calc.slug}"
+                          class:current={currentPath === `/${calc.slug}`}
+                          aria-current={currentPath === `/${calc.slug}` ? 'page' : undefined}
+                        >
                           {calc.name}
                         </a>
                       </li>
@@ -109,7 +116,13 @@
               </li>
             {/each}
             <li>
-              <a href="/category/{group.key}" class="view-all">View all {group.meta.label} →</a>
+              <a
+                href="/category/{group.key}"
+                class="view-all"
+                aria-current={currentPath === `/category/${group.key}` ? 'page' : undefined}
+              >
+                View all {group.meta.label} →
+              </a>
             </li>
           </ul>
         {/if}