@atlaskit/side-navigation 3.5.4 → 3.6.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/side-navigation
 
+## 3.6.0
+
+### Minor Changes
+
+- [#160699](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/160699)
+  [`a4cb190f3a282`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a4cb190f3a282) -
+  Side navigation, keyboard focus should appear on first interactive element which is `Go back`
+  button and when `Go back` control is activated, focus should appear on the triggered element.
+
+## 3.5.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.5.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -5,8 +5,7 @@
         "target": "es5",
         "composite": true,
         "outDir": "../dist",
-        "rootDir": "../",
-        "baseUrl": "../"
+        "rootDir": "../"
     },
     "include": [
         "../src/**/*.ts",
@@ -30,6 +29,9 @@
         {
             "path": "../../motion/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../primitives/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -1,42 +1,42 @@
 {
-  "extends": "../../../../tsconfig.entry-points.jira.json",
-  "compilerOptions": {
-    "declaration": true,
-    "target": "es5",
-    "outDir": "../../../../../tsDist/@atlaskit__side-navigation/app",
-    "composite": true,
-    "rootDir": "../"
-  },
-  "include": [
-    "../src/**/*.ts",
-    "../src/**/*.tsx"
-  ],
-  "exclude": [
-    "../src/**/__tests__/*",
-    "../src/**/*.test.*",
-    "../src/**/test.*"
-  ],
-  "references": [
-    {
-      "path": "../../ds-lib/afm-jira/tsconfig.json"
-    },
-    {
-      "path": "../../icon/afm-jira/tsconfig.json"
-    },
-    {
-      "path": "../../menu/afm-jira/tsconfig.json"
-    },
-    {
-      "path": "../../motion/afm-jira/tsconfig.json"
-    },
-    {
-      "path": "../../primitives/afm-jira/tsconfig.json"
-    },
-    {
-      "path": "../../theme/afm-jira/tsconfig.json"
-    },
-    {
-      "path": "../../tokens/afm-jira/tsconfig.json"
-    }
-  ]
-}
+	"extends": "../../../../tsconfig.entry-points.jira.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../tsDist/@atlaskit__side-navigation/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../ds-lib/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../icon/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../menu/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../motion/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../primitives/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../theme/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../tokens/afm-jira/tsconfig.json"
+		}
+	]
+}

package/afm-post-office/tsconfig.json

@@ -1,42 +1,45 @@
 {
-  "extends": "../../../../tsconfig.entry-points.post-office.json",
-  "compilerOptions": {
-    "declaration": true,
-    "target": "es5",
-    "outDir": "../../../../../tsDist/@atlaskit__side-navigation/app",
-    "composite": true,
-    "rootDir": "../"
-  },
-  "include": [
-    "../src/**/*.ts",
-    "../src/**/*.tsx"
-  ],
-  "exclude": [
-    "../src/**/__tests__/*",
-    "../src/**/*.test.*",
-    "../src/**/test.*"
-  ],
-  "references": [
-    {
-      "path": "../../ds-lib/afm-post-office/tsconfig.json"
-    },
-    {
-      "path": "../../icon/afm-post-office/tsconfig.json"
-    },
-    {
-      "path": "../../menu/afm-post-office/tsconfig.json"
-    },
-    {
-      "path": "../../motion/afm-post-office/tsconfig.json"
-    },
-    {
-      "path": "../../primitives/afm-post-office/tsconfig.json"
-    },
-    {
-      "path": "../../theme/afm-post-office/tsconfig.json"
-    },
-    {
-      "path": "../../tokens/afm-post-office/tsconfig.json"
-    }
-  ]
-}
+	"extends": "../../../../tsconfig.entry-points.post-office.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../tsDist/@atlaskit__side-navigation/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../ds-lib/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../icon/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../menu/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../motion/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../primitives/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../theme/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../tokens/afm-post-office/tsconfig.json"
+		}
+	]
+}

package/dist/cjs/components/NestableNavigationContent/index.js

@@ -1,20 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ROOT_ID = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _Item = require("../Item");
 var _NestingItem = _interopRequireDefault(require("../NestingItem"));
 var _hooks = require("../utils/hooks");
 var _context = require("./context");
 var _nestingMotion = require("./nesting-motion");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -55,7 +59,10 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     onChange = props.onChange,
     onUnknownNest = props.onUnknownNest,
     stack = props.stack,
-    showTopScrollIndicator = props.showTopScrollIndicator;
+    showTopScrollIndicator = props.showTopScrollIndicator,
+    _props$isDefaultFocus = props.isDefaultFocusControl,
+    isDefaultFocusControl = _props$isDefaultFocus === void 0 ? true : _props$isDefaultFocus;
+  var goBackButtonRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(stack || initialStack || []),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     committedStack = _useState2[0],
@@ -67,6 +74,15 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     transition = _useState4[0],
     setTransition = _useState4[1];
   var backTestId = testId && "".concat(testId, "--go-back-item");
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    activeParentId = _useState6[0],
+    setActiveParentId = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    focusGoBackButton = _useState8[0],
+    setFocusGoBackButton = _useState8[1];
+  var shouldFocus = isDefaultFocusControl && (0, _platformFeatureFlags.fg)('platform-side-navigation-keyboard-focus');
   var renderGoBackItem = overrides && overrides.GoBackItem && overrides.GoBackItem.render ? overrides.GoBackItem.render : function (props) {
     return (0, _react2.jsx)(_Item.GoBackItem, props, "Go back");
   };
@@ -74,11 +90,11 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     childIdsRef = _useChildIds.childIdsRef;
   var onNestHandler = (0, _react.useCallback)(function (layerId) {
     onChange && onChange(committedStack.concat(layerId));
+    setFocusGoBackButton(true);
     if (controlledStack) {
       // We are in controlled mode - ignore the steps.
       return;
     }
-
     // We need to split the state update into to parts.
     // First: Updating the direction of the motions.
     // Second: Actually updating the stack (which will cause elements to enter & leave).
@@ -92,6 +108,8 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
   }, [controlledStack, onChange, committedStack]);
   var onUnNestHandler = (0, _react.useCallback)(function () {
     onChange && onChange(committedStack.slice(0, committedStack.length - 1));
+    setActiveParentId(currentStackId);
+    setFocusGoBackButton(false);
     if (controlledStack) {
       // We are in controlled mode - ignore the steps.
       return;
@@ -107,7 +125,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
         return newStack;
       });
     });
-  }, [controlledStack, onChange, committedStack]);
+  }, [controlledStack, onChange, committedStack, setActiveParentId, currentStackId]);
   (0, _react.useEffect)(function () {
     if (!controlledStack) {
       // We aren't in controlled mode - bail out.
@@ -132,7 +150,8 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
   }, [committedStack, controlledStack]);
   var backButton = renderGoBackItem({
     onClick: onUnNestHandler,
-    testId: backTestId
+    testId: backTestId,
+    ref: shouldFocus ? goBackButtonRef : null
   });
   var context = (0, _react.useMemo)(function () {
     return {
@@ -143,9 +162,13 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       onUnNest: onUnNestHandler,
       parentId: ROOT_ID,
       childIds: childIdsRef,
-      forceShowTopScrollIndicator: showTopScrollIndicator
+      forceShowTopScrollIndicator: showTopScrollIndicator,
+      activeParentId: activeParentId,
+      goBackButtonRef: goBackButtonRef,
+      isDefaultFocusControl: isDefaultFocusControl,
+      focusGoBackButton: focusGoBackButton
     };
-  }, [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef, showTopScrollIndicator]);
+  }, [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef, showTopScrollIndicator, activeParentId, goBackButtonRef, isDefaultFocusControl, focusGoBackButton]);
   var manageFocus = function manageFocus(event) {
     var triggeredByKeyboard = event.nativeEvent.detail === 0;
     if (triggeredByKeyboard) {

package/dist/cjs/components/NestingItem/index.js

@@ -14,6 +14,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _arrowRightArrowRightCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/arrow-right--arrow-right-circle"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../common/styles");
@@ -61,15 +62,45 @@ var NestingItem = function NestingItem(props) {
     contextualBackButton = _useNestedContext.backButton,
     stack = _useNestedContext.stack,
     childIds = _useNestedContext.childIds,
-    forceShowTopScrollIndicator = _useNestedContext.forceShowTopScrollIndicator;
+    forceShowTopScrollIndicator = _useNestedContext.forceShowTopScrollIndicator,
+    activeParentId = _useNestedContext.activeParentId,
+    goBackButtonRef = _useNestedContext.goBackButtonRef,
+    isDefaultFocusControl = _useNestedContext.isDefaultFocusControl,
+    focusGoBackButton = _useNestedContext.focusGoBackButton;
   var mergedStyles = (0, _styles.overrideStyleFunction)(_styles2.nestingItemStyle, cssFn);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isInteracted = _useState2[0],
     setIsInteracted = _useState2[1];
+  var parentItemRef = (0, _react.useRef)(null);
+
+  // To avoid error we need to make sure that the component is wrapped in ForwardRef
+  var isForwardRefCheck = function isForwardRefCheck(component) {
+    var _component$prototype;
+    if (component !== null && component !== void 0 && (_component$prototype = component.prototype) !== null && _component$prototype !== void 0 && _component$prototype.isReactComponent) {
+      return false;
+    }
+    return (component === null || component === void 0 ? void 0 : component.$$typeof) === Symbol.for('react.forward_ref');
+  };
+  var shouldFocus = isDefaultFocusControl && (0, _platformFeatureFlags.fg)('platform-side-navigation-keyboard-focus');
+  var backButtonRef = shouldFocus ? goBackButtonRef : null;
+  var activeParentRef = shouldFocus ? parentItemRef : null;
+  (0, _react.useEffect)(function () {
+    if (shouldFocus) {
+      if (activeParentId === id) {
+        var _parentItemRef$curren;
+        parentItemRef === null || parentItemRef === void 0 || (_parentItemRef$curren = parentItemRef.current) === null || _parentItemRef$curren === void 0 || _parentItemRef$curren.focus();
+      }
+      if (focusGoBackButton) {
+        var _goBackButtonRef$curr;
+        goBackButtonRef === null || goBackButtonRef === void 0 || (_goBackButtonRef$curr = goBackButtonRef.current) === null || _goBackButtonRef$curr === void 0 || _goBackButtonRef$curr.focus();
+      }
+    }
+  }, [activeParentId, id, goBackButtonRef, focusGoBackButton, isDefaultFocusControl, shouldFocus]);
   var backButton = props.overrides && props.overrides.GoBackItem && props.overrides.GoBackItem.render && props.overrides.GoBackItem.render({
     onClick: onUnNest,
-    testId: testId && "".concat(testId, "--go-back-item")
+    testId: testId && "".concat(testId, "--go-back-item"),
+    ref: backButtonRef
   }) || contextualBackButton;
   var context = (0, _react.useMemo)(function () {
     return {
@@ -80,9 +111,13 @@ var NestingItem = function NestingItem(props) {
       backButton: backButton,
       parentId: id,
       childIds: childIds,
-      forceShowTopScrollIndicator: forceShowTopScrollIndicator
+      forceShowTopScrollIndicator: forceShowTopScrollIndicator,
+      activeParentId: activeParentId,
+      goBackButtonRef: goBackButtonRef,
+      isDefaultFocusControl: isDefaultFocusControl,
+      focusGoBackButton: focusGoBackButton
     };
-  }, [stack, currentStackId, onNest, onUnNest, backButton, id, childIds, forceShowTopScrollIndicator]);
+  }, [stack, currentStackId, onNest, onUnNest, backButton, id, childIds, forceShowTopScrollIndicator, activeParentId, goBackButtonRef, isDefaultFocusControl, focusGoBackButton]);
   (0, _hooks.useChildIdsEffect)(childIds, id);
   var isNormalClick = function isNormalClick(e) {
     return !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
@@ -144,11 +179,15 @@ var NestingItem = function NestingItem(props) {
     cssFn: mergedStyles
   });
   if (component) {
-    return (0, _react2.jsx)(_index.CustomItem, (0, _extends2.default)({}, componentProps, {
+    return (0, _react2.jsx)(_index.CustomItem, (0, _extends2.default)({
+      ref: isForwardRefCheck(component) ? parentItemRef : null
+    }, componentProps, {
       //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
       component: component
     }));
   }
-  return (0, _react2.jsx)(_index.ButtonItem, componentProps);
+  return (0, _react2.jsx)(_index.ButtonItem, (0, _extends2.default)({
+    ref: activeParentRef
+  }, componentProps));
 };
 var _default = exports.default = NestingItem;

package/dist/es2019/components/NestableNavigationContent/index.js

@@ -3,11 +3,12 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { ExitingPersistence } from '@atlaskit/motion';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { GoBackItem as GoBackButton } from '../Item';
 import { default as NestingItem } from '../NestingItem';
 import { useChildIds } from '../utils/hooks';
@@ -47,24 +48,29 @@ const NestableNavigationContent = props => {
     onChange,
     onUnknownNest,
     stack,
-    showTopScrollIndicator
+    showTopScrollIndicator,
+    isDefaultFocusControl = true
   } = props;
+  const goBackButtonRef = useRef(null);
   const [committedStack, setCommittedStack] = useState(stack || initialStack || []);
   const controlledStack = stack || undefined;
   const currentStackId = committedStack[committedStack.length - 1] || ROOT_ID;
   const [transition, setTransition] = useState('nesting');
   const backTestId = testId && `${testId}--go-back-item`;
+  const [activeParentId, setActiveParentId] = useState('');
+  const [focusGoBackButton, setFocusGoBackButton] = useState(false);
+  const shouldFocus = isDefaultFocusControl && fg('platform-side-navigation-keyboard-focus');
   const renderGoBackItem = overrides && overrides.GoBackItem && overrides.GoBackItem.render ? overrides.GoBackItem.render : props => jsx(GoBackButton, props, "Go back");
   const {
     childIdsRef
   } = useChildIds(currentStackId, committedStack, onUnknownNest);
   const onNestHandler = useCallback(layerId => {
     onChange && onChange(committedStack.concat(layerId));
+    setFocusGoBackButton(true);
     if (controlledStack) {
       // We are in controlled mode - ignore the steps.
       return;
     }
-
     // We need to split the state update into to parts.
     // First: Updating the direction of the motions.
     // Second: Actually updating the stack (which will cause elements to enter & leave).
@@ -78,6 +84,8 @@ const NestableNavigationContent = props => {
   }, [controlledStack, onChange, committedStack]);
   const onUnNestHandler = useCallback(() => {
     onChange && onChange(committedStack.slice(0, committedStack.length - 1));
+    setActiveParentId(currentStackId);
+    setFocusGoBackButton(false);
     if (controlledStack) {
       // We are in controlled mode - ignore the steps.
       return;
@@ -93,7 +101,7 @@ const NestableNavigationContent = props => {
         return newStack;
       });
     });
-  }, [controlledStack, onChange, committedStack]);
+  }, [controlledStack, onChange, committedStack, setActiveParentId, currentStackId]);
   useEffect(() => {
     if (!controlledStack) {
       // We aren't in controlled mode - bail out.
@@ -118,7 +126,8 @@ const NestableNavigationContent = props => {
   }, [committedStack, controlledStack]);
   const backButton = renderGoBackItem({
     onClick: onUnNestHandler,
-    testId: backTestId
+    testId: backTestId,
+    ref: shouldFocus ? goBackButtonRef : null
   });
   const context = useMemo(() => ({
     currentStackId,
@@ -128,8 +137,12 @@ const NestableNavigationContent = props => {
     onUnNest: onUnNestHandler,
     parentId: ROOT_ID,
     childIds: childIdsRef,
-    forceShowTopScrollIndicator: showTopScrollIndicator
-  }), [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef, showTopScrollIndicator]);
+    forceShowTopScrollIndicator: showTopScrollIndicator,
+    activeParentId,
+    goBackButtonRef,
+    isDefaultFocusControl,
+    focusGoBackButton
+  }), [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef, showTopScrollIndicator, activeParentId, goBackButtonRef, isDefaultFocusControl, focusGoBackButton]);
   const manageFocus = event => {
     const triggeredByKeyboard = event.nativeEvent.detail === 0;
     if (triggeredByKeyboard) {

package/dist/es2019/components/NestingItem/index.js

@@ -3,11 +3,12 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import ArrowRightIcon from '@atlaskit/icon/core/migration/arrow-right--arrow-right-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { N10 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
@@ -47,13 +48,43 @@ const NestingItem = props => {
     backButton: contextualBackButton,
     stack,
     childIds,
-    forceShowTopScrollIndicator
+    forceShowTopScrollIndicator,
+    activeParentId,
+    goBackButtonRef,
+    isDefaultFocusControl,
+    focusGoBackButton
   } = useNestedContext();
   const mergedStyles = overrideStyleFunction(nestingItemStyle, cssFn);
   const [isInteracted, setIsInteracted] = useState(false);
+  const parentItemRef = useRef(null);
+
+  // To avoid error we need to make sure that the component is wrapped in ForwardRef
+  const isForwardRefCheck = component => {
+    var _component$prototype;
+    if (component !== null && component !== void 0 && (_component$prototype = component.prototype) !== null && _component$prototype !== void 0 && _component$prototype.isReactComponent) {
+      return false;
+    }
+    return (component === null || component === void 0 ? void 0 : component.$$typeof) === Symbol.for('react.forward_ref');
+  };
+  const shouldFocus = isDefaultFocusControl && fg('platform-side-navigation-keyboard-focus');
+  const backButtonRef = shouldFocus ? goBackButtonRef : null;
+  const activeParentRef = shouldFocus ? parentItemRef : null;
+  useEffect(() => {
+    if (shouldFocus) {
+      if (activeParentId === id) {
+        var _parentItemRef$curren;
+        parentItemRef === null || parentItemRef === void 0 ? void 0 : (_parentItemRef$curren = parentItemRef.current) === null || _parentItemRef$curren === void 0 ? void 0 : _parentItemRef$curren.focus();
+      }
+      if (focusGoBackButton) {
+        var _goBackButtonRef$curr;
+        goBackButtonRef === null || goBackButtonRef === void 0 ? void 0 : (_goBackButtonRef$curr = goBackButtonRef.current) === null || _goBackButtonRef$curr === void 0 ? void 0 : _goBackButtonRef$curr.focus();
+      }
+    }
+  }, [activeParentId, id, goBackButtonRef, focusGoBackButton, isDefaultFocusControl, shouldFocus]);
   const backButton = props.overrides && props.overrides.GoBackItem && props.overrides.GoBackItem.render && props.overrides.GoBackItem.render({
     onClick: onUnNest,
-    testId: testId && `${testId}--go-back-item`
+    testId: testId && `${testId}--go-back-item`,
+    ref: backButtonRef
   }) || contextualBackButton;
   const context = useMemo(() => ({
     stack,
@@ -63,8 +94,12 @@ const NestingItem = props => {
     backButton,
     parentId: id,
     childIds,
-    forceShowTopScrollIndicator
-  }), [stack, currentStackId, onNest, onUnNest, backButton, id, childIds, forceShowTopScrollIndicator]);
+    forceShowTopScrollIndicator,
+    activeParentId,
+    goBackButtonRef,
+    isDefaultFocusControl,
+    focusGoBackButton
+  }), [stack, currentStackId, onNest, onUnNest, backButton, id, childIds, forceShowTopScrollIndicator, activeParentId, goBackButtonRef, isDefaultFocusControl, focusGoBackButton]);
   useChildIdsEffect(childIds, id);
   const isNormalClick = e => !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
 
@@ -124,11 +159,15 @@ const NestingItem = props => {
     cssFn: mergedStyles
   };
   if (component) {
-    return jsx(CustomItem, _extends({}, componentProps, {
+    return jsx(CustomItem, _extends({
+      ref: isForwardRefCheck(component) ? parentItemRef : null
+    }, componentProps, {
       //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
       component: component
     }));
   }
-  return jsx(ButtonItem, componentProps);
+  return jsx(ButtonItem, _extends({
+    ref: activeParentRef
+  }, componentProps));
 };
 export default NestingItem;

package/dist/esm/components/NestableNavigationContent/index.js

@@ -4,11 +4,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { ExitingPersistence } from '@atlaskit/motion';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { GoBackItem as GoBackButton } from '../Item';
 import { default as NestingItem } from '../NestingItem';
 import { useChildIds } from '../utils/hooks';
@@ -47,7 +48,10 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     onChange = props.onChange,
     onUnknownNest = props.onUnknownNest,
     stack = props.stack,
-    showTopScrollIndicator = props.showTopScrollIndicator;
+    showTopScrollIndicator = props.showTopScrollIndicator,
+    _props$isDefaultFocus = props.isDefaultFocusControl,
+    isDefaultFocusControl = _props$isDefaultFocus === void 0 ? true : _props$isDefaultFocus;
+  var goBackButtonRef = useRef(null);
   var _useState = useState(stack || initialStack || []),
     _useState2 = _slicedToArray(_useState, 2),
     committedStack = _useState2[0],
@@ -59,6 +63,15 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     transition = _useState4[0],
     setTransition = _useState4[1];
   var backTestId = testId && "".concat(testId, "--go-back-item");
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeParentId = _useState6[0],
+    setActiveParentId = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    focusGoBackButton = _useState8[0],
+    setFocusGoBackButton = _useState8[1];
+  var shouldFocus = isDefaultFocusControl && fg('platform-side-navigation-keyboard-focus');
   var renderGoBackItem = overrides && overrides.GoBackItem && overrides.GoBackItem.render ? overrides.GoBackItem.render : function (props) {
     return jsx(GoBackButton, props, "Go back");
   };
@@ -66,11 +79,11 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     childIdsRef = _useChildIds.childIdsRef;
   var onNestHandler = useCallback(function (layerId) {
     onChange && onChange(committedStack.concat(layerId));
+    setFocusGoBackButton(true);
     if (controlledStack) {
       // We are in controlled mode - ignore the steps.
       return;
     }
-
     // We need to split the state update into to parts.
     // First: Updating the direction of the motions.
     // Second: Actually updating the stack (which will cause elements to enter & leave).
@@ -84,6 +97,8 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
   }, [controlledStack, onChange, committedStack]);
   var onUnNestHandler = useCallback(function () {
     onChange && onChange(committedStack.slice(0, committedStack.length - 1));
+    setActiveParentId(currentStackId);
+    setFocusGoBackButton(false);
     if (controlledStack) {
       // We are in controlled mode - ignore the steps.
       return;
@@ -99,7 +114,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
         return newStack;
       });
     });
-  }, [controlledStack, onChange, committedStack]);
+  }, [controlledStack, onChange, committedStack, setActiveParentId, currentStackId]);
   useEffect(function () {
     if (!controlledStack) {
       // We aren't in controlled mode - bail out.
@@ -124,7 +139,8 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
   }, [committedStack, controlledStack]);
   var backButton = renderGoBackItem({
     onClick: onUnNestHandler,
-    testId: backTestId
+    testId: backTestId,
+    ref: shouldFocus ? goBackButtonRef : null
   });
   var context = useMemo(function () {
     return {
@@ -135,9 +151,13 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       onUnNest: onUnNestHandler,
       parentId: ROOT_ID,
       childIds: childIdsRef,
-      forceShowTopScrollIndicator: showTopScrollIndicator
+      forceShowTopScrollIndicator: showTopScrollIndicator,
+      activeParentId: activeParentId,
+      goBackButtonRef: goBackButtonRef,
+      isDefaultFocusControl: isDefaultFocusControl,
+      focusGoBackButton: focusGoBackButton
     };
-  }, [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef, showTopScrollIndicator]);
+  }, [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef, showTopScrollIndicator, activeParentId, goBackButtonRef, isDefaultFocusControl, focusGoBackButton]);
   var manageFocus = function manageFocus(event) {
     var triggeredByKeyboard = event.nativeEvent.detail === 0;
     if (triggeredByKeyboard) {

package/dist/esm/components/NestingItem/index.js

@@ -10,11 +10,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import ArrowRightIcon from '@atlaskit/icon/core/migration/arrow-right--arrow-right-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { N10 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
@@ -52,15 +53,45 @@ var NestingItem = function NestingItem(props) {
     contextualBackButton = _useNestedContext.backButton,
     stack = _useNestedContext.stack,
     childIds = _useNestedContext.childIds,
-    forceShowTopScrollIndicator = _useNestedContext.forceShowTopScrollIndicator;
+    forceShowTopScrollIndicator = _useNestedContext.forceShowTopScrollIndicator,
+    activeParentId = _useNestedContext.activeParentId,
+    goBackButtonRef = _useNestedContext.goBackButtonRef,
+    isDefaultFocusControl = _useNestedContext.isDefaultFocusControl,
+    focusGoBackButton = _useNestedContext.focusGoBackButton;
   var mergedStyles = overrideStyleFunction(nestingItemStyle, cssFn);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isInteracted = _useState2[0],
     setIsInteracted = _useState2[1];
+  var parentItemRef = useRef(null);
+
+  // To avoid error we need to make sure that the component is wrapped in ForwardRef
+  var isForwardRefCheck = function isForwardRefCheck(component) {
+    var _component$prototype;
+    if (component !== null && component !== void 0 && (_component$prototype = component.prototype) !== null && _component$prototype !== void 0 && _component$prototype.isReactComponent) {
+      return false;
+    }
+    return (component === null || component === void 0 ? void 0 : component.$$typeof) === Symbol.for('react.forward_ref');
+  };
+  var shouldFocus = isDefaultFocusControl && fg('platform-side-navigation-keyboard-focus');
+  var backButtonRef = shouldFocus ? goBackButtonRef : null;
+  var activeParentRef = shouldFocus ? parentItemRef : null;
+  useEffect(function () {
+    if (shouldFocus) {
+      if (activeParentId === id) {
+        var _parentItemRef$curren;
+        parentItemRef === null || parentItemRef === void 0 || (_parentItemRef$curren = parentItemRef.current) === null || _parentItemRef$curren === void 0 || _parentItemRef$curren.focus();
+      }
+      if (focusGoBackButton) {
+        var _goBackButtonRef$curr;
+        goBackButtonRef === null || goBackButtonRef === void 0 || (_goBackButtonRef$curr = goBackButtonRef.current) === null || _goBackButtonRef$curr === void 0 || _goBackButtonRef$curr.focus();
+      }
+    }
+  }, [activeParentId, id, goBackButtonRef, focusGoBackButton, isDefaultFocusControl, shouldFocus]);
   var backButton = props.overrides && props.overrides.GoBackItem && props.overrides.GoBackItem.render && props.overrides.GoBackItem.render({
     onClick: onUnNest,
-    testId: testId && "".concat(testId, "--go-back-item")
+    testId: testId && "".concat(testId, "--go-back-item"),
+    ref: backButtonRef
   }) || contextualBackButton;
   var context = useMemo(function () {
     return {
@@ -71,9 +102,13 @@ var NestingItem = function NestingItem(props) {
       backButton: backButton,
       parentId: id,
       childIds: childIds,
-      forceShowTopScrollIndicator: forceShowTopScrollIndicator
+      forceShowTopScrollIndicator: forceShowTopScrollIndicator,
+      activeParentId: activeParentId,
+      goBackButtonRef: goBackButtonRef,
+      isDefaultFocusControl: isDefaultFocusControl,
+      focusGoBackButton: focusGoBackButton
     };
-  }, [stack, currentStackId, onNest, onUnNest, backButton, id, childIds, forceShowTopScrollIndicator]);
+  }, [stack, currentStackId, onNest, onUnNest, backButton, id, childIds, forceShowTopScrollIndicator, activeParentId, goBackButtonRef, isDefaultFocusControl, focusGoBackButton]);
   useChildIdsEffect(childIds, id);
   var isNormalClick = function isNormalClick(e) {
     return !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
@@ -135,11 +170,15 @@ var NestingItem = function NestingItem(props) {
     cssFn: mergedStyles
   });
   if (component) {
-    return jsx(CustomItem, _extends({}, componentProps, {
+    return jsx(CustomItem, _extends({
+      ref: isForwardRefCheck(component) ? parentItemRef : null
+    }, componentProps, {
       //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
       component: component
     }));
   }
-  return jsx(ButtonItem, componentProps);
+  return jsx(ButtonItem, _extends({
+    ref: activeParentRef
+  }, componentProps));
 };
 export default NestingItem;

package/dist/types/components/NestableNavigationContent/context.d.ts

@@ -11,6 +11,10 @@ export interface NestedContextValue {
     backButton?: React.ReactNode;
     childIds: MutableRefObject<Set<string>>;
     forceShowTopScrollIndicator: boolean | undefined;
+    activeParentId?: string;
+    goBackButtonRef?: React.MutableRefObject<HTMLButtonElement | null>;
+    isDefaultFocusControl?: boolean;
+    focusGoBackButton?: boolean;
 }
 /**
  * @internal

package/dist/types/components/NestableNavigationContent/index.d.ts

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
 import { jsx } from '@emotion/react';
 export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
 export interface NestableNavigationContentProps {
@@ -57,14 +61,22 @@ export interface NestableNavigationContentProps {
          * Use this to override the default back button displayed when navigation is nested.
          * You'll want to import the [go back item](/packages/navigation/docs/go-back-item) component and use it here.
          * This will be displayed for all children [nesting items](/packages/navigation/side-navigation/docs/nesting-item) unless they define their own.
+         * Your custom component should be wrapped with forwardRef to support assistive technologies.
          */
         GoBackItem?: {
             render?: (props: {
                 onClick: () => void;
                 testId?: string;
+                ref?: React.Ref<HTMLElement>;
             }) => React.ReactNode;
         };
     };
+    /**
+     * This property is enabled by default (set to true) and is designed to manage keyboard focus
+     * for the "go back" button or the last active parent within the `<NestingItem/>` component.
+     * It is applicable only when using our `<NestingItem/>` component.
+     */
+    isDefaultFocusControl?: boolean;
 }
 /**
  * __Nestable navigation content__

package/dist/types/components/NestingItem/index.d.ts

@@ -9,11 +9,13 @@ interface NestingItemOverrides extends Overrides {
      * Use this to override the back button displayed when navigation is nested.
      * You'll want to import the [go back item](/packages/navigation/side-navigation/docs/go-back-item) component and use it here.
      * This will be displayed for all children nesting item components unless they define their own.
+     * Your custom component should be wrapped with forwardRef to support assistive technologies.
      */
     GoBackItem?: {
         render?: (props: {
             onClick: () => void;
             testId?: string;
+            ref?: React.Ref<HTMLElement>;
         }) => React.ReactNode;
     };
 }
@@ -34,6 +36,7 @@ export interface NestingItemProps<TCustomComponentProps = CustomItemComponentPro
     /**
      * Used to customize the rendered component when shown as an item.
      * You can use this for example to change it to a SPA link.
+     * Your custom component should be wrapped with forwardRef to support assistive technologies.
      */
     component?: React.ComponentType<TCustomComponentProps>;
     /**

package/dist/types-ts4.5/components/NestableNavigationContent/context.d.ts

@@ -11,6 +11,10 @@ export interface NestedContextValue {
     backButton?: React.ReactNode;
     childIds: MutableRefObject<Set<string>>;
     forceShowTopScrollIndicator: boolean | undefined;
+    activeParentId?: string;
+    goBackButtonRef?: React.MutableRefObject<HTMLButtonElement | null>;
+    isDefaultFocusControl?: boolean;
+    focusGoBackButton?: boolean;
 }
 /**
  * @internal

package/dist/types-ts4.5/components/NestableNavigationContent/index.d.ts

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
 import { jsx } from '@emotion/react';
 export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
 export interface NestableNavigationContentProps {
@@ -57,14 +61,22 @@ export interface NestableNavigationContentProps {
          * Use this to override the default back button displayed when navigation is nested.
          * You'll want to import the [go back item](/packages/navigation/docs/go-back-item) component and use it here.
          * This will be displayed for all children [nesting items](/packages/navigation/side-navigation/docs/nesting-item) unless they define their own.
+         * Your custom component should be wrapped with forwardRef to support assistive technologies.
          */
         GoBackItem?: {
             render?: (props: {
                 onClick: () => void;
                 testId?: string;
+                ref?: React.Ref<HTMLElement>;
             }) => React.ReactNode;
         };
     };
+    /**
+     * This property is enabled by default (set to true) and is designed to manage keyboard focus
+     * for the "go back" button or the last active parent within the `<NestingItem/>` component.
+     * It is applicable only when using our `<NestingItem/>` component.
+     */
+    isDefaultFocusControl?: boolean;
 }
 /**
  * __Nestable navigation content__

package/dist/types-ts4.5/components/NestingItem/index.d.ts

@@ -9,11 +9,13 @@ interface NestingItemOverrides extends Overrides {
      * Use this to override the back button displayed when navigation is nested.
      * You'll want to import the [go back item](/packages/navigation/side-navigation/docs/go-back-item) component and use it here.
      * This will be displayed for all children nesting item components unless they define their own.
+     * Your custom component should be wrapped with forwardRef to support assistive technologies.
      */
     GoBackItem?: {
         render?: (props: {
             onClick: () => void;
             testId?: string;
+            ref?: React.Ref<HTMLElement>;
         }) => React.ReactNode;
     };
 }
@@ -34,6 +36,7 @@ export interface NestingItemProps<TCustomComponentProps = CustomItemComponentPro
     /**
      * Used to customize the rendered component when shown as an item.
      * You can use this for example to change it to a SPA link.
+     * Your custom component should be wrapped with forwardRef to support assistive technologies.
      */
     component?: React.ComponentType<TCustomComponentProps>;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "3.5.4",
+	"version": "3.6.0",
 	"description": "A highly composable side navigation component that supports nested views.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -27,12 +27,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^3.1.0",
-		"@atlaskit/icon": "^22.22.0",
+		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/motion": "^1.9.0",
-		"@atlaskit/primitives": "^12.2.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/primitives": "^13.0.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -83,5 +84,10 @@
 			]
 		}
 	},
+	"platform-feature-flags": {
+		"platform-side-navigation-keyboard-focus": {
+			"type": "boolean"
+		}
+	},
 	"homepage": "https://atlassian.design/components/side-navigation/"
 }