Interactive Rating Component solution

Hey there, this looks good, and is nice and responsive on smaller screens.

However, it's not a very accessible implementation. Try to use this with a keyboard and you'll see what I mean.

The reason this doesn't work with a keyboard is that you've used non-interactive elements for things that a user is supposed to do things with. The rating buttons are just <li> elements here. This means you have to add extra javascript to handle interactions, and it's very easy to miss all the things needed to make this work with keyboards, screen-readers etc.

The easy fix for this is to make those ratings radio buttons instead. Something like:

<fieldset>
  <label>
    <input type="radio" name="rating-group" value="1"/>
    <span>1</span>
  </label>
  <label>
    <input type="radio" name="rating-group" value="2"/>
    <span>2</span>
  </label>
  etc
</fieldset>

By doing that you'll get built-in keyboard support. And you won't have to do stuff in the javascript to style them as you can get which button has the :checked state directly in the CSS.