There are some important html misunderstandings in this I'm afraid. This challenge is all about html forms. The component is not a web page with a header and footer. Remove both of those landmarks. You have to understand what these landmarks are for and it's not this. They are for site-wide content not page-specific content.
Instead, this is a form with a fieldset of radio inputs. The fieldset should have a legend which can be sr-only. The radios don't go in a list element, thats a very confusing semantic structure. Look up about fieldset and role radiogroup as you need one or the other here. The button is a submit so must also be inside the form.
The good news is once you've done that, the JS becomes way simpler. You should only have one submit listener in this. No clicks and no change. On submit, you get the rating from the form like form.rating.value (where "rating" is the name on the inputs).
You must not hide the inputs as you are doing at the moment either. When you set opacity to 0 some screen readers won't announce them, and moving them off screen can break the click target for voice control users too. Instead use sr-only (otherwise known as visually-hidden).
I hope this is all helpful. Good luck with it.
Marked as helpful
@mendezpvi
Posted
@grace-snow
Thank you very much for your feedback. My mistake, I considered the component as a card, so I assigned it to an <article>. I will get to work to correct according to your recommendations. Thanks again!
