Skip to content

Add aria-labels to all icon-only buttons across the app #216

Description

@Benjtalkshow

Several buttons across the app render only an icon with no visible text and no aria-label. Screen readers announce them as "button" with no context. Examples found during a quick pass:

  • The mobile cancel button in bounty-detail-sidebar-cta.tsx (X icon next to Apply)
  • Action icons in model4-maintainer-dashboard.tsx (Message, Remove)
  • The copy link button under the sidebar CTA
  • The mode toggle in components/mode-toggle.tsx
  • Action buttons in application-review-dashboard.tsx

What to do

Walk every icon-only button in components/ and add an appropriate aria-label. Where the button already has a Tooltip with TooltipContent, use that text as the aria-label to keep them in sync.

The notification bell and bookmark button already do this correctly. Use them as the reference pattern.

Acceptance criteria

  • Every icon-only button has a meaningful aria-label
  • Tooltip text and aria-label match where both exist
  • Existing buttons with text labels are unchanged
  • No new accessibility regressions reported by axe on the bounty detail page

Files

  • components/bounty-detail/bounty-detail-sidebar-cta.tsx
  • components/bounty-detail/model4-maintainer-dashboard.tsx
  • components/bounty/application-review-dashboard.tsx
  • components/mode-toggle.tsx
  • components/notifications/notification-bell.tsx (reference)
  • components/bounty/bookmark-button.tsx (reference)
  • Plus any other icon-only buttons discovered during the sweep

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions