diff --git a/.Jules/palette.md b/.Jules/palette.md
index 1c907dcf..22272942 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -8,4 +8,9 @@
 
 ## 2024-06-25 - Custom File Input Accessibility and Modal Escapes
 **Learning:** Hidden file inputs (`class="hidden"`) inside stylized labels completely break keyboard navigation, as users cannot tab to the input to trigger the file browser. Additionally, modals without keyboard (Escape) or explicit visual close buttons trap keyboard and screen reader users.
-**Action:** Use `class="sr-only"` instead of `class="hidden"` for custom file inputs, and add `focus-within:ring-2` on the parent label to visibly indicate focus. Always provide `<svelte:window onkeydown={(e) => e.key === 'Escape' && close()} />` and a clearly labeled `aria-label="Close modal"` button in dialog headers.
\ No newline at end of file
+**Action:** Use `class="sr-only"` instead of `class="hidden"` for custom file inputs, and add `focus-within:ring-2` on the parent label to visibly indicate focus. Always provide `<svelte:window onkeydown={(e) => e.key === 'Escape' && close()} />` and a clearly labeled `aria-label="Close modal"` button in dialog headers.## 2025-04-09 - Icon-Only Button Accessibility
+**Learning:** Svelte icon-only buttons often lack ARIA attributes, making them invisible to screen readers.
+**Action:** Always ensure ,  (if toggleable), and  ring styling are present for custom buttons using unicode characters or SVGs.
+## 2025-04-09 - Icon-Only Button Accessibility
+**Learning:** Svelte icon-only buttons often lack ARIA attributes, making them invisible to screen readers.
+**Action:** Always ensure `aria-label`, `aria-expanded` (if toggleable), and `focus-visible` ring styling are present for custom buttons using unicode characters or SVGs.
diff --git a/src/App.svelte b/src/App.svelte
index 3f618ffb..697f6682 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -29,7 +29,9 @@
     try {
       const hostname = new URL(url).hostname;
       urlLoadSource = hostname;
-    } catch { urlLoadSource = 'remote server'; }
+    } catch {
+      urlLoadSource = 'remote server';
+    }
     try {
       const { csvText, baseUrl } = await loadFromUrl(url);
       dataset.load(csvText, { type: 'url', name: url, baseUrl });
@@ -62,14 +64,18 @@
   <div class="flex-1 flex min-h-0">
     <!-- Sidebar -->
     {#if sidebarOpen && dataset.isLoaded}
-      <aside class="w-64 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto flex flex-col">
+      <aside
+        class="w-64 flex-shrink-0 bg-white border-r border-gray-200 overflow-y-auto flex flex-col"
+      >
         <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200">
           <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Controls</span>
           <button
-            class="text-gray-400 hover:text-gray-600 text-xs"
+            class="text-gray-400 hover:text-gray-600 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded"
             onclick={() => (sidebarOpen = false)}
             title="Close sidebar"
-          >&#10005;</button>
+            aria-label="Close sidebar"
+            aria-expanded="true">&#10005;</button
+          >
         </div>
 
         <InputSliders />
@@ -85,11 +91,7 @@
         <!-- Data table toggle -->
         <div class="border-t border-gray-200 mt-auto p-3">
           <label class="flex items-center gap-2 text-xs text-gray-600 cursor-pointer">
-            <input
-              type="checkbox"
-              bind:checked={showDataTable}
-              class="rounded border-gray-300"
-            />
+            <input type="checkbox" bind:checked={showDataTable} class="rounded border-gray-300" />
             Show data table
           </label>
         </div>
@@ -100,10 +102,12 @@
     {#if !sidebarOpen && dataset.isLoaded}
       <button
         class="flex-shrink-0 w-6 flex items-center justify-center bg-white border-r border-gray-200
-          text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors"
+          text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
         onclick={() => (sidebarOpen = true)}
         title="Open sidebar"
-      >&#9654;</button>
+        aria-label="Open sidebar"
+        aria-expanded="false">&#9654;</button
+      >
     {/if}
 
     <!-- Main grid area -->
@@ -158,7 +162,10 @@
                   Retry
                 </button>
                 <button
-                  onclick={() => { urlLoadError = ''; showLoadModal = true; }}
+                  onclick={() => {
+                    urlLoadError = '';
+                    showLoadModal = true;
+                  }}
                   class="px-5 py-2 bg-gray-100 text-gray-700 text-sm rounded-lg font-medium
                     hover:bg-gray-200 transition-colors"
                 >
@@ -173,12 +180,10 @@
         <div class="flex-1 flex items-center justify-center">
           <div class="text-center max-w-md">
             <div class="text-6xl mb-4">&#128200;</div>
-            <h2 class="text-xl font-semibold text-gray-900 mb-2">
-              Design Explorer
-            </h2>
+            <h2 class="text-xl font-semibold text-gray-900 mb-2">Design Explorer</h2>
             <p class="text-gray-500 mb-6">
-              Explore multi-dimensional parametric design spaces. Load a CSV
-              dataset to visualize and compare design alternatives.
+              Explore multi-dimensional parametric design spaces. Load a CSV dataset to visualize
+              and compare design alternatives.
             </p>
             <button
               onclick={() => (showLoadModal = true)}
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 5e78d122..dc5cab13 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -121,7 +121,7 @@
 
       <button
         onclick={handleZoomToSelection}
-        class="px-2.5 py-1.5 text-xs text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
+        class="px-2.5 py-1.5 text-xs text-gray-600 rounded-lg hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
         title="Zoom to currently filtered designs"
         disabled={selection.brushes.length === 0}
       >
@@ -130,7 +130,7 @@
 
       <button
         onclick={handleExcludeSelection}
-        class="px-2.5 py-1.5 text-xs text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
+        class="px-2.5 py-1.5 text-xs text-gray-600 rounded-lg hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
         title="Exclude currently filtered designs"
         disabled={selection.brushes.length === 0}
       >