@atlaskit/navigation-system 1.1.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @atlassian/navigation-system
 
+## 2.0.0
+
+### Major Changes
+
+- [`ca468a8bbccd9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca468a8bbccd9) -
+  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. Assistive technology users will still have the `aria-expanded`
+  attribute to determine the expanded state.
+
+  This change was previously behind a feature flag, which has now been removed.
+
+  **More details:**
+
+  Previously, the chevron icon button would be labelled by the hardcoded strings "Expand" or
+  "Collapse" - which is not helpful for screen readers.
+
+  Now, the chevron icon button is labelled by the menu item trigger content (children).
+
+  For example, for the below expandable menu item trigger:
+
+  ```tsx
+  <ExpandableMenuItemTrigger href="#">Recent</ExpandableMenuItemTrigger>
+  ```
+
+  Previously, the chevron icon button would be a `button` element with the name "Expand" or
+  "Collapse", based on the expanded state.
+
+  Now, the chevron icon button will be a `button` element with the name "Recent".
+
+  You will likely need to update your tests to account for this change, by using a different
+  selector.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.0
+
+### Minor Changes
+
+- [`c48c55f280ef8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c48c55f280ef8) -
+  FlyoutMenuItemContent will render its popup alongside the trigger, instead of using a portal. This
+  improves the experience for assistive technology users.
+
+  This change is behind a feature flag.
+
 ## 1.1.0
 
 ### Minor Changes

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

@@ -14,7 +14,6 @@ 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");
@@ -108,11 +107,11 @@ var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = /*#__PURE__*
     // `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
+    "aria-labelledby": id
     // 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',
+    label: "",
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,

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

@@ -60,7 +60,8 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
      * and should have negligible performance impacts, because the flyout menus should rarely
      * need to be repositioned.
      */,
-    shouldDisableGpuAcceleration: true
+    shouldDisableGpuAcceleration: true,
+    shouldRenderToParent: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyoutmenuitem_render_to_parent')
   }, function (_ref2) {
     var update = _ref2.update;
     return /*#__PURE__*/_react.default.createElement(UpdatePopperOnContentResize, {

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

@@ -6,7 +6,6 @@ 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';
@@ -99,11 +98,11 @@ export const ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(({
     // `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
+    "aria-labelledby": id
     // 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',
+    label: "",
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,

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

@@ -51,7 +51,8 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
      * and should have negligible performance impacts, because the flyout menus should rarely
      * need to be repositioned.
      */,
-    shouldDisableGpuAcceleration: true
+    shouldDisableGpuAcceleration: true,
+    shouldRenderToParent: fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')
   }, ({
     update
   }) => /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {

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

@@ -6,7 +6,6 @@ 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';
@@ -99,11 +98,11 @@ export var ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref2,
     // `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
+    "aria-labelledby": id
     // 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',
+    label: "",
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,

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

@@ -51,7 +51,8 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
      * and should have negligible performance impacts, because the flyout menus should rarely
      * need to be repositioned.
      */,
-    shouldDisableGpuAcceleration: true
+    shouldDisableGpuAcceleration: true,
+    shouldRenderToParent: fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')
   }, function (_ref2) {
     var update = _ref2.update;
     return /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "1.1.0",
+	"version": "2.0.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -112,7 +112,7 @@
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^28.0.0",
+		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -120,8 +120,8 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
-		"@atlaskit/primitives": "^14.11.0",
-		"@atlaskit/tokens": "^6.0.0",
+		"@atlaskit/primitives": "^14.12.0",
+		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -214,14 +214,14 @@
 		"platform_dst_nav4_flyout_use_capture_outside": {
 			"type": "boolean"
 		},
-		"platform_dst_expandable_menu_item_elembefore_label": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_skip_links_hydration_fix": {
 			"type": "boolean"
 		},
 		"platform_dst_nav4_actionsonhover_focus_fix": {
 			"type": "boolean"
+		},
+		"platform_dst_nav4_flyoutmenuitem_render_to_parent": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"