Interactive Rating Component

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  I'm afraid the markup isn't correct on this. It's one of those rare times where there really is only one correct way to mark up this content.

  It must be a form with a fieldset/group of radio inputs, not a list of buttons outside a form. The fieldset should have a legend as its first child (or the div with role="radiogroup" have an aria-label).

  Once you change that, you will need to change the CSS and JS as a result.

  On the plus side, the JS becomes simpler! This only needs one form submit listener. You get the chosen rating from the form. e.g. in vanilla js it would be form.rating.value where form is the variable for the form and rating is the name on the inputs.

  You'll need to custom style the radio inputs and ensure they are still keyboard accessible too. You can use sr-only snippets on them if you want. The Modern CSS website has a good guide on custom styling radios.

  0