Interactive Rating Component - My 1st JS and cool card flip action!

Community feedback

• 

  T

  Grace•31,010

  @grace-snowPosted over 2 years ago

  Hi

  This overflows my phone screen.

  Much more important than that though is the html markup needs fixing. This component is a form with a fieldset of radio inputs. It is not a load of button elements

  Marked as helpful

  0

  ---

  

  DSoluk•120

  @dsolukPosted over 2 years ago

  @grace-snow Hi Grace! Thanks for the original feedback. I went back and fixed the html markup and used radio inputs. Hope you can have a minute to have another look and advise at your convenience, please! Thanks!

  https://github.com/dsoluk/interactive-rating-component-main

  0

  

  T

  Grace•31,010

  @grace-snowPosted over 2 years ago

  @dsoluk I'm afraid this still isn't right and the form is unusable for me.

  Issues are

  • the question and button need to be connected to the form. A set of radio inputs needs to be in a fieldset with either a legend or an aria-labelledby. In this case if use the aria option, pointing to the id of the h1 (which would need adding). The submit Button just needs moving inside the form
  • you never set min or max width on the body or html elements. They are full width by default and always should be
  • because youve set the card to position fixed and there is no other content on the page, you've taken it out of the page layout effectively. That means I can't scroll down far enough to get to the button on mobile. Top and bottom of the card are cut off. It would be even worse if I was using enlarged font sizes.
  • height and width are not usually set on cards like this for good reason. Min-height is sometimes used, as is max-width. But not height or width alone, as those are fixed and therefore limiting the size of your card - that can lead to overflow issues

  Marked as helpful

  0