Responsive Tip Tracker

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  The calculation looks correct, and visually the styling looks good.

  But there are some problems with the HTML. The biggest problem is the tip percent buttons. They should be real button elements (or <input type="radio"/> ). By faking buttons with div elements and a click handler, they become completely inaccessible to anyone using a keyboard or other non-mouse method of interacting with the page. If we want an element to execute some javascript when we click on it, it must be a button element, and it must have suitable :focus-visible styles.

  The app starts with 15% selected, but that's not clear from the UI, we can use an aria-pressed state on the button, or the value of the radio button, depending on approach, to style the currently active percentage.

  It's missing some field validation. Currently I can enter a negative number for the bill amount.

  Marked as helpful

  2

  ---

  

  Valentin•290

  @cheepmanzeePosted about 3 years ago

  @AlexKMarshall Thank you very much, I'll probably rework this once again. Appreciate your comment! :)

  0