Rating

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<fieldset class="tui-rating" data-lamp="amber">
  <legend class="tui-label">Rate this release</legend>
  <div class="tui-rating__row">
    <div class="tui-rating__lamps">
      <label><input type="radio" name="score" value="1"><span class="tui-rating__lamp"></span><span class="tui-rating__n">1</span></label>
      <label><input type="radio" name="score" value="2"><span class="tui-rating__lamp"></span><span class="tui-rating__n">2</span></label>
      <!-- … to 5 -->
    </div>
    <span class="tui-rating__out" aria-hidden="true">Not rated</span>
  </div>
</fieldset>

<!-- Read-only: an image with the score in its name -->
<div class="tui-rating tui-rating--readonly" role="img" aria-label="Rated 4 out of 5">
  <span class="tui-rating__lamps">
    <span class="tui-rating__lamp" data-on></span> … <span class="tui-rating__lamp"></span>
  </span>
</div>

import { ratingText, ratingLabel } from '/kit/kit.mjs';

document.querySelector('.tui-rating').addEventListener('tui-rating-change', (e) => {
  save(e.detail.value, e.detail.max);        // 4, 5
});

ratingText(4, 5);                             // '4 of 5'
ratingLabel(4, 5);                            // 'Rated 4 out of 5'

Needs kit.css and kit.mjs. How to install the kit.

• It is a radio group in a <fieldset> with a <legend>, which every screen reader says as “Rate this release, group, 4, radio button, 4 of 5”, with no script and no ARIA.
• The score is told three ways that are not colour: how many lamps are lit, the number printed under each lamp, and, with the script, the words “4 of 5”. A lit lamp is also brighter and haloed, an unlit one is dark in its recess.
• A read-only row is a role="img" named “Rated 4 out of 5”, so it is one thing to a screen reader, not five lamps. The lamps past the score carry a dash in the recess, so even a printout shows the score.
• Focus is a 2px ring round the lamp’s recess. The hover preview lights what a press would light and puts it back when the pointer leaves; it is for the pointer only, and a keyboard move shows the real thing.
• On a phone each lamp’s target is 44px square, five fit in a row at 390px, and the lamps take no transition under reduced motion.

The radio is the browser’s, kept whole and laid over its own lamp, so a press, a label, the form and the arrow keys are native. The lamp is the kit’s indicator lamp set in a round recess, and the lit lamps are found with CSS alone: a lamp is lit if its own radio is checked or if a later radio is, which is the selector :has(~ label input:checked). The hover preview is the same rule keyed on the pointer. The script only prints the words.