Slick: Slick dots can no longer be navigated using tab controls

[bjulian5]

Inactive slick dots cannot be reached using tab controls which is confusing to screen reader users and sighted keyboard only users.

The inactive pagination controls (slick dots) have a tabindex='-1', which to a sighted keyboard user would be confusing/frustrating, as they would not be able to reach it in order to advance the carousel. This is the result of the ARIA role="tab" semantics and keyboard behavior being applied to the pagination controls. This will confuse screen reader users, who are expecting certain keyboard behavior when navigation through a tabbed interface. It will also cause a confusing experience for sighted keyboard users who are aware of the tabbed interface design pattern and want to tab to the next pagination control but instead have focus jumps outside the carousel to the next tabbable element.

====================================================================

###### [ http://jsfiddle.net/bjulian5/k21ta54f/25/ ]

Steps to reproduce the problem

1. Open JS Fiddle link
2. Attempt to an inactive slick dot and realize you can't reach it
3. Open devtools and remove tabindex=-1 from inactive slides
4. Try tabbing again and see that they can be reached
5. Hit enter on inactive slide to advance carousel.

====================================================================

What is the expected behaviour?

Any of the slick dots should be able to receive focus. When an inactive slick dot receives focus and a user hits enter, the selected dot should become active along with the corresponding slide.

====================================================================

What is observed behaviour?

Tab control can never reach an inactive slide

====================================================================

More Details

• Which browsers/versions does it happen on? Chrome
• Which jQuery/Slick version are you using? Slick: tip of master, Jquery: 1.9.1
• Did this work before? Yes 1.5.9 but arrow key navigation did not work

[smitterko]

I ran into a similar problem and wanted to share what fixed it for me. In your Slick slider options, make sure these are both set:

focusOnChange: true,
accessibility: true

I was using the latest version of Slick (1.8.1). After enabling those options I was able to tab + Enter through the carousel.

[cseto]

@bjulian5 did you find a solution for this problem? I'm in the same situation.

There is a PR for a fix: https://github.com/kenwheeler/slick/pull/3957 but hasn't been merged.

tabindex is 0 for all slide slick dots at http://kenwheeler.github.io/slick/ but in Slick v1.8.1, only the active slide dot has a tabindex of 0 and the other slide dots have a tabindex of -1. I tried beforeChange and afterChange but they don't work for changing that attribute.

[bjulian5]

@cseto It's been a while since I looked at this but changing this seemed to fix the issue for me: https://github.com/bjulian5/slick/commit/603d8a64953857d5019223bd7f45308324f68f29

[andrewwburns]

@bjulian5 Yup, I've the same problem, and changing that line to use TabIndex of 0 fixed the issue for me, too.