Design comparison
Solution retrospective
This is my first react App do tell me any improvements in my code. Your reviews help me a lot. β
Community feedback
- @AlexKMarshallPosted over 2 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.
Marked as helpful2
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord