Intro component with sign up form with ReactJS & styled-components

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, great work on this one. Layout in desktop looks great, the responsiveness could be better, since right now, there is a point where horizontal scrollbar appears. Also, the mobile layout is too soon, at point 1010px I think, you already set the mobile layout, which is too big.

  Well, the design is made for that size right, that means if you use 1366x768 like I do, we won't get the exact size. What you could is that, adjust the size of your figma's canvas? I don't use figma, I only used adobe xd, change the size to 1440 so that the layout will fit perfectly, at there, you could get the exact result.

  Some other suggestions would be:

  • Avoid using height: 100vh on a large container. This makes the element's height, only limited to the remaining screen/viewport's height. Instead, use min-height: 100vh, this takes full height and will expand if it needs to.
  • You don't really need a header on this one. This one whole component should be inside the main element. So after your root selector, you could have used main element to wrap all content.
  • On each input, it would be better to only show the error-message, when the user "submits" the form, not for every focus on the element. Try clicking on the input and click on another, the error-already show even if the user didn't make any changes.
  • For each input, if the input is wrong, you should add aria-invalid="true" on the input element. This informs a user that their input is wrong.
  • Also, the error-message element should have an id attribute. This will be referenced by the aria-describedBy which you will use on the input element.

  if ( input is wrong) 
    input.setAttribute("aria-invalid", "true");
    input.setAttribute("aria-describedBy", { id of the error-message });
  else 
    input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  

  This creates a bridge to which users will not be confused, since they will be informed, if they have entered a wrong input and what type of error did they make.

  • The error-message icon should have alt="' and aria-hidden="true" on it. Always remember to include the alt attribute.
  • As an addition to making this more accessible, you could add an aria-live element, to which will announce if the form submitted has any error or if the form is a success.

  Aside from those, check the responsive state about the horizontal scrollbar. Great work again on this one.

  11

  Marked as helpful