Rating stars

[ffoodd]

References

• Orange Design System: Components > Forms
  • Rating stars large — WEB-FOR-RAT-001
  • Rating stars small — WEB-FOR-RAT-002

Notes

I wrote a small chunk of code to make a star rating system, as accessible and simple as possible.

I based it on Lea Verou's system which might not be the best, but as far as I tested it, it worked fine.

Take a look at the HTML:

<form class="w-100 mt-1" action="/" method="get">
  <fieldset class="d-flex flex-row-reverse justify-content-center o-rating">
    <legend class="sr-only">Pertinence des résultats</legend>

    <input type="radio" id="exceptionnel" name="rating" value="5" />
    <label for="exceptionnel" class="px-0 py-0 text-nowrap h1 mb-0" data-toggle="tooltip" data-placement="bottom" title="Exceptionnel">Exceptionnel</label>

    <input type="radio" id="tres-bon" name="rating" value="4" />
    <label for="tres-bon" class="px-0 py-0 text-nowrap h1 mb-0" data-toggle="tooltip" data-placement="bottom" title="Très bon">Très bon</label>

    <input type="radio" id="moyen" name="rating" value="3" />
    <label for="moyen" class="px-0 py-0 text-nowrap h1 mb-0" data-toggle="tooltip" data-placement="bottom" title="Moyen">Moyen</label>

    <input type="radio" id="passable" name="rating" value="2" />
    <label for="passable" class="px-0 py-0 text-nowrap h1 mb-0" data-toggle="tooltip" data-placement="bottom" title="Passable">Passable</label>

    <input type="radio" id="mediocre" name="rating" value="1" />
    <label for="mediocre" class="px-0 py-0 text-nowrap h1 mb-0" data-toggle="tooltip" data-placement="bottom" title="Médiocre">Médiocre</label>
  </fieldset>
  <button type="submit" class="sr-only">Noter la pertinence</button>
</form>

And the associated CSS:

.o-rating:not(:checked) > input {
  @extend .custom-control-input;
}

.o-rating:not(:checked) > label {
  color: $custom-control-indicator-bg;
  cursor: pointer;
  overflow: hidden;
  width: 1em;
}

.o-rating:not(:checked) > label:before {
  content: "★ ";
}

.o-rating > input:checked ~ label {
  color: $custom-control-checked-indicator-bg;
}

.o-rating:not(:checked) > label:hover,
.o-rating:not(:checked) > label:hover ~ label {
  color: $brand-warning;
}

.o-rating > input:checked + label:hover,
.o-rating > input:checked + label:hover ~ label,
.o-rating > input:checked ~ label:hover,
.o-rating > input:checked ~ label:hover ~ label,
.o-rating > label:hover ~ input:checked ~ label {
  color: $brand-info;
}

You may notice that:

• I'm using an image replacement technique to hide label
• I improved a bit by using a tooltip to show label, making it (I hope) clearer
• I use an unicode character for the star, but I planned to customize the project's icon-font.

@sdeschamps-orange shared an interesting tutorial from the WAI which could be a better reference, but is pretty much the same approach for styling.

Could this be interesting for Boosted?

[ghost]

+1 although said tutorial uses SVG, which may be more handy considering Brand guidelines etc. If we consider reusability for non-Orange projects (or if/when Brand changes) we may be better off going with SVG.

@ffoodd would you have time to propose an SVG-based version please?

[ffoodd]

FWIW Boosted already has a use case in "Product details" example page.

[ffoodd]

Another neat resource from Scott O'Hara.