Interactive rating component solution

Community feedback

• 

  

  Alex•2,010

  @AlexKMarshall

  Posted about 3 years ago

  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.

  20

  Marked as helpful