A completely accessible image gallery allowing you to tab through the lightbox arrows with focus contained within it rather than the whole document while it is open.

By simply passing a props to the gallery we can change the layout. For example, passing layout="grid", we can get a basic grid layout.

We can also pass layout={4} or layout={6} for simple grids containing 4 and 6 images.

Note how when the lightbox is open, you can tab through the arrows and close icon without focus jumping back to the rest of the DOM 🚀