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')}