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"
Source: akiran/react-slick