@atlaskit/navigation-system 9.0.0 → 9.1.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlassian/navigation-system
 
+## 9.1.1
+
+### Patch Changes
+
+- [`0d8519bedea15`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d8519bedea15) -
+  Cleanup feature gate `platform_themed_button_use_icon_renderer`. Icon renderer is now always used
+  for themed button icons.
+
+## 9.1.0
+
+### Minor Changes
+
+- [`c47d9797de1d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c47d9797de1d4) -
+  Skip links are now rendered inside of a popup. This change is behind the
+  `platform_dst_nav4_skip_link_a11y_1` feature gate.
+
+### Patch Changes
+
+- [`36a98dddcf5af`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/36a98dddcf5af) -
+  Cleanup of feature gate navx-4418-fix-effect-state-updates-in-gsn (true)
+
 ## 9.0.0
 
 ### Major Changes

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

@@ -66,7 +66,6 @@ function focusElement(element) {
     focusVisible: true
   });
 }
-
 /**
  * A link that moves current tab position to a different element
  *

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

@@ -1,12 +1,8 @@
-._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)}
-._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)}
+._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}
@@ -19,7 +15,6 @@
 ._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

@@ -16,16 +16,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _skipLink = require("./skip-link");
+var _skipLinksPopup = require("./skip-links-popup");
 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: "_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"
+  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"
 };
 
 /**
@@ -96,10 +93,11 @@ var isOnlyWhitespaceRegex = /^\s*$/;
  * The label is used as the heading of the skip links container. If the provided label is a string
  * comprised only of only whitespace (e.g. '' or ' '), the skip link heading element will be removed.
  *
- * The links prop is only used when the feature flag is enabled.
+ * When `platform_dst_nav4_skip_link_a11y_1` is enabled, rendering is delegated to `SkipLinksPopup`.
  */
 function SkipLinksContainer(_ref) {
   var label = _ref.label,
+    triggerLabel = _ref.triggerLabel,
     testId = _ref.testId,
     links = _ref.links;
   var sortedLinks = (0, _react.useMemo)(function () {
@@ -109,18 +107,23 @@ function SkipLinksContainer(_ref) {
     return null;
   }
   var isEmptyLabel = isOnlyWhitespaceRegex.test(label);
+  if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')) {
+    return /*#__PURE__*/React.createElement(_skipLinksPopup.SkipLinksPopup, {
+      label: label,
+      triggerLabel: triggerLabel,
+      testId: testId,
+      links: sortedLinks
+    });
+  }
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? "".concat(testId, "--skip-links-container") : undefined,
-    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, {
+    className: (0, _runtime.ax)([styles.root])
+  }, !isEmptyLabel && /*#__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, !(0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
+  }, label), /*#__PURE__*/React.createElement("ol", {
+    className: (0, _runtime.ax)([styles.skipLinkList])
   }, sortedLinks.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,

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

@@ -0,0 +1,22 @@
+._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)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1dqoglyw{border-style:none}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._152tutpp{inset-block-start:var(--ds-space-150,9pt)}
+._1e02utpp{inset-inline-start:var(--ds-space-150,9pt)}
+._1e0c1txw{display:flex}
+._1pby1mrw{z-index:-1}
+._1pbyjh3g{z-index:calc(infinity)}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1x8w11lx{list-style-position:outside}
+._2lx21bp4{flex-direction:column}
+._2mzuglyw{list-style-type:none}
+._4ojojh3g:has(:focus-visible){z-index:calc(infinity)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._c8j0kb7n:has(:focus-visible){opacity:1}
+._kqsw1n9t{position:fixed}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._t9ecz6y5{transform:translateY(-100%)}
+._tzy4idpf{opacity:0}

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

@@ -0,0 +1,124 @@
+/* skip-links-popup.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkipLinksPopup = SkipLinksPopup;
+require("./skip-links-popup.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactDom = require("react-dom");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+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); }
+var contentStyles = {
+  root: "_1rjcu2gc _18zrpxbi _1e0c1txw _2lx21bp4 _1pbyjh3g",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu"
+};
+var triggerStyles = {
+  root: "_2rko12b0 _1dqoglyw _kqsw1n9t _1e02utpp _152tutpp _1pby1mrw _tzy4idpf _bfhk1bhr _4ojojh3g _c8j0kb7n",
+  isOpen: "_tzy4idpf _t9ecz6y5"
+};
+var popupOffset = [0, 0];
+
+/**
+ * Skip links shown behind `platform_dst_nav4_skip_link_a11y_1`: a single focus-revealed
+ * control opens a dialog listing skip targets.
+ */
+function SkipLinksPopup(_ref) {
+  var title = _ref.label,
+    triggerLabel = _ref.triggerLabel,
+    testId = _ref.testId,
+    links = _ref.links;
+  var titleId = (0, _react.useId)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var triggerRef = (0, _react.useRef)(null);
+  var openPopup = (0, _react.useCallback)(function () {
+    setIsOpen(true);
+  }, []);
+
+  /**
+   * Closes the popup.
+   *
+   * Uses `flushSync` to avoid issues with focus management.
+   * This ensures the popup's focus lock is fully released by the time skip links or our `onClose` try to move focus.
+   */
+  var closePopup = (0, _react.useCallback)(function () {
+    (0, _reactDom.flushSync)(function () {
+      setIsOpen(false);
+    });
+  }, []);
+
+  /**
+   * Restores focus to the trigger on close, if it hasn't moved to another element, such as when Esc is pressed instead of a skip link.
+   *
+   * We need this because using the standard `shouldReturnFocus` on the popup would break the skip link focus behaviour,
+   * as focus would always move back to the trigger.
+   */
+  var onClose = (0, _react.useCallback)(function () {
+    closePopup();
+
+    // Focus on the body implies a skip link was not clicked
+    if (document.activeElement === document.body) {
+      var _triggerRef$current;
+      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+    }
+  }, [closePopup]);
+  return /*#__PURE__*/React.createElement(_popup.default, {
+    isOpen: isOpen,
+    onClose: onClose,
+    placement: "bottom-start",
+    shouldRenderToParent: true,
+    shouldReturnFocus: false,
+    role: "dialog",
+    titleId: titleId,
+    testId: testId ? "".concat(testId, "--skip-links-container") : undefined,
+    offset: popupOffset,
+    content: function content() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([contentStyles.root])
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": testId ? "".concat(testId, "--skip-links-container--label") : undefined,
+        id: titleId,
+        className: (0, _runtime.ax)([contentStyles.label])
+      }, title), /*#__PURE__*/React.createElement("ol", {
+        className: (0, _runtime.ax)([contentStyles.skipLinkList])
+      }, links.map(function (_ref2) {
+        var id = _ref2.id,
+          label = _ref2.label,
+          _onBeforeNavigate = _ref2.onBeforeNavigate;
+        return /*#__PURE__*/React.createElement(_skipLink.SkipLink, {
+          key: id,
+          id: id,
+          onBeforeNavigate: function onBeforeNavigate() {
+            closePopup();
+            _onBeforeNavigate === null || _onBeforeNavigate === void 0 || _onBeforeNavigate();
+          }
+        }, label);
+      })));
+    },
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([triggerStyles.root, isOpen && triggerStyles.isOpen])
+      }, /*#__PURE__*/React.createElement(_new.default, (0, _extends2.default)({}, triggerProps, {
+        ref: (0, _mergeRefs.default)([triggerProps.ref, triggerRef]),
+        appearance: "primary",
+        isSelected: isOpen,
+        testId: testId ? "".concat(testId, "--skip-links-trigger") : undefined,
+        onClick: openPopup
+      }), triggerLabel));
+    }
+  });
+}

package/dist/cjs/context/skip-links/skip-links-provider.js

@@ -45,6 +45,7 @@ var getByDomOrderSortFunction = function getByDomOrderSortFunction() {
 function SkipLinksProvider(_ref) {
   var children = _ref.children,
     label = _ref.label,
+    triggerLabel = _ref.triggerLabel,
     testId = _ref.testId;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -84,6 +85,7 @@ function SkipLinksProvider(_ref) {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_skipLinksContainer.SkipLinksContainer, {
     label: label,
+    triggerLabel: triggerLabel,
     testId: testId,
     links: links
   }), children);

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

@@ -35,12 +35,14 @@ function Root(_ref) {
     xcss = _ref.xcss,
     _ref$UNSAFE_dangerous = _ref.UNSAFE_dangerouslyHoistSlotSizes,
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
-    skipLinksLabel = _ref.skipLinksLabel,
+    _ref$skipLinksLabel = _ref.skipLinksLabel,
+    skipLinksLabel = _ref$skipLinksLabel === void 0 ? (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:' : _ref$skipLinksLabel,
+    _ref$skipLinksTrigger = _ref.skipLinksTriggerLabel,
+    skipLinksTriggerLabel = _ref$skipLinksTrigger === void 0 ? 'Skip to' : _ref$skipLinksTrigger,
     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') {
@@ -62,7 +64,8 @@ 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: resolvedSkipLinksLabel,
+    label: skipLinksLabel,
+    triggerLabel: skipLinksTriggerLabel,
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,

package/dist/cjs/ui/top-nav-items/themed/themed-button.js

@@ -12,7 +12,6 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _iconRenderer = _interopRequireDefault(require("../icon-renderer"));
 var _themedPressable = require("./themed-pressable");
 var _excluded = ["iconBefore", "children"];
@@ -29,11 +28,8 @@ var ThemedButton = exports.ThemedButton = /*#__PURE__*/(0, _react.forwardRef)(fu
     ref: ref
   }), IconBefore && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _runtime.ax)([textButtonStyles.iconBefore])
-  }, (0, _platformFeatureFlags.fg)('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+  }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
     icon: IconBefore
-  }) : /*#__PURE__*/_react.default.createElement(IconBefore, {
-    label: "",
-    color: "currentColor"
   })), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _runtime.ax)([textButtonStyles.text])
   }, children));

package/dist/cjs/ui/top-nav-items/themed/themed-icon-button.js

@@ -12,7 +12,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _iconRenderer = _interopRequireDefault(require("../icon-renderer"));
@@ -74,11 +73,8 @@ var ThemedIconButton = exports.ThemedIconButton = /*#__PURE__*/(0, _react.forwar
           (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
           (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
         }
-      }), (0, _platformFeatureFlags.fg)('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+      }), /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
         icon: Icon
-      }) : /*#__PURE__*/_react.default.createElement(Icon, {
-        label: "",
-        color: "currentColor"
       }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label))
     );
   });

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

@@ -58,7 +58,6 @@ function focusElement(element) {
     focusVisible: true
   });
 }
-
 /**
  * A link that moves current tab position to a different element
  *

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

@@ -1,12 +1,8 @@
-._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)}
-._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)}
+._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}
@@ -19,7 +15,6 @@
 ._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

@@ -6,13 +6,10 @@ import { useMemo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { SkipLink } from './skip-link';
+import { SkipLinksPopup } from './skip-links-popup';
 const styles = {
-  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"
+  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"
 };
 
 /**
@@ -76,10 +73,11 @@ const isOnlyWhitespaceRegex = /^\s*$/;
  * The label is used as the heading of the skip links container. If the provided label is a string
  * comprised only of only whitespace (e.g. '' or ' '), the skip link heading element will be removed.
  *
- * The links prop is only used when the feature flag is enabled.
+ * When `platform_dst_nav4_skip_link_a11y_1` is enabled, rendering is delegated to `SkipLinksPopup`.
  */
 export function SkipLinksContainer({
   label,
+  triggerLabel,
   testId,
   links
 }) {
@@ -90,18 +88,23 @@ export function SkipLinksContainer({
     return null;
   }
   const isEmptyLabel = isOnlyWhitespaceRegex.test(label);
+  if (fg('platform_dst_nav4_skip_link_a11y_1')) {
+    return /*#__PURE__*/React.createElement(SkipLinksPopup, {
+      label: label,
+      triggerLabel: triggerLabel,
+      testId: testId,
+      links: sortedLinks
+    });
+  }
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? `${testId}--skip-links-container` : undefined,
-    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, {
+    className: ax([styles.root])
+  }, !isEmptyLabel && /*#__PURE__*/React.createElement(Text, {
     weight: "bold",
     testId: testId ? `${testId}--skip-links-container--label` : undefined
-  }, label)), /*#__PURE__*/React.createElement("ol", {
-    className: ax([styles.skipLinkList, !fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
+  }, label), /*#__PURE__*/React.createElement("ol", {
+    className: ax([styles.skipLinkList])
   }, sortedLinks.map(({
     id,
     label,

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

@@ -0,0 +1,22 @@
+._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)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1dqoglyw{border-style:none}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._152tutpp{inset-block-start:var(--ds-space-150,9pt)}
+._1e02utpp{inset-inline-start:var(--ds-space-150,9pt)}
+._1e0c1txw{display:flex}
+._1pby1mrw{z-index:-1}
+._1pbyjh3g{z-index:calc(infinity)}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1x8w11lx{list-style-position:outside}
+._2lx21bp4{flex-direction:column}
+._2mzuglyw{list-style-type:none}
+._4ojojh3g:has(:focus-visible){z-index:calc(infinity)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._c8j0kb7n:has(:focus-visible){opacity:1}
+._kqsw1n9t{position:fixed}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._t9ecz6y5{transform:translateY(-100%)}
+._tzy4idpf{opacity:0}

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

@@ -0,0 +1,107 @@
+/* skip-links-popup.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./skip-links-popup.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useId, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+import Button from '@atlaskit/button/new';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import Popup from '@atlaskit/popup';
+import { SkipLink } from './skip-link';
+const contentStyles = {
+  root: "_1rjcu2gc _18zrpxbi _1e0c1txw _2lx21bp4 _1pbyjh3g",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu"
+};
+const triggerStyles = {
+  root: "_2rko12b0 _1dqoglyw _kqsw1n9t _1e02utpp _152tutpp _1pby1mrw _tzy4idpf _bfhk1bhr _4ojojh3g _c8j0kb7n",
+  isOpen: "_tzy4idpf _t9ecz6y5"
+};
+const popupOffset = [0, 0];
+
+/**
+ * Skip links shown behind `platform_dst_nav4_skip_link_a11y_1`: a single focus-revealed
+ * control opens a dialog listing skip targets.
+ */
+export function SkipLinksPopup({
+  label: title,
+  triggerLabel,
+  testId,
+  links
+}) {
+  const titleId = useId();
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const openPopup = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  /**
+   * Closes the popup.
+   *
+   * Uses `flushSync` to avoid issues with focus management.
+   * This ensures the popup's focus lock is fully released by the time skip links or our `onClose` try to move focus.
+   */
+  const closePopup = useCallback(() => {
+    flushSync(() => {
+      setIsOpen(false);
+    });
+  }, []);
+
+  /**
+   * Restores focus to the trigger on close, if it hasn't moved to another element, such as when Esc is pressed instead of a skip link.
+   *
+   * We need this because using the standard `shouldReturnFocus` on the popup would break the skip link focus behaviour,
+   * as focus would always move back to the trigger.
+   */
+  const onClose = useCallback(() => {
+    closePopup();
+
+    // Focus on the body implies a skip link was not clicked
+    if (document.activeElement === document.body) {
+      var _triggerRef$current;
+      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
+    }
+  }, [closePopup]);
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isOpen,
+    onClose: onClose,
+    placement: "bottom-start",
+    shouldRenderToParent: true,
+    shouldReturnFocus: false,
+    role: "dialog",
+    titleId: titleId,
+    testId: testId ? `${testId}--skip-links-container` : undefined,
+    offset: popupOffset,
+    content: () => /*#__PURE__*/React.createElement("div", {
+      className: ax([contentStyles.root])
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": testId ? `${testId}--skip-links-container--label` : undefined,
+      id: titleId,
+      className: ax([contentStyles.label])
+    }, title), /*#__PURE__*/React.createElement("ol", {
+      className: ax([contentStyles.skipLinkList])
+    }, links.map(({
+      id,
+      label,
+      onBeforeNavigate
+    }) => /*#__PURE__*/React.createElement(SkipLink, {
+      key: id,
+      id: id,
+      onBeforeNavigate: () => {
+        closePopup();
+        onBeforeNavigate === null || onBeforeNavigate === void 0 ? void 0 : onBeforeNavigate();
+      }
+    }, label)))),
+    trigger: triggerProps => /*#__PURE__*/React.createElement("div", {
+      className: ax([triggerStyles.root, isOpen && triggerStyles.isOpen])
+    }, /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
+      ref: mergeRefs([triggerProps.ref, triggerRef]),
+      appearance: "primary",
+      isSelected: isOpen,
+      testId: testId ? `${testId}--skip-links-trigger` : undefined,
+      onClick: openPopup
+    }), triggerLabel))
+  });
+}

package/dist/es2019/context/skip-links/skip-links-provider.js

@@ -34,6 +34,7 @@ const getByDomOrderSortFunction = () => {
 export function SkipLinksProvider({
   children,
   label,
+  triggerLabel,
   testId
 }) {
   const [links, setLinks] = useState([]);
@@ -71,6 +72,7 @@ This error will not be shown in production, and the duplicate skip link will be
     value: contextValue
   }, /*#__PURE__*/React.createElement(SkipLinksContainer, {
     label: label,
+    triggerLabel: triggerLabel,
     testId: testId,
     links: links
   }), children);

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

@@ -26,12 +26,12 @@ export function Root({
   children,
   xcss,
   UNSAFE_dangerouslyHoistSlotSizes = false,
-  skipLinksLabel,
+  skipLinksLabel = fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:',
+  skipLinksTriggerLabel = 'Skip to',
   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') {
@@ -62,7 +62,8 @@ 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: resolvedSkipLinksLabel,
+    label: skipLinksLabel,
+    triggerLabel: skipLinksTriggerLabel,
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,

package/dist/es2019/ui/top-nav-items/themed/themed-button.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./themed-button.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import IconRenderer from '../icon-renderer';
 import { ThemedPressable } from './themed-pressable';
 const textButtonStyles = {
@@ -19,11 +18,8 @@ export const ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton({
     ref: ref
   }), IconBefore && /*#__PURE__*/React.createElement("span", {
     className: ax([textButtonStyles.iconBefore])
-  }, fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
+  }, /*#__PURE__*/React.createElement(IconRenderer, {
     icon: IconBefore
-  }) : /*#__PURE__*/React.createElement(IconBefore, {
-    label: "",
-    color: "currentColor"
   })), /*#__PURE__*/React.createElement("span", {
     className: ax([textButtonStyles.text])
   }, children));

package/dist/es2019/ui/top-nav-items/themed/themed-icon-button.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import IconRenderer from '../icon-renderer';
@@ -63,10 +62,7 @@ export const ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButto
       (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
       (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, e);
     }
-  }), fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
+  }), /*#__PURE__*/React.createElement(IconRenderer, {
     icon: Icon
-  }) : /*#__PURE__*/React.createElement(Icon, {
-    label: "",
-    color: "currentColor"
   }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
 });

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

@@ -58,7 +58,6 @@ function focusElement(element) {
     focusVisible: true
   });
 }
-
 /**
  * A link that moves current tab position to a different element
  *

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

@@ -1,12 +1,8 @@
-._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)}
-._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)}
+._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}
@@ -19,7 +15,6 @@
 ._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

@@ -10,13 +10,10 @@ import { useMemo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { SkipLink } from './skip-link';
+import { SkipLinksPopup } from './skip-links-popup';
 var styles = {
-  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"
+  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"
 };
 
 /**
@@ -87,10 +84,11 @@ var isOnlyWhitespaceRegex = /^\s*$/;
  * The label is used as the heading of the skip links container. If the provided label is a string
  * comprised only of only whitespace (e.g. '' or ' '), the skip link heading element will be removed.
  *
- * The links prop is only used when the feature flag is enabled.
+ * When `platform_dst_nav4_skip_link_a11y_1` is enabled, rendering is delegated to `SkipLinksPopup`.
  */
 export function SkipLinksContainer(_ref) {
   var label = _ref.label,
+    triggerLabel = _ref.triggerLabel,
     testId = _ref.testId,
     links = _ref.links;
   var sortedLinks = useMemo(function () {
@@ -100,18 +98,23 @@ export function SkipLinksContainer(_ref) {
     return null;
   }
   var isEmptyLabel = isOnlyWhitespaceRegex.test(label);
+  if (fg('platform_dst_nav4_skip_link_a11y_1')) {
+    return /*#__PURE__*/React.createElement(SkipLinksPopup, {
+      label: label,
+      triggerLabel: triggerLabel,
+      testId: testId,
+      links: sortedLinks
+    });
+  }
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? "".concat(testId, "--skip-links-container") : undefined,
-    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, {
+    className: ax([styles.root])
+  }, !isEmptyLabel && /*#__PURE__*/React.createElement(Text, {
     weight: "bold",
     testId: testId ? "".concat(testId, "--skip-links-container--label") : undefined
-  }, label)), /*#__PURE__*/React.createElement("ol", {
-    className: ax([styles.skipLinkList, !fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
+  }, label), /*#__PURE__*/React.createElement("ol", {
+    className: ax([styles.skipLinkList])
   }, sortedLinks.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,

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

@@ -0,0 +1,22 @@
+._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)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1dqoglyw{border-style:none}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._152tutpp{inset-block-start:var(--ds-space-150,9pt)}
+._1e02utpp{inset-inline-start:var(--ds-space-150,9pt)}
+._1e0c1txw{display:flex}
+._1pby1mrw{z-index:-1}
+._1pbyjh3g{z-index:calc(infinity)}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1x8w11lx{list-style-position:outside}
+._2lx21bp4{flex-direction:column}
+._2mzuglyw{list-style-type:none}
+._4ojojh3g:has(:focus-visible){z-index:calc(infinity)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._c8j0kb7n:has(:focus-visible){opacity:1}
+._kqsw1n9t{position:fixed}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._t9ecz6y5{transform:translateY(-100%)}
+._tzy4idpf{opacity:0}

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

@@ -0,0 +1,115 @@
+/* skip-links-popup.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./skip-links-popup.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useId, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+import Button from '@atlaskit/button/new';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import Popup from '@atlaskit/popup';
+import { SkipLink } from './skip-link';
+var contentStyles = {
+  root: "_1rjcu2gc _18zrpxbi _1e0c1txw _2lx21bp4 _1pbyjh3g",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu"
+};
+var triggerStyles = {
+  root: "_2rko12b0 _1dqoglyw _kqsw1n9t _1e02utpp _152tutpp _1pby1mrw _tzy4idpf _bfhk1bhr _4ojojh3g _c8j0kb7n",
+  isOpen: "_tzy4idpf _t9ecz6y5"
+};
+var popupOffset = [0, 0];
+
+/**
+ * Skip links shown behind `platform_dst_nav4_skip_link_a11y_1`: a single focus-revealed
+ * control opens a dialog listing skip targets.
+ */
+export function SkipLinksPopup(_ref) {
+  var title = _ref.label,
+    triggerLabel = _ref.triggerLabel,
+    testId = _ref.testId,
+    links = _ref.links;
+  var titleId = useId();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var triggerRef = useRef(null);
+  var openPopup = useCallback(function () {
+    setIsOpen(true);
+  }, []);
+
+  /**
+   * Closes the popup.
+   *
+   * Uses `flushSync` to avoid issues with focus management.
+   * This ensures the popup's focus lock is fully released by the time skip links or our `onClose` try to move focus.
+   */
+  var closePopup = useCallback(function () {
+    flushSync(function () {
+      setIsOpen(false);
+    });
+  }, []);
+
+  /**
+   * Restores focus to the trigger on close, if it hasn't moved to another element, such as when Esc is pressed instead of a skip link.
+   *
+   * We need this because using the standard `shouldReturnFocus` on the popup would break the skip link focus behaviour,
+   * as focus would always move back to the trigger.
+   */
+  var onClose = useCallback(function () {
+    closePopup();
+
+    // Focus on the body implies a skip link was not clicked
+    if (document.activeElement === document.body) {
+      var _triggerRef$current;
+      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+    }
+  }, [closePopup]);
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isOpen,
+    onClose: onClose,
+    placement: "bottom-start",
+    shouldRenderToParent: true,
+    shouldReturnFocus: false,
+    role: "dialog",
+    titleId: titleId,
+    testId: testId ? "".concat(testId, "--skip-links-container") : undefined,
+    offset: popupOffset,
+    content: function content() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: ax([contentStyles.root])
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": testId ? "".concat(testId, "--skip-links-container--label") : undefined,
+        id: titleId,
+        className: ax([contentStyles.label])
+      }, title), /*#__PURE__*/React.createElement("ol", {
+        className: ax([contentStyles.skipLinkList])
+      }, links.map(function (_ref2) {
+        var id = _ref2.id,
+          label = _ref2.label,
+          _onBeforeNavigate = _ref2.onBeforeNavigate;
+        return /*#__PURE__*/React.createElement(SkipLink, {
+          key: id,
+          id: id,
+          onBeforeNavigate: function onBeforeNavigate() {
+            closePopup();
+            _onBeforeNavigate === null || _onBeforeNavigate === void 0 || _onBeforeNavigate();
+          }
+        }, label);
+      })));
+    },
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: ax([triggerStyles.root, isOpen && triggerStyles.isOpen])
+      }, /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
+        ref: mergeRefs([triggerProps.ref, triggerRef]),
+        appearance: "primary",
+        isSelected: isOpen,
+        testId: testId ? "".concat(testId, "--skip-links-trigger") : undefined,
+        onClick: openPopup
+      }), triggerLabel));
+    }
+  });
+}

package/dist/esm/context/skip-links/skip-links-provider.js

@@ -36,6 +36,7 @@ var getByDomOrderSortFunction = function getByDomOrderSortFunction() {
 export function SkipLinksProvider(_ref) {
   var children = _ref.children,
     label = _ref.label,
+    triggerLabel = _ref.triggerLabel,
     testId = _ref.testId;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -75,6 +76,7 @@ export function SkipLinksProvider(_ref) {
     value: contextValue
   }, /*#__PURE__*/React.createElement(SkipLinksContainer, {
     label: label,
+    triggerLabel: triggerLabel,
     testId: testId,
     links: links
   }), children);

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

@@ -27,12 +27,14 @@ export function Root(_ref) {
     xcss = _ref.xcss,
     _ref$UNSAFE_dangerous = _ref.UNSAFE_dangerouslyHoistSlotSizes,
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
-    skipLinksLabel = _ref.skipLinksLabel,
+    _ref$skipLinksLabel = _ref.skipLinksLabel,
+    skipLinksLabel = _ref$skipLinksLabel === void 0 ? fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:' : _ref$skipLinksLabel,
+    _ref$skipLinksTrigger = _ref.skipLinksTriggerLabel,
+    skipLinksTriggerLabel = _ref$skipLinksTrigger === void 0 ? 'Skip to' : _ref$skipLinksTrigger,
     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') {
@@ -54,7 +56,8 @@ 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: resolvedSkipLinksLabel,
+    label: skipLinksLabel,
+    triggerLabel: skipLinksTriggerLabel,
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,

package/dist/esm/ui/top-nav-items/themed/themed-button.js

@@ -5,7 +5,6 @@ var _excluded = ["iconBefore", "children"];
 import "./themed-button.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import IconRenderer from '../icon-renderer';
 import { ThemedPressable } from './themed-pressable';
 var textButtonStyles = {
@@ -20,11 +19,8 @@ export var ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton(_ref, re
     ref: ref
   }), IconBefore && /*#__PURE__*/React.createElement("span", {
     className: ax([textButtonStyles.iconBefore])
-  }, fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
+  }, /*#__PURE__*/React.createElement(IconRenderer, {
     icon: IconBefore
-  }) : /*#__PURE__*/React.createElement(IconBefore, {
-    label: "",
-    color: "currentColor"
   })), /*#__PURE__*/React.createElement("span", {
     className: ax([textButtonStyles.text])
   }, children));

package/dist/esm/ui/top-nav-items/themed/themed-icon-button.js

@@ -5,7 +5,6 @@ var _excluded = ["icon", "label", "tooltip"];
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import IconRenderer from '../icon-renderer';
@@ -65,11 +64,8 @@ export var ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButton(
           (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
           (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
         }
-      }), fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
+      }), /*#__PURE__*/React.createElement(IconRenderer, {
         icon: Icon
-      }) : /*#__PURE__*/React.createElement(Icon, {
-        label: "",
-        color: "currentColor"
       }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label))
     );
   });

package/dist/types/components/skip-links/skip-link.d.ts

@@ -4,13 +4,15 @@
  */
 import { type ReactNode } from 'react';
 import type { SkipLinkData } from '../../context/skip-links/types';
+type SkipLinkProps = {
+    id: string;
+    children: ReactNode;
+    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
+};
 /**
  * A link that moves current tab position to a different element
  *
  * This component is rendered internally and is not exported publicly.
  */
-export declare const SkipLink: ({ id, children, onBeforeNavigate, }: {
-    id: string;
-    children: ReactNode;
-    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
-}) => JSX.Element;
+export declare const SkipLink: ({ id, children, onBeforeNavigate }: SkipLinkProps) => JSX.Element;
+export {};

package/dist/types/components/skip-links/skip-links-container.d.ts

@@ -8,10 +8,11 @@ import { type SkipLinkData } from '../../context/skip-links/types';
  * The label is used as the heading of the skip links container. If the provided label is a string
  * comprised only of only whitespace (e.g. '' or ' '), the skip link heading element will be removed.
  *
- * The links prop is only used when the feature flag is enabled.
+ * When `platform_dst_nav4_skip_link_a11y_1` is enabled, rendering is delegated to `SkipLinksPopup`.
  */
-export declare function SkipLinksContainer({ label, testId, links, }: {
+export declare function SkipLinksContainer({ label, triggerLabel, testId, links, }: {
     label: string;
+    triggerLabel: string;
     testId?: string;
     links: Array<SkipLinkData>;
 }): JSX.Element | null;

package/dist/types/components/skip-links/skip-links-popup.d.ts

@@ -0,0 +1,11 @@
+import { type SkipLinkData } from '../../context/skip-links/types';
+/**
+ * Skip links shown behind `platform_dst_nav4_skip_link_a11y_1`: a single focus-revealed
+ * control opens a dialog listing skip targets.
+ */
+export declare function SkipLinksPopup({ label: title, triggerLabel, testId, links, }: {
+    label: string;
+    triggerLabel: string;
+    testId?: string;
+    links: Array<SkipLinkData>;
+}): JSX.Element;

package/dist/types/context/skip-links/skip-links-provider.d.ts

@@ -5,8 +5,9 @@ import React, { type ReactNode } from 'react';
  * - Provides the context to register/unregister skip links
  * - Renders the skip links container
  */
-export declare function SkipLinksProvider({ children, label, testId, }: {
+export declare function SkipLinksProvider({ children, label, triggerLabel, testId, }: {
     children: ReactNode;
     label: string;
+    triggerLabel: string;
     testId?: string;
 }): React.JSX.Element;

package/dist/types/ui/page-layout/root.d.ts

@@ -9,7 +9,7 @@ export declare const gridRootId = "unsafe-design-system-page-layout-root";
  * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
  * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
  */
-export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, skipLinksTriggerLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -31,6 +31,10 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * The header text for the skip links container element.
      */
     skipLinksLabel?: string;
+    /**
+     * The label for the skip links button that opens the skip links popup.
+     */
+    skipLinksTriggerLabel?: string;
     /**
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */

package/dist/types-ts4.5/components/skip-links/skip-link.d.ts

@@ -4,13 +4,15 @@
  */
 import { type ReactNode } from 'react';
 import type { SkipLinkData } from '../../context/skip-links/types';
+type SkipLinkProps = {
+    id: string;
+    children: ReactNode;
+    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
+};
 /**
  * A link that moves current tab position to a different element
  *
  * This component is rendered internally and is not exported publicly.
  */
-export declare const SkipLink: ({ id, children, onBeforeNavigate, }: {
-    id: string;
-    children: ReactNode;
-    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
-}) => JSX.Element;
+export declare const SkipLink: ({ id, children, onBeforeNavigate }: SkipLinkProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/components/skip-links/skip-links-container.d.ts

@@ -8,10 +8,11 @@ import { type SkipLinkData } from '../../context/skip-links/types';
  * The label is used as the heading of the skip links container. If the provided label is a string
  * comprised only of only whitespace (e.g. '' or ' '), the skip link heading element will be removed.
  *
- * The links prop is only used when the feature flag is enabled.
+ * When `platform_dst_nav4_skip_link_a11y_1` is enabled, rendering is delegated to `SkipLinksPopup`.
  */
-export declare function SkipLinksContainer({ label, testId, links, }: {
+export declare function SkipLinksContainer({ label, triggerLabel, testId, links, }: {
     label: string;
+    triggerLabel: string;
     testId?: string;
     links: Array<SkipLinkData>;
 }): JSX.Element | null;

package/dist/types-ts4.5/components/skip-links/skip-links-popup.d.ts

@@ -0,0 +1,11 @@
+import { type SkipLinkData } from '../../context/skip-links/types';
+/**
+ * Skip links shown behind `platform_dst_nav4_skip_link_a11y_1`: a single focus-revealed
+ * control opens a dialog listing skip targets.
+ */
+export declare function SkipLinksPopup({ label: title, triggerLabel, testId, links, }: {
+    label: string;
+    triggerLabel: string;
+    testId?: string;
+    links: Array<SkipLinkData>;
+}): JSX.Element;

package/dist/types-ts4.5/context/skip-links/skip-links-provider.d.ts

@@ -5,8 +5,9 @@ import React, { type ReactNode } from 'react';
  * - Provides the context to register/unregister skip links
  * - Renders the skip links container
  */
-export declare function SkipLinksProvider({ children, label, testId, }: {
+export declare function SkipLinksProvider({ children, label, triggerLabel, testId, }: {
     children: ReactNode;
     label: string;
+    triggerLabel: string;
     testId?: string;
 }): React.JSX.Element;

package/dist/types-ts4.5/ui/page-layout/root.d.ts

@@ -9,7 +9,7 @@ export declare const gridRootId = "unsafe-design-system-page-layout-root";
  * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
  * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
  */
-export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, skipLinksTriggerLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -31,6 +31,10 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * The header text for the skip links container element.
      */
     skipLinksLabel?: string;
+    /**
+     * The label for the skip links button that opens the skip links popup.
+     */
+    skipLinksTriggerLabel?: string;
     /**
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "9.0.0",
+	"version": "9.1.1",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -87,7 +87,7 @@
 		"@atlaskit/side-nav-items": "^1.13.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.2.0",
-		"@atlaskit/visually-hidden": "^3.0.0",
+		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -103,7 +103,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/badge": "^18.6.0",
-		"@atlaskit/banner": "^14.0.0",
+		"@atlaskit/banner": "^14.1.0",
 		"@atlaskit/breadcrumbs": "^16.1.0",
 		"@atlaskit/dropdown-menu": "^16.8.0",
 		"@atlaskit/form": "^15.5.0",
@@ -113,7 +113,7 @@
 		"@atlaskit/menu": "^8.5.0",
 		"@atlaskit/modal-dialog": "^14.18.0",
 		"@atlaskit/onboarding": "^14.6.0",
-		"@atlaskit/page-header": "^12.1.0",
+		"@atlaskit/page-header": "^12.2.0",
 		"@atlaskit/page-layout": "^4.3.0",
 		"@atlaskit/popper": "^7.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
@@ -123,7 +123,7 @@
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/gemini": "^1.44.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
-		"@atlassian/search-dialog": "^10.0.0",
+		"@atlassian/search-dialog": "^10.1.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
 		"@atlassian/testing-library": "^0.5.0",
@@ -163,9 +163,6 @@
 		"navx-full-height-sidebar": {
 			"type": "boolean"
 		},
-		"platform_themed_button_use_icon_renderer": {
-			"type": "boolean"
-		},
 		"platform_dst_button_chevron_sizing": {
 			"type": "boolean"
 		},