UseGroupRole = false generate an error

Hello 😃

I am using slick accessible but when I add option : useGroupRole: false it generates a JS error.

Cannot read property 'replace' of undefined

Any solution? Here is my code 😃

$('.carousel-cards').slick({
      dots: true,
      arrows: true,
      slidesToShow: 4,
      infinite: true,
      autoplay: true,
      regionLabel: 'caroussel',
      useGroupRole: false,
      responsive: [{
          breakpoint: 3000,
          settings: {
            slidesToShow: 3
          }
        },
        {
          breakpoint: 800,
          settings: {
            slidesToShow: 2
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1
          }
        }
      ],
      prevArrow: '<button class="previous-button is-control">' +
        '  <span class="fas fa-angle-left-white" aria-hidden="true"></span>' +
        '  <span class="sr-only">Diapositive précédente</span>' +
        '</button>',
      nextArrow: '<button class="next-button is-control">' +
        '  <span class="fas fa-angle-right-white" aria-hidden="true"></span>' +
        '  <span class="sr-only">Diapositive suivante</span>' +
        '</button>',
    });

Thanks a lot!

[rianfloo]

Hi @damnsamn @jasonwebb has merged the fix on master. You should be able to get the updated code and fix your issue but you will not able to use the library with NPM as the last version has not been published on it.

I managed to make it works on my project by minifing the code from the new version.

The only last problem is that aria-labels injected by the new version show as undefined in the markeup. You can use onInit Event to destroy all aria-label by looping on all slides. cc @Accessible360

[pratikbassi]

Issue closed as fixed on master, will be in the next minor release. Separate issue created for “aria-labels injected by the new version show as undefined in the markup” for investigation. https://github.com/Accessible360/accessible-slick/issues/66