akiran / akiran/react-slick

Tabindex of focusable elements within aria-hidden parent

Ouverte
#2,400 0 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
JavaScript
Étoiles
11.9k
Forks
2.1k
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

### 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 (

);
});
```

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.