Interactive rating component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Jesse, first of all, well done here! About your question, I think having a fixed height and width for this is fine in this case; for the line height, this usually is a multiplier (e.g. 1.4) and not a font size, so I might change that to a plain number instead. I would do what @JordanKisiel suggested, so that's something you can try first.

  Anyway, the bigger issue for me here is the use of span tags for your buttons, as this is a non-semantic element, and there really isn't a reason to use span here when there are more suitable elements. As a suggestion, I would opt to use button instead (in my solution I used radio inputs), as a button is used for performing an action, which in this case would be the action of selecting a number, and this would be greatly helpful to the screen reader.

  Marked as helpful

  1
• 

  Jordan Kisiel•250

  @JordanKisielPosted about 2 years ago

  In my solution, I made the spans containing the numbers into flexboxes to center them within their circular backgrounds:

  display: flex;
  justify-content: center;
  align-items: center;
  

  It's pretty much my default approach when I need content to be exactly in the center of something.

  2