Range bar

canon

Band indicator in a stat tile: recommended zone, ghost of the value N weeks ago, team median, current value dot.

acrm !4412 + !4413 (Reporty › Koučink, owner approved 1. 10. 2026), verified on dev 2. 10. 2026 (1440 light/dark + 390). Colour = --goal-in / --goal-in-ink / --goal-in-subtle (vivid green, owner rejected faded --positive here) vs --ic-amber; motion only under prefers-reduced-motion: no-preference. App-level next to Spark; before canon: stories (States: in band / out / no goal / no data), usage + a11y, and a decision whether it moves to packages/ui. 2. 10. 2026: beta — usage/a11y written, states reviewed by AD on the preview (koucink-stavy.html). Canon 2. 10. 2026: stories + light/dark baselines merged in !4422, AD-verified in the catalogue. Registry repaired 17 Oct 2026 (review F3): mapped existing Ladle stories.

Used in 1 file · 1 area · 1× — components/sales-reports

  • role="img" with an aria-label sentence carrying the numbers („Nejdelší monolog: teď 2:40, před 7 týdny 3:50“); the drawing carries nothing on its own.
  • The state never rests on colour alone: the tile's status has an accessible name („V doporučení“ / „Pozor“).
  • Motion (dot travel) only under prefers-reduced-motion: no-preference (contract reduced-motion.contract.test.ts).
  • Contrast: --goal-in ≥ 3 : 1, --goal-in-ink and --warning-ink ≥ 4.5 : 1 (contract goal-in-tokens.contract.test.ts). The solid --goal-in is 3.30 : 1 in light — on tinted surfaces use -ink.

Source: docs/meeting-analysis/range-bar.a11y.md · GitLab