Focusable elements offscreen break layout.

[aa-jeremyhoover]

Bug is related to

• embla-carousel (core package)

Embla Carousel version

• v8.0.0-rc07

Describe the bug

When a slide offscreen contains a focusable link, users can tab to this hidden content and break the layout of the slider.

CodeSandbox

Here's a demo, pressing tab goes to a slide out of view and breaks the slide layout:
https://codesandbox.io/s/embla-carousel-default-react-forked-mfxmmy?file=/src/js/EmblaCarousel.jsx

Steps to reproduce

1. Tab through elements on page
2. Element out of view receives focus and breaks the layout. Which looks like this:
   

Expected behavior

1. Elements out of view shouldn't receive focus. They should still be accessible to keyboard users through navigation. As per this comment

Yes I believe that content of non-visible slides should not be tabable

[davidjerleke]

Hi @aa-jeremyhoover,

Try this solution. Let me know if it helps.

Best,
David

[aa-jeremyhoover]

Thanks, that's what I needed :)

[davidjerleke]

Hi @aa-jeremyhoover,

Just wanted to let you know that as of v8.0.0-rc12 Embla handles this internally. No need to copy paste code to get this to work anymore.

Cheers,
David