-
-
Notifications
You must be signed in to change notification settings - Fork 419
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
Labels
bug
Something isn't working
Comments
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
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", thistabindex="-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
Expected Behaviour
Links (and other focusable elements) inside the slider should be focusable when "destroyed".
The text was updated successfully, but these errors were encountered: