Multi step form built with React, Typescript and CSS modules

Community feedback

• 

  P

  FO•155

  @de-furkanPosted almost 2 years ago

  I love it great effort, lovely design🎉🎉

  In terms of key areas for improvement:

  • avoid setting:

  outline: none;
  

  • i understand this can be tempting to do this, as the default outline usually looks ugly, but it can cause accessibility problems for users that make use of accessibility features. Outline is an important part of the accessibility tree to help users navigate and see selected areas of the form

    • while this can be overcome with other ways of styling, as you have done here, but it is still recommended to keep the outline.

  • perhaps as an alternative, you could style the outline as needed instead of adding an additional boarder

  • make use of <main> element to place the content into the main block

    • this makes it easier to control layout and page size as demonstrated in this code:

  <main>
    // Html or react codes in between 
  </main> 
  
  html,
  body{
    height: 100%;
  }
  
  main{
    min-height: 100%;
  } 
  

  2

  ---

  

  Jo89 😈•380

  @AhmadYousif89Posted almost 2 years ago

  @dev-furkan Hi, thanks for the feedback I think you are right about the outline style reset I will remember your tip next time for sure 👍 but I was hoping for a feedback on the Input component as well as I think it's more important than the styles as I prefer to focus more on the core logic of the app. thanks 🙏

  0

  

  P

  FO•155

  @de-furkanPosted almost 2 years ago

  @AhmadYousif89

  hi,

  Glad it can be of some help. Unfortunately i am not that experienced with typescript to provide any feedback. But i've tried to provide feedback from what I am capable of giving so.

  Hopefully other community friends who are more experienced will be able to help you out there. In terms of the steps involved, it seems smooth on my end, works pretty well. But having said that, someone experienced with typescript will need to preview your codes to provide further feedback on that matter.

  Thank you :))

  1