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 🚀