[OutSystems UI Web] Carousel accessibility hack in last update brought in unwanted behavior

Forge Component
(45)
Published on 14 Feb (11 days ago) by OutSystems R&D
45 votes
Published on 14 Feb (11 days ago) by OutSystems R&D

OutSystems UI Web
Stable Version 1.8.0 (OutSystems 11)


Release note:

  • Carousel now correctly changes the focus on navigation.


There was a JavaScript modification to Carousel.en.js


function transitionEnd(info, eventName) {
    // direct access to info object
    for (var i = 0; i < info.slideItems.length; i++) {
        info.slideItems[info.index].removeAttribute("aria-label");
        info.slideItems[i].setAttribute("tabindex", "-1");
    }

    var ariaLabelInfo = "carousel item " + (info.index + 1) + " of " + info.slideItems.length;
    info.slideItems[info.index].setAttribute("aria-label", ariaLabelInfo);

    info.slideItems[info.index].setAttribute("tabindex", "0");
    info.slideItems[info.index].focus();
};


If you have a carousel on a page with overflowing content with scrollbars, the page will jump back to the carousel every time the carousel animation finishes.

IE an ecommerce site with a carousel at the top wil make the user's screen jump to the top on every animation.

Solution

Hi John Ries,


Thank you for the feedback! You're right, that's something that shuldn't happen when Autoplay is on. 

We will work on a fix for the next OS UI Web release.


Best regards,

Bernardo Cardoso

Solution