@kevingimbel/eleventy-plugin-emoji-rating

1.0.0 • Public • Published

eleventy-plugin-emoji-rating

Display accessible ratings using emoji

Usage

Install via npm:

npm install @kevingimbel/eleventy-plugin-emoji-rating

Then, include it in your .eleventy.js config file:

const emojiRating = require("@kevingimbel/eleventy-plugin-emoji-rating");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(emojiRating);
};

Config

Config Options

Global config options, set in eleventy.js.

Option Type Default Description
max_rating Number 5 maximum a rating can be. 5 would mean "x of 5 stars" where 5 is the best.
emoji String "⭐️" Emoji to display
emoji_inactive String / Emoji to use for inactive slots (See examples)
extra_classes String / extra CSS classes for the wrapping element
htmlTag String span The wrapping element
aria_label String Rating: $rating of $max_rating The label for screen readers, should contain all important info. $rating will be replaced with the rating, $max_rating with the maximum rating as defined inline or in plugin config

Config Examples

const emojiRating = require("@kevingimbel/eleventy-plugin-emoji-rating");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(emojiRating, {
    max_rating: 10,
    htmlTag: "div",
    emoji: "🙉",
    emoji_inactive: "🙈"
  });
};

Examples

The plugin provides a shortcode that creates HTML.

<!-- shortcode in Markdown file -->
{% rating "3" %}

<!-- rendered HTML -->
<span class="rating " role="img" aria-label="Rating: 3 of 5">3/5 <span class="rating--icon" aria-hidden="true">⭐️</span><span class="rating--icon" aria-hidden="true">⭐️</span><span class="rating--icon" aria-hidden="true">⭐️</span><span class="rating--icon-inactive" aria-hidden="true"></span><span class="rating--icon-inactive" aria-hidden="true"></span></span>

What makes this accessible?

The generated HTML is fully accessible to screen readers. The aria-label is read out and gives a better info than a text string 3/5 ⭐️⭐️⭐️ would, which is read aloud like "Three slash five emoji-star emoji-star emoji-star", while the accessible one is read out as "Rating: 3 of 5", and the emoji are ignored (aria-hidden) because they do not give any additional info. With a custom aria_label set the emoji could even be represented in words:

const emojiRating = require("@kevingimbel/eleventy-plugin-emoji-rating");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(emojiRating, {
    aria_label: "Rating: $rating of $max_rating stars"
  });
};

More examples

More examples with custom options.

{% rating "4" "🍋" "🍊" "7" %} => 4/7 🍋🍋🍋🍋🍊🍊🍊

{% rating "5" "🤦‍♀️" %} => 5/5 🤦‍♀️🤦‍♀️🤦‍♀️🤦‍♀️🤦‍♀️

{% rating "2" "🙉" "🙈" %} => 2/5 🙉🙉🙈🙈🙈

Package Sidebar

Install

npm i @kevingimbel/eleventy-plugin-emoji-rating

Weekly Downloads

0

Version

1.0.0

License

ISC

Unpacked Size

5.22 kB

Total Files

3

Last publish

Collaborators

  • kevingimbel