@zohodesk/a11y/es/SkipNavigation/useSkipNavigation.js

In this Package, We Provide Some Basic Components For Accessibility.

import { useEffect, useState } from 'react';
import { setA11yLibraryConfig } from '../Provider/Config';
import { getLandmarkElements, getEleName } from '../FocusScope/utils/focusScopeUtil';
export default function useSkipNavigation(_ref) {
  let {
    element,
    menuContainer,
    onClickMenu
  } = _ref;
  const [isActive, setActive] = useState(false);
  const landmarkElements = getLandmarkElements(element());

  const onOpenMenu = () => {
    !isActive && setActive(true);
  };

  const onDocumentClick = event => {
    if (menuContainer.current && !menuContainer.current.contains(event.target)) {
      setActive(false);
    }
  };

  const onCloseMenu = () => {
    isActive && setActive(false);
  };

  const onClickLandmark = ele => {
    setActive(false);
    setA11yLibraryConfig({
      focusRingEnabled: true
    });
    ele && ele.focus();
    onClickMenu && onClickMenu(ele);
  };

  useEffect(() => {
    element().addEventListener('click', onDocumentClick, true);
    return () => {
      element().removeEventListener('click', onDocumentClick, false);
    };
  }, []);
  return {
    isActive,
    onOpenMenu,
    onCloseMenu,
    onClickLandmark,
    landmarkElements,
    getEleName
  };
}