Multi step form built with React, Typescript and CSS modules

Community feedback

• 

  P

  FO•205

  @de-furkan

  Posted over 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%;
  } 
  

  22