This web component creates a configurable way of displaying a rating.

Demo here: https://wc-star-review.annoyingmouse.repl.co

Installation

<script type="module" 
        src="https://unpkg.com/@annoyingmouse/wc-star-review/wc-star-review.js"></script>

Alternatively:

<script type="module"
        src="https://cdn.skypack.dev/@annoyingmouse/wc-star-review/wc-star-review.js"></script>

You can use it minified by adding using this instead:

<script type="module"
        src="[WHATEVER CDN]/@annoyingmouse/wc-star-review/dist/wc-star-review.min.js"></script>

Please remember to change [WHATEVER CDN] to your favourite CDN

Usage

<wc-star-review rating="1"
                reviews="1"></wc-star-review>
<wc-star-review rating="2"
                reviews="2"></wc-star-review>
<wc-star-review rating="3"
                reviews="3"></wc-star-review>
<wc-star-review rating="4"
                reviews="4"></wc-star-review>
<wc-star-review rating="5"
                reviews="5"></wc-star-review>
<script type="module"
        src="wc-star-review.js"></script>

Configuration

The rating is provided using the rating attribute, it defaults to 0.

The number of stars visible is controlled by the total attribute, it defaults to 5 (see the Caution below).

The number of reviews, if known, can be shown in brackets by providing a reviews attribute. The count is also included in the component's accessible label.

The colour of the stars can be changed from the default of #FFC107 by adding a colour attribute (or color for the American spelling) with a suitable CSS color value. If the value is not a valid CSS color it is ignored and the default is used.

The background behind the stars can be changed from the default of #CCCCCC by adding a background attribute with a suitable CSS color value. If the value is not a valid CSS color it is ignored and the default is used.

Accessibility

The component automatically sets role="img", tabindex="0", and an aria-label on the host element. The label is generated from the current rating, total, and review count — for example: "100 reviews. Rated 4.50 out of 5 stars.".

All three can be overridden by setting them directly on the element:

<!-- suppress keyboard focus -->
<wc-star-review rating="4" tabindex="-1"></wc-star-review>

<!-- custom accessible name -->
<wc-star-review rating="4" aria-label="Rated 4 out of 5 by 20 customers"></wc-star-review>

<!-- decorative — remove from accessibility tree entirely -->
<wc-star-review rating="4" role="presentation" tabindex="-1"></wc-star-review>

Caution

Increasing the total to numbers above 5 is not advised, besides, 5 stars are commonly used in eCommerce