Ratings

Examples

rating draws five stars filled to data-v, the mark's share of the most from 0 to 1 - 4.2 of 5 is 0.84; the library sets it as --v through the CSSOM, so a page under a strict CSP writes no style. The stars are a picture: role="img" with the mark in aria-label, and the number in words beside them when it matters. They take the size of the text around them.

<div class="hstack gap-8">
	<span class="rating" role="img" aria-label="4.2 of 5" data-v="0.84"></span>
	<span class="fw-600 tabular-nums">4.2</span>
	<span class="text-muted fs-12">128 reviews</span>
</div>
<div class="hstack gap-8 fs-24">
	<span class="rating" role="img" aria-label="3 of 5" data-v="0.6"></span>
</div>

Giving a mark

fieldset class="rating-input" holds five radios, each an input before its label: the library hides the inputs and draws each label as a star, filled up to the one checked - and up to the one under the pointer. The words of each label are for a screen reader, in a visually-hidden span; the legend names the mark. The radios stay the control: the arrow keys move the mark, the form sends it.

<fieldset class="rating-input">
	<legend class="visually-hidden">Your mark for the guide</legend>
	<input type="radio" name="rating-give" id="rating-give-1" value="1"><label for="rating-give-1"><span class="visually-hidden">1 star</span></label>
	<input type="radio" name="rating-give" id="rating-give-2" value="2"><label for="rating-give-2"><span class="visually-hidden">2 stars</span></label>
	<input type="radio" name="rating-give" id="rating-give-3" value="3"><label for="rating-give-3"><span class="visually-hidden">3 stars</span></label>
	<input type="radio" name="rating-give" id="rating-give-4" value="4" checked><label for="rating-give-4"><span class="visually-hidden">4 stars</span></label>
	<input type="radio" name="rating-give" id="rating-give-5" value="5"><label for="rating-give-5"><span class="visually-hidden">5 stars</span></label>
</fieldset>

Keyboard and accessibility

• A shown mark is one picture with its words - "4.2 of 5" - not five stars read one by one.
• A mark given is a group of radios: Tab into it, the arrows move the mark, a screen reader says "4 stars, radio button, checked, 4 of 5".
• The stars are drawn in the warning tone on the strong border's grey; in forced colors, in the text colour on grey.

Tokens

From css/components/rating.css. It declares --redz-rating-fill, --redz-warning, --redz-border-strong on its root, never on rows or items.

It reads the theme's --redz-star, --redz-radius-6, --redz-focus.