Tabindex of focusable elements within aria-hidden parent

[smiffywiffy]

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<Element>): 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<SlickSlider, Settings>((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 (
    <SlickSlider
      ref={ref}
      onInit={handleOnInit}
      afterChange={handleAfterChange}
      infinite={shouldBeInfinite}
      {...rest}
    />
  );
});