@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
63 lines (58 loc) • 1.94 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SkipLink = void 0;
var _react = require("@emotion/react");
var _link = _interopRequireDefault(require("@atlaskit/link"));
/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
var skipLinkListItemStyles = (0, _react.css)({
marginBlockStart: 0
});
var focusTargetRef = function focusTargetRef(href) {
return function (event) {
event.preventDefault();
var targetRef = document.querySelector(href);
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
// @ts-ignore
var key = event.which || event.keycode;
// if it is a keypress and the key is not
// space or enter, just ignore it.
if (key && key !== 13 && key !== 32) {
return;
}
if (targetRef) {
targetRef.setAttribute('tabindex', '-1');
// @ts-ignore
targetRef.addEventListener('blur', handleBlur);
// @ts-ignore
targetRef.focus();
document.activeElement && document.activeElement.scrollIntoView({
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
behavior: 'smooth'
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
});
window.scrollTo(0, 0);
}
return false;
};
};
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var SkipLink = exports.SkipLink = function SkipLink(_ref) {
var href = _ref.href,
children = _ref.children,
isFocusable = _ref.isFocusable;
return (0, _react.jsx)("li", {
css: skipLinkListItemStyles
}, (0, _react.jsx)(_link.default, {
tabIndex: isFocusable ? 0 : -1,
href: href,
onClick: focusTargetRef(href)
}, children));
};