tabindex for slides

[alvinkonda]

I have noticed that the JS add tabindex="0" to the current slide and -1 to the hidden slides. I think this breaks the accessibility as tabindex is needed only for user-actioned elements like buttons, links etc. So, when you navigate with a keyboard you get stucked on an empty selector which does not do anything and then go to the pagination items.

Let me know your thoughts on this.

[Splidejs]

You suggest removing tabindex from all slides, right? I'm not sure what is the best solution about a11y for a slider including tabindex because there are many different suggestions. Here are interesting issues of other sliders:

• Active slide has tabindex="-1" kenwheeler/slick#2338
• Implement acessibility features ganlanyuan/tiny-slider#4

Also, we should aware of the keyboard navigation such as "right arrow" for going to a next slide. To receive keydown event, a slider must have a focused element. If a slide doesn't have tabindex=0, only arrows and dots are focusable but they are not always displayed, depending on options. Some slider plugins set tabindex="0" to its container element but it is not an user-actioned element, isn't it?

I will keep researching this.

[Splidejs]

Now you can determine whether to add tabindex to slides or not by the slideFocus option. Set it false and all tab indices will not be inserted.

[Egpereira]

Hi! I'm creating a slider with <a> tags using react-splide and came across some issues understanding slideFocus:
1 - Does it controls both the tabindex on the visible splide__slides and the negative value on focusable elements?
2 - Do the focusable elements need to be direct children of the splide__slide to receive the tabindex=-1

I'm having an issue where I want the tabindex=-1 control on <a> tags outside the view, but I don't want the tabindex=0 on visible splide__slides, since my slides already have focusable elements. Is there a way to achieve this behaviour?