Interactive Rating Component vanilla js

Community feedback

• 

  David Tejada•380

  @david-tejadaPosted about 1 year ago

  Here are some observations:

  • The padding in your card is smaller than in the design.
  • You need to increase the line height of the paragraph.
  • The rating buttons aren't flush with the card as in the design. You could use justify-content: space-between for that. You need to change some stuff before for that to work, though, because .scores is a flex child with align-items: center in the parent.
  • The component is not very accessible. For example, there is no way to access the ratings buttons with the keyboard. They also provide no context for screen readers. The main issue is that you're using divs to create the ratings buttons. You should use inputs of type radio. This is more complex than what you did because you need to visually hide the radio controls but keep them visible for screen readers. You can take a look at my solution for inspiration.
  • The radio group and the submit button should be enclosed within a form.
  • You should make sure that images that are purely decorative are ignored by screen readers. You can use an empty alt="" for that.
  • I'm not sure why you made the star a button. I think that's just supposed to be decorative.
  • The active states of the ratings buttons are supposed to be the other way around. Orange for hovering and gray for checked.
  • The cursor for the buttons and ratings should be a pointer.

  Marked as helpful

  1