Enforce ARIA rule

Author: diazmariaCreated Apr 15, 2019Updated Dec 8, 2025

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"