Skip to content

Improve semantic navigation and icon-button accessibility #8

@MoerAI

Description

@MoerAI

Summary

Several navigation and icon-only controls violate basic semantic/accessibility expectations: clickable cards/spans are used for navigation, and some icon-only buttons lack accessible labels.

Evidence

Clickable non-button/non-link navigation:

  • src/app/(main)/admin/page.tsx:36 uses clickable Card for task navigation.
  • src/app/(main)/reviewer/page.tsx:15 uses clickable Card for task navigation.
  • src/app/(main)/worker/page.tsx:13 uses clickable Card for task navigation.
  • src/components/common/RoleTabNav.tsx:40-43 uses a clickable span for home navigation.

Icon-only buttons missing aria-label:

  • src/components/common/RoleTabNav.tsx:74-76 sign-out button.
  • src/app/(main)/admin/tasks/create/page.tsx:367-373 remove option button.
  • src/app/(main)/admin/groups/[groupId]/page.tsx:197-203 remove member button.

Impact

Keyboard users and screen-reader users may not be able to discover or operate these controls reliably. Navigation via clickable cards/spans also loses standard link behavior such as keyboard activation, focus semantics, and open-in-new-tab support where applicable.

Minimal Fix

  • Use <Link> for navigation where possible.
  • Use <button> for actions and ensure keyboard/focus states are visible.
  • Add aria-label to icon-only buttons.
  • Preserve existing visual styling while changing semantics.

Acceptance Criteria

  • Task cards and app title navigation are reachable and operable by keyboard.
  • Icon-only controls have meaningful accessible names.
  • Visual appearance remains materially unchanged.
  • npm run lint remains clean after changes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityAccessibility and semantic UI issuepriority: highHigh priority remediation

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions