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

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

import React, { useRef } from 'react';
import propTypes from './props/propTypes';
import FocusScope from '../FocusScope/FocusScope';
import ListContainer from '@zohodesk/components/es/ListItem/ListContainer';
import useSkipNavigation from './useSkipNavigation';
import style from './SkipNavigation.module.css';
export default function SkipNavigation(props) {
  const {
    element,
    children,
    onClickMenu
  } = props;
  const menuContainer = useRef(null);
  const {
    isActive,
    landmarkElements,
    getEleName,
    onOpenMenu,
    onCloseMenu,
    onClickLandmark
  } = useSkipNavigation({
    element,
    menuContainer,
    onClickMenu
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    tabIndex: "0",
    onFocus: onOpenMenu
  }), isActive && /*#__PURE__*/React.createElement(FocusScope, {
    needEnterAction: true,
    elementRef: menuContainer,
    needAutoFocus: true,
    needRestoreFocus: false,
    needListNavigation: true,
    onClose: onCloseMenu
  }, /*#__PURE__*/React.createElement("div", {
    ref: menuContainer,
    className: style.container,
    tabIndex: -1
  }, landmarkElements && landmarkElements.map(ele => {
    const name = getEleName(ele);
    ele.setAttribute('data-a11y-focus-class', style.focused);
    return /*#__PURE__*/React.createElement(ListContainer, {
      key: name,
      customClass: style.list,
      customProps: {
        'data-a11y-list-focus-class': style.highlight
      },
      a11y: {
        role: 'option'
      },
      onClick: () => {
        onClickLandmark(ele);
      }
    }, name);
  }))), children);
}
SkipNavigation.propTypes = propTypes;