Interactive Rating Component

Community feedback

• 

  Roberto Yukio Miyamoto Arita•320

  @RyukioMiyamotoPosted over 2 years ago

  Andrii you did a great job with the design! However I find it very hard to give feedback on the minified code. I'd like to point a few things anyway:

  • The rating are not navigable through keyboard, which is an accessibility issue. An improvement on this would be to use <button> or <input> instead of <div>
  • Your script is not preventing the user to proceed without a rating, which gives an "You selected a undefined out of 5" on submit
  • Mobile ( below width +-400px ) is not applying the style to the selected rating, although it's still functional

  Hope I could be of help! Keep it up!

  Marked as helpful

  1

  ---

  

  Zhemchuzhnyi Andrii•50

  @n3kk3llPosted over 2 years ago

  @RyukioMiyamoto Hi! Thank you for your feedback! As soon as I saw a inbox message, i started my work to fix an issues you spotted. Fixed version of code is now available at its repo. Things i done:

  • Simply code (not minified) is now available and easy to read. I am apologize for that.
  • Replaced faceless div to focusable button.
  • Fixed my script, and now user can't proceed without select a rating number.

  Nevertheless, I couldn't fix an issue with not applying the style to the selected rating on mobile width. But I am going to find out why this issue appears and try to do all my best to not making these mistakes in my future projects.

  1

  

  Roberto Yukio Miyamoto Arita•320

  @RyukioMiyamotoPosted over 2 years ago

  @n3kk3ll I checked it out and it looks great! Actually I did the same mistake of pushing the compressed files to the repo before, until someone pointed it out to me too.

  I also verified the issue regarding the active state and I think the cause of it is that you left the active state out of the mobile queries

  
   475 .rating__item.active {
   476 background: hsl(217deg, 12%, 63%);
   477 color: hsl(0deg, 0%, 100%);
   478 }
  
  

  Try moving these lines to line 609 and it should work just fine. Have a great week!

  Marked as helpful

  0