Skip to content

Add missing ARIA labels to icon-only buttons #13

@hasnaintypes

Description

@hasnaintypes

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

  • All icon-only buttons have aria-label
  • Labels are descriptive (not just "button")
  • Passes pnpm check

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions