Skip to content

Add aria-label to icon-only buttons in the user menu #67

@aruneshwisdm

Description

@aruneshwisdm

Summary

The user avatar button in the dashboard header (used to open the profile/settings dropdown) does not have an aria-label, making it inaccessible to screen reader users. The button only contains an avatar image with no visible text.

Current code

In apps/web/components/dashboard/header.tsx (lines 113-116):

<Button
  variant="ghost"
  className="relative h-9 w-9 rounded-full"
  data-testid="user-menu"
>

What to do

Add an aria-label that includes the user's name, e.g.:

<Button
  variant="ghost"
  className="relative h-9 w-9 rounded-full"
  data-testid="user-menu"
  aria-label={`User menu for ${user.name || user.email}`}
>

Files

  • apps/web/components/dashboard/header.tsx

Acceptance criteria

  • The user menu trigger button has an aria-label attribute
  • The label is descriptive and includes the user's name or email
  • Build passes with pnpm build
  • Verify with browser dev tools: inspect the button and confirm the accessible name is set

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions