@VCarames
Posted
Hey @Ataize! 👋 Unfortunately, your component is not accessible. 😢
Here is some feedback to further improve your code:
- The HTML for the ratings needs to be rewritten as it was done incorrectly ❌:
To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form
⚠️.
- Everything will be wrapped inside a
fieldset
which will have alegend
that is visually hidden using CSS. - Inside, there should be five
input radios
and eachinput
should have alabel
attached to it to make the “ratings” accessible. - The last thing you will want to include will be a
button
so users can submit their choice.
More Info: 📚
- The "thank you" content should be inside ⚠️ the
main
element since it becomes the main content when the users clicks on the "submit" button. Also, it should be wrapped ⚠️ in adiv
not anaside
- Once the top is implemented , for your JS, the
eventListener
should be on theform
⚠️ as asubmit
.
More Info:📚
Click vs. Submit EventListeners
- To get the ‘rating’ ⚠️ give each rating the same
name
(ex. name=“rating” )and then you would do the followingconst rating = form. rating.value
If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.
Happy Coding! 👾
Marked as helpful
@Ataize
Posted
@vcarames, Thanks for the feedback. I will read the recommended articles and make adjustments.