swiper icon indicating copy to clipboard operation
swiper copied to clipboard

Keyboard Back-Navigation is buggy

Open NickHatBoecker opened this issue 2 years ago • 0 comments

Check that this is really a bug

  • [X] I confirm

Reproduction link

https://eu.daad.de/de/

Bug description

Hey there, I have a strange problem with a swiper slide.

  1. Open https://eu.daad.de/de/ - On the top of the page there is a swiper slider
  2. Click on the last navigation bullet and navigate back with TAB+SHIFT until the focus reaches the slides and you navigated back at least 2 slides
  3. Now navigate forward one slide with TAB

I thought maybe it has to do something with the keyboard plugin. But it also happens when I disable this. I guess it's a problem with the A11y Plugin? Because if I remove this, back navigation via TAB+SHIFT is not enabled at all.

Swiper Config

import Swiper, { Navigation, Pagination, Autoplay, Keyboard, A11y } from 'swiper'

new Swiper(swiperContainer, {
    modules: [Navigation, Pagination, Autoplay, Keyboard, A11y],
    createElements: true,
    keyboard: { enabled: true },
    preventClicks: true,
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-next',
        prevEl: '.swiper-prev',
    },
    a11y: {
        enabled: true,
        firstSlideMessage: 'Das ist der erste Slide',
        lastSlideMessage: 'Das ist der letzte Slide',
        nextSlideMessage: 'Nächster Slide',
        paginationBulletMessage: 'Gehe zu Slide {{index}}',
        prevSlideMessage: 'Vorheriger Slide',
        containerRoleDescriptionMessage: containerRoleDescription || 'Wechselteaser',
        itemRoleDescriptionMessage: itemRoleDescription || 'Teaser',
    },
    observer: true,
    observeParents: true,
    watchOverflow: false,
    autoplay: autoplay ? {
        delay: 5000,
    } : false,
})

Expected Behavior

If you have navigated back to slide 7 and tab forward, slide no. 8 should be centered

Actual Behavior

Instead slide no. 8 is at the left side, its focus barely visible and slide no. 9 is centered. On top the bullet navigation is gone.

Swiper version

8.0.7

Platform/Target and Browser Versions

macOS Monterey 12.5.1; Chrome 105.0.5195.125

Validations

  • [X] Follow our Code of Conduct
  • [X] Read the docs.
  • [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • [ ] I'm willing to open a PR

NickHatBoecker avatar Sep 16 '22 16:09 NickHatBoecker