Accessible360 / accessible-slick

the last (accessible) carousel you'll ever need.
https://accessible360.github.io/accessible-slick
MIT License
254 stars 45 forks source link

Element classes and labels break when using centerMode with useGroupRole #52

Open fractile81 opened 2 years ago

fractile81 commented 2 years ago

The addition of the useGroupRole option check in Slick.prototype.setSlideClasses ends up assigning allSlides to nothing.

        allSlides = _.$slider
            .find('.slick-slide')
            .removeClass('slick-active slick-center slick-current')
            .attr('aria-hidden', 'true');

        if (_.options.useGroupRole !== false && _.options.centerMode === true) {
            allSlides = allSlides
                .find('slick-slide')
                .attr('aria-label', function() {
                    return $(this).attr('aria-label').replace(' (centered)', '');
                });
        }

This breaks centerMode from clearing the "(centered)" labelling, and looking for .slick-slide within allSlides yields no results because it's already a listing of matching slides.

Changing the body of that conditional to the following fixed these issues for me:

            allSlides
                .attr('aria-label', function() {
                    return $(this).attr('aria-label').replace(' (centered)', '');
                });