From c2e31e1ec1b3969330fb18ff91c3a8a8b08dafe8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 28 Jun 2026 07:36:52 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20ARIA=20labels?=
 =?UTF-8?q?=20to=20Sidebar=20Nav=20and=20Infrastructure=20Tree=20toggle=20?=
 =?UTF-8?q?buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds descriptive `aria-label`s to the expand/collapse group toggle buttons in the sidebar navigation components to improve accessibility for screen readers.

Co-authored-by: senolcolak <11789157+senolcolak@users.noreply.github.com>
---
 .Jules/palette.md                                        | 1 +
 ui/src/lib/components/shell/NavInfrastructureTree.svelte | 3 +++
 ui/src/lib/components/shell/SidebarNav.svelte            | 1 +
 3 files changed, 5 insertions(+)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 82673d08..d1795fd7 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -17,3 +17,4 @@
 ## 2024-06-25 - Topology Canvas Controls Accessibility
 **Learning:** Found that the live topology canvas headers rely on icon/symbol buttons (+, -, Fit) that lacked hover tooltips and clear ARIA labeling. Sighted users wouldn't know the exact function without trial and error, and screen readers lacked context for actions like "Fit" vs "Focus".
 **Action:** Always ensure floating canvas or map control panels use both `title` (for sighted tooltips) and explicit `aria-label`s to describe their zoom/pan functions clearly, as symbols alone are ambiguous.
+## 2026-06-28 - Add aria-labels to collapsible groups\n**Learning:** Svelte tree components often use `<button>` tags for expand/collapse actions that lack descriptive text. Adding `aria-label`s with context like `aria-label="Toggle {node.name} group"` improves screen reader experience.\n**Action:** Always verify tree UI components have `aria-label` on group toggle buttons.
diff --git a/ui/src/lib/components/shell/NavInfrastructureTree.svelte b/ui/src/lib/components/shell/NavInfrastructureTree.svelte
index b956842d..a9d8b1da 100644
--- a/ui/src/lib/components/shell/NavInfrastructureTree.svelte
+++ b/ui/src/lib/components/shell/NavInfrastructureTree.svelte
@@ -99,6 +99,7 @@
 				<button
 					type="button"
 					class="flex items-center gap-2 text-[length:var(--text-sm)] text-[var(--color-neutral-400)] no-underline bg-transparent border-none cursor-pointer rounded-[var(--radius-xs)] text-left py-1 pr-2 pl-0 hover:bg-[var(--color-neutral-800)] hover:text-[var(--color-sidebar-text-active,#ffffff)]"
+					aria-label="Toggle Default Cloud group"
 					aria-expanded={openGroups['cloud-1']}
 					aria-controls="group-cloud-1"
 					onclick={() => onToggleGroup('cloud-1')}
@@ -113,6 +114,7 @@
 						<div class="flex flex-col">
 							<button type="button"
 								class="flex items-center gap-2 text-[length:var(--text-sm)] text-[var(--color-neutral-400)] no-underline bg-transparent border-none cursor-pointer rounded-[var(--radius-xs)] text-left py-1 pr-2 pl-0 hover:bg-[var(--color-neutral-800)] hover:text-[var(--color-sidebar-text-active,#ffffff)]"
+								aria-label="Toggle Hosts group"
 								aria-expanded={openGroups['hosts']}
 								aria-controls="group-hosts"
 								onclick={() => onToggleGroup('hosts')}
@@ -131,6 +133,7 @@
 												<button
 														type="button"
 														class="app-nav__tree-row app-nav__tree-row--host"
+														aria-label="Toggle node {node.name} group"
 														aria-expanded={hostExpanded}
 														aria-controls="group-{node.id}"
 														onclick={() => onToggleGroup(getNodeExpandedKey(node.id))}
diff --git a/ui/src/lib/components/shell/SidebarNav.svelte b/ui/src/lib/components/shell/SidebarNav.svelte
index d3dafe04..f39a2174 100644
--- a/ui/src/lib/components/shell/SidebarNav.svelte
+++ b/ui/src/lib/components/shell/SidebarNav.svelte
@@ -253,6 +253,7 @@
 			<button
 				type="button"
 				class="flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider text-[var(--color-neutral-500)] bg-transparent border-none cursor-pointer rounded-[var(--radius-xs)] px-2 py-1 hover:text-[var(--color-sidebar-text-active,#ffffff)]"
+				aria-label="Toggle Design group"
 				aria-expanded={openGroups['design']}
 				aria-controls="group-design"
 				onclick={() => toggleGroup('design')}