local-it/mitgliederverwaltung
local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 57 Pull requests 3 Projects 2 Releases 5 Packages 1 Activity Actions
mitgliederverwaltung/docs/badge-wcag-phase1-analysis.md

2.3 KiB
Raw Blame History

Badge Component Design Notes (WCAG)

Design rationale for the central <.badge> core component (MvWeb.CoreComponents) and the WCAG-driven theme overrides in assets/css/app.css. Before it, badges were raw <span class="badge ..."> markup with no central component.

<.badge> API contract

  • attr :variant — :neutral | :primary | :info | :success | :warning | :error
  • attr :style — :soft | :solid | :outline (default: :soft)
  • attr :size — :sm | :md (default: :md)
  • attr :sr_label — optional screen-reader label for icon-only badges
  • slot :icon — optional
  • slot :inner_block — badge text

Design rules

  • :soft and :solid use a visible background; :soft is the default. No transparent ghost as a default.
  • :outline always sets a background (e.g. bg-base-100) so the border stays visible on grey (base-200/base-300) surfaces.
  • Ghost only as an explicit opt-in, and then with bg-base-100 for visibility (plain DaisyUI badge-ghost is base-200 on base-200 — nearly invisible).
  • Clickable chips keep <.badge> as a plain container with a button in the inner_block.

WCAG contrast overrides (app.css)

DaisyUI defaults do not reach the WCAG 2.2 AA 4.5:1 text-contrast ratio for badges, so app.css adds per-theme overrides on top of the custom light / dark themes:

  • Light theme: darker --badge-fg for all solid variants; darker text on badge-soft's tinted background; uniform dark text for badge-outline on base-100.
  • Dark theme: slightly darkened solid-badge backgrounds so the light *-content colors reach 4.5:1; lighter, readable variant tints for badge-soft; light --badge-fg for badge-outline on base-100.

Related: contrast overrides for the member-filter join buttons (.member-filter-dropdown .join .btn) under the same 4.5:1 rule.

Variant helpers

  • MembershipFeeHelpers.status_variant/1 → :success | :error | :warning. status_variant(:suspended) -> :warning (yellow) deliberately matches the Edit button (btn-warning), keeping the "suspended" badge the same color as its action.
  • RoleLive.Helpers.permission_set_badge_variant/1 → :neutral | :info | :success | :error.
  • MembershipFeeStatus.format_cycle_status_badge/1 additionally returns a :variant for <.badge>.