@atlaskit/navigation-system 0.177.3 → 0.179.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @atlassian/navigation-system
 
+## 0.179.0
+
+### Minor Changes
+
+- [#199851](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199851)
+  [`625ab3de43de0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/625ab3de43de0) -
+  Cleans up the `platform_dst_nav4_disable_is_fixed_prop` feature gate. The `isFixed` prop has now
+  been removed from `Main` and `Aside` and these slots will now always be fixed, acting as separate
+  scroll containers.
+
+## 0.178.0
+
+### Minor Changes
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`87e1e76c9c3aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87e1e76c9c3aa) -
+  The `elemBefore` chevron icon button in the link (selectable) variants of
+  `ExpandableMenuItemTrigger` is now labelled by the menu item (specifically, its anchor element)
+  through the `aria-labelledby` attribute. This is to provide context on what will be expanded or
+  collapsed to screen readers.
+
+  This change is behind a feature flag.
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`87e1e76c9c3aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87e1e76c9c3aa) -
+  The `ExpandableMenuItemTrigger` `testId` is now passed down to the `elemBefore` chevron icon
+  button in the link (selectable) variants of `ExpandableMenuItemTrigger`.
+
+### Patch Changes
+
+- [#199297](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199297)
+  [`3805d3e955d32`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3805d3e955d32) -
+  Improve menu item scaling with browser font size by using rem for height.
+- [`5bed2aeb9093f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5bed2aeb9093f) -
+  Internal refactoring of tests
+- Updated dependencies
+
 ## 0.177.3
 
 ### Patch Changes

package/afm-volt/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{
@@ -59,9 +65,6 @@
 		{
 			"path": "../../primitives/afm-volt/tsconfig.json"
 		},
-		{
-			"path": "../../../navigation/temp-nav-app-icons/afm-volt/tsconfig.json"
-		},
 		{
 			"path": "../../tokens/afm-volt/tsconfig.json"
 		},

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -14,6 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _new = require("@atlaskit/button/new");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItem = require("../menu-item");
 var _useScrollMenuItemIntoView = require("../use-scroll-menu-item-into-view");
 var _expandableMenuItemContext = require("./expandable-menu-item-context");
@@ -68,6 +69,7 @@ var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = /*#__PURE__*
     isDragging = _ref2.isDragging,
     hasDragIndicator = _ref2.hasDragIndicator,
     dropIndicator = _ref2.dropIndicator;
+  var id = (0, _react.useId)();
   var onExpansionToggle = (0, _expandableMenuItemContext.useOnExpansionToggle)();
   var isExpanded = (0, _expandableMenuItemContext.useIsExpanded)();
   var setIsExpanded = (0, _expandableMenuItemContext.useSetIsExpanded)();
@@ -100,12 +102,22 @@ var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = /*#__PURE__*
         providedElemBefore: providedElemBefore
       });
     },
-    "aria-expanded": isExpanded,
-    label: isExpanded ? 'Collapse' : 'Expand',
+    "aria-expanded": isExpanded
+    // We are labelling the icon button using the containing menu item's content, to provide context to
+    // screen readers on what will actually be expanded or collapsed. Screen readers will also use the
+    // `aria-expanded` attribute to indicate the expanded state of the menu item.
+    // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
+    ,
+    "aria-labelledby": (0, _platformFeatureFlags.fg)('platform_dst_expandable_menu_item_elembefore_label') ? id : undefined
+    // IconButton requires a label prop, however it will not be used by screen readers as we are setting
+    // `aria-labelledby`, which will be used instead.
+    ,
+    label: (0, _platformFeatureFlags.fg)('platform_dst_expandable_menu_item_elembefore_label') ? '' : isExpanded ? 'Collapse' : 'Expand',
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,
-    interactionName: interactionName
+    interactionName: interactionName,
+    testId: testId ? "".concat(testId, "--elem-before-button") : undefined
   }) : /*#__PURE__*/_react.default.createElement(ExpandableMenuItemIcon, {
     isExpanded: isExpanded,
     isSelected: isSelected,
@@ -117,6 +129,7 @@ var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = /*#__PURE__*
     ref: itemRef,
     className: (0, _runtime.ax)([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
   }, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItemBase, {
+    id: id,
     actions: actions,
     actionsOnHover: actionsOnHover,
     elemBefore: elemBefore,

package/dist/cjs/ui/menu-item/menu-item.compiled.css

@@ -46,8 +46,8 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1crf{height:9pt}
 ._4t3i1tcg{height:24px}
-._4t3ickbl{height:3pc}
-._4t3izwfg{height:2pc}
+._4t3i1wto{height:3rem}
+._4t3iviql{height:2rem}
 ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._91ju1txw{--elem-after-display:flex}

package/dist/cjs/ui/menu-item/menu-item.js

@@ -146,13 +146,13 @@ var onTopOfButtonOrAnchorStyles = {
  */
 var nestedOpenPopupCSSSelector = exports.nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
 var containerStyles = {
-  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3izwfg _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
+  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
   removeElemAfter: "_91juglyw",
   showHoverActions: "_ek6g1txw",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
   disabled: "_syaz1lh4 _irr3n7od",
-  hasDescription: "_4t3ickbl",
+  hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
 var buttonOrAnchorStyles = {
@@ -222,7 +222,8 @@ function getTextColor(_ref2) {
  * This can be inferred from the type of the `onClick` prop.
  */
 var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
-  var testId = _ref3.testId,
+  var id = _ref3.id,
+    testId = _ref3.testId,
     actions = _ref3.actions,
     actionsOnHover = _ref3.actionsOnHover,
     children = _ref3.children,
@@ -347,6 +348,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
       'aria-controls': ariaControls,
       'aria-haspopup': ariaHasPopup,
       ref: (0, _mergeRefs.default)([forwardedRef, tooltipProps.ref]),
+      id: id,
       testId: testId,
       interactionName: interactionName
     });

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

@@ -53,8 +53,7 @@ function getResizeBounds() {
 }
 var styles = {
   root: "_nd5lns35 _vchhusvi _kqswh2mm _glte1kzp _ndwch9n0",
-  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8",
-  fullHeight: "_4t3i1osq"
+  inner: "_1reo1wug _18m91wug _152timx3 _4t3i1osq _165teqxy _13wn1if8"
 };
 
 /**
@@ -65,7 +64,6 @@ var styles = {
 function Aside(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
-    isFixedProp = _ref.isFixed,
     _ref$defaultWidth = _ref.defaultWidth,
     defaultWidth = _ref$defaultWidth === void 0 ? 330 : _ref$defaultWidth,
     _ref$label = _ref.label,
@@ -78,7 +76,6 @@ function Aside(_ref) {
   var id = (0, _idUtils.useLayoutId)({
     providedId: providedId
   });
-  var isFixed = (0, _platformFeatureFlags.fg)('platform_dst_nav4_disable_is_fixed_prop') ? true : isFixedProp;
 
   /**
    * Don't show the skip link if the slot has 0 width.
@@ -154,6 +151,6 @@ function Aside(_ref) {
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": testId ? "".concat(testId, "--inner") : undefined,
-    className: (0, _runtime.ax)([styles.fullHeight, isFixed && styles.fixedContentArea])
+    className: (0, _runtime.ax)([styles.inner])
   }, children)));
 }

package/dist/cjs/ui/page-layout/main/main-sticky-header.compiled.css

@@ -1,4 +1,3 @@
 ._152tidpf{inset-block-start:0}
-._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._1pbykb7n{z-index:1}
 ._kqsw1if8{position:sticky}

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

@@ -1,21 +1,16 @@
 /* main-sticky-header.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MainStickyHeader = MainStickyHeader;
 require("./main-sticky-header.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireWildcard(require("react"));
-var _mainStickyContext = require("./main-sticky-context");
-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 contentInsetBlockStart = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";
+var _react = _interopRequireDefault(require("react"));
 var stickyHeaderStyles = {
-  root: "_kqsw1if8 _1pbykb7n",
-  stickyInMain: "_152tidpf",
-  stickyInBody: "_152timx3"
+  root: "_kqsw1if8 _1pbykb7n _152tidpf"
 };
 
 /**
@@ -25,9 +20,8 @@ function MainStickyHeader(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     testId = _ref.testId;
-  var isMainFixed = (0, _react.useContext)(_mainStickyContext.MainStickyContext);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testId,
-    className: (0, _runtime.ax)([stickyHeaderStyles.root, isMainFixed && stickyHeaderStyles.stickyInMain, !isMainFixed && stickyHeaderStyles.stickyInBody, xcss])
+    className: (0, _runtime.ax)([stickyHeaderStyles.root, xcss])
   }, children);
 }

package/dist/cjs/ui/page-layout/main/main.compiled.css

@@ -4,4 +4,4 @@
 ._19121cl4{isolation:isolate}
 ._1reo1wug{overflow-x:auto}
 ._njlp1t7j{contain:paint}
-@media (min-width:64rem){._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}._qwfh1wug{isolation:auto}}
+@media (min-width:64rem){._qwfh1wug{isolation:auto}._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}}

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

@@ -14,11 +14,9 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksContext = require("../../../context/skip-links/skip-links-context");
 var _constants = require("../constants");
 var _idUtils = require("../id-utils");
-var _mainStickyContext = require("./main-sticky-context");
 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 mainElementStyles = {
-  root: "_nd5l1gzg _19121cl4 _qwfh1wug",
-  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8",
+  root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8",
   containPaint: "_njlp1t7j"
 };
 
@@ -27,7 +25,6 @@ var mainElementStyles = {
  */
 function Main(_ref) {
   var children = _ref.children,
-    isFixedProp = _ref.isFixed,
     xcss = _ref.xcss,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
     skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Main Content' : _ref$skipLinkLabel,
@@ -36,15 +33,12 @@ function Main(_ref) {
   var id = (0, _idUtils.useLayoutId)({
     providedId: providedId
   });
-  var isFixed = (0, _platformFeatureFlags.fg)('platform_dst_nav4_disable_is_fixed_prop') ? true : isFixedProp;
   (0, _skipLinksContext.useSkipLink)(id, skipLinkLabel);
   return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: (0, _runtime.ax)([mainElementStyles.root, isFixed && mainElementStyles.fixedContentArea, (0, _platformFeatureFlags.fg)('platform_dst_nav4_layering_in_main_slot_fixes') && mainElementStyles.containPaint, xcss]),
+    className: (0, _runtime.ax)([mainElementStyles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_layering_in_main_slot_fixes') && mainElementStyles.containPaint, xcss]),
     role: "main",
     "data-testid": testId
-  }, /*#__PURE__*/React.createElement(_mainStickyContext.MainStickyContext.Provider, {
-    value: Boolean(isFixed)
-  }, children)));
+  }, children));
 }

package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -2,10 +2,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./expandable-menu-item-trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
 import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
 import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
@@ -61,6 +62,7 @@ export const ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(({
   hasDragIndicator,
   dropIndicator
 }, forwardedRef) => {
+  const id = useId();
   const onExpansionToggle = useOnExpansionToggle();
   const isExpanded = useIsExpanded();
   const setIsExpanded = useSetIsExpanded();
@@ -91,12 +93,22 @@ export const ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(({
       isSelected: isSelected,
       providedElemBefore: providedElemBefore
     }),
-    "aria-expanded": isExpanded,
-    label: isExpanded ? 'Collapse' : 'Expand',
+    "aria-expanded": isExpanded
+    // We are labelling the icon button using the containing menu item's content, to provide context to
+    // screen readers on what will actually be expanded or collapsed. Screen readers will also use the
+    // `aria-expanded` attribute to indicate the expanded state of the menu item.
+    // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
+    ,
+    "aria-labelledby": fg('platform_dst_expandable_menu_item_elembefore_label') ? id : undefined
+    // IconButton requires a label prop, however it will not be used by screen readers as we are setting
+    // `aria-labelledby`, which will be used instead.
+    ,
+    label: fg('platform_dst_expandable_menu_item_elembefore_label') ? '' : isExpanded ? 'Collapse' : 'Expand',
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,
-    interactionName: interactionName
+    interactionName: interactionName,
+    testId: testId ? `${testId}--elem-before-button` : undefined
   }) : /*#__PURE__*/React.createElement(ExpandableMenuItemIcon, {
     isExpanded: isExpanded,
     isSelected: isSelected,
@@ -108,6 +120,7 @@ export const ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(({
     ref: itemRef,
     className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
   }, /*#__PURE__*/React.createElement(MenuItemBase, {
+    id: id,
     actions: actions,
     actionsOnHover: actionsOnHover,
     elemBefore: elemBefore,

package/dist/es2019/ui/menu-item/menu-item.compiled.css

@@ -46,8 +46,8 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1crf{height:9pt}
 ._4t3i1tcg{height:24px}
-._4t3ickbl{height:3pc}
-._4t3izwfg{height:2pc}
+._4t3i1wto{height:3rem}
+._4t3iviql{height:2rem}
 ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._91ju1txw{--elem-after-display:flex}

package/dist/es2019/ui/menu-item/menu-item.js

@@ -129,13 +129,13 @@ const onTopOfButtonOrAnchorStyles = {
  */
 export const nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
 const containerStyles = {
-  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3izwfg _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
+  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
   removeElemAfter: "_91juglyw",
   showHoverActions: "_ek6g1txw",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
   disabled: "_syaz1lh4 _irr3n7od",
-  hasDescription: "_4t3ickbl",
+  hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
 const buttonOrAnchorStyles = {
@@ -206,6 +206,7 @@ function getTextColor({
  * This can be inferred from the type of the `onClick` prop.
  */
 const MenuItemBaseNoRef = ({
+  id,
   testId,
   actions,
   actionsOnHover,
@@ -331,6 +332,7 @@ const MenuItemBaseNoRef = ({
       'aria-controls': ariaControls,
       'aria-haspopup': ariaHasPopup,
       ref: mergeRefs([forwardedRef, tooltipProps.ref]),
+      id,
       testId,
       interactionName
     };

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

@@ -42,8 +42,7 @@ function getResizeBounds() {
 }
 const styles = {
   root: "_nd5lns35 _vchhusvi _kqswh2mm _glte1kzp _ndwch9n0",
-  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8",
-  fullHeight: "_4t3i1osq"
+  inner: "_1reo1wug _18m91wug _152timx3 _4t3i1osq _165teqxy _13wn1if8"
 };
 
 /**
@@ -54,7 +53,6 @@ const styles = {
 export function Aside({
   children,
   xcss,
-  isFixed: isFixedProp,
   defaultWidth = 330,
   label = 'Aside',
   skipLinkLabel = label,
@@ -65,7 +63,6 @@ export function Aside({
   const id = useLayoutId({
     providedId
   });
-  const isFixed = fg('platform_dst_nav4_disable_is_fixed_prop') ? true : isFixedProp;
 
   /**
    * Don't show the skip link if the slot has 0 width.
@@ -140,6 +137,6 @@ export function Aside({
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": testId ? `${testId}--inner` : undefined,
-    className: ax([styles.fullHeight, isFixed && styles.fixedContentArea])
+    className: ax([styles.inner])
   }, children)));
 }

package/dist/es2019/ui/page-layout/main/main-sticky-header.compiled.css

@@ -1,4 +1,3 @@
 ._152tidpf{inset-block-start:0}
-._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._1pbykb7n{z-index:1}
 ._kqsw1if8{position:sticky}

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

@@ -1,13 +1,9 @@
 /* main-sticky-header.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./main-sticky-header.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useContext } from 'react';
-import { MainStickyContext } from './main-sticky-context';
-const contentInsetBlockStart = `calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))`;
+import React from 'react';
 const stickyHeaderStyles = {
-  root: "_kqsw1if8 _1pbykb7n",
-  stickyInMain: "_152tidpf",
-  stickyInBody: "_152timx3"
+  root: "_kqsw1if8 _1pbykb7n _152tidpf"
 };
 
 /**
@@ -18,9 +14,8 @@ export function MainStickyHeader({
   xcss,
   testId
 }) {
-  const isMainFixed = useContext(MainStickyContext);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax([stickyHeaderStyles.root, isMainFixed && stickyHeaderStyles.stickyInMain, !isMainFixed && stickyHeaderStyles.stickyInBody, xcss])
+    className: ax([stickyHeaderStyles.root, xcss])
   }, children);
 }

package/dist/es2019/ui/page-layout/main/main.compiled.css

@@ -4,4 +4,4 @@
 ._19121cl4{isolation:isolate}
 ._1reo1wug{overflow-x:auto}
 ._njlp1t7j{contain:paint}
-@media (min-width:64rem){._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}._qwfh1wug{isolation:auto}}
+@media (min-width:64rem){._qwfh1wug{isolation:auto}._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}}

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

@@ -7,10 +7,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/skip-links-context';
 import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
 import { useLayoutId } from '../id-utils';
-import { MainStickyContext } from './main-sticky-context';
 const mainElementStyles = {
-  root: "_nd5l1gzg _19121cl4 _qwfh1wug",
-  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8",
+  root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8",
   containPaint: "_njlp1t7j"
 };
 
@@ -19,7 +17,6 @@ const mainElementStyles = {
  */
 export function Main({
   children,
-  isFixed: isFixedProp,
   xcss,
   skipLinkLabel = 'Main Content',
   testId,
@@ -28,15 +25,12 @@ export function Main({
   const id = useLayoutId({
     providedId
   });
-  const isFixed = fg('platform_dst_nav4_disable_is_fixed_prop') ? true : isFixedProp;
   useSkipLink(id, skipLinkLabel);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: ax([mainElementStyles.root, isFixed && mainElementStyles.fixedContentArea, fg('platform_dst_nav4_layering_in_main_slot_fixes') && mainElementStyles.containPaint, xcss]),
+    className: ax([mainElementStyles.root, fg('platform_dst_nav4_layering_in_main_slot_fixes') && mainElementStyles.containPaint, xcss]),
     role: "main",
     "data-testid": testId
-  }, /*#__PURE__*/React.createElement(MainStickyContext.Provider, {
-    value: Boolean(isFixed)
-  }, children)));
+  }, children));
 }

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -2,10 +2,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./expandable-menu-item-trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
 import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
 import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
@@ -59,6 +60,7 @@ export var ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref2,
     isDragging = _ref2.isDragging,
     hasDragIndicator = _ref2.hasDragIndicator,
     dropIndicator = _ref2.dropIndicator;
+  var id = useId();
   var onExpansionToggle = useOnExpansionToggle();
   var isExpanded = useIsExpanded();
   var setIsExpanded = useSetIsExpanded();
@@ -91,12 +93,22 @@ export var ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref2,
         providedElemBefore: providedElemBefore
       });
     },
-    "aria-expanded": isExpanded,
-    label: isExpanded ? 'Collapse' : 'Expand',
+    "aria-expanded": isExpanded
+    // We are labelling the icon button using the containing menu item's content, to provide context to
+    // screen readers on what will actually be expanded or collapsed. Screen readers will also use the
+    // `aria-expanded` attribute to indicate the expanded state of the menu item.
+    // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
+    ,
+    "aria-labelledby": fg('platform_dst_expandable_menu_item_elembefore_label') ? id : undefined
+    // IconButton requires a label prop, however it will not be used by screen readers as we are setting
+    // `aria-labelledby`, which will be used instead.
+    ,
+    label: fg('platform_dst_expandable_menu_item_elembefore_label') ? '' : isExpanded ? 'Collapse' : 'Expand',
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,
-    interactionName: interactionName
+    interactionName: interactionName,
+    testId: testId ? "".concat(testId, "--elem-before-button") : undefined
   }) : /*#__PURE__*/React.createElement(ExpandableMenuItemIcon, {
     isExpanded: isExpanded,
     isSelected: isSelected,
@@ -108,6 +120,7 @@ export var ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref2,
     ref: itemRef,
     className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
   }, /*#__PURE__*/React.createElement(MenuItemBase, {
+    id: id,
     actions: actions,
     actionsOnHover: actionsOnHover,
     elemBefore: elemBefore,

package/dist/esm/ui/menu-item/menu-item.compiled.css

@@ -46,8 +46,8 @@
 ._4cvr1h6o{align-items:center}
 ._4t3i1crf{height:9pt}
 ._4t3i1tcg{height:24px}
-._4t3ickbl{height:3pc}
-._4t3izwfg{height:2pc}
+._4t3i1wto{height:3rem}
+._4t3iviql{height:2rem}
 ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
 ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
 ._91ju1txw{--elem-after-display:flex}

package/dist/esm/ui/menu-item/menu-item.js

@@ -135,13 +135,13 @@ var onTopOfButtonOrAnchorStyles = {
  */
 export var nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
 var containerStyles = {
-  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3izwfg _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
+  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _ek6gglyw _1yyu1j28 _91ju1txw _1swv108i _1ojv1txw _irr3108i _1brr1txw _109x1txw",
   removeElemAfter: "_91juglyw",
   showHoverActions: "_ek6g1txw",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
   disabled: "_syaz1lh4 _irr3n7od",
-  hasDescription: "_4t3ickbl",
+  hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
 var buttonOrAnchorStyles = {
@@ -211,7 +211,8 @@ function getTextColor(_ref2) {
  * This can be inferred from the type of the `onClick` prop.
  */
 var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
-  var testId = _ref3.testId,
+  var id = _ref3.id,
+    testId = _ref3.testId,
     actions = _ref3.actions,
     actionsOnHover = _ref3.actionsOnHover,
     children = _ref3.children,
@@ -336,6 +337,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
       'aria-controls': ariaControls,
       'aria-haspopup': ariaHasPopup,
       ref: mergeRefs([forwardedRef, tooltipProps.ref]),
+      id: id,
       testId: testId,
       interactionName: interactionName
     });

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

@@ -44,8 +44,7 @@ function getResizeBounds() {
 }
 var styles = {
   root: "_nd5lns35 _vchhusvi _kqswh2mm _glte1kzp _ndwch9n0",
-  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8",
-  fullHeight: "_4t3i1osq"
+  inner: "_1reo1wug _18m91wug _152timx3 _4t3i1osq _165teqxy _13wn1if8"
 };
 
 /**
@@ -56,7 +55,6 @@ var styles = {
 export function Aside(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
-    isFixedProp = _ref.isFixed,
     _ref$defaultWidth = _ref.defaultWidth,
     defaultWidth = _ref$defaultWidth === void 0 ? 330 : _ref$defaultWidth,
     _ref$label = _ref.label,
@@ -69,7 +67,6 @@ export function Aside(_ref) {
   var id = useLayoutId({
     providedId: providedId
   });
-  var isFixed = fg('platform_dst_nav4_disable_is_fixed_prop') ? true : isFixedProp;
 
   /**
    * Don't show the skip link if the slot has 0 width.
@@ -145,6 +142,6 @@ export function Aside(_ref) {
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": testId ? "".concat(testId, "--inner") : undefined,
-    className: ax([styles.fullHeight, isFixed && styles.fixedContentArea])
+    className: ax([styles.inner])
   }, children)));
 }

package/dist/esm/ui/page-layout/main/main-sticky-header.compiled.css

@@ -1,4 +1,3 @@
 ._152tidpf{inset-block-start:0}
-._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._1pbykb7n{z-index:1}
 ._kqsw1if8{position:sticky}