Rating input

<div class="rating-field">
  <div class="rating-input" role="radiogroup" aria-label="How was it?" data-value="4">
    <button type="button" role="radio" aria-checked="false" aria-label="1 star" data-on="true" data-value="1"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><button type="button" role="radio" aria-checked="false" aria-label="2 stars" data-on="true" data-value="2"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><button type="button" role="radio" aria-checked="false" aria-label="3 stars" data-on="true" data-value="3"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><button type="button" role="radio" aria-checked="true" aria-label="4 stars" data-on="true" data-value="4"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><button type="button" role="radio" aria-checked="false" aria-label="5 stars" data-on="false" data-value="5"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  </div>
  <span class="rating-caption" aria-live="polite" data-max="5">4 of 5</span>
</div>