Skip to content
OverviewSolutions
1
Comments
1

Anil

@Anil-Shetty30 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • percydocomo•520
    @percydocomoSubmitted about 2 months ago
    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!

    Interactive rating component

    1
    Anil•30
    @Anil-ShettyPosted about 2 months ago

    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
    0