Skip to content

a11y(CertSwitcher): mark the decorative Check icon as aria-hidden #95

Description

@nastaso

Context

Decorative icons should be hidden from assistive technology so screen readers do not announce them as meaningless content (WCAG 1.1.1). In src/components/CertSwitcher.tsx the active-item check mark is rendered without aria-hidden:

{isActive && <Check className="w-4 h-4 text-brand ml-2" />} (line 195)

The selected state is already conveyed by the option itself (and its aria-selected/active styling), so this check icon is purely decorative and should not be announced.

Scope

  • File: src/components/CertSwitcher.tsx (around line 195).
  • Add aria-hidden="true" to the <Check ... /> icon.
  • One-line change; no visual or behavioral change.

Acceptance criteria

  • The <Check> icon carries aria-hidden="true".
  • npm run lint and npm run test pass; no visual change.

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions