Interactive Rating Component

Community feedback

• 

  Rebecca Padgett•1,840

  @bccpadgePosted about 1 year ago

  Hello @devhnry. Congratulations on completing this challenge!!!🎉

  I have few tips you might be interested in to improve your solution.

  • The star icon is a decorative image and adding aria-hidden: true will make the image be ignored by screen readers.
  • To make rating section more accessible you can use semantic HTML tags like form ,fieldset, label, and input.

  When I built this challenge, I used this HTML structure below for each of the five ratings.

  <form>
     <fieldset>
         <label class="rating-btn">
           <input type="radio" class="visually-hidden" name="rating" value="1" />
           <span class="rating-value">1 <span class="visually-hidden">1 star</span></span>
         </label>
      </fieldset>
  </form>
  

  The visually-hidden CSS class hides content on the website but content is available for screen readers. I use this visually-hidden class by inclusively-hidden article by Scott O'hara.

  It is bad practice to write content in uppercase in the HTML file and when you can use the CSS property text-transform: uppercase;

  <button class="btn" type="submit">SUBMIT</button>

  More info📚:

  Why you shouldn’t write your content in Uppercase, instead use CSS.

  Here is my solution to this challenge: Interactive rating component

  Hope this helps you and need anything clarified I would be glad to help just let me know✌🏼

  Marked as helpful

  1
• 

  Ted Bell•40

  @tchbellPosted about 1 year ago

  Looks super good! The design is a bit larger and has some more spacing around some of the elements. But overall this is really good.

  1