Responsive interactive rating card using flexbox and javascript

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hello

  When you inline svg images like that you still need to add aria-hidden true and focusable false, as some older browsers focus on them and try to announce them to screenreaders

  Most important on this is you need to rewrite some html

  • both halves / stages need to be inside the main element. That is the landmark for holding main page content, only header footer or aside should sit outside that landmark
  • this is a form so needs a form element
  • the number choices should be a set of radio inputs inside a fieldset
  • I recommend disabling the form submit until a rating has been chosen. Js would need adjusting anyway to listen for form submit not click, so should be easy to have disabled attribute on button by default and then remove that attribute in js as soon as a rating radio is checked
  • if you do that (it would prevent being able to submit 0 like you can now) remember to add a disabled style to the button. Usually they are made grey/opaque
  • whatever you do make sure you add obvious focus-visible styles to all interactive elements so keyboard users know where they are on the page

  Layout wise this is positioned really strangely on my Mobile, low down almost off the screen. Don't use large margins to try and create layout. Instead, to center a component on a page use min-height 100vh and either flex or grid properties

  Other points for improvement

  • never have font size in px, use rem
  • don't use fixed widths and heights on cards. Use max width (and width 100% if needed) so it can grow up to a point but shrink if needed.
  • Never set height on elements that have content inside, let their height be determined by the content, padding and margins within them. If I change my font size settings or view on a small screen, the height needs to be able to adapt to that - there is no reason or benefit from limiting it. Min height might be wanted sometimes but not often
  • Indent your code! This is all really hard to read atm and hard to find the bugs. Your editor can even do this for you automatically

  I hope all this helps

  Marked as helpful

  3

  ---

  

  ibimina•490

  @ibiminaPosted over 2 years ago

  @grace-snow thanks for the feedback, I will try to make some corrections to the challenge

  Regards.

  0