Accessible360/accessible-slick

Element classes and labels break when using centerMode with useGroupRole

fractile81 opened this issue · 0 comments

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)', '');
                });