Interactive rating component in plain HTML, CSS, JS

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted over 2 years ago

  Hey there, great effort on this. The styling looks good, and it works fine with a mouse.

  However, it doesn't work with a keyboard. There are just a few things needed to fix that. Good job on using radio buttons for the form. But, you've used display: none, which hides them from a keyboard and screen reader. Instead, use a technique to hide them visually, but keep them accessible https://piccalil.li/quick-tip/visually-hidden/ - and then, make sure to add a :focus-visible indicator (probably a bold ring around the label), so you can see where you are when using the keyboard.

  For the form submission, make sure to use the submit event on the form, not the click event on the button. This will make the form work with the return key and a mouse. You can also use the FormData class to get the data from your form, rather than having to make a loop through the radio buttons.

  const formData = new FormData(formElement)
  const rating = formData.get('rate')
  

  Marked as helpful

  1

  ---

  

  Linas•20

  @paulauskas-linasPosted over 2 years ago

  @AlexKMarshall I wholehartedly appreciate your comment! I learned a lot from just a comment. I have "updated" my accessibility knowledge on form elements (e.g. to cycle through radiot buttons the default for movement are arrow keys). You have provided a great practice of hiding elements. You have introduced me to new approach to collect data with FormData and new a event - submit. I have updated my solution to include all your feedback. Thank you again!

  1