Skip to content

Design: several components use the green/red exception colors without the required aria-label, or colors outside the exception entirely #327

Description

@Jaydbrown

CONTRIBUTING.md's Design System section permits text-green-600/text-red-600 "only when accompanied by an aria-label so colour is never the sole signal." Several places use these (or other) hue colors without meeting that bar:

  • components/stream/StreamCard.tsx:53 — rate amount uses text-green-600 dark:text-green-400 with no aria-label.
  • components/stream/BatchStreamCreator.tsx:90 — rate display uses text-green-600 dark:text-green-400 font-bold with no aria-label.
  • components/stream/BulkWithdrawButton.tsx:167 — progress fill uses bg-green-500, which isn't even covered by the exception (the exception is text-green-600 only, not bg-green-*).
  • components/stream/BulkWithdrawButton.tsx:158 — excluded-streams notice uses text-amber-600 dark:text-amber-400, not in the exception list at all.
  • components/ui/Input.tsx:22 — error state uses border-red-400 focus:border-red-500 focus:ring-red-500/10; border-red isn't covered by the text-only exception.
  • app/settings/page.tsx:66 — "Settings saved" indicator uses text-green-600 dark:text-green-400 with no aria-label; line 167's reset button uses border-red-300 ... text-red-600 with no aria-label.
  • app/stream/[id]/page.tsx:165 — "Stream is paused — balance frozen" text uses text-amber-600, not in the exception list.

None of these are catastrophic individually, but collectively they show CONTRIBUTING.md's own PR checklist item ("No hue-named colour classes without an aria-label") isn't being consistently enforced at review time. Worth a sweep to either add the required aria-labels or replace with black/white/gray per the documented rule.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions