Skip to content

[GOOD FIRST ISSUE] Add aria-label to all icon-only buttons #2249

Description

@Priyanshu-byte-coder

What Needs to Be Done

Audit all icon-only buttons across the app and add appropriate aria-label attributes so screen readers can announce their purpose.

Why This Matters

Icon-only buttons without labels are invisible to screen reader users. This is a WCAG 2.1 Level A requirement (1.1.1 Non-text Content).

Files to Look At

  • src/components/DashboardHeader.tsx — ThemeToggle, NotificationBell, SignOutButton, KeyboardShortcuts buttons
  • src/components/ThemeToggle.tsx — Dark/light mode toggle
  • src/components/NotificationBell.tsx — Notification bell icon
  • src/components/SignOutButton.tsx — Sign out icon button

Acceptance Criteria

  • All icon-only buttons have descriptive aria-label attributes
  • Labels accurately describe the button action (e.g., "Toggle dark mode", "View notifications", "Sign out")
  • No visual changes to the UI
  • Screen reader correctly announces button purpose

Tech Context

Look for <button> or <Button> elements that only contain an SVG icon or Lucide icon with no visible text. Each needs an aria-label prop.

Mentorship

Comment on this issue and you'll receive guidance on getting started. The maintainer will help you through your first PR.

Metadata

Metadata

Assignees

Labels

accessibilityAccessibility improvementsgood first issueGood for newcomersgssoc26GSSoC 2026 contributionhelp wantedExtra attention is neededlevel:beginnerGSSoC: Beginner difficulty (20 pts)type:accessibilityGSSoC type bonus: accessibility (+15 pts)

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions