Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use Slide's isClone property? #360

Open
mkiselyow opened this issue Dec 24, 2023 · 0 comments
Open

How to use Slide's isClone property? #360

mkiselyow opened this issue Dec 24, 2023 · 0 comments

Comments

@mkiselyow
Copy link

Is your feature request related to a problem? Please describe.
I would like to add the tabindex properties to the <slide>'s slot content. This works well until the wrapAround is true. WrapAround adds the cloned slides, which unfortunately inherit the tabindex property so that the cloned nodes become reachable using the Tab key (even before they become visible.

<template>
  <div>
    <carousel
      v-model:model-value="currentPageIndex"
      :items-to-show="1"
      :wrap-around="true"
      @slide-end="onSlideEnd"
    >
      <slide
        v-for="(item, index) in banners"
        :key="'banner-' + item.id + index"
        :index="index"
      >
        <div
          v-if="item.button && item.button.url"
          role="button"
          class="hero-carousel-slide__link"
          :tabindex="currentPageIndex === index ? 0 : -1"
          @mouseup="mouseHandler(item.button.url)"
          @keyup.right="goToNext"
          @keyup.left="goToPrev"
          @keyup.enter="navigateToUrl(item.button.url)"
        >
          <img
            :src="item.url"
            :alt="item.title"
          >
        </div>
      </slide>
    </carousel>
  </div>
</template>

I thought the v-slot="{ isClone }" should be used, but it didn't work for me.

...
      <slide
        v-for="(item, index) in banners"
        v-slot="{ isClone }"
        :key="'banner-' + item.id + index"
        :index="index"
      >
        <div
          v-if="item.button && item.button.url"
          role="button"
          class="hero-carousel-slide__link"
          :tabindex="currentPageIndex === index && !isClone ? 0 : -1"
...

Describe the solution you'd like
I would like to know how it is possible to use the isClone property (not from the $ref) to be able to mark only the proper slides with the tabindex property.

  :tabindex="currentPageIndex === index && !isClone ? 0 : -1"

Additional context
I would appreciate any other options for marking the slide slot elements with tabindexes. Currently, I'm using the @slide-end="onSlideEnd" to remove all tabindexes from the cloned nodes with pure JS.

      function onSlideEnd () (
        document
          .querySelectorAll('.carousel__slide--clone ' + 'hero-carousel-slide__link')
          .forEach((el) => {
            if (el.tabIndex === 0) {
              el.tabIndex = -1
            }
          })
        }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant