Add focus interaction to autoplay

[nwidynski]

Feature request is related to

• embla-carousel-autoplay (plugin)

A clear and concise description of what the problem is.

The current implementation of stopOnInteraction does not stop if focus is received by a nested element.

Describe the solution you'd like

This PR adds event handlers to the autoplay plugin to stop the autoplay if a bubbled up focus event is received by the root element.

[davidjerleke]

Hi @nwidynski,

I think this is a good idea. Thank you for your efforts! I will test this when I get the chance and get back to you.

Best,
David

[davidjerleke]

Hi @nwidynski,

I just tested this and it's working well except one bug. To reproduce:

• Add a focusable element (a link) inside each slide.
• Set the following option: stopOnInteraction: false.
• Let autoplay scroll past the first slide.
• Tab to the link in the first slide so it receives focus.
• Click with the mouse outside the carousel to remove focus.
• When autoplay plays again, the first time it won't animate the slide change.

At the time of writing I don't know what's causing this so we'll have to investigate it a bit before we can merge this.

Best,
David

[davidjerleke]

@nwidynski I found the culprit. I will share more information soon about how to proceed with this PR. Thank you for your patience.

[davidjerleke]

@nwidynski thank you for your contribution ⭐!

[davidjerleke]

@nwidynski I've released v8.0.0-rc15 which includes this PR.