Rating

The rating input — distinct from ScoreBar, which is the output. A native radio group implementing the W3C ARIA APG rating pattern, in Scott O'Hara's styled-radio variant, at WCAG 1.4.11 contrast. The legend is the category name; the hint is what that category measures. Every category requires a score from 1 to 5.

Decisions taken from the sources, not invented

Shape, not colour

Filled and empty are two different glyphs — ★ and ☆ — carried by a ::before. In forced-colors mode every colour is replaced by the system palette, and a colour-only fill would make full and empty stars identical. As a text glyph it also inherits currentcolor for free.

Cumulative fill is a property of the group, not of one input, so it is expressed once in the stars utility. :is() equalises specificity between the checked and hover rules — without it the checked rule outranks hover and the preview breaks the moment you hover a filled star.

@utility stars {
  & > label[data-star] { color: var(--color-text-muted); }
  & > label[data-star] .star::before { content: "\2606\FE0E"; } /* ☆ text */
  & > label[data-star]:is(
      :has(input:checked),
      :has(~ label[data-star] input:checked)
    ) {
    color: var(--color-star);                       /* #f59e0b */
    & .star::before { content: "\2605\FE0E"; }     /* ★ text */
  }
}

Display variants

Judgement calls, owned as such

• The input is never tier-coloured. A green 5 next to a red 1 tells the respondent which answer is correct. That is survey methodology, not an accessibility rule.
• 44px targets in every density, where WCAG asks 24px at AA and 44px at AAA.
• No live region. The radio group already announces "option 4 of 5, Very Good, selected". An aria-live on top would say everything twice. The visible summary is for people who receive no announcement at all, and it sits outside aria-describedby.
• Invalid outlines the group, not each star. Stars have no border to turn red, and framing each one would read as five separate controls.

Design-system specimen

Not for product. O'Hara's “Without rating” chip is the only native way back to an empty radio group after a tap. Keep it here so empty and undo states can be tested; never render it in the shipping form.

React

From @sportingscouter/ui-react. The component adds no visual values of its own — every class comes from the same tv() recipe the design system defines, so the two cannot drift. Do not pass allowUnrated in product.

import { Rating } from '@sportingscouter/ui-react';
import { isRated } from '@sportingscouter/ui';

<Rating
  legend="Communication"
  hint="Information accessibility and clarity of instructions for participants"
  required
  onValueChange={setScore}
/>

{/* legend = category name, hint = what it measures.
    Never a question. Same pair as ScoreBar. */}

{/* number + word, as a vertical list */}
<Rating legend="Provisions" hint="Availability and quality of event provisions" display="scale" required />

{/* numbers in a row, the word sr-only */}
<Rating legend="Merchandising" hint="Availability and quality of event merchandising, including official apparel and accessories" display="compact" required />

{/* Design-system testing only — never in product */}
<Rating legend="Specimen" allowUnrated />

{!isRated(score) && <p>Pick a rating to continue.</p>}