Rating Component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted 3 months ago

  @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>!

  Marked as helpful

  1
• 

  Eric Aguayo•945

  @EAguayodevPosted 3 months ago

  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.

  Marked as helpful

  1