akiran / akiran/react-slick

Tabindex of focusable elements within aria-hidden parent

Aperta
#2,400 0 commenti 2 reazioni 0 assegnatari Vedi su GitHub
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.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.