Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

E-commerce product page with React, Typescript and Sass

#react#sass/scss#typescript#vite#react-testing-library
Cristina 360

@cr1deg0

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

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

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

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
Discord logo

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