-
-
Notifications
You must be signed in to change notification settings - Fork 443
[GOOD FIRST ISSUE] Add aria-label to all icon-only buttons #2249
Copy link
Copy link
Open
Labels
accessibilityAccessibility improvementsAccessibility improvementsgood first issueGood for newcomersGood for newcomersgssoc26GSSoC 2026 contributionGSSoC 2026 contributionhelp wantedExtra attention is neededExtra attention is neededlevel:beginnerGSSoC: Beginner difficulty (20 pts)GSSoC: Beginner difficulty (20 pts)type:accessibilityGSSoC type bonus: accessibility (+15 pts)GSSoC type bonus: accessibility (+15 pts)
Milestone
Description
Metadata
Metadata
Assignees
Labels
accessibilityAccessibility improvementsAccessibility improvementsgood first issueGood for newcomersGood for newcomersgssoc26GSSoC 2026 contributionGSSoC 2026 contributionhelp wantedExtra attention is neededExtra attention is neededlevel:beginnerGSSoC: Beginner difficulty (20 pts)GSSoC: Beginner difficulty (20 pts)type:accessibilityGSSoC type bonus: accessibility (+15 pts)GSSoC type bonus: accessibility (+15 pts)
What Needs to Be Done
Audit all icon-only buttons across the app and add appropriate
aria-labelattributes 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 buttonssrc/components/ThemeToggle.tsx— Dark/light mode togglesrc/components/NotificationBell.tsx— Notification bell iconsrc/components/SignOutButton.tsx— Sign out icon buttonAcceptance Criteria
aria-labelattributesTech Context
Look for
<button>or<Button>elements that only contain an SVG icon or Lucide icon with no visible text. Each needs anaria-labelprop.Mentorship
Comment on this issue and you'll receive guidance on getting started. The maintainer will help you through your first PR.