fix(a11y): add tooltips and aria attributes to agent view toggle (#1937)

## Problem

On the Agents page, there are two small icon buttons for switching
between list view and org chart view. But these buttons had:
- No title attribute, so hovering show nothing
- No aria-label, so screen readers just say "button"
- No aria-pressed, so no way to know which view is active
- No role="group" on the container

I was confused the first time I see these buttons because one is a list
icon and the other is a git-branch icon, and without hovering or
clicking I had no idea what they do. Specially the git-branch icon - is
it for branches? Repos? No, it's for org chart view.

## What I changed

- Added `title` to each button: "List view" and "Org chart view"
- Added `aria-label` matching the title for screen readers
- Added `aria-pressed` to indicate which view is currently selected
- Added `role="group"` with `aria-label="View mode"` on the container
div

## How to test

1. Go to Agents page (must have more than 1 agent for toggle to appear)
2. Hover over the list icon - should see "List view" tooltip
3. Hover over the branch icon - should see "Org chart view" tooltip
4. Use screen reader - should announce "List view, pressed" or "Org
chart view, not pressed"

1 file, 7 lines added.
This commit is contained in:
Evyatar Bluzer 2026-07-07 06:03:10 +07:00 committed by GitHub
parent 5cdf5103c9
commit c5d73844a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 1 deletions

View File

@ -404,13 +404,16 @@ export function Agents() {
<div className="flex items-center gap-2">
{/* View toggle */}
{!forceListView && (
<div className="flex items-center border border-border">
<div className="flex items-center border border-border" role="group" aria-label="View mode">
<button
className={cn(
"p-1.5 transition-colors",
effectiveView === "list" ? "bg-accent text-foreground" : "text-muted-foreground hover:bg-accent/50"
)}
onClick={() => setView("list")}
title="List view"
aria-label="List view"
aria-pressed={effectiveView === "list"}
>
<List className="h-3.5 w-3.5" />
</button>
@ -420,6 +423,9 @@ export function Agents() {
effectiveView === "org" ? "bg-accent text-foreground" : "text-muted-foreground hover:bg-accent/50"
)}
onClick={() => setView("org")}
title="Org chart view"
aria-label="Org chart view"
aria-pressed={effectiveView === "org"}
>
<GitBranch className="h-3.5 w-3.5" />
</button>