search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.33k stars 5.88k forks source link

Accessibility (bug) - sliders – dot navigation keyboard accessible (visibly) #4224

Open ssmitt opened 1 year ago

ssmitt commented 1 year ago

short description of the bug / issue, provide more detail below. Currently we cant highlight the slick-dots controlled by the arrow because it has tabindex="-1" Because of the aria-selected and tab-index attributes are now NOT changing accordingly, when navigating/controlling the slider by keyboard. (tabbing/ arrow keys)

All the slickdots in the sliders on the homepage of slick [](this: https://kenwheeler.github.io/slick/) are having

<ul class="slick-dots" style="display: block;" role="tablist"><li class="slick-active" aria-hidden="false" role="presentation" aria-**selected="true"** aria-controls="navigation50" id="slick-slide50"><button type="button" data-role="none" role="button" **tabindex="0"**>1</button></li><li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation51" id="slick-slide51"><button type="button" data-role="none" role="button" **tabindex="0"**>2</button></li></ul>

is this some setting in the library somewhere? Where all the tabindex attributes can be set to "0" inside the <button elements on the slick dots

No fidle needed, just check the demo page from slick itself and inspect the "slickdots" within the browser and see default behavour

[ paste your jsfiddle link here ]

use this jsfiddle to reproduce your bug: http://jsfiddle.net/simeydotme/fmo50w7n/ we will likely close your issue without it.

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

Steps to reproduce the problem

  1. install the slick slider

  2. configure it with 2 slides.

  3. navigate with keyboard (using tabs and arrow keys) between slides.

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

What is the expected behaviour?

when implementing styles on the focus state with css the style :focus will apply because of the use with tabindex=1. ...

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

What is observed behaviour?

when implementing styles on the focus state with css the style :focus wont apply because of the use with tabindex=-1. ...

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

More Details