How to use Slide's isClone property? #360
Description
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
}
})
}