Skip to content
Submitted 6 months ago

Interactive rating component

percydocomo•550
@percydocomo
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

To achieve the active state of this project using both CSS and JavaScript.

What challenges did you encounter, and how did you overcome them?

I used radio buttons for the rating list yet not displaying the radio buttons...in order to make the rating buttons clickable without the radio buttons displayed, I had the <label> element wrapped around the <input> element and added a tabindex of 0 to the <label> element to make it clickable/focusable. I've also added some width and height to make the <label> element focusable within the circle but not just the label value itself. Is there a better solution than this?

What specific areas of your project would you like help with?

all feedback is welcome!

Code

Please log in to post a comment

Log in

Community feedback

  • Anil•30
    @Anil-Shetty

    Your solution is well-implemented, following most accessibility standards. The approach of using <label> wrapped around <input> and setting tabindex="0" makes the rating buttons clickable while keeping the radio buttons visually hidden. However, I noticed that keyboard navigation does not seem to work properly—likely because the label is handling the focus instead of the actual input.

    Suggestions for Improvement:

    • Instead of using tabindex="0" on the <label>, consider keeping the <input> focusable and styling it to be visually hidden (e.g. position: absolute;). This way, users can navigate and select options using the keyboard as expected.

    • Instead of visually hiding the radio buttons, you could use appearance: none; along with a custom style on the <label> to mimic the radio button behavior. This maintains semantic HTML while keeping full keyboard and screen reader support.

    • Currently, the rating buttons are not wrapped in a <form>. Using a <form> would improve semantic HTML, making it easier to handle form submissions and enhancing accessibility, as screen readers better understand form elements.

    Overall, your implementation works well, but these refinements could further improve accessibility and usability. Keep up the great work! 🚀

    Marked as helpful

Join 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