@atlaskit/navigation-system 9.3.0 → 9.4.0

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

@@ -2,62 +2,14 @@
 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';
+import { focusElement } from './focus-element';
 const styles = {
   skipLinkListItem: "_1pfhze3t",
   skipLinkListItemNew: "_1rjcu2gc"
 };
-
-/**
- * Used for moving focus to the corresponding slot or custom target after clicking on a skip link.
- */
-function focusElement(element) {
-  /**
-   * Elements without an explicit `tabindex` attribute are not guaranteed to be focusable:
-   * https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex
-   *
-   * Our slots are not interactive, so this is required.
-   *
-   * In the future we may want to check if there is an existing `tabindex` attribute,
-   * as custom skip linked elements might already have one.
-   */
-  element.setAttribute('tabindex', '-1');
-
-  /**
-   * Cleanup the `tabindex` attribute we set when the slot or custom target loses focus.
-   *
-   * This is preferable to always having `tabindex="-1"` because always applying the tab index can:
-   *
-   * - mess with click events
-   * - potentially cause a focus ring to be always visible
-   */
-  bind(element, {
-    type: 'blur',
-    listener() {
-      element.removeAttribute('tabindex');
-    },
-    options: {
-      // Using a one-time listener so it cleans itself up
-      once: true
-    }
-  });
-
-  /**
-   * Move focus to the slot or custom target.
-   *
-   * Calling `.focus()` will also scroll the element into view:
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
-   */
-  element.focus({
-    // Forces the focus ring to appear after moving focus to the slot
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
-    // @ts-expect-error - new and not in types yet
-    focusVisible: true
-  });
-}
 /**
  * A link that moves current tab position to a different element
  *
@@ -66,26 +18,41 @@ function focusElement(element) {
 export const SkipLink = ({
   id,
   children,
-  onBeforeNavigate
+  onBeforeNavigate,
+  navigate
 }) => {
   const href = `#${id}`;
-  const onClick = useCallback(event => {
+  const handleClick = useCallback(event => {
     event.preventDefault();
+    if (navigate && fg('platform_dst_nav4_skip_link_a11y_1')) {
+      /**
+       * The consumer takes over the navigation effect (e.g. expanding the
+       * side nav and focusing the first nav item). The universal pre/post
+       * work below (e.g. `window.scrollTo`) still runs around it.
+       */
+      navigate();
+    } else {
+      // Intentionally not using `document.querySelector` because many valid IDs are not valid selectors.
+      const target = document.getElementById(id);
+      if (!target) {
+        return;
+      }
 
-    // Intentionally not using `document.querySelector` because many valid IDs are not valid selectors.
-    const target = document.getElementById(id);
-    if (!target) {
-      return;
+      /**
+       * Legacy `onBeforeNavigate` hook. Intentionally NOT called when
+       * `platform_dst_nav4_skip_link_a11y_1` is enabled — under the gate the
+       * gate-on path delegates state mutation + focus management to `navigate`,
+       * and `SkipLinksPopup` injects its popup-close behavior into the
+       * `navigate` wrapper instead of relying on this hook.
+       *
+       * This callback can be removed entirely on gate cleanup.
+       */
+      if (!fg('platform_dst_nav4_skip_link_a11y_1')) {
+        onBeforeNavigate === null || onBeforeNavigate === void 0 ? void 0 : onBeforeNavigate();
+      }
+      focusElement(target);
     }
 
-    /**
-     * Internal slots can attach an `onBeforeNavigate` callback.
-     *
-     * Side nav uses this to ensure it is expanded.
-     */
-    onBeforeNavigate === null || onBeforeNavigate === void 0 ? void 0 : onBeforeNavigate();
-    focusElement(target);
-
     /**
      * We should look into removing this, or only calling it in specific cases.
      *
@@ -99,7 +66,7 @@ export const SkipLink = ({
      * E.g. jumping to main / aside it makes sense to look at the start of the content.
      */
     window.scrollTo(0, 0);
-  }, [id, onBeforeNavigate]);
+  }, [id, onBeforeNavigate, navigate]);
   return /*#__PURE__*/React.createElement("li", {
     className: ax([styles.skipLinkListItem, fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
   }, /*#__PURE__*/React.createElement(Anchor
@@ -111,6 +78,6 @@ export const SkipLink = ({
    */, {
     tabIndex: 0,
     href: href,
-    onClick: onClick
+    onClick: handleClick
   }, children));
 };

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

@@ -8,6 +8,7 @@ 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 { focusElement } from './focus-element';
 import { SkipLink } from './skip-link';
 const contentStyles = {
   root: "_1rjcu2gc _18zrpxbi _1e0c1txw _2lx21bp4 _1pbyjh3g",
@@ -85,13 +86,34 @@ export function SkipLinksPopup({
     }, links.map(({
       id,
       label,
-      onBeforeNavigate
+      navigate
     }) => /*#__PURE__*/React.createElement(SkipLink, {
       key: id,
-      id: id,
-      onBeforeNavigate: () => {
+      id: id
+      /**
+       * The popup always owns the navigation effect under the
+       * `platform_dst_nav4_skip_link_a11y_1` gate (the only path
+       * that renders `SkipLinksPopup`). It first closes itself
+       * synchronously so its focus lock is released, then either:
+       *
+       *  - delegates to the consumer's `navigate` (e.g. SideNav
+       *    expanding and focusing its first nav item), or
+       *  - falls back to focusing the slot element with `id`.
+       *
+       * This means `SkipLink`'s `onBeforeNavigate` hook is never
+       * needed under the gate and can be removed on cleanup.
+       */,
+      navigate: () => {
         closePopup();
-        onBeforeNavigate === null || onBeforeNavigate === void 0 ? void 0 : onBeforeNavigate();
+        if (navigate) {
+          navigate();
+          return;
+        }
+        // Intentionally not using `document.querySelector` because many valid IDs are not valid selectors.
+        const target = document.getElementById(id);
+        if (target) {
+          focusElement(target);
+        }
       }
     }, label)))),
     trigger: triggerProps => /*#__PURE__*/React.createElement("div", {

package/dist/es2019/context/skip-links/use-skip-link-internal.js

@@ -5,14 +5,15 @@ import { SkipLinksContext } from './skip-links-context';
  *
  * `useSkipLink` is the public API wrapper of this.
  *
- * This private version exists for us to support `onBeforeNavigate` for the side nav use case,
- * where we might need to expand it before moving focus, without having to support `onBeforeNavigate` publicly.
+ * This private version exists for us to support `onBeforeNavigate` / `navigate` for the side nav use case,
+ * where we might need to expand it before moving focus, without having to support those publicly.
  */
 export const useSkipLinkInternal = ({
   id,
   label,
   listIndex,
   onBeforeNavigate,
+  navigate,
   isHidden
 }) => {
   const {
@@ -32,10 +33,11 @@ export const useSkipLinkInternal = ({
       label,
       listIndex,
       onBeforeNavigate,
+      navigate,
       isHidden
     });
     return () => {
       unregisterSkipLink(id);
     };
-  }, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
+  }, [id, isHidden, label, listIndex, onBeforeNavigate, navigate, registerSkipLink, unregisterSkipLink]);
 };

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

@@ -9,6 +9,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
@@ -98,28 +99,38 @@ function SideNavInternal({
   const id = useLayoutId({
     providedId
   });
-  const expandSideNav = useExpandSideNav({
+  const expandAndFocusSideNav = useExpandSideNav({
     trigger: 'skip-link'
   });
   /**
    * Called after clicking on the side nav skip link, and ensures the side nav is expanded so that it is focusable.
    *
    * We need to update the DOM synchronously because `.focus()` is called synchronously after this state update.
+   *
+   * Only used when `platform_dst_nav4_skip_link_a11y_1` is OFF; can be removed on gate cleanup.
    */
   const synchronouslyExpandSideNav = useCallback(() => {
     flushSync(() => {
       /**
        * Calling this unconditionally and relying on it to avoid no-op renders.
        *
-       * We _could_ call it conditionally, but we'd be duplicating the screen size checks `expandSideNav` makes.
+       * We _could_ call it conditionally, but we'd be duplicating the screen size checks `expandAndFocusSideNav` makes.
        */
-      expandSideNav();
+      expandAndFocusSideNav();
     });
-  }, [expandSideNav]);
+  }, [expandAndFocusSideNav]);
   useSkipLinkInternal({
     id,
     label: skipLinkLabel,
-    onBeforeNavigate: synchronouslyExpandSideNav
+    /**
+     * `navigate` is the gate-on contract: it owns expanding the side nav AND moving
+     * focus to the first nav item, atomically (via `useExpandSideNav`'s `flushSync`).
+     *
+     * `onBeforeNavigate` is the legacy contract used only when the gate is OFF.
+     * On gate cleanup, drop `onBeforeNavigate` and `synchronouslyExpandSideNav` here.
+     */
+    navigate: fg('platform_dst_nav4_skip_link_a11y_1') ? expandAndFocusSideNav : undefined,
+    onBeforeNavigate: fg('platform_dst_nav4_skip_link_a11y_1') ? undefined : synchronouslyExpandSideNav
   });
   const sideNavState = useContext(SideNavVisibilityState);
   const setSideNavState = useContext(SetSideNavVisibilityState);

package/dist/es2019/ui/page-layout/side-nav/use-expand-side-nav.js

@@ -1,5 +1,59 @@
 import { useCallback, useContext } from 'react';
+import { bind } from 'bind-event-listener';
+import { flushSync } from 'react-dom';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
+import { useSideNavRef } from './use-side-nav-ref';
+/**
+ * Moves focus to the first focusable item in the side nav, or the side nav element itself as a fallback.
+ */
+function focusFirstNavItem(sideNavElement) {
+  var _firstNavItem$checkVi, _firstNavItem$checkVi2;
+  /**
+   * Try to get the first focusable item in the side nav.
+   * The selector is not very broad, but should be appropriate for items from this package.
+   */
+  const firstNavItem = sideNavElement.querySelector('a, button');
+  const isFirstNavItemVisible = firstNavItem !== null && ((_firstNavItem$checkVi = (_firstNavItem$checkVi2 = firstNavItem.checkVisibility) === null || _firstNavItem$checkVi2 === void 0 ? void 0 : _firstNavItem$checkVi2.call(firstNavItem)) !== null && _firstNavItem$checkVi !== void 0 ? _firstNavItem$checkVi : false);
+  const itemToFocus = isFirstNavItemVisible ? firstNavItem : sideNavElement;
+  if (itemToFocus === sideNavElement) {
+    /**
+     * Elements without an explicit `tabindex` attribute are not guaranteed to be focusable:
+     * https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex
+     *
+     * Our slots are not interactive, so this is required.
+     *
+     * In the future we may want to check if there is an existing `tabindex` attribute,
+     * as custom skip linked elements might already have one.
+     */
+    sideNavElement.setAttribute('tabindex', '-1');
+
+    /**
+     * Cleanup the `tabindex` attribute we set when the slot or custom target loses focus.
+     *
+     * This is preferable to always having `tabindex="-1"` because always applying the tab index can:
+     *
+     * - mess with click events
+     * - potentially cause a focus ring to be always visible
+     */
+    bind(sideNavElement, {
+      type: 'blur',
+      listener() {
+        sideNavElement.removeAttribute('tabindex');
+      },
+      options: {
+        once: true
+      }
+    });
+  }
+
+  /**
+   * Not using `focusVisible` option because we don't want clicks on the toggle button to show a focus ring.
+   */
+  itemToFocus.focus();
+}
+const triggersWithFocusOnExpand = new Set(['toggle-button', 'skip-link']);
+
 /**
  * __useExpandSideNav__
  *
@@ -13,49 +67,61 @@ export function useExpandSideNav({
   trigger = 'programmatic'
 } = {}) {
   const setSideNavState = useContext(SetSideNavVisibilityState);
+  const sideNavRef = useSideNavRef();
   const expandSideNav = useCallback(() => {
     const {
-      matches
+      matches: isDesktop
     } = window.matchMedia('(min-width: 64rem)');
-    if (matches) {
-      setSideNavState(currentState => {
-        // No-op if the side nav state has not been initialised yet
-        // e.g. if the SideNav has not been mounted yet
-        if (!currentState) {
-          return null;
-        }
+    const runUpdate = () => {
+      if (isDesktop) {
+        setSideNavState(currentState => {
+          // No-op if the side nav state has not been initialised yet
+          // e.g. if the SideNav has not been mounted yet
+          if (!currentState) {
+            return null;
+          }
 
-        // Skip the re-render if it's a no-op change
-        if (currentState.desktop === 'expanded' && currentState.flyout === 'closed') {
-          return currentState;
-        }
-        return {
-          mobile: currentState.mobile,
-          desktop: 'expanded',
-          flyout: 'closed',
-          lastTrigger: trigger
-        };
-      });
-    } else {
-      setSideNavState(currentState => {
-        // No-op if the side nav state has not been initialised yet
-        // e.g. if the SideNav has not been mounted yet
-        if (!currentState) {
-          return null;
-        }
+          // Skip the re-render if it's a no-op change
+          if (currentState.desktop === 'expanded' && currentState.flyout === 'closed') {
+            return currentState;
+          }
+          return {
+            mobile: currentState.mobile,
+            desktop: 'expanded',
+            flyout: 'closed',
+            lastTrigger: trigger
+          };
+        });
+      } else {
+        setSideNavState(currentState => {
+          // No-op if the side nav state has not been initialised yet
+          // e.g. if the SideNav has not been mounted yet
+          if (!currentState) {
+            return null;
+          }
 
-        // Skip the re-render if it's a no-op change
-        if (currentState.mobile === 'expanded' && currentState.flyout === 'closed') {
-          return currentState;
-        }
-        return {
-          desktop: currentState.desktop,
-          mobile: 'expanded',
-          flyout: 'closed',
-          lastTrigger: trigger
-        };
-      });
+          // Skip the re-render if it's a no-op change
+          if (currentState.mobile === 'expanded' && currentState.flyout === 'closed') {
+            return currentState;
+          }
+          return {
+            desktop: currentState.desktop,
+            mobile: 'expanded',
+            flyout: 'closed',
+            lastTrigger: trigger
+          };
+        });
+      }
+    };
+    if (triggersWithFocusOnExpand.has(trigger) && fg('platform_dst_nav4_skip_link_a11y_1')) {
+      flushSync(runUpdate);
+      const sideNavElement = sideNavRef.current;
+      if (sideNavElement) {
+        focusFirstNavItem(sideNavElement);
+      }
+    } else {
+      runUpdate();
     }
-  }, [setSideNavState, trigger]);
+  }, [setSideNavState, sideNavRef, trigger]);
   return expandSideNav;
 }

package/dist/es2019/ui/page-layout/side-nav/use-toggle-side-nav.js

@@ -1,5 +1,8 @@
 import { useCallback, useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
+import { SideNavVisibilityState } from './side-nav-visibility-state';
+import { useExpandSideNav } from './use-expand-side-nav';
 /**
  * __useToggleSideNav__
  *
@@ -13,11 +16,38 @@ export function useToggleSideNav({
   trigger = 'programmatic'
 } = {}) {
   const setSideNavState = useContext(SetSideNavVisibilityState);
+  const sideNavState = useContext(SideNavVisibilityState);
+  const expandSideNav = useExpandSideNav({
+    trigger
+  });
+  const isCollapsedOnDesktop = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.desktop) === 'collapsed';
+  const isCollapsedOnMobile = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.mobile) === 'collapsed';
   const toggleSideNav = useCallback(() => {
     const {
-      matches
+      matches: isDesktop
     } = window.matchMedia('(min-width: 64rem)');
-    if (matches) {
+    if (fg('platform_dst_nav4_skip_link_a11y_1')) {
+      const isExpanding = isDesktop ? isCollapsedOnDesktop : isCollapsedOnMobile;
+      if (isExpanding) {
+        expandSideNav();
+      } else {
+        setSideNavState(currentState => {
+          // No-op if the side nav state has not been initialised yet
+          // e.g. if the SideNav has not been mounted yet
+          if (!currentState) {
+            return null;
+          }
+          return {
+            mobile: isDesktop ? currentState.mobile : 'collapsed',
+            desktop: isDesktop ? 'collapsed' : currentState.desktop,
+            flyout: 'closed',
+            lastTrigger: trigger
+          };
+        });
+      }
+      return;
+    }
+    if (isDesktop) {
       setSideNavState(currentState => {
         // No-op if the side nav state has not been initialised yet
         // e.g. if the SideNav has not been mounted yet
@@ -46,6 +76,6 @@ export function useToggleSideNav({
         };
       });
     }
-  }, [setSideNavState, trigger]);
+  }, [expandSideNav, isCollapsedOnDesktop, isCollapsedOnMobile, setSideNavState, trigger]);
   return toggleSideNav;
 }

package/dist/esm/components/skip-links/focus-element.js

@@ -0,0 +1,49 @@
+import { bind } from 'bind-event-listener';
+
+/**
+ * Used for moving focus to the corresponding slot or custom target after clicking on a skip link.
+ */
+export function focusElement(element) {
+  /**
+   * Elements without an explicit `tabindex` attribute are not guaranteed to be focusable:
+   * https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex
+   *
+   * Our slots are not interactive, so this is required.
+   *
+   * In the future we may want to check if there is an existing `tabindex` attribute,
+   * as custom skip linked elements might already have one.
+   */
+  element.setAttribute('tabindex', '-1');
+
+  /**
+   * Cleanup the `tabindex` attribute we set when the slot or custom target loses focus.
+   *
+   * This is preferable to always having `tabindex="-1"` because always applying the tab index can:
+   *
+   * - mess with click events
+   * - potentially cause a focus ring to be always visible
+   */
+  bind(element, {
+    type: 'blur',
+    listener: function listener() {
+      element.removeAttribute('tabindex');
+    },
+    options: {
+      // Using a one-time listener so it cleans itself up
+      once: true
+    }
+  });
+
+  /**
+   * Move focus to the slot or custom target.
+   *
+   * Calling `.focus()` will also scroll the element into view:
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+   */
+  element.focus({
+    // Forces the focus ring to appear after moving focus to the slot
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
+    // @ts-expect-error - new and not in types yet
+    focusVisible: true
+  });
+}

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

@@ -2,62 +2,14 @@
 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';
+import { focusElement } from './focus-element';
 var styles = {
   skipLinkListItem: "_1pfhze3t",
   skipLinkListItemNew: "_1rjcu2gc"
 };
-
-/**
- * Used for moving focus to the corresponding slot or custom target after clicking on a skip link.
- */
-function focusElement(element) {
-  /**
-   * Elements without an explicit `tabindex` attribute are not guaranteed to be focusable:
-   * https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex
-   *
-   * Our slots are not interactive, so this is required.
-   *
-   * In the future we may want to check if there is an existing `tabindex` attribute,
-   * as custom skip linked elements might already have one.
-   */
-  element.setAttribute('tabindex', '-1');
-
-  /**
-   * Cleanup the `tabindex` attribute we set when the slot or custom target loses focus.
-   *
-   * This is preferable to always having `tabindex="-1"` because always applying the tab index can:
-   *
-   * - mess with click events
-   * - potentially cause a focus ring to be always visible
-   */
-  bind(element, {
-    type: 'blur',
-    listener: function listener() {
-      element.removeAttribute('tabindex');
-    },
-    options: {
-      // Using a one-time listener so it cleans itself up
-      once: true
-    }
-  });
-
-  /**
-   * Move focus to the slot or custom target.
-   *
-   * Calling `.focus()` will also scroll the element into view:
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
-   */
-  element.focus({
-    // Forces the focus ring to appear after moving focus to the slot
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
-    // @ts-expect-error - new and not in types yet
-    focusVisible: true
-  });
-}
 /**
  * A link that moves current tab position to a different element
  *
@@ -66,25 +18,40 @@ function focusElement(element) {
 export var SkipLink = function SkipLink(_ref) {
   var id = _ref.id,
     children = _ref.children,
-    onBeforeNavigate = _ref.onBeforeNavigate;
+    onBeforeNavigate = _ref.onBeforeNavigate,
+    navigate = _ref.navigate;
   var href = "#".concat(id);
-  var onClick = useCallback(function (event) {
+  var handleClick = useCallback(function (event) {
     event.preventDefault();
+    if (navigate && fg('platform_dst_nav4_skip_link_a11y_1')) {
+      /**
+       * The consumer takes over the navigation effect (e.g. expanding the
+       * side nav and focusing the first nav item). The universal pre/post
+       * work below (e.g. `window.scrollTo`) still runs around it.
+       */
+      navigate();
+    } else {
+      // Intentionally not using `document.querySelector` because many valid IDs are not valid selectors.
+      var target = document.getElementById(id);
+      if (!target) {
+        return;
+      }
 
-    // Intentionally not using `document.querySelector` because many valid IDs are not valid selectors.
-    var target = document.getElementById(id);
-    if (!target) {
-      return;
+      /**
+       * Legacy `onBeforeNavigate` hook. Intentionally NOT called when
+       * `platform_dst_nav4_skip_link_a11y_1` is enabled — under the gate the
+       * gate-on path delegates state mutation + focus management to `navigate`,
+       * and `SkipLinksPopup` injects its popup-close behavior into the
+       * `navigate` wrapper instead of relying on this hook.
+       *
+       * This callback can be removed entirely on gate cleanup.
+       */
+      if (!fg('platform_dst_nav4_skip_link_a11y_1')) {
+        onBeforeNavigate === null || onBeforeNavigate === void 0 || onBeforeNavigate();
+      }
+      focusElement(target);
     }
 
-    /**
-     * Internal slots can attach an `onBeforeNavigate` callback.
-     *
-     * Side nav uses this to ensure it is expanded.
-     */
-    onBeforeNavigate === null || onBeforeNavigate === void 0 || onBeforeNavigate();
-    focusElement(target);
-
     /**
      * We should look into removing this, or only calling it in specific cases.
      *
@@ -98,7 +65,7 @@ export var SkipLink = function SkipLink(_ref) {
      * E.g. jumping to main / aside it makes sense to look at the start of the content.
      */
     window.scrollTo(0, 0);
-  }, [id, onBeforeNavigate]);
+  }, [id, onBeforeNavigate, navigate]);
   return /*#__PURE__*/React.createElement("li", {
     className: ax([styles.skipLinkListItem, fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
   }, /*#__PURE__*/React.createElement(Anchor
@@ -110,6 +77,6 @@ export var SkipLink = function SkipLink(_ref) {
    */, {
     tabIndex: 0,
     href: href,
-    onClick: onClick
+    onClick: handleClick
   }, children));
 };