Enforce ARIA rule

DESCRIPTION

We can find slick-slides that have aria-hidden="true" and tabindex="-1" attributes. This breaks the ARIA rules to have any tabindex value (indicating the element is focusable) whilst also having the hidden flag for an element.

Found with ‘Axe’ Chrome extension to flag accessibility issues Docs: https://dequeuniversity.com/rules/axe/3.2/aria-hidden-focus?application=AxeChrome

Replicate here: https://codesandbox.io/s/ppwkk5l6xx

CURRENT:

<div data-index="2" class="slick-slide" tabindex="-1" aria-hidden="true" style="outline: none; width: 430px;"></div>

EXPECTED:

<div data-index="2" class="slick-slide" aria-hidden="true" style="outline: none; width: 430px;"></div>

Solution: tabindex attibute should be removed when aria-hidden="true"

[alldrops]

Any updates on this issue? Is someone actively working on this? I’m also experiencing the same problem and the removal of tabindex=“-1” would make life easier

[aganglada]

Hey @diazmaria!

Just fixed the problem externally by adding a hidden attribute to the container of non-active slides.

1. Hold activeSlide => const [activeSlide, setActiveSlide] = useState(0)
2. Hook into beforeChange={(_, next) => setActiveSlide(next)} on react-slick
3. Apply hidden={activeSlide !== i ? true : undefined} on the container of the slide.

Reference: https://web.dev/aria-hidden-focus/#how-to-fix-partially-hidden-focusable-elements