Rating Component

@EAguayodev Congrats on completing this challenge!

• The "star" icon and "thank you" illustration are purely decorative. So there alt tag should be left blank.

• This component would most likely be part of a larger site, which will already have an h1 heading declared, so "How did we do?" and "Thank You!" would most like be an h2 or h3.

• Your rating "buttons" need to fix as they were done incorrectly.

To ensure that the "rating buttons" are fully accessible , they need to be built using a form.

1. Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
2. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
3. The last thing you will want to include will be a button so users can submit their choice.

• The "Submit" button does not need to have an aria-label since it contains text indicating what it does.

• The "thank you" container needs to be announced to screen readers when it appears. So you need to wrap <section class="thanks__section hidden"> in a div and give it an aria-live next use CSS to give <section class="thanks__section hidden"> the visibility: hidden as opacity: still allows screenreader to pick ups the content.

  • As for JS, you overcomplicated it. It should only be about 15 lines, max. If you did the rating I mentioned earlier, all your JS needs to do is listen to submit from the form and it will pick up the value of the rating input and add/remove the visibility: hidden to the "rating__section" and "thanks__section".

• I didn't check your CSS, but it might needs some updating as well.

Happy </Coding>!

Your code is well structured in the HTML, CSS, and Javascript portions of the project. I found it easy to follow and read so that I could understand how everything functions.

Improvements: add more concise and clear alt texts on the images.