Interactive rating using vanilla js

Community feedback

• 

  Resul Elezi•90

  @resul-eleziPosted 6 months ago

  Nice job! keep up the good work

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 6 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  MAKING RATING FORM ACCESSIBLE :

  • Currently the rating form is not accessible and because of using generic button elements which are paired up with Javascript to handle the operation.

  ---

  • This is your current markup,

  <div class="btns">
    <button class="rating-button" value="1">1</button>
    <button class="rating-button" value="2">2</button>
    ...
  </div>      
  
  <button type="submit" id="submit-btn">Submit</button>
  

  ---

  • This is not a good way to build rating form, Instead we want to use input element with type="radio" which is wrapped inside fieldset and form. By using radio buttons instead of normal button we can simply give checkboxes like options to select instead of relying on Javascript to work.

  ---

  • So you can update your markup in this way,

  <form>
    <fieldset>
      <legend class="sr-only">Please select a rating</legend>
      
      <div>
        <input type="radio" name="rating" id="rating-1" value="1">
        <label for="rating-1">1</label>
      </div>
  
      <div>
        <input type="radio" name="rating" id="rating-2" value="2">
        <label for="rating-2">2</label>
      </div>
  
      ....
  
   </fieldset>
  
    <button type="submit">
      Submit
    </button>
  </form>
  

  ---

  • I would highly recommend you to check out my submission for this challenge, So that you could figure out how built this rating component in an inclusive way to prevent accessibility issues.

  ---

  • If you have any questions or need further clarification then feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0