@RyukioMiyamoto
Posted
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
@n3kk3ll
Posted
@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
divto focusablebutton. - 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.
@RyukioMiyamoto
Posted
@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
