Swiper pause autoplay - Barrierefreiheit

[Kopfnuss]

Hey,

ich habe dem Standard-Slider für Contao eine Pause-Funktion nach dieser Vorlage hinzugefügt.
https://devspaceblog.com/creating-ac...swiper-slider/
Ich denke, dass wegen der Barrierefreiheit das auch andere gut gebrauchen können.

1. Custom swiper Twig template anlegen - content_element/swiper/swiper_pause.html.twig

{% extends "@Contao/content_element/swiper.html.twig" %}

{% block controls %}
    {{ parent() }}
    <button class="dsb-button-control" aria-pressed="false">
        <span class="screen-reader-text">Pause</span>
        <span class="dashicons dashicons-controls-pause"></span>
    </button>
{% endblock %}

{% block init_options %}
    {{ parent() }}
    on: {
        afterInit: function (dsb_slider) {
            // Play/Pause control button
            const controlBtn = document.querySelector('.dsb-button-control');
            controlBtn.addEventListener('click', function () {
                if (this.getAttribute('aria-pressed') === 'false') {
                    dsb_slider.autoplay.stop();
                    this.querySelector('.screen-reader-text').textContent = 'Play';
                    this.querySelector('.dashicons').classList.remove('dashicons-controls-pause');
                    this.querySelector('.dashicons').classList.add('dashicons-controls-play');
                    this.setAttribute('aria-pressed', 'true');
                } else {
                    dsb_slider.autoplay.start();
                    this.querySelector('.screen-reader-text').textContent = 'Pause';
                    this.querySelector('.dashicons').classList.remove('dashicons-controls-play');
                    this.querySelector('.dashicons').classList.add('dashicons-controls-pause');
                    this.setAttribute('aria-pressed', 'false');
                }
            });
        },
    },
{% endblock %}

2. CSS für Button anlegen:

.dsb-button-control {
    position: absolute;
    bottom: 8px;
    z-index: 10;
    right: 10px;
}

3. Contao Prod.-Cache erneuern
4. Swiper Inhaltselement im Backend anlegen und das Template swiper_pause.html.twig auswählen.

[zoglo]

IIRC gibt es schon ein A11Y module, welches man aktivieren könnte.
Ich weiß nur nicht, welche Möglichkeiten es bietet.

https://swiperjs.com/swiper-api#accessibility-a11y

[Kopfnuss]

IIRC gibt es schon ein A11Y module, welches man aktivieren könnte.
Ich weiß nur nicht, welche Möglichkeiten es bietet.

https://swiperjs.com/swiper-api#accessibility-a11y

Eine Pause Funktion über einen Button habe ich nicht gefunden.
Es gibt ein

pauseOnMouseEnter

https://swiperjs.com/swiper-api#autoplay

Kann aber gut sein das ich wieder mal blind bin. ^^

[Kopfnuss]

Bei

paginationBulletMessage

kann ich einen index hinzufügen.
https://swiperjs.com/swiper-api#accessibility-a11y

Wie muß ich das in meinem Beispiel schreiben damit es funktioniert?

{% block init_options %}
    {{ parent() }}
    effect: 'fade',
    fadeEffect: {
        crossFade: true
    },
    a11y: {
        enable: true,
        prevSlideMessage: 'Zum vorherigen Bild in der Slideshow',
        nextSlideMessage: 'Zum nächsten Bild in der Slideshow',
        paginationBulletMessage: 'Go to slide {{index}}',
        slideLabelMessage: '{{index}} / {{slidesLength}}',
    },
    on: {
        afterInit: function (dsb_slider) {
            // Play/Pause control button
            const controlBtn = document.querySelector('.dsb-button-control');
            controlBtn.addEventListener('click', function () {
                if (this.getAttribute('aria-pressed') === 'false') {
                    dsb_slider.autoplay.stop();
                    this.querySelector('.screen-reader-text').textContent = 'Abspielen';
                    this.querySelector('.dashicons').classList.remove('dashicons-controls-pause');
                    this.querySelector('.dashicons').classList.add('dashicons-controls-play');
                    this.setAttribute('aria-pressed', 'true');
                } else {
                    dsb_slider.autoplay.start();
                    this.querySelector('.screen-reader-text').textContent = 'Pause';
                    this.querySelector('.dashicons').classList.remove('dashicons-controls-play');
                    this.querySelector('.dashicons').classList.add('dashicons-controls-pause');
                    this.setAttribute('aria-pressed', 'false');
                }
            });
        },
    },
{% endblock %}

So funktioniert es schonmal nicht:

paginationBulletMessage: 'Go to slide {{index}}',