Hey there, the styling of this looks very nice, and it looks good on a small screen.
Did you try testing it with a keyboard though? It doesn't work for anyone that isn't using a mouse, unfortunately.
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 <div> elements here. Anything that a user should interact with needs to either be a link, a button, or form control. Those elements have accessibility built-in. Using a non-interactive element won't work, even if you put an onClick handler on it.
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.
Marked as helpful
