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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactI18next = require("react-i18next");
var _designSystem = require("@talend/design-system");
var _constants = _interopRequireDefault(require("../../constants"));
var _translate = _interopRequireDefault(require("../../translate"));
var _SkipLinksModule = _interopRequireDefault(require("./SkipLinks.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function SkipTo({
  href,
  label
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
    href: href,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: _SkipLinksModule.default.icon,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Icon, {
        transform: _designSystem.SVG_TRANSFORMS.Rotate270,
        name: "talend-arrow-left"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: _SkipLinksModule.default.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__*/(0, _jsxRuntime.jsx)("nav", {
    className: _SkipLinksModule.default['tc-skip-links'],
    "aria-label": t('SKIP_LINKS', {
      defaultValue: 'Skip links'
    }),
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
      children: [navigationId && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SkipTo, {
          href: navigationId,
          label: t('SKIP_TO_NAV', {
            defaultValue: 'Skip to navigation'
          })
        })
      }, "navigation"), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SkipTo, {
          href: mainId,
          label: t('SKIP_TO_MAIN', {
            defaultValue: 'Skip to main content'
          })
        })
      }, "main")]
    })
  });
}
SkipLinks.defaultProps = {
  t: (0, _translate.default)()
};
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(SkipLinks);
//# sourceMappingURL=SkipLinks.component.js.map