דירוג כוכבים

קורא מסך שמקבל חמישה תווי כוכב מקריא חמישה סמלים ולא "4.3 מתוך 5", ולכן הכוכבים מסומנים aria-hidden ולידם טקסט אמיתי. הדירוג השבור נעשה בשכבה חתוכה באחוזים במקום חצי תו, והבחירה בנויה מ-radio אמיתיים — כך חצים ו-Tab עובדים בלי שורת קוד. דירוג כוכבים הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · ביקורות · טפסים · נגישות

<!-- דירוג כוכבים — לקריאה ולבחירה -->
<style>
  .klix-stars { display: inline-flex; align-items: center; gap: .5rem }
  .klix-stars-track { position: relative; display: inline-block; font-size: 1.25rem;
    line-height: 1; color: #475569 }
  .klix-stars-fill { position: absolute; inset-block: 0; inset-inline-start: 0;
    overflow: hidden; color: #fbbf24; white-space: nowrap }
  .klix-stars small { color: #94a3b8; font-size: .85rem }
  .klix-rate { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem;
    border: 0; padding: 0; margin: 0 }
  .klix-rate label { font-size: 1.5rem; color: #475569; cursor: pointer }
  .klix-rate input { position: absolute; width: 1px; height: 1px; opacity: 0 }
  .klix-rate input:checked ~ span,
  .klix-rate label:has(input:checked) { color: #fbbf24 }
  .klix-rate input:focus-visible + span { outline: 2px solid #818cf8; outline-offset: 2px }
</style>

<span class="klix-stars">
  <span class="klix-stars-track" aria-hidden="true">
    ★★★★★<span class="klix-stars-fill" style="width:86%">★★★★★</span>
  </span>
  <small>4.3 מתוך 5</small>
</span>

<fieldset class="klix-rate" id="klix-rate">
  <label><input type="radio" name="rating" value="5"><span>★</span></label>
  <label><input type="radio" name="rating" value="4"><span>★</span></label>
  <label><input type="radio" name="rating" value="3"><span>★</span></label>
  <label><input type="radio" name="rating" value="2"><span>★</span></label>
  <label><input type="radio" name="rating" value="1"><span>★</span></label>
</fieldset>

<script>
(function () {
  var box = document.getElementById('klix-rate');
  if (!box) return;

  box.addEventListener('change', function () {
    var picked = box.querySelector('input:checked');
    var value = picked ? Number(picked.value) : 0;
    // הכוכבים מסודרים הפוך ב-DOM, ולכן צובעים לפי הערך ולא לפי המיקום
    box.querySelectorAll('label').forEach(function (label) {
      var n = Number(label.querySelector('input').value);
      label.style.color = n <= value ? '#fbbf24' : '#475569';
    });
  });
})();
</script>