[Help]: Disable carousel navigation on tab

[gnllucena]

Summary

I understand navigation between the slides is accessibility feature, but in my case, I'm using embla for my creating account flow, each step is a slide.

I need to prevent the slide change when the user hits tab on the flow inputs.

How can I achieve that?

If applicable, which variants of Embla Carousel are relevant to this question?

• 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)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi @gnllucena,

This feature isn’t available yet but will be in a future release.

Best,
David

[gnllucena]

Appreciate the quick response.

Any way I can hack the feature enabling and/or disabling something on embla's opts/config during my flow's usage?

[gnllucena]

While the feature is not implemented yet, that's how I'm hacking the feature into the current version:

(I really don't recommend this solution, it makes the usability really terrible, but in my case, I must not let the user navigate to the next slides, unless they complete the current step)

const handleKeyDown = React.useCallback(
  (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.key === "Tab" && enableTabNavigation === false) {
      event.preventDefault()
    }
  },
  [enableTabNavigation, scrollPrev, scrollNext]
)

<CarouselContext.Provider>
  <div
    onKeyDownCapture={handleKeyDown}
    {...props}
  >
    {children}
  </div>
</CarouselContext.Provider>

The lib is amazing, I'm really waiting for this feature to be build into it.

Thanks for the amazing work, @davidjerleke

[davidjerleke]

@gnllucena I understand that this isn’t optimal, but wouldn’t setting tabIndex to -1 on focusable elements inside your carousel disable the tab to focus behavior?

Best,
David

[gnllucena]

It does work and has exactly the same behavior.

However, I would prefer to have this configuration in only one place rather than adding it to every input, button, and select inside my slides.

I believe it will be easier to remove that behavior from a central place when Embla eventually adds this feature.

[gnllucena]

btw, I'd love to help build this feature, would you accept a PR for it? Any directions on how I can achieve that within Embla?

[davidjerleke]

@gnllucena I need to think about how this should work internally before we can work on this. I've added it to the roadmap:

• [Feat]: ⭐ Roadmap #841

[harshpandey002]

Hi @gnllucena, were you able to navigate inside of an input with left and right arrow keys?
in my case, the Left/Right keys is triggering the sliding of the carousel instead of input navigation.

Any way to hack that?

#854