[Thumbs] Enter or space doesn't activate slide

[TimonVS]

• Swiper Version: 6.5.0
• Platform/Target and Browser Versions: macOS, any browser (latest versions)

What You Did

Pressing enter or space when a thumbnail slide is focused doesn't activate the slide like it should, even when the slides themselves are button elements. A similar issue was posted almost a year ago on Stack Overflow: https://stackoverflow.com/questions/61110557/swiper-js-enter-button-doesnt-do-anything-on-the-thumbnail-for-accessibility.

Code example: https://codesandbox.io/s/swiper-thumbs-gallery-forked-229z5?file=/index.html

Expected Behavior

Pressing enter or space when a thumbnail slide is focused should activate the slide.

Actual Behavior

Nothing happens when enter or space is pressed when a thumbnail slide is focused.

[nolimits4web]

As a workaround you can just assign keydown event listener to thumbs slides, watch for Enter key down and trigger click on thumb

[TimonVS]

@nolimits4web Thanks for the quick reply. ~~I've tried adding a keydown listener to the thumbs slider, but it doesn't trigger. I've updated the sandbox: https://codesandbox.io/s/swiper-thumbs-gallery-forked-229z5?file=/index.html. Am I missing something?~~

Ah this works:

const s = document.querySelector('.swiper-container').swiper;

s.$el.on('keydown', () => console.log('key down'))

[TimonVS]

I have a working workaround here: https://codesandbox.io/s/swiper-thumbs-gallery-forked-2d1up?file=/index.html.

Basically, add data-slide-index to all thumbs and add a keydown listener:

galleryThumbs.$el.on("keydown", (e) => {
  if (e.keyCode !== 13 && e.keyCode !== 32) return;

  var slideIndex = e.target.dataset.slideIndex;

  if (!slideIndex) return;

  galleryThumbs.slideTo(slideIndex);
  galleryTop.slideTo(slideIndex);
});

[eberhapa]

Hi,

A simpler way is to change the div to a button. No js needed.

[ScorpAL]

A simpler way is to change the div to a button. No js needed.

Do you have an example? Still unable to fix in React without mentioned

<Swiper {...swiperOptions}>
    {items.map((item) => (
        <SwiperSlide
            tag={'button'}     <---- change from div to button
            key={item.id}
        >
            <Component item={item} />
        </SwiperSlide>
    ))}
</Swiper>

[eberhapa]

A simpler way is to change the div to a button. No js needed.

Do you have an example? Still unable to fix in React without mentioned

<Swiper {...swiperOptions}>
    {items.map((item) => (
        <SwiperSlide
            tag={'button'}     <---- change from div to button
            key={item.id}
        >
            <Component item={item} />
        </SwiperSlide>
    ))}
</Swiper>

Everything I did is: <button class="swiper-button-prev"></button> <button class="swiper-button-next"></button>

Maybe you also have to add the 'A11y' module but I don't know.

[ScorpAL]

Resolved with this one... but I am still not happy with that as Mouse click works by default without this changes.

const HandleSlideKeyDown = (e: KeyboardEvent<HTMLElement>, index: number) => {
    if (e.key !== 'Enter' && e.key !== ' ') return;
    mySwiper?.slideTo(index);
};

<Swiper {...swiperOptions}>
    {items.map((item, index) => (
        <SwiperSlide
            tag={'button'}
            key={item.id}
            onKeyDown={(e) => HandleSlideKeyDown(e, index)}
        >
            <Component item={item} />
        </SwiperSlide>
    ))}
</Swiper>