@atlaskit/navigation-system 9.1.2 → 9.2.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlassian/navigation-system
 
+## 9.2.1
+
+### Patch Changes
+
+- [`ca5f7e8e2a556`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca5f7e8e2a556) -
+  Dev-only dependencies have been added.
+
+## 9.2.0
+
+### Minor Changes
+
+- [`b46825ac6c66c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b46825ac6c66c) -
+  Cleans up the `platform_dst_nav4_top_nav_increase_height` feature gate. The top nav height is now
+  always 56px when the full-height sidebar is enabled.
+
 ## 9.1.2
 
 ### Patch Changes

package/constellation/layout/usage.mdx

@@ -104,6 +104,17 @@ The main difference between aside, panel and modal dialog is their behaviours:
   decision or completing an action, before they can return to their primary task.
 - Don’t use aside for new experiences. It is planned for deprecation.
 
+## Accessibility
+
+- Always place slots in this order as direct children of the root: banner, top nav, side nav, main,
+  aside, panel. This determines the keyboard tab order, screen reader reading order, and skip link
+  order.
+- Provide a unique, meaningful `label` for side nav, aside, panel, and top nav end. The label is
+  exposed as the landmark's accessible name. Don't repeat the landmark's role in the label.
+- Slots provide landmark roles automatically. Don't add or duplicate landmark roles inside them.
+- Use custom skip links sparingly. Too many skip links makes the skip links menu noisy. Consider the
+  utility of each one before adding it.
+
 ## Best practices
 
 ### Design using grid in the main area

package/constellation/top-nav-items/usage.mdx

@@ -40,6 +40,17 @@ The current navigation has specific menu items that are similar across apps. Mak
 navigation follows Atlassian patterns consistently. For all the guidelines, see
 [navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812).
 
+## Accessibility
+
+- Always provide a meaningful `label` for every top nav item. The label becomes the accessible name
+  and the visible tooltip.
+- When a top nav item triggers a popup, menu, or dialog, pass the relevant `aria-controls`,
+  `aria-expanded`, and `aria-haspopup` props from that component to the top nav item.
+- Use the `shortcut` prop to surface a keyboard shortcut in the tooltip when one exists. This makes
+  the shortcut discoverable for keyboard users.
+- Use `isSelected` to indicate when a corresponding popup or panel is open. This exposes the state
+  to assistive technology.
+
 ## Best practices
 
 ### Use the top nav items provided

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

@@ -20,7 +20,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _useSkipLinkInternal = require("../../../context/skip-links/use-skip-link-internal");
@@ -358,23 +357,14 @@ function SideNavInternal(_ref) {
 
     // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
     // after SSR hydration. This should only run once, after the initial render on the client.
-    if ((0, _platformFeatureFlags.fg)('navx-4418-fix-effect-state-updates-in-gsn')) {
-      (0, _react.startTransition)(function () {
-        setSideNavState({
-          desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-          mobile: 'collapsed',
-          flyout: 'closed',
-          lastTrigger: null
-        });
-      });
-    } else {
+    (0, _react.startTransition)(function () {
       setSideNavState({
         desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
         mobile: 'collapsed',
         flyout: 'closed',
         lastTrigger: null
       });
-    }
+    });
   }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   var handleExpand = (0, _react.useCallback)(function (_ref2) {
     var screen = _ref2.screen,

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

@@ -61,8 +61,7 @@ function TopNavOld(_ref) {
     label: skipLinkLabel,
     isHidden: (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
   });
-  var hasIncreasedDefaultHeight = isFhsEnabled && (0, _platformFeatureFlags.fg)('platform_dst_nav4_top_nav_increase_height');
-  var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : isFhsEnabled ? 56 : 48;
   var customTheme = (0, _useCustomTheme.useCustomTheme)(customThemeConfig);
   var _useSideNavVisibility = (0, _useSideNavVisibility3.useSideNavVisibility)(),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
@@ -114,8 +113,7 @@ function TopNavNew(_ref2) {
     label: skipLinkLabel,
     isHidden: (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
   });
-  var hasIncreasedDefaultHeight = isFhsEnabled && (0, _platformFeatureFlags.fg)('platform_dst_nav4_top_nav_increase_height');
-  var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : isFhsEnabled ? 56 : 48;
   var customTheme = (0, _useCustomThemeNew.useCustomThemeNew)(customThemeConfig);
   var hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
   var _useSideNavVisibility2 = (0, _useSideNavVisibility3.useSideNavVisibility)(),

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

@@ -9,7 +9,6 @@ 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';
@@ -339,23 +338,14 @@ function SideNavInternal({
 
     // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
     // after SSR hydration. This should only run once, after the initial render on the client.
-    if (fg('navx-4418-fix-effect-state-updates-in-gsn')) {
-      startTransition(() => {
-        setSideNavState({
-          desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-          mobile: 'collapsed',
-          flyout: 'closed',
-          lastTrigger: null
-        });
-      });
-    } else {
+    startTransition(() => {
       setSideNavState({
         desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
         mobile: 'collapsed',
         flyout: 'closed',
         lastTrigger: null
       });
-    }
+    });
   }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   const handleExpand = useCallback(({
     screen,

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

@@ -54,8 +54,7 @@ function TopNavOld({
     label: skipLinkLabel,
     isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
   });
-  const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
-  const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
+  const height = heightProp !== null && heightProp !== void 0 ? heightProp : isFhsEnabled ? 56 : 48;
   const customTheme = useCustomTheme(customThemeConfig);
   const {
     isExpandedOnDesktop
@@ -108,8 +107,7 @@ function TopNavNew({
     label: skipLinkLabel,
     isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
   });
-  const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
-  const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
+  const height = heightProp !== null && heightProp !== void 0 ? heightProp : isFhsEnabled ? 56 : 48;
   const customTheme = useCustomThemeNew(customThemeConfig);
   const hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
   const {

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

@@ -13,7 +13,6 @@ 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';
@@ -348,23 +347,14 @@ function SideNavInternal(_ref) {
 
     // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
     // after SSR hydration. This should only run once, after the initial render on the client.
-    if (fg('navx-4418-fix-effect-state-updates-in-gsn')) {
-      startTransition(function () {
-        setSideNavState({
-          desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-          mobile: 'collapsed',
-          flyout: 'closed',
-          lastTrigger: null
-        });
-      });
-    } else {
+    startTransition(function () {
       setSideNavState({
         desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
         mobile: 'collapsed',
         flyout: 'closed',
         lastTrigger: null
       });
-    }
+    });
   }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   var handleExpand = useCallback(function (_ref2) {
     var screen = _ref2.screen,

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

@@ -54,8 +54,7 @@ function TopNavOld(_ref) {
     label: skipLinkLabel,
     isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
   });
-  var hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
-  var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : isFhsEnabled ? 56 : 48;
   var customTheme = useCustomTheme(customThemeConfig);
   var _useSideNavVisibility = useSideNavVisibility(),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
@@ -107,8 +106,7 @@ function TopNavNew(_ref2) {
     label: skipLinkLabel,
     isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
   });
-  var hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
-  var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : isFhsEnabled ? 56 : 48;
   var customTheme = useCustomThemeNew(customThemeConfig);
   var hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
   var _useSideNavVisibility2 = useSideNavVisibility(),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "9.1.2",
+	"version": "9.2.1",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -76,7 +76,7 @@
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^34.3.0",
+		"@atlaskit/icon": "^34.4.0",
 		"@atlaskit/layering": "^3.7.0",
 		"@atlaskit/logo": "^20.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -106,12 +106,14 @@
 		"@atlaskit/banner": "^14.1.0",
 		"@atlaskit/breadcrumbs": "^16.1.0",
 		"@atlaskit/dropdown-menu": "^16.8.0",
+		"@atlaskit/flag": "^17.11.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
+		"@atlaskit/inline-dialog": "^18.1.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/lozenge": "^13.8.0",
 		"@atlaskit/menu": "^8.5.0",
-		"@atlaskit/modal-dialog": "^14.18.0",
+		"@atlaskit/modal-dialog": "^15.0.0",
 		"@atlaskit/onboarding": "^14.6.0",
 		"@atlaskit/page-header": "^12.2.0",
 		"@atlaskit/page-layout": "^4.3.0",
@@ -119,11 +121,13 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/select": "^21.10.0",
 		"@atlaskit/skeleton": "^2.1.0",
+		"@atlaskit/spotlight": "^0.14.0",
 		"@atlaskit/textfield": "^8.3.0",
+		"@atlaskit/top-layer": "^0.6.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/gemini": "^1.44.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
-		"@atlassian/search-dialog": "^10.1.0",
+		"@atlassian/search-dialog": "^10.2.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
 		"@atlassian/testing-library": "^0.5.0",
@@ -153,8 +157,9 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_dst_nav4_top_nav_increase_height": {
-			"type": "boolean"
+		"platform-dst-top-layer": {
+			"type": "boolean",
+			"referenceOnly": true
 		},
 		"platform-component-visual-refresh": {
 			"type": "boolean",
@@ -172,9 +177,6 @@
 		"platform_dst_nav4_flyout_menu_slots_close_button": {
 			"type": "boolean"
 		},
-		"navx-4418-fix-effect-state-updates-in-gsn": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_custom_theming_fhs_1": {
 			"type": "boolean"
 		},