[Feat]: watchFocus option

[S-Shingler]

Which variants of Embla Carousel are relevant to this feature request?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Feature description

I would like to override or disable the default slide focus behaviour.

Additional Context

• PR: [Feat]: watchFocus option #937.

I came across this bug when implementing accessibility for a belt. Essentially if the remaining slides was was less than the slides to scroll when I tab to the next slide it would jump back. This is happening because of this line in the slideFocus.ts file.

embla-carousel/packages/embla-carousel/src/components/SlideFocus.ts

Line 46 in 387a3fa

scrollTo.index(group, 0)

User scrolls

In final scroll snap segment

Press tab and scrollTo method takes us back to previous scroll snap segment

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for feature requests

[davidjerleke]

Thanks @S-Shingler,

Would you mind creating a CodeSandbox and sharing steps to reproduce the problem you're describing?

[S-Shingler]

Hi @davidjerleke,

Thank you for getting back to me and taking the time to review my sandbox.

Whilst your example is similar in behaviour it wouldn't solve my problem because I don't want the user to have to tab through every item before they can continue tabbing down the page. For example, what if I had 30 slides in my carousel? And then imagine I have a page full of carousels that's a lot of extra tabbing to progress through the page.

In terms of the slidesInView event I have to respectfully disagree. You can scroll to the end of the belt and observe the dom in the inspector, all the tab indexes are correct. It's the scrollTo.index method fired on slide focus that causes the visible slides to shift and trigger the slidesInView event again and update the tab indexes. Also, I know it’s not my code because the same behaviour (that I don’t want) happens in your example when you shift + tab with slide 10 focused. To be clear on my requirements, I don’t want the visible scroll snap group to change unless the user explicitly triggers the scroll methods (previous and next buttons) or drags/swipes the carousel.

Cheers,
Sam

[davidjerleke]

@S-Shingler thanks for your response.

Whilst your example is similar in behaviour it wouldn't solve my problem because I don't want the user to have to tab through every item before they can continue tabbing down the page. For example, what if I had 30 slides in my carousel? And then imagine I have a page full of carousels that's a lot of extra tabbing to progress through the page.

@S-Shingler yes, I understand that what you want to achieve isn't possible without opting out of the Embla default behaviour. So as I said before, it's a good idea to add a watchFocus option to the library. But, the behaviour that you think is undesired is also how the browser native CSS scroll snaps work. By default, they force you to tab through every item.

In terms of the slidesInView event I have to respectfully disagree. You can scroll to the end of the belt and observe the dom in the inspector, all the tab indexes are correct.

Well yes, the tab indexes may be correct but it's a race condition and the timing is wrong on your side. This is obvious because without your code it's working as expected.

Also, I know it’s not my code because the same behaviour (that I don’t want) happens in your example when you shift + tab with slide 10 focused.

Here's how Embla and the native browser is behaving when tabbing with Tab (tabbing to next):

default-tabbing.mp4

Here's how Embla and the native browser is behaving when tabbing with Shift + Tab (tabbing to previous):

shift-tabbing.mp4

Now please note that the only difference between the Embla and native browser behaviour is that the native behaviour seems to skip some slides. But it's not actually skipping them. They do receive focus too. It's just not changing the carousel position because it's considering some slides to be in view just because a single pixel of them are in view - hence it skips the scrolling.

All I'm saying that this isn't a bug but it's the Embla behaviour by design. So it's expected. Again, I understand that what you want to achieve isn't possible without opting out of the Embla default behaviour.

[S-Shingler]

Hi @davidjerleke,

Thank you for your response and taking the time to explain from your perspective, I can see where you're coming from now. I also appreciate that you acknowledge that the behaviour I want isn't possible without opting out of the default behaviour.

I'm really glad that watchFocus will be added to the library!

Cheers,
Sam

[davidjerleke]

This feature is available from v8.2.0 and up.