<bmx-rating>

<div class="row">
  <bmx-rating label="How was your stay?" description="Click a star, drag across them, or tab to the row and use the arrow keys."></bmx-rating>
</div>
<div class="row">
  <bmx-rating label="Food" allow-half="true" clearable="true" show-value="true" description="Halves, and clicking the current star again takes the rating back off."></bmx-rating>
</div>
<div class="row">
  <bmx-rating label="Average score" value="4.5" allow-half="true" readonly="true" show-value="true" description="Read-only: an image with a name, not a control in the tab order."></bmx-rating>
</div>
<div class="row">
  <bmx-rating id="ex-rating-worded" label="Recommend us" icon="heart" tone="danger" max="5" description="Another glyph, and wording of its own."></bmx-rating>
</div>
<script type="module">
  await customElements.whenDefined('bmx-rating');

  // `format` is a function, so it is a property. One function supplies both the
  // caption and `aria-valuetext`, which is what stops a rating showing "Loved
  // it" while announcing "5".
  const words = ['No answer yet', 'Never', 'Unlikely', 'Perhaps', 'Probably', 'Certainly'];

  document.getElementById('ex-rating-worded').format = value => words[Math.round(value)];
</script>

WHY IT IS A SLIDER AND NOT A RADIO GROUP

A rating reads like a small set of answers, which is a radio group, and it behaves like one - arrow keys move between the answers and change the value as they go - so it takes its keyboard from src/core/choice.ts unchanged, including the rule that Up and Down never flip in a right-to-left layout while Left and Right always do.

The ARIA role is slider even so, and the reason is halves. A five-star rating with halves has ten answers drawn as five glyphs, and a radio group would have to publish ten radios to match - so a screen reader user hears "two and a half stars, radio button, six of ten" while a sighted user sees five stars. A slider carries the same value as one number, with the maximum beside it, and aria-valuetext says it in words. One control, one value, one announcement.

A read-only rating is neither. Showing an average alongside a review is not a control at all - it is a picture of a number, and the great majority of ratings on any site are this - so it renders as role="img" with the value as its accessible name, and takes no place in the tab order. A widget nobody can operate is worse than a label.

WHY THE ICON IS A PATH AND NOT A SLOT

A slot puts its assigned node in exactly one place. Five icons need five copies, and there is no markup that says "put this element here five times" - so icon names one of the shapes below and iconPath takes a path of your own, in a 24x24 box. It is the same trade bmx-button makes for its spiral.

HALVES ARE DRAWN, NOT CHOSEN FROM A SECOND GLYPH

Each icon is the empty shape with a filled copy laid over it, clipped to a width. That is one shape rather than two, so a half cannot shimmer along the seam; it is expressed as inline-size, so a right-to-left layout fills from the correct edge without a second rule; and the fill is a percentage, so a consumer showing 4.3 as 30% of the fifth star needs nothing added here.

ACCESSIBILITY

• One tab stop, on the row, not five.
• aria-valuetext says "3 of 5 stars", because aria-valuenow="3" on its own is a number with no unit and no scale.
• The hover preview never survives the pointer leaving, and never reaches assistive technology: it is a sighted affordance, and announcing every star the mouse crosses would be unusable.
• Read-only ratings are images with names; disabled ones are not focusable.