Accessibility: slideLabelMessage cannot be unset and should never be used

[ronilaukkarinen]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/swiper-navigation-forked-3uguc8?file=/index.html

Bug description

It seems in Swiper 8.2.2 setting slideLabelMessage: null, crashes the slider and provides an error:

a11y.js:217 Uncaught TypeError: Cannot read properties of null (reading 'replace')
    at HTMLLIElement.eval (a11y.js:217:57)
    at eval (dom7.esm.js:774:14)
    at Dom7.forEach (<anonymous>)
    at Dom7.each (dom7.esm.js:773:8)
    at initSlides (a11y.js:214:19)
    at Swiper.eval (a11y.js:312:5)
    at eval (events-emitter.js:119:24)
    at Array.forEach (<anonymous>)
    at eval (events-emitter.js:118:37)
    at Array.forEach (<anonymous>)

Anyway, aria-label in slider slide elements should not be used anyway because aria-label overrides the visible text in those elements. This means that the screen-reader users only hear "1 / 24" and have no access to content.

My full code:

import Swiper, {
  Navigation, Pagination, Scrollbar, A11y,
} from 'swiper/core';
import getLocalization from './localization';

Swiper.use([Navigation, Pagination, Scrollbar, A11y]);

const initCarousels = () => {
  // Init carousels
  const Carousels = document.querySelectorAll('.swiper-container');

  // Add skip links
  const allCarouselBlocks = document.querySelectorAll('.is-carousel');

  // Loop through all blocks
  for (let i = 0; i < allCarouselBlocks.length; i++) {
    // Get carousel block class nam (second, because first is 'block')
    const carouselClass = allCarouselBlocks[i].classList[1];

    if (typeof allCarouselBlocks[i].nextSibling !== 'undefined' || allCarouselBlocks[i].nextSibling !== null) {
      // Set ID to next block
      allCarouselBlocks[i].setAttribute('id', `anchor-${carouselClass}`);
    }
  }

  // init swipers
  for (let i = 0; i < Carousels.length; i++) {
    Carousels[i].classList.add(`swiper-container-${i}`);
    Carousels[i].querySelector('.swiper-button-prev').classList.add(`swiper-button-prev-${i}`);
    Carousels[i].querySelector('.swiper-button-next').classList.add(`swiper-button-next-${i}`);

    if (Carousels[i].querySelector('.swiper-pagination')) {
      Carousels[i].querySelector('.swiper-pagination').classList.add(`swiper-pagination-${i}`);
    }

    if (Carousels[i].querySelector('.swiper-scrollbar')) {
      Carousels[i].querySelector('.swiper-scrollbar').classList.add(`swiper-scrollbar-${i}`);
    }

    const swiper = new Swiper(`.swiper-container-${i}`, {
      slidesPerView: 1,
      slideClass: 'swiper-slide',
      wrapperClass: 'swiper-wrapper',
      centeredSlides: false,
      spaceBetween: 150,
      speed: 200,
      a11y: {
        enabled: true,
        lastSlideMessage: getLocalization('last_slide'),
        prevSlideMessage: getLocalization('previous_slide'),
        nextSlideMessage: getLocalization('next_slide'),
        slideLabelMessage: null,
        slideRole: 'group',
      },
      navigation: {
        prevEl: `.swiper-button-prev-${i}`,
        nextEl: `.swiper-button-next-${i}`,
      },
      pagination: {
        el: `.swiper-pagination-${i}`,
        type: 'fraction',
      },
      scrollbar: {
        el: `.swiper-scrollbar-${i}`,
        draggable: true,
      },
    });
  }
};

export default initCarousels;

Expected Behavior

There should not be aria-label attribute in slide elements.

Actual Behavior

Instead slider not working and error follows:

a11y.js:217 Uncaught TypeError: Cannot read properties of null (reading 'replace')
    at HTMLLIElement.eval (a11y.js:217:57)
    at eval (dom7.esm.js:774:14)
    at Dom7.forEach (<anonymous>)
    at Dom7.each (dom7.esm.js:773:8)
    at initSlides (a11y.js:214:19)
    at Swiper.eval (a11y.js:312:5)
    at eval (events-emitter.js:119:24)
    at Array.forEach (<anonymous>)
    at eval (events-emitter.js:118:37)
    at Array.forEach (<anonymous>)

Swiper version

8.2.2

Platform/Target and Browser Versions

macOS Chrome 102.0.5005.61 (Official Build) (x86_64)

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• 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

[nolimits4web]

fixed in #5783