[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

[flawnson]

Facing the same issue, I can't navigate within an input field using left and right arrow keys. Would be great if there were an easy way to just disable keyboard navigation entirely.

[gnllucena]

hey @harshpandey002, yes I was, I had to change a few lines of code from shadcn, and also had to hack a lot to make it work, unfortunately there's a few weird behaviors that I'm not sure if it's Embla or NextJs cache fault (honestly believe it's NextJs...)

here's my Carousel.tsx:

"use client"

import * as React from "react"
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/app/components/primitives/button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
  enableArrowNavigation?: boolean
  enableTabNavigation?: boolean
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

  if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

  return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = "horizontal",
      opts,
      setApi,
      enableArrowNavigation,
      enableTabNavigation,
      plugins,
      className,
      children,
      ...props
    },
    ref
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(true)
    const [canScrollNext, setCanScrollNext] = React.useState(true)

    const focusInput = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

      const index = api.selectedScrollSnap()

      const slideElements = api.slideNodes()

      const currentSlide = slideElements[index]

      if (!currentSlide) {
        return
      }

      const inputs = currentSlide.querySelectorAll("input")

      for (let i = 0; i < inputs.length; i++) {
        const currentInput = inputs[i]

        if (currentInput.offsetWidth > 0 && currentInput.offsetHeight > 0) {
          currentInput.focus({ preventScroll: true })

          break
        }
      }
    }, [])

    const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

      setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

    const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

    const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

    const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "Tab" && enableTabNavigation === false) {
          const activeElement = document.activeElement as HTMLElement
          const activeSlide = activeElement.closest(".embla-slide")

          if (activeSlide) {
            const focusableElements = activeSlide.querySelectorAll(
              'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
            )

            const firstFocusableElement = focusableElements[0]
            const lastFocusableElement =
              focusableElements[focusableElements.length - 1]

            if (event.shiftKey) {
              if (activeElement === firstFocusableElement) {
                event.preventDefault()
              }
            } else {
              if (activeElement === lastFocusableElement) {
                event.preventDefault()
              }
            }
          }
        } else if (
          event.key === "ArrowLeft" &&
          enableArrowNavigation === true
        ) {
          event.preventDefault()
          scrollPrev()
        } else if (
          event.key === "ArrowRight" &&
          enableArrowNavigation === true
        ) {
          event.preventDefault()
          scrollNext()
        }
      },
      [enableTabNavigation, enableArrowNavigation, scrollPrev, scrollNext]
    )

    React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

      setApi(api)
    }, [api, setApi])

    React.useEffect(() => {
      if (!api) {
        return
      }

      // onSelect(api)
      // focusInput(api)

      api.on("reInit", onSelect)
      api.on("select", onSelect)
      api.on("slidesInView", focusInput)

      return () => {
        api?.off("reInit", onSelect)
        api?.off("select", onSelect)
        api?.off("slidesInView", focusInput)
      }
    }, [api, focusInput, onSelect])

    return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn("grid h-full overflow-x-auto", className)}
          role="region"
          aria-roledescription="carousel"
          tabIndex={0}
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  }
)
Carousel.displayName = "Carousel"

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef } = useCarousel()

  return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        // padding is necessary otherwise the carousel will not work
        className={cn("grid h-full grid-flow-col p-[0.1px]", className)}
        style={{
          gridAutoColumns: "100%",
        }}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = "CarouselContent"

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn("embla-slide w-full flex-none", className)}
      {...props}
    />
  )
})
CarouselItem.displayName = "CarouselItem"

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute size-8 rounded-full",
        orientation === "horizontal"
          ? "-left-12 top-1/2 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="size-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
})
CarouselPrevious.displayName = "CarouselPrevious"

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute size-8 rounded-full",
        orientation === "horizontal"
          ? "-right-12 top-1/2 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="size-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
})
CarouselNext.displayName = "CarouselNext"

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}

and that's how I use it:

<Carousel
      setApi={setApi}
      draggable={false}
      enableArrowNavigation={false}
      enableTabNavigation={false}
      opts={{
        watchDrag: false,
        watchSlides: false,
        startIndex: 0,
      }}
      className="lg:items-center lg:justify-center lg:p-20"
    >
      <CarouselContent>
        <CarouselItem>
          <LogInForm form={formLogIn} onSuccess={() => onLogInSuccess()} />
        </CarouselItem>
        <CarouselItem>
          <ConfirmEmailForm
            form={formConfirmEmail}
            onSuccess={() => onConfirmEmailSuccess()}
          />
        </CarouselItem>
        <CarouselItem>
          <AddPhoneNumberForm
            form={formAddPhoneNumber}
            onSuccess={() => onAddPhoneNumberSuccess()}
          />
        </CarouselItem>
        <CarouselItem>
          <ConfirmPhoneNumberForm
            form={formConfirmPhoneNumber}
            onSuccess={() => onConfirmPhoneNumberSuccess()}
          />
        </CarouselItem>
      </CarouselContent>
    </Carousel>

[davidjerleke]

@flawnson, @gnllucena this feature has been included in the v8.2.0 release.

[gnllucena]

I might be doing something wrong, @davidjerleke.

When I set watchFocus to false Embla still navigates to the next slide when I hit tab: https://www.embla-carousel.com/api/options/#watchfocus

(nvm the css errors)

Screen.Recording.2024-08-22.at.21.40.41.mov

[davidjerleke]

@gnllucena first you should double check that you've upgraded the Embla package to v8.2.0.

When I set watchFocus to false Embla still navigates to the next slide when I hit tab: https://www.embla-carousel.com/api/options/#watchfocus

Yes, this is expected because the default behavior of the browser is to try to scroll an element that gains focus into view (by changing either element.scrollLeft or element.scrollTop). Embla prevents the browser native scroll on focus and scrolls with it's own scroll behavior using transform: translate instead.

Since you've set watchFocus to false, it also means that you've opted out of Embla preventing the browser native scroll. If you want to prevent the browser native scroll on focus, you can do this:

emblaApi.slideNodes().forEach((slideNode) => {
  slideNode.addEventListener('focus', () => {
    emblaApi.rootNode().scrollLeft = 0
  }, { 
    passive: true, 
    capture: true 
  })
})

[gnllucena]

I can confirm that this indeed prevents the carousel scroll.

Unfortunately, other inputs DO receive focus, creating this weird behavior where if you hit tab multiple times, other elements on other carousel items WILL receive focus... It just doesn't feel right...

I personally don't believe this issue should have been closed by 8.2.0.

for those who got here by a google search, this thread does have a hack to prevent that as well.

thanks for the hard work on this lib, @davidjerleke, it's BY FAR the best carousel lib I have ever used.

[davidjerleke]

I can confirm that this indeed prevents the carousel scroll.

Unfortunately, other inputs DO receive focus, creating this weird behavior where if you hit tab multiple times, other elements on > > other carousel items WILL receive focus... It just doesn't feel right...

I personally don't believe this issue should have been closed by 8.2.0.

@gnllucena I think your expectations aren't quite right. All watchers like watchDrag, watchResize and now watchFocus work in the same manner. Setting them to false simply means you opt out of the default Embla behavior. It doesn't mean that the carousel starts doing other unexpected things under the hood. It's very predictable: It simply does nothing when false is provided.

When I gave you the following code:

emblaApi.slideNodes().forEach((slideNode) => {
  slideNode.addEventListener('focus', () => {
    emblaApi.rootNode().scrollLeft = 0
  }, { 
    passive: true, 
    capture: true 
  })
})

...I merely gave you a starting point for writing your own focus behavior. By setting watchFocus to false, you can opt out of the Embla default behavior and create your custom behavior instead:

emblaApi.slideNodes().forEach((slideNode, slideIndex) => {
  slideNode.addEventListener('focus', () => {
    // Prevent browser native scroll to focused element
    emblaApi.rootNode().scrollLeft = 0
    
    // Remove focus from the element that just received focus
    emblaApi.slideNodes()[slideIndex].blur()

    // TODO: Write your own behavior, shift focus to wherever you want...
  }, { 
    passive: true, 
    capture: true 
  })
})

thanks for the hard work on this lib, @davidjerleke, it's BY FAR the best carousel lib I have ever used.

Thanks for sharing that!