search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.42k stars 164 forks source link

Focusable elements offscreen break layout. #506

Closed aa-jeremyhoover closed 1 year ago

aa-jeremyhoover commented 1 year ago

Bug is related to

Embla Carousel version

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: image

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 commented 1 year ago

Hi @aa-jeremyhoover,

Try this solution. Let me know if it helps.

Best, David

aa-jeremyhoover commented 1 year ago

Thanks, that's what I needed :)

davidjerleke commented 10 months ago

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