@atlaskit/navigation-system 8.0.0 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlassian/navigation-system
 
+## 8.1.0
+
+### Minor Changes
+
+- [`6a19433e19f86`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a19433e19f86) -
+  Changes to skip links behind the `platform_dst_nav4_skip_link_a11y_1` feature gate:
+  - Visual improvements
+  - Removes skip links for `Banner`, `TopNav`, `Aside` and `Panel` slots
+  - Renames default skip link label for `Main` to 'Main content' (from 'Main Content')
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.0.0
 
 ### Major Changes

package/dist/cjs/components/skip-links/skip-link.compiled.css

@@ -1 +1,2 @@
-._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

package/dist/cjs/components/skip-links/skip-link.js

@@ -10,11 +10,13 @@ require("./skip-link.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 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); }
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 var styles = {
-  skipLinkListItem: "_1pfhze3t"
+  skipLinkListItem: "_1pfhze3t",
+  skipLinkListItemNew: "_1rjcu2gc"
 };
 
 /**
@@ -107,7 +109,7 @@ var SkipLink = exports.SkipLink = function SkipLink(_ref) {
     window.scrollTo(0, 0);
   }, [id, onBeforeNavigate]);
   return /*#__PURE__*/_react.default.createElement("li", {
-    className: (0, _runtime.ax)([styles.skipLinkListItem])
+    className: (0, _runtime.ax)([styles.skipLinkListItem, (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
   }, /*#__PURE__*/_react.default.createElement(_compiled.Anchor
   /**
    * It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/

package/dist/cjs/components/skip-links/skip-links-container.compiled.css

@@ -1,8 +1,12 @@
-
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
+._152tv47k{inset-block-start:var(--ds-space-250,20px)}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1e02v47k{inset-inline-start:var(--ds-space-250,20px)}
 ._1e0c1txw{display:flex}
@@ -15,6 +19,7 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._kqsw1n9t{position:fixed}
 ._lcxvglyw{pointer-events:none}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._tzy4idpf{opacity:0}
 ._18eu1wug:focus-within{pointer-events:auto}
 ._1digjh3g:focus-within{z-index:calc(infinity)}

package/dist/cjs/components/skip-links/skip-links-container.js

@@ -13,14 +13,19 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _skipLink = require("./skip-link");
 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var styles = {
-  root: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
-  skipLinkList: "_zulp1b66 _1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t"
+  root: "_1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
+  rootOld: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp",
+  rootNew: "_2rko1mok _1rjcu2gc _18zrpxbi",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  skipLinkListOld: "_zulp1b66"
 };
 
 /**
@@ -107,12 +112,15 @@ function SkipLinksContainer(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? "".concat(testId, "--skip-links-container") : undefined,
-    className: (0, _runtime.ax)([styles.root])
-  }, !isEmptyLabel && /*#__PURE__*/React.createElement(_compiled.Text, {
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? styles.rootNew : styles.rootOld])
+  }, !isEmptyLabel && ((0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId ? "".concat(testId, "--skip-links-container--label") : undefined,
+    className: (0, _runtime.ax)([styles.label])
+  }, label) : /*#__PURE__*/React.createElement(_compiled.Text, {
     weight: "bold",
     testId: testId ? "".concat(testId, "--skip-links-container--label") : undefined
-  }, label), /*#__PURE__*/React.createElement("ol", {
-    className: (0, _runtime.ax)([styles.skipLinkList])
+  }, label)), /*#__PURE__*/React.createElement("ol", {
+    className: (0, _runtime.ax)([styles.skipLinkList, !(0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
   }, sortedLinks.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,

package/dist/cjs/ui/page-layout/aside.js

@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
 var _constants = require("./constants");
@@ -89,11 +90,13 @@ function Aside(_ref) {
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   (0, _useSkipLinkInternal.useSkipLinkInternal)({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(defaultWidth),

package/dist/cjs/ui/page-layout/banner.js

@@ -10,6 +10,7 @@ require("./banner.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
 var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("./constants");
@@ -45,11 +46,13 @@ function Banner(_ref) {
 
   /**
    * Don't show the skip link if the slot has 0 height.
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   (0, _useSkipLinkInternal.useSkipLinkInternal)({
     id: id,
     label: skipLinkLabel,
-    isHidden: height === 0
+    isHidden: height === 0 || (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,

package/dist/cjs/ui/page-layout/main/main.js

@@ -10,6 +10,7 @@ require("./main.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useSkipLink = require("../../../context/skip-links/use-skip-link");
 var _constants = require("../constants");
 var _useLayoutId = require("../use-layout-id");
@@ -25,7 +26,7 @@ function Main(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
-    skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Main Content' : _ref$skipLinkLabel,
+    skipLinkLabel = _ref$skipLinkLabel === void 0 ? (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content' : _ref$skipLinkLabel,
     testId = _ref.testId,
     providedId = _ref.id;
   var id = (0, _useLayoutId.useLayoutId)({

package/dist/cjs/ui/page-layout/panel.js

@@ -13,6 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
 var _constants = require("./constants");
@@ -75,11 +76,13 @@ function Panel(_ref) {
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   (0, _useSkipLinkInternal.useSkipLinkInternal)({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(defaultWidth),

package/dist/cjs/ui/page-layout/root.js

@@ -11,6 +11,7 @@ require("./root.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksProvider = require("../../context/skip-links/skip-links-provider");
 var _topNavStartContextProvider = require("../../context/top-nav-start/top-nav-start-context-provider");
 var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
@@ -34,12 +35,12 @@ function Root(_ref) {
     xcss = _ref.xcss,
     _ref$UNSAFE_dangerous = _ref.UNSAFE_dangerouslyHoistSlotSizes,
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
-    _ref$skipLinksLabel = _ref.skipLinksLabel,
-    skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
+    skipLinksLabel = _ref.skipLinksLabel,
     testId = _ref.testId,
     defaultSideNavCollapsed = _ref.defaultSideNavCollapsed,
     _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
     isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
+  var resolvedSkipLinksLabel = skipLinksLabel !== null && skipLinksLabel !== void 0 ? skipLinksLabel : (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:';
   var ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -61,7 +62,7 @@ function Root(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserver, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/_react.default.createElement(_skipLinksProvider.SkipLinksProvider, {
-    label: skipLinksLabel,
+    label: resolvedSkipLinksLabel,
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,

package/dist/cjs/ui/page-layout/top-nav/top-nav.js

@@ -12,7 +12,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _useSkipLink = require("../../../context/skip-links/use-skip-link");
+var _useSkipLinkInternal = require("../../../context/skip-links/use-skip-link-internal");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
 var _hasDefaultBackgroundColorContext = require("../../top-nav-items/themed/has-default-background-color-context");
@@ -56,7 +56,11 @@ function TopNavOld(_ref) {
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
-  (0, _useSkipLink.useSkipLink)(id, skipLinkLabel);
+  (0, _useSkipLinkInternal.useSkipLinkInternal)({
+    id: id,
+    label: skipLinkLabel,
+    isHidden: (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
+  });
   var hasIncreasedDefaultHeight = isFhsEnabled && (0, _platformFeatureFlags.fg)('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   var customTheme = (0, _useCustomTheme.useCustomTheme)(customThemeConfig);
@@ -105,7 +109,11 @@ function TopNavNew(_ref2) {
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
-  (0, _useSkipLink.useSkipLink)(id, skipLinkLabel);
+  (0, _useSkipLinkInternal.useSkipLinkInternal)({
+    id: id,
+    label: skipLinkLabel,
+    isHidden: (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
+  });
   var hasIncreasedDefaultHeight = isFhsEnabled && (0, _platformFeatureFlags.fg)('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   var customTheme = (0, _useCustomThemeNew.useCustomThemeNew)(customThemeConfig);

package/dist/es2019/components/skip-links/skip-link.compiled.css

@@ -1 +1,2 @@
-._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

package/dist/es2019/components/skip-links/skip-link.js

@@ -3,10 +3,12 @@ import "./skip-link.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor } from '@atlaskit/primitives/compiled';
 const styles = {
-  skipLinkListItem: "_1pfhze3t"
+  skipLinkListItem: "_1pfhze3t",
+  skipLinkListItemNew: "_1rjcu2gc"
 };
 
 /**
@@ -100,7 +102,7 @@ export const SkipLink = ({
     window.scrollTo(0, 0);
   }, [id, onBeforeNavigate]);
   return /*#__PURE__*/React.createElement("li", {
-    className: ax([styles.skipLinkListItem])
+    className: ax([styles.skipLinkListItem, fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
   }, /*#__PURE__*/React.createElement(Anchor
   /**
    * It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/

package/dist/es2019/components/skip-links/skip-links-container.compiled.css

@@ -1,8 +1,12 @@
-
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
+._152tv47k{inset-block-start:var(--ds-space-250,20px)}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1e02v47k{inset-inline-start:var(--ds-space-250,20px)}
 ._1e0c1txw{display:flex}
@@ -15,6 +19,7 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._kqsw1n9t{position:fixed}
 ._lcxvglyw{pointer-events:none}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._tzy4idpf{opacity:0}
 ._18eu1wug:focus-within{pointer-events:auto}
 ._1digjh3g:focus-within{z-index:calc(infinity)}

package/dist/es2019/components/skip-links/skip-links-container.js

@@ -3,11 +3,16 @@ import "./skip-links-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { SkipLink } from './skip-link';
 const styles = {
-  root: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
-  skipLinkList: "_zulp1b66 _1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t"
+  root: "_1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
+  rootOld: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp",
+  rootNew: "_2rko1mok _1rjcu2gc _18zrpxbi",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  skipLinkListOld: "_zulp1b66"
 };
 
 /**
@@ -88,12 +93,15 @@ export function SkipLinksContainer({
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? `${testId}--skip-links-container` : undefined,
-    className: ax([styles.root])
-  }, !isEmptyLabel && /*#__PURE__*/React.createElement(Text, {
+    className: ax([styles.root, fg('platform_dst_nav4_skip_link_a11y_1') ? styles.rootNew : styles.rootOld])
+  }, !isEmptyLabel && (fg('platform_dst_nav4_skip_link_a11y_1') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId ? `${testId}--skip-links-container--label` : undefined,
+    className: ax([styles.label])
+  }, label) : /*#__PURE__*/React.createElement(Text, {
     weight: "bold",
     testId: testId ? `${testId}--skip-links-container--label` : undefined
-  }, label), /*#__PURE__*/React.createElement("ol", {
-    className: ax([styles.skipLinkList])
+  }, label)), /*#__PURE__*/React.createElement("ol", {
+    className: ax([styles.skipLinkList, !fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
   }, sortedLinks.map(({
     id,
     label,

package/dist/es2019/ui/page-layout/aside.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext, useEffect, useRef, useState } from 'react';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { asidePanelSplitterId, asideVar, contentHeightWhenFixed, contentInsetBlockStart, UNSAFE_asideLayoutVar } from './constants';
@@ -76,11 +77,13 @@ export function Aside({
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   const ref = useRef(null);
   const [width, setWidth] = useState(defaultWidth);

package/dist/es2019/ui/page-layout/banner.js

@@ -3,6 +3,7 @@ import "./banner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
 import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
@@ -37,11 +38,13 @@ export function Banner({
 
   /**
    * Don't show the skip link if the slot has 0 height.
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id,
     label: skipLinkLabel,
-    isHidden: height === 0
+    isHidden: height === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,

package/dist/es2019/ui/page-layout/main/main.js

@@ -3,6 +3,7 @@ import "./main.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/use-skip-link';
 import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
 import { useLayoutId } from '../use-layout-id';
@@ -16,7 +17,7 @@ const mainElementStyles = {
 export function Main({
   children,
   xcss,
-  skipLinkLabel = 'Main Content',
+  skipLinkLabel = fg('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content',
   testId,
   id: providedId
 }) {

package/dist/es2019/ui/page-layout/panel.js

@@ -3,6 +3,7 @@ import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
@@ -61,11 +62,13 @@ export function Panel({
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   const ref = useRef(null);
   const [width, setWidth] = useState(defaultWidth);

package/dist/es2019/ui/page-layout/root.js

@@ -3,6 +3,7 @@ import "./root.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
 import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
@@ -25,11 +26,12 @@ export function Root({
   children,
   xcss,
   UNSAFE_dangerouslyHoistSlotSizes = false,
-  skipLinksLabel = 'Skip to:',
+  skipLinksLabel,
   testId,
   defaultSideNavCollapsed,
   isSideNavShortcutEnabled = false
 }) {
+  const resolvedSkipLinksLabel = skipLinksLabel !== null && skipLinksLabel !== void 0 ? skipLinksLabel : fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:';
   const ref = useRef(null);
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
@@ -60,7 +62,7 @@ This message will not be displayed in production.
   }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
-    label: skipLinksLabel,
+    label: resolvedSkipLinksLabel,
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,

package/dist/es2019/ui/page-layout/top-nav/top-nav.js

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-import { useSkipLink } from '../../../context/skip-links/use-skip-link';
+import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
@@ -49,7 +49,11 @@ function TopNavOld({
   const id = useLayoutId({
     providedId
   });
-  useSkipLink(id, skipLinkLabel);
+  useSkipLinkInternal({
+    id,
+    label: skipLinkLabel,
+    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
+  });
   const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   const customTheme = useCustomTheme(customThemeConfig);
@@ -99,7 +103,11 @@ function TopNavNew({
   const id = useLayoutId({
     providedId
   });
-  useSkipLink(id, skipLinkLabel);
+  useSkipLinkInternal({
+    id,
+    label: skipLinkLabel,
+    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
+  });
   const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   const customTheme = useCustomThemeNew(customThemeConfig);

package/dist/esm/components/skip-links/skip-link.compiled.css

@@ -1 +1,2 @@
-._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

package/dist/esm/components/skip-links/skip-link.js

@@ -3,10 +3,12 @@ import "./skip-link.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor } from '@atlaskit/primitives/compiled';
 var styles = {
-  skipLinkListItem: "_1pfhze3t"
+  skipLinkListItem: "_1pfhze3t",
+  skipLinkListItemNew: "_1rjcu2gc"
 };
 
 /**
@@ -99,7 +101,7 @@ export var SkipLink = function SkipLink(_ref) {
     window.scrollTo(0, 0);
   }, [id, onBeforeNavigate]);
   return /*#__PURE__*/React.createElement("li", {
-    className: ax([styles.skipLinkListItem])
+    className: ax([styles.skipLinkListItem, fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
   }, /*#__PURE__*/React.createElement(Anchor
   /**
    * It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/

package/dist/esm/components/skip-links/skip-links-container.compiled.css

@@ -1,8 +1,12 @@
-
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
+._152tv47k{inset-block-start:var(--ds-space-250,20px)}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1e02v47k{inset-inline-start:var(--ds-space-250,20px)}
 ._1e0c1txw{display:flex}
@@ -15,6 +19,7 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._kqsw1n9t{position:fixed}
 ._lcxvglyw{pointer-events:none}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._tzy4idpf{opacity:0}
 ._18eu1wug:focus-within{pointer-events:auto}
 ._1digjh3g:focus-within{z-index:calc(infinity)}

package/dist/esm/components/skip-links/skip-links-container.js

@@ -7,11 +7,16 @@ import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { SkipLink } from './skip-link';
 var styles = {
-  root: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
-  skipLinkList: "_zulp1b66 _1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t"
+  root: "_1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
+  rootOld: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp",
+  rootNew: "_2rko1mok _1rjcu2gc _18zrpxbi",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  skipLinkListOld: "_zulp1b66"
 };
 
 /**
@@ -98,12 +103,15 @@ export function SkipLinksContainer(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? "".concat(testId, "--skip-links-container") : undefined,
-    className: ax([styles.root])
-  }, !isEmptyLabel && /*#__PURE__*/React.createElement(Text, {
+    className: ax([styles.root, fg('platform_dst_nav4_skip_link_a11y_1') ? styles.rootNew : styles.rootOld])
+  }, !isEmptyLabel && (fg('platform_dst_nav4_skip_link_a11y_1') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId ? "".concat(testId, "--skip-links-container--label") : undefined,
+    className: ax([styles.label])
+  }, label) : /*#__PURE__*/React.createElement(Text, {
     weight: "bold",
     testId: testId ? "".concat(testId, "--skip-links-container--label") : undefined
-  }, label), /*#__PURE__*/React.createElement("ol", {
-    className: ax([styles.skipLinkList])
+  }, label)), /*#__PURE__*/React.createElement("ol", {
+    className: ax([styles.skipLinkList, !fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
   }, sortedLinks.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,

package/dist/esm/ui/page-layout/aside.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext, useEffect, useRef, useState } from 'react';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { asidePanelSplitterId, asideVar, contentHeightWhenFixed, contentInsetBlockStart, UNSAFE_asideLayoutVar } from './constants';
@@ -80,11 +81,13 @@ export function Aside(_ref) {
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = useRef(null);
   var _useState = useState(defaultWidth),

package/dist/esm/ui/page-layout/banner.js

@@ -3,6 +3,7 @@ import "./banner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
 import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
@@ -37,11 +38,13 @@ export function Banner(_ref) {
 
   /**
    * Don't show the skip link if the slot has 0 height.
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id: id,
     label: skipLinkLabel,
-    isHidden: height === 0
+    isHidden: height === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,

package/dist/esm/ui/page-layout/main/main.js

@@ -3,6 +3,7 @@ import "./main.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/use-skip-link';
 import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
 import { useLayoutId } from '../use-layout-id';
@@ -17,7 +18,7 @@ export function Main(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
-    skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Main Content' : _ref$skipLinkLabel,
+    skipLinkLabel = _ref$skipLinkLabel === void 0 ? fg('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content' : _ref$skipLinkLabel,
     testId = _ref.testId,
     providedId = _ref.id;
   var id = useLayoutId({

package/dist/esm/ui/page-layout/panel.js

@@ -5,6 +5,7 @@ import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
@@ -66,11 +67,13 @@ export function Panel(_ref) {
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = useRef(null);
   var _useState = useState(defaultWidth),

package/dist/esm/ui/page-layout/root.js

@@ -3,6 +3,7 @@ import "./root.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
 import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
@@ -26,12 +27,12 @@ export function Root(_ref) {
     xcss = _ref.xcss,
     _ref$UNSAFE_dangerous = _ref.UNSAFE_dangerouslyHoistSlotSizes,
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
-    _ref$skipLinksLabel = _ref.skipLinksLabel,
-    skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
+    skipLinksLabel = _ref.skipLinksLabel,
     testId = _ref.testId,
     defaultSideNavCollapsed = _ref.defaultSideNavCollapsed,
     _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
     isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
+  var resolvedSkipLinksLabel = skipLinksLabel !== null && skipLinksLabel !== void 0 ? skipLinksLabel : fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:';
   var ref = useRef(null);
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -53,7 +54,7 @@ export function Root(_ref) {
   }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
-    label: skipLinksLabel,
+    label: resolvedSkipLinksLabel,
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,

package/dist/esm/ui/page-layout/top-nav/top-nav.js

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-import { useSkipLink } from '../../../context/skip-links/use-skip-link';
+import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
@@ -49,7 +49,11 @@ function TopNavOld(_ref) {
   var id = useLayoutId({
     providedId: providedId
   });
-  useSkipLink(id, skipLinkLabel);
+  useSkipLinkInternal({
+    id: id,
+    label: skipLinkLabel,
+    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
+  });
   var hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   var customTheme = useCustomTheme(customThemeConfig);
@@ -98,7 +102,11 @@ function TopNavNew(_ref2) {
   var id = useLayoutId({
     providedId: providedId
   });
-  useSkipLink(id, skipLinkLabel);
+  useSkipLinkInternal({
+    id: id,
+    label: skipLinkLabel,
+    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
+  });
   var hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   var customTheme = useCustomThemeNew(customThemeConfig);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "8.0.0",
+	"version": "8.1.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -72,12 +72,12 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/app-provider": "^4.3.0",
-		"@atlaskit/avatar": "^25.11.0",
+		"@atlaskit/avatar": "^25.13.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^34.2.0",
-		"@atlaskit/layering": "^3.6.0",
+		"@atlaskit/icon": "^34.3.0",
+		"@atlaskit/layering": "^3.7.0",
 		"@atlaskit/logo": "^20.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
@@ -111,7 +111,7 @@
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/lozenge": "^13.7.0",
 		"@atlaskit/menu": "^8.5.0",
-		"@atlaskit/modal-dialog": "^14.15.0",
+		"@atlaskit/modal-dialog": "^14.17.0",
 		"@atlaskit/onboarding": "^14.6.0",
 		"@atlaskit/page-header": "^12.1.0",
 		"@atlaskit/page-layout": "^4.3.0",
@@ -183,6 +183,9 @@
 		},
 		"platform_dst_nav4_custom_theming_fhs_1": {
 			"type": "boolean"
+		},
+		"platform_dst_nav4_skip_link_a11y_1": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"