@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
55 lines (52 loc) • 1.67 kB
JavaScript
/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
import { css, jsx } from '@emotion/react';
import Link from '@atlaskit/link';
var skipLinkListItemStyles = 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
export var SkipLink = function SkipLink(_ref) {
var href = _ref.href,
children = _ref.children,
isFocusable = _ref.isFocusable;
return jsx("li", {
css: skipLinkListItemStyles
}, jsx(Link, {
tabIndex: isFocusable ? 0 : -1,
href: href,
onClick: focusTargetRef(href)
}, children));
};