@talend/react-components/lib-esm/Layout/SkipLinks/SkipLinks.component.js

Set of react components.

import { withTranslation } from 'react-i18next';
import { Icon, SVG_TRANSFORMS } from '@talend/design-system';
import I18N_DOMAIN_COMPONENTS from '../../constants';
import getDefaultT from '../../translate';
import theme from './SkipLinks.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function SkipTo({
  href,
  label
}) {
  return /*#__PURE__*/_jsxs("a", {
    href: href,
    children: [/*#__PURE__*/_jsx("span", {
      className: theme.icon,
      children: /*#__PURE__*/_jsx(Icon, {
        transform: SVG_TRANSFORMS.Rotate270,
        name: "talend-arrow-left"
      })
    }), /*#__PURE__*/_jsx("span", {
      className: theme.text,
      children: label
    })]
  });
}
/**
 * Skip links are a technique to ease keyboard navigation.
 * It consists in giving some links as the firsts focusable elements of the page
 * to go directly to some meaningful content.
 */
function SkipLinks({
  mainId,
  navigationId,
  t
}) {
  return /*#__PURE__*/_jsx("nav", {
    className: theme['tc-skip-links'],
    "aria-label": t('SKIP_LINKS', {
      defaultValue: 'Skip links'
    }),
    children: /*#__PURE__*/_jsxs("ul", {
      children: [navigationId && /*#__PURE__*/_jsx("li", {
        children: /*#__PURE__*/_jsx(SkipTo, {
          href: navigationId,
          label: t('SKIP_TO_NAV', {
            defaultValue: 'Skip to navigation'
          })
        })
      }, "navigation"), /*#__PURE__*/_jsx("li", {
        children: /*#__PURE__*/_jsx(SkipTo, {
          href: mainId,
          label: t('SKIP_TO_MAIN', {
            defaultValue: 'Skip to main content'
          })
        })
      }, "main")]
    })
  });
}
SkipLinks.defaultProps = {
  t: getDefaultT()
};
export default withTranslation(I18N_DOMAIN_COMPONENTS)(SkipLinks);
//# sourceMappingURL=SkipLinks.component.js.map