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:
parent
5cdf5103c9
commit
c5d73844a5
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue