@zohodesk/a11y/es/NavigationManager/useNavigationManager.js

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

import { useEffect } from 'react';
import { applyFocusStyle, removeFocusStyle, listeners, clearFocusStorage, customAttributes, isTabKeyEnabled } from "../FocusScope/utils/focusScopeUtil";
import { setA11yLibraryConfig } from "../Provider/Config";
import useEvent from "../hooks/useEvent";
const {
  focusScope,
  disableGlobalEvent
} = customAttributes;
export default function useNavigationManager(_ref) {
  let {
    element
  } = _ref;
  const onKeyDown = useEvent(event => {
    if (event.key === 'Tab' || event.keyCode === 9 && event.shiftKey) {
      setA11yLibraryConfig({
        tabKeyEnabled: true
      });
    }

    if (event.keyCode == 13) {
      if (isTabKeyEnabled() && document.querySelectorAll(`[data-a11y-list-active=true]`).length === 0 && event.target.click && !event.target.closest(`[${focusScope}=true]`) && !event.target.closest(`[${disableGlobalEvent}=true]`)) {
        if (event.target && event.target.tagName.toUpperCase() !== 'TEXTAREA' && !event.target.isContentEditable) {
          event.preventDefault();
        }

        event.target.click();
      }
    }
  });
  const onEleMouseDown = useEvent(() => {
    clearFocusStorage();
  });
  const onEleFocus = useEvent(event => {
    applyFocusStyle({
      ele: event.target
    });
  });
  const onEleBlur = useEvent(event => {
    removeFocusStyle({
      ele: event.target
    });
  });
  const createa11yManager = useEvent(() => {
    let ele = element();
    listeners({
      element: ele,
      listenerName: 'add',
      eventList: ['keydown', 'focus', 'blur', 'mousedown'],
      actions: [onKeyDown, onEleFocus, onEleBlur, onEleMouseDown],
      isBubbling: true
    });
  });
  const cleara11yManager = useEvent(() => {
    let ele = element();
    listeners({
      element: ele,
      listenerName: 'remove',
      eventList: ['keydown', 'focus', 'blur', 'mousedown'],
      actions: [onKeyDown, onEleFocus, onEleBlur, onEleMouseDown],
      isBubbling: false
    });
  });
  useEffect(() => {
    createa11yManager();
    return cleara11yManager;
  }, []);
}