Skip to content
Submitted over 1 year ago

E-commerce product page with React, Typescript and Sass

Cristina•360
@cr1deg0
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...E-commerce product page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hi,

Can anyone provide guidance on how to control the tab navigation inside the lightbox, to make the focus move to the "Close" lightbox button from the tumbnails?

Thanks, Cristina

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 1 year ago

    Hi, Cristina! 👋

    Great job on this challenge! 👏 Your solution looks good and works well. 👍

    It sounds like you might want to look into using a focus trap for when the modal is open (to "trap" the user focus to the interactive elements in the modal). I'm not very familiar with building one from scratch, but since you are using React you can probably find a package to help you with this or with building modals in general. One package for building modals with React I'd recommend is react-a11y-dialog since it has a great focus on accessibility (and it includes the focus trap in its functionality).

    Hope that helps a bit. 🙂

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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