Result Card using React

Community feedback

• 

  FunkyCreep•130

  @francoisbilletPosted over 1 year ago

  Hey, good job. It looks pretty good !

  Feedbacks on accessibility:

  • As the accessibility report says, you absolutely need to provide alternate text (alt property) to your images for people who can't see (among others). Also, don't chose your heading tags according to their native styles. There should not be a <h4> if there is no <h3>, there should be no <h3> if there is no <h2> etc. So start with <h1>.

  Feedbacks on React:

  • It's ok to use the Context API to try it out, but React documentation doesn't recommend using it as it complexifies the app we're building. Here you could simply pass props from your App component to your children components.
  • Nonononono ! DON'T DO THIS:

  <div className="upper-portion">
        <h4>Your Result</h4>
        <TotalResult />
        <h2>Great</h2>
        <h4>
          You scored higher than 65% of the people who have taken these tests.
        </h4>
  </div>
  

  Everything isn't a title ! IMO "Your Result" is the title of the page (<h1>), but Great and the text are paragraphs, not titles ! Plus you don't want to put <h2> titles after <h4>, it doesn't make sense.

  • Try to use semantic HTML as much as possible, for instance your button is a <div> but it should be a <button>
  • I'd put a width and height on the circle (instead of using flex-basis) to avoid it changing sizes when we change the screen size.

  I hope this helps. Keep up the good work !

  0