@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
89 lines (86 loc) • 4.19 kB
JavaScript
/* skip-link.tsx generated by @compiled/babel-plugin v3.0.2 */
;
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SkipLink = void 0;
require("./skip-link.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireWildcard(require("react"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _anchor = require("@atlaskit/primitives/compiled/anchor");
var _focusElement = require("./focus-element");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var styles = {
skipLinkListItem: "_1pfhze3t",
skipLinkListItemNew: "_1rjcu2gc"
};
/**
* A link that moves current tab position to a different element
*
* This component is rendered internally and is not exported publicly.
*/
var SkipLink = exports.SkipLink = function SkipLink(_ref) {
var id = _ref.id,
children = _ref.children,
onBeforeNavigate = _ref.onBeforeNavigate,
navigate = _ref.navigate;
var href = "#".concat(id);
var handleClick = (0, _react.useCallback)(function (event) {
event.preventDefault();
if (navigate && (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1')) {
/**
* The consumer takes over the navigation effect (e.g. expanding the
* side nav and focusing the first nav item). The universal pre/post
* work below (e.g. `window.scrollTo`) still runs around it.
*/
navigate();
} else {
// Intentionally not using `document.querySelector` because many valid IDs are not valid selectors.
var target = document.getElementById(id);
if (!target) {
return;
}
/**
* Legacy `onBeforeNavigate` hook. Intentionally NOT called when
* `platform_dst_nav4_skip_link_a11y_1` is enabled — under the gate the
* gate-on path delegates state mutation + focus management to `navigate`,
* and `SkipLinksPopup` injects its popup-close behavior into the
* `navigate` wrapper instead of relying on this hook.
*
* This callback can be removed entirely on gate cleanup.
*/
if (!(0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1')) {
onBeforeNavigate === null || onBeforeNavigate === void 0 || onBeforeNavigate();
}
(0, _focusElement.focusElement)(target);
}
/**
* We should look into removing this, or only calling it in specific cases.
*
* It means if the skip link element is in the window scroll container
* then it might not get scrolled into view properly.
*
* This is not an issue for the default slots on desktop, but could break custom skip links or
* even `Aside` on mobile.
*
* Keeping existing behavior for now because resetting the window scroll is actually good for some cases.
* E.g. jumping to main / aside it makes sense to look at the start of the content.
*/
window.scrollTo(0, 0);
}, [id, onBeforeNavigate, navigate]);
return /*#__PURE__*/_react.default.createElement("li", {
className: (0, _runtime.ax)([styles.skipLinkListItem, (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
}, /*#__PURE__*/_react.default.createElement(_anchor.Anchor
/**
* It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/
*
* Adding this explicitly makes the behavior consistent between browsers and lets us `event.preventDefault()`
* in the `onClick` handler.
*/, {
tabIndex: 0,
href: href,
onClick: handleClick
}, children));
};