Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link focus issue on "destroyed" slider #1307

Open
2 tasks done
2ndkauboy opened this issue May 16, 2024 · 1 comment
Open
2 tasks done

Link focus issue on "destroyed" slider #1307

2ndkauboy opened this issue May 16, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@2ndkauboy
Copy link

Checks

Version

v4.1.3

Description

Splide has an option to "destory" the slider on a certain breakpoint. This works fairly well, but it introduces an accessibility issue. When the slides contain links, they are no longer focusable, since Splide sets a tabindex="-1" on every "inactive slide". Since in the "destroy" state, all slides are visible and therefore "active", this tabindex="-1" and other accessibility properties should be removed (e.g. aria-hidden="true" does get removed correctly) .

Reproduction Link

https://codepen.io/2ndkauboy/pen/VwOvWpG

Steps to Reproduce

  1. Create a slider with links inside the slides.
  2. Set the option to destroy the slider at a certain breakpoint.
  3. Test keyboard navigation of links inside the slides.

Expected Behaviour

Links (and other focusable elements) inside the slider should be focusable when "destroyed".

@2ndkauboy 2ndkauboy added the bug Something isn't working label May 16, 2024
@2ndkauboy
Copy link
Author

I came up with a temporary fix for now:

splide.on("destroy", () => {
    for ( let slide of splide.Components.Elements.list.children ){
        for ( let focusableNode of slide.querySelectorAll(splide.options.focusableNodes)) {
            focusableNode.setAttribute('tabindex', '');
        }
    }
});

You can test it here: https://codepen.io/2ndkauboy/pen/wvbKqeJ

But this should really be solved in the code itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant