Skip to content

🎨 Palette: Add ARIA labels to Sidebar Nav toggle buttons #162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
senolcolak wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Add ARIA labels to Sidebar Nav toggle buttons #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
3 changes: 3 additions & 0 deletions ui/src/lib/components/shell/NavInfrastructureTree.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
Expand All @@ -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')}
Expand All @@ -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))}
Expand Down
1 change: 1 addition & 0 deletions ui/src/lib/components/shell/SidebarNav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
Expand Down
Loading