[Feat]: Option to include navigation to stopOnFocusIn

[BelkinMax]

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-docs (Documentation)
• embla-carousel-docs (Generator)

Feature description

stopOnFocusIn option triggers stop only when the focus is within the item. Since the navigation is not handled by the library automatically, this behavior looks reasonable, so I am not sure whether this is a bug or a feature.

The rootNode option description might be unclear about which elements can be interactive.

In my case, I need to pause the auto-scroll when the focus is on one of the navigation buttons that are placed inside the root node, but outside the container.

The proposal is to add an option that could handle this or similar cases.

eg:

AutoplayPlugin({
  stopOnInteraction: false,
  stopOnMouseEnter: true,
  stopOnFocusIn: true,
  
  // List of additional elements that can trigger `stopOnMouseEnter`, `stopOnFocusIn`
  customInteractables(emblaRoot: HTMLElement) => HTMLElement[]

  // or an option that includes everything within the root node 🤷‍♂️
  rootNodesAreInteractive: boolean
})

Additional Context

Showcase:
https://github.com/davidjerleke/embla-carousel/assets/64013347/5280253d-8368-4a36-84f8-e52675f22bb7

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]

@BelkinMax I'm not quite sure what you're struggling with but have you seen the examples for Autoplay and AutoScroll in the docs (didn't quite get which one you're using because you mention both)?

Both these examples stop the auto advancing behaviour when clicking on a previous or next button. You can extend the examples and stop the auto advancing behaviour when these buttons receive focus.

Best,
David

[BelkinMax]

Thanks for the quick feedback @davidjerleke

I am using Autoplay plugin. Sorry for the confusion.

Ok, I get it. To control the autoplay, I need to set the focus listener to the buttons. As the rootNode says The node that should respond to user interactions, I thought that all the elements inside the rootNode should stop the autoplay once received the focus

[davidjerleke]

What rootNode does:

The node that should respond to user interactions like stopOnMouseEnter and stopOnInteraction. If this is omitted, the node that wraps the Embla Carousel will be used as default.

And stopOnInteraction is about :

If set to false, autoplay will not be disabled after drag interactions, and it will restart every time after an interaction.