React-slick: Enforce ARIA rule

[diazmaria]

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"

[Mikeks81]

What would be the solution to prevent keyboard tabbing to those elements? According to the documention that you linked to it's ok to use tabindex -1 . It's when you have a tabindex of 0 and aria-hidden = true that you violates the Axe recommendation. Maybe there is a bug with Axe reporting aria-hidden=true and tabindex=-1??

[diazmaria]

Divs aren't focusable elements unless we add the tabindex so by just not adding it the problem should be solved.

As per in the documentation:
The aria-hidden="true" elements do not contain focusable elements rule

Content made unfocusable through tabindex:

<div aria-hidden="true">
   <button tabindex="-1">Some button</button>
</div>

This particular example is different, there is a parent element, the div, that has aria-hidden=true and it's child, the button, tabindex="-1". There's no example as the one above

[simonsmith]

I think the main issue here is that when aria-hidden="true" is applied to the container it is necessary to add tab-index="-1" to any elements contained within (links, buttons etc). Feels like we need a way to hook into knowing which slides are currently visible so this could be added

[ksb86]

Also seeing this issue. We are required to maintain a certain level of accessibility standing.
In additions to @simonsmith 's suggestion, it's necessary to remove the tab-index attribute from the parent element if the aria-hidden attribute is present.

[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

[JoeMethven]

Is there any update on this? I am getting google lighthouse accessibility ranked down due to this issue.

[ki1]

I am also getting this issue. I think the suggested fix is not correct. As you can use tab to move the hidden slides into view, then the aria-hidden attribute should not be set on those slides.

[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

[eduinfo96]

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

@aganglada Thanks but, how do you hook into beforeChange in react-slick? And what do you mean by "Hold" in step one?

[aganglada]

do you hook into beforeChange

Passing beforeChange={(_, next) => setActiveSlide(next)} to the Slider

what do you mean by "Hold" in step one?

Using const [activeSlide, setActiveSlide] = useState(0) on your component

[mindmergedesign]

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

@aganglada Thanks but, how do you hook into beforeChange in react-slick? And what do you mean by "Hold" in step one?

I believe there's a typo here hidden={activeSlide !== i ? true : undefined} i should be 1 hidden={activeSlide !== 1 ? true : undefined}