Tabindex of focusable elements within aria-hidden parent
- Lingua principale
- JavaScript
- Stelle
- 11.9k
- Fork
- 2.1k
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
### Request for accessibility enhancement
Hello,
I have this a11y issue I am trying to fix - 'aria-hidden elements must not contain focusable elements' picked up by Axe dev tools.
I notice that the original Slick has 'InitADA' function, which seems to do what I'm trying to do:
https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1326
Just thinking this would be ideal if it could incorporated into your good work.
Thanks
Ian
BTW, part of my current code, which feels a bit dirty:
```
const HIDDEN_FOCUS_DELAY = 1000;
function setTabIndex(slides: NodeListOf): void {
slides?.forEach((slide) => {
const focusableElements = slide.querySelectorAll('button:not([disabled]), [href]');
focusableElements.forEach((element) => {
const tabIndexValue = element.closest('.slick-active') !== null ? '0' : '-1';
element.setAttribute('tabIndex', tabIndexValue);
});
});
}
function HiddenSlideFocus(): void {
const slickSlides = document.querySelectorAll('.slick-slide');
setTabIndex(slickSlides);
}
export const Slider = forwardRef((props, ref) => {
const { afterChange, onInit, infinite: shouldBeInfinite = false, ...rest } = props;
useEffect(() => {
const sliderDelay = setTimeout(() => {
HiddenSlideFocus();
}, HIDDEN_FOCUS_DELAY);
return () => clearTimeout(sliderDelay);
}, []);
const handleOnInit = useCallback(() => {
HiddenSlideFocus();
onInit?.();
}, [onInit]);
const handleAfterChange = useCallback(
(currentSlide: number) => {
HiddenSlideFocus();
afterChange?.(currentSlide);
},
[afterChange]
);
return (
);
});
```
Guida per i contributori
Apri la guida per i contributori
Valutazione
Questa issue non è ancora stata valutata.