Skip to content

Commit 95f9527

Browse files
🎨 Palette: Add ARIA label and title to Workflows Play button
Adds `aria-label` and `title` attributes to the icon-only "Play" button in the `WorkflowsModal`. This ensures screen readers can identify the button's action and sighted users have a hover tooltip. Co-authored-by: jmbish04 <26469722+jmbish04@users.noreply.github.com>
1 parent 8dd4d48 commit 95f9527

2 files changed

Lines changed: 10 additions & 1 deletion

File tree

‎.Jules/palette.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## 2024-05-28 - Missing ARIA Labels on Icon Buttons
2+
**Learning:** Found a pattern of missing `aria-label` and `title` attributes on `<Button size="icon">` elements across the UI, particularly in modals and settings. Icon-only buttons without these attributes are completely opaque to screen readers and difficult for sighted users to decipher without hover tooltips.
3+
**Action:** When adding or reviewing `<Button size="icon">` usage, always ensure `aria-label` is present for screen readers and `title` is present to provide hover tooltips for sighted users.

‎src/frontend/src/components/modals/WorkflowsModal.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,13 @@ export function WorkflowsModal({ workflowCount = 8 }: { workflowCount?: number }
3939
</div>
4040
<div className="font-medium text-sm">{wf}</div>
4141
</div>
42-
<Button size="icon" variant="ghost" className="h-8 w-8 hover:bg-zinc-800">
42+
<Button
43+
size="icon"
44+
variant="ghost"
45+
className="h-8 w-8 hover:bg-zinc-800"
46+
aria-label={`Run ${wf} workflow`}
47+
title={`Run ${wf} workflow`}
48+
>
4349
<Play className="w-4 h-4 text-zinc-400" />
4450
</Button>
4551
</CardContent>

0 commit comments

Comments
 (0)