Open diazmaria opened 5 years ago
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??
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
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
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.
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
Is there any update on this? I am getting google lighthouse accessibility ranked down due to this issue.
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.
Hey @diazmaria!
Just fixed the problem externally by adding a hidden
attribute to the container of non-active slides.
activeSlide
=> const [activeSlide, setActiveSlide] = useState(0)
beforeChange={(_, next) => setActiveSlide(next)}
on react-slick
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
Hey @diazmaria!
Just fixed the problem externally by adding a
hidden
attribute to the container of non-active slides.
- Hold
activeSlide
=>const [activeSlide, setActiveSlide] = useState(0)
- Hook into
beforeChange={(_, next) => setActiveSlide(next)}
onreact-slick
- 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?
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
Hey @diazmaria! Just fixed the problem externally by adding a
hidden
attribute to the container of non-active slides.
- Hold
activeSlide
=>const [activeSlide, setActiveSlide] = useState(0)
- Hook into
beforeChange={(_, next) => setActiveSlide(next)}
onreact-slick
- 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}
3. Apply
hidden={activeSlide !== i ? true : undefined}
on the container of the slide.
Hi @aganglada , how can I apply this property on the container of the slide? Plugin adds two divs above each slide, so it doesn't work for me. :/
@fanczerni Just fixed the problem externally by adding a hidden attribute to the container of non-active slides.
node_modules/react-slick/lib/track.js
replace all
style: _objectSpread(_objectSpread({}, child.props.style || {}), childStyle),
to
style: _objectSpread(_objectSpread({ visibility: !slideClasses["slick-active"] ? "hidden" : "visible", }, child.props.style || {}), childStyle)
(As for me its line 192 and 219)
style: _objectSpread(_objectSpread({ outline: "none" }, child.props.style || {}), childStyle)
to
style: _objectSpread(_objectSpread({ outline: "none", visibility: !slideClasses["slick-active"] ? "hidden" : "visible", }, child.props.style || {}), childStyle)
@fanczerni @aganglada @oh-roman
When there is more than one slide to show, managing the active slides for hidden
others is too complicated when there are responsive settings for slides to show. So this code solved that:
componentDidUpdate() {
this.hideAriaHiddenTiles();
}
const settings: Settings = {
afterChange: () => this.hideAriaHiddenTiles(),
}
hideAriaHiddenTiles() {
Array.from(document.querySelectorAll('.slick-slide')).forEach((slide: HTMLElement) => {
slide.style.visibility = slide.classList?.contains('slick-active') ? 'visible' : 'hidden';
});
}
Is there any update on this? I am getting google lighthouse accessibility ranked down due to this issue.
I made a small extension for showing also the slide being replaced while the animation is happening:
const [activeSlides, setActiveSlides] = useState([0]);
settings.beforeChange = (_, next) => setActiveSlides([...activeSlides, next]);
settings.afterChange = (currentSlide) => setActiveSlides([currentSlide]);
hidden={activeSlides.includes(i) ? undefined : true}
@fanczerni Just fixed the problem externally by adding a hidden attribute to the container of non-active slides.
- Install https://www.npmjs.com/package/patch-package
- In
node_modules/react-slick/lib/track.js
replace allstyle: _objectSpread(_objectSpread({}, child.props.style || {}), childStyle),
tostyle: _objectSpread(_objectSpread({ visibility: !slideClasses["slick-active"] ? "hidden" : "visible", }, child.props.style || {}), childStyle)
(As for me its line 192 and 219)- Replace (in line 161)
style: _objectSpread(_objectSpread({ outline: "none" }, child.props.style || {}), childStyle)
tostyle: _objectSpread(_objectSpread({ outline: "none", visibility: !slideClasses["slick-active"] ? "hidden" : "visible", }, child.props.style || {}), childStyle)
- Create and aply this patch with patch-package
This works but not correctly for infinite, it'd require some additional modifications
Hopping in here to say we're also experiencing this issue about a year later from the last comment. Thanks for all your work and attention here. Hopefully something gets fixed soon.
It is still open even after 2+ years. Is there proper fix available for this issue? The accessibility check fails due to this issue and Lighthouse is showing the same.
@fanczerni @aganglada @oh-roman
When there is more than one slide to show, managing the active slides for
hidden
others is too complicated when there are responsive settings for slides to show. So this code solved that:componentDidUpdate() { this.hideAriaHiddenTiles(); } const settings: Settings = { afterChange: () => this.hideAriaHiddenTiles(), } hideAriaHiddenTiles() { Array.from(document.querySelectorAll('.slick-slide')).forEach((slide: HTMLElement) => { slide.style.visibility = slide.classList?.contains('slick-active') ? 'visible' : 'hidden'; }); }
This more or less fixed the issue for me, but the way that new slides advanced while hidden and then popped into visibility after the animation wasn't acceptable. I ended up going with this:
let toggleSlideVisibility = function (event, slick, currentSlide, nextSlide) {
Array.from(document.querySelectorAll('.slick-slide')).forEach((slide) => {
slide.style.visibility = slide.classList?.contains('slick-active') ? 'visible' : 'hidden';
});
}
paragraphSlideShow.on('init', toggleSlideVisibility).slick({
// config settings
}).on('beforeChange', function(event, slick, currentSlide) {
Array.from(document.querySelectorAll('.slick-slide')).forEach((slide) => {
slide.style.visibility = 'visible';
});
}).on('afterChange', toggleSlideVisibility);
DESCRIPTION
We can find
slick-slides
that havearia-hidden="true"
andtabindex="-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"