Context
Several icon-only buttons (delete, edit, close) lack aria-label attributes, making them inaccessible to screen readers.
What needs to be done
Audit components for icon-only buttons and add appropriate aria-label props:
- Sidebar toggle buttons
- Table action buttons (edit, delete)
- Modal close buttons
- Any
<Button size="icon"> without a label
Implementation hints
// Before
<Button size="icon" variant="ghost" onClick={onDelete}>
<Trash2 className="h-4 w-4" />
</Button>
// After
<Button size="icon" variant="ghost" onClick={onDelete} aria-label="Delete transaction">
<Trash2 className="h-4 w-4" />
</Button>
Acceptance criteria
Context
Several icon-only buttons (delete, edit, close) lack
aria-labelattributes, making them inaccessible to screen readers.What needs to be done
Audit components for icon-only buttons and add appropriate
aria-labelprops:<Button size="icon">without a labelImplementation hints
Acceptance criteria
aria-labelpnpm check