Skip to content
Submitted over 2 years ago

QRCode component with React and ChakraUI

react, chakra-ui
Caio Bukvar•50
@caiobukvar
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This is my first frontendmentor task! Anything to share about it?

Code

Please log in to post a comment

Log in

Community feedback

  • EthanAmato•130
    @EthanAmato

    Hey there! First of all I want to say fantastic job! It looks beautiful and I love the incorporation of React and ChakraUI. If you want to address some of the warnings that the accessibility report gave you, check out the following:

    1. "Document should have one main landmark"
    • Essentially, it's telling you to make use of semantic HTML (documentation here) to make the site easier to read for screen readers. Essentially, replace the <div className="container"> with a <main/> tag.

    2 "Page should contain a level-one heading"

    • I believe this error is coming from a lack of an H1 tag in your code. According to the ChakraUI documentation, this can be accomplished with the <Heading as='h1'/> component

    3 All page content should be contained by landmarks

    • I think this is coming from how react renders jsx and isn't too much cause for concern. Here is a stack overflow post regarding it: link

    Overall, fantastic job and I hope you continue your journey :)

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord