From e34eacfb2e1222faef8a780ce56851b1a7a8e215 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 14 Jul 2026 08:39:06 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20aria-labels=20t?=
 =?UTF-8?q?o=20search=20mode=20toggle=20and=20clear=20search=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Himan-D <262577684+Himan-D@users.noreply.github.com>
---
 .jules/palette.md                             | 3 +++
 dashboard/src/components/dashboard/header.tsx | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/.jules/palette.md b/.jules/palette.md
index 24d59e01..ff4b3e75 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -2,3 +2,6 @@
 ## 2026-06-07 - Added aria-labels to icon-only buttons
 **Learning:** The project relies on shadcn/ui but has missed several standard accessibility practices like adding 'aria-label' or screen reader only text to icon-only buttons. The Header and Memory Table components, as well as the Sidebar component, have icon-only buttons without proper accessible names.
 **Action:** Always verify that 'Button' components with 'size="icon"' and regular '<button>' elements without visible text have 'aria-label' attributes or use '<span className="sr-only">' for accessibility.
+## 2026-07-14 - Added aria-labels to ambiguous toggle buttons
+**Learning:** Ambiguous controls like toggles with abbreviated text (e.g., 'AI' vs 'Vec' for screen size constraints) require descriptive aria-labels that explain both the current state and available actions.
+**Action:** Always add descriptive aria-labels to toggle buttons with abbreviated text to ensure screen reader users understand the component's state and purpose.
diff --git a/dashboard/src/components/dashboard/header.tsx b/dashboard/src/components/dashboard/header.tsx
index c5a13466..1b8b8e23 100644
--- a/dashboard/src/components/dashboard/header.tsx
+++ b/dashboard/src/components/dashboard/header.tsx
@@ -124,6 +124,7 @@ export function Header() {
                     "h-7 px-2 text-xs gap-1",
                     searchMode === "spreading" && "bg-primary/90 hover:bg-primary"
                   )}
+                  aria-label={`Search mode: ${searchMode === "spreading" ? "Spreading Activation (AI)" : "Vector Search"}. Click to change.`}
                 >
                   <Zap className="h-3 w-3" />
                   {searchMode === "spreading" ? "AI" : "Vec"}
@@ -153,6 +154,7 @@ export function Header() {
                     setSearchQuery("");
                     setShowResults(false);
                   }}
+                  aria-label="Clear search results"
                 >
                   <X className="h-3 w-3" />
                 </Button>