Rating Component with React and Styled Radio Buttons

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!