Skip to content
Submitted 6 months ago

Rating Component with React and Styled Radio Buttons

takinabradley•100
@takinabradley
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

At first I created the rating system using buttons inside of a form element, before I realized that that didn't really provide any form data, and probably wasn't particularly accessible. So, instead of doing that I challenged myself to re-style radio buttons to look like the design.

I think next time I would make a another, dedicated component for the project, and make it more flexible regarding the messages shown.

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

Re-styling the radio buttons was a bit of a challenge, especially getting keyboard stuff working as I'd expect. But it was fun, and I figured it out with a bit of research. I'm not 100% certain it's accessible though, so perhaps I should install a screen reader.

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

Any comments on the accessibility of my approach with the invisible radio buttons would be appreciated.

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 6 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    MAKING RATING FORM ACCESSIBLE :

    • Currently the rating form is not accessible for keyboard devices, It will cause navigating issues for rating radio buttons. it's because the lack of fieldset element and the way you wrapped input element using label. Don't do that instead you use a div to wrap them up.
    • The resulted markup will look like this,
    <form>
  <fieldset>
    <legend class="sr-only">Please select a rating</legend>
    
    <div>
      <input type="radio" name="rating" id="rating-1" value="1">
      <label for="rating-1">1</label>
    </div>

    <div>
      <input type="radio" name="rating" id="rating-2" value="2">
      <label for="rating-2">2</label>
    </div>

    ....

 </fieldset>

  <button type="submit">
    Submit
  </button>
</form>
    • I would highly recommend you to check out my submission for this challenge, So that you could figure out how built this rating component in an inclusive way to prevent accessibility issues.
    • If you have any questions or need further clarification then feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0
    takinabradley•100
    @takinabradleyPosted 6 months ago

    @0xabdulkhalid

    Adding the fieldset and legend is a good idea that I honestly forgot to think about. It's nice to add some extra directions there. Thanks!

    I already did test this with a screen-reader, and it works well. As far as I know, nesting inputs within labels is a valid alternative!

    0

Please log in to post a comment

Log in with GitHub

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