110
Views
1
Comments
Solved
[OutSystems UI Web] Carousel accessibility hack in last update brought in unwanted behavior
Question
outsystems-ui-web
Web icon
Forge asset by OutSystems

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.

2022-01-13 11-39-41
Bernardo Cardoso
Staff
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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.