Interactive Rating Component - HTML, CSS, JS

Community feedback

• 

  Ian Farias Paixão•90

  @IanFariasPosted over 2 years ago

  Hi André!

  Great job! Congratulations!

  I have a few suggestions for you to think about:

  • Your rank numbers are just a <li>, and that's bad for accessibility. Users browsing with a screen reader cannot focus on the number and select it. It's a best practice to use radio buttons inside the <li>, or something that tells the screen reader that the element is selected and can be focused using keyboard navigation. Using the radio button has the advantage of not needing javascript to indicate who is selected, but it is just a suggestion.

  • The variable "listNumbers" apparently it's not being used.

  • Button with type="submit" are use to fire a submit event on a form. So to work better with HTML you can wrap the options and submit button in a <form> element.

  • `<div class="rating-select"> <p> You selected <span class="rating-result"> </span> out of 5 </p> </div>`` Again for accessibility, in this <p> element, a role="alert" can be added. That way, when the element appears on the screen, someone using a screen reader will be notified with that information. Reading suggestion: WAI-ARIA attributes.

  Marked as helpful

  2

  ---

  

  André Barbosa•40

  @andrebdasilvaPosted over 2 years ago

  @IanFarias wow dude thanks

  so i can use a radio input and manipulate the checked attribute? can you tell me if i use tag anchor <a> if it's an employee and if it's a good practice?

  I will remove "listNumbers"!

  I think I understand. Put the button and other elements on a form! Add attribute - role="alert"

  I will create a branch to implement I will study your reading suggestion

  0

  

  Ian Farias Paixão•90

  @IanFariasPosted over 2 years ago

  @andrebdasilva

  Yes, using a radio input you will be able to manipulate styles and even get the value of the checked element. Ex: const ratingValue = document.querySelector('input[type="radio"]:checked');

  The correct use of the anchor tag (<a>) is when you want to redirect the user to another page or location on the current page. If not, use a button or something more appropriate for the situation.

  Good studies!

  1