Rating

1import { Rating } from '@/ui/Input'23// Interactive: a radiogroup, with the word that fixes the meaning.4<Field label="How was your deployment experience?">5  <Row>6    <Rating7      label="Deployment experience"8      value={score}9      onChange={setScore}10    />11    <span aria-live="polite">{LABELS[score] ?? 'Not rated'}</span>12  </Row>13</Field>1415{/* The score alone tells you something is wrong and nothing about what. */}16{score > 0 && score <= 3 && (17  <Field label="What went wrong?" optional>18    <Textarea rows={3} />19  </Field>20)}2122// Read-only: one image, one label, zero tab stops.23<span role="img" aria-label={`${avg} out of 5, from ${count} reviews`}>24  {Array.from({ length: 5 }, (_, i) => (25    <Star key={i} aria-hidden fill={fillFor(avg, i)} />26  ))}27</span>2829// Fractional fill for aggregates: clip an overlay rather than swapping icons.30function PartialStar({ fill }: { fill: number }) {31  return (32    <span className="relative">33      <Star className="text-[var(--ds-border-strong)]" />34      <span className="absolute inset-0 overflow-hidden" style={{ width: `${fill * 100}%` }}>35        <Star className="text-[var(--ds-warning)]" fill="currentColor" />36      </span>37    </span>38  )39}

<!-- Interactive: one value, one tab stop, arrows inside. -->
<div role="radiogroup" aria-label="Deployment experience">
  <button type="button" role="radio" aria-checked="false" tabindex="-1"
          aria-label="1 of 5 — Poor">★</button>
  <button type="button" role="radio" aria-checked="false" tabindex="-1"
          aria-label="2 of 5 — Fair">★</button>
  <button type="button" role="radio" aria-checked="true"  tabindex="0"
          aria-label="3 of 5 — Good">★</button>
</div>
<p role="status" aria-live="polite">Good</p>

<!-- Read-only: NOT five buttons. One image, one label. -->
<span role="img" aria-label="4.2 out of 5, from 912 reviews">
  <svg aria-hidden="true">…</svg>
  <svg aria-hidden="true">…</svg>
  <svg aria-hidden="true">…</svg>
  <svg aria-hidden="true">…</svg>
  <svg aria-hidden="true">…</svg>
</span>

.ds-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ds-rating button {
  padding: 2px;
  border-radius: var(--radius-xs);
  color: var(--ds-border-strong);    /* empty: outlined, 3:1, still visible */
  transition: color 120ms;
}

.ds-rating button[aria-checked='true'],
.ds-rating button[data-active='true'] {
  color: var(--ds-warning);          /* not the accent: this is not an action */
}

/* Fill is the second signal, so filled/empty survives greyscale. */
.ds-rating svg[data-filled='true'] { fill: currentColor; }

/* The symbols stay 20px; the TARGETS grow to 44px and swallow the gaps. */
@media (pointer: coarse) {
  .ds-rating button { padding: 12px; margin: -12px; }
  .ds-rating { gap: 28px; }
}

/* Colour collapses in forced-colors: keep a shape difference. */
@media (forced-colors: active) {
  .ds-rating button[aria-checked='true'] { forced-color-adjust: none; }
}

.ds-rating__partial { position: relative; display: inline-block; }
.ds-rating__partial > .fill {
  position: absolute;
  inset: 0;
  overflow: hidden;                  /* clip to the fraction */
  color: var(--ds-warning);
}