@atlaskit/navigation-system 5.16.0 → 5.17.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlassian/navigation-system
 
+## 5.17.0
+
+### Minor Changes
+
+- [`6f95ec25daa67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f95ec25daa67) -
+  Fixes to accessibility issues for the flyout menu.
+
+  This includes changing the `aria-haspopup` value from `"true"` to `"dialog"`, setting the `role`
+  of the popup container to `"dialog"`, adding an `aria-labelledby` to the popup container to
+  reference the `id` of the title in the header slot, and ensuring that escape dismisses the dialog
+  and places focus back on the trigger.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.16.0
 
 ### Minor Changes

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

@@ -31,6 +31,7 @@ var FlyoutHeader = exports.FlyoutHeader = function FlyoutHeader(props) {
     testId = props.testId,
     title = props.title,
     closeButtonLabel = props.closeButtonLabel;
+  var id = (0, _flyoutMenuItemContext.useTitleId)();
   var setIsOpen = (0, _react.useContext)(_flyoutMenuItemContext.SetIsOpenContext);
   var onClose = (0, _react.useContext)(_flyoutMenuItemContext.OnCloseContext);
   var handleClose = (0, _react.useCallback)(function () {
@@ -48,6 +49,7 @@ var FlyoutHeader = exports.FlyoutHeader = function FlyoutHeader(props) {
     testId: testId && "".concat(testId, "--close-button")
   }), /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "xsmall",
-    as: "span"
+    as: "span",
+    id: id
   }, title)), children);
 };

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

@@ -50,6 +50,7 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     onClose === null || onClose === void 0 || onClose();
     setIsOpen(false);
   }, [setIsOpen, onClose]);
+  var titleId = (0, _react.useId)();
   return /*#__PURE__*/_react.default.createElement(_experimental.PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
     onClose: handleClose,
@@ -62,7 +63,9 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     shouldFitViewport: true,
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,
-    autoFocus: autoFocus
+    autoFocus: autoFocus,
+    role: (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? "dialog" : undefined,
+    titleId: (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? titleId : undefined
     /**
      * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
      *
@@ -83,13 +86,15 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     return /*#__PURE__*/_react.default.createElement(UpdatePopperOnContentResize, {
       ref: forwardedRef,
       update: update
-    }, (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.OnCloseProvider, {
+    }, (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.TitleIdContextProvider, {
+      value: titleId
+    }, /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.OnCloseProvider, {
       value: function value() {
         return onClose;
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _runtime.ax)([flyoutMenuItemContentContainerStyles.container])
-    }, children)) : children);
+    }, children))) : children);
   });
 });
 function createResizeObserver(update) {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSetFlyoutMenuOpen = exports.useFlyoutMenuOpen = exports.SetIsOpenContext = exports.OnCloseProvider = exports.OnCloseContext = exports.IsOpenContext = void 0;
+exports.useTitleId = exports.useSetFlyoutMenuOpen = exports.useFlyoutMenuOpen = exports.TitleIdContextProvider = exports.TitleIdContext = exports.SetIsOpenContext = exports.OnCloseProvider = exports.OnCloseContext = exports.IsOpenContext = void 0;
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 /**
@@ -39,4 +39,23 @@ var OnCloseContext = exports.OnCloseContext = /*#__PURE__*/(0, _react.createCont
  * 
  * A context provider for supplying the onClose function to the FlyoutHeader.
  */
-var OnCloseProvider = exports.OnCloseProvider = OnCloseContext.Provider;
+var OnCloseProvider = exports.OnCloseProvider = OnCloseContext.Provider;
+
+/**
+ * __Title id context__
+ * 
+ * A context for storing the title id of the FlyoutMenuItem that is displayed in
+ * FlyoutHeader, and used as the aria-labelledby on the FlyoutMenuItemContent
+ * container.
+ */
+var TitleIdContext = exports.TitleIdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var useTitleId = exports.useTitleId = function useTitleId() {
+  return (0, _react.useContext)(TitleIdContext);
+};
+
+/**
+ * __Title id provider__
+ * 
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+var TitleIdContextProvider = exports.TitleIdContextProvider = TitleIdContext.Provider;

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

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experimental = require("@atlaskit/popup/experimental");
 var _menuListItem = require("../menu-list-item");
 var _flyoutMenuItemContext = require("./flyout-menu-item-context");
@@ -69,6 +70,7 @@ var FlyoutMenuItem = exports.FlyoutMenuItem = /*#__PURE__*/(0, _react.forwardRef
     ref: forwardedRef
   }, /*#__PURE__*/_react.default.createElement(_experimental.Popup, {
     id: id,
-    isOpen: isOpen
+    isOpen: isOpen,
+    role: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
   }, children))));
 });

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

@@ -5,7 +5,7 @@ import React, { useCallback, useContext } from 'react';
 import Heading from '@atlaskit/heading';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { CloseButton } from './close-button';
-import { OnCloseContext, SetIsOpenContext } from './flyout-menu-item-context';
+import { OnCloseContext, SetIsOpenContext, useTitleId } from './flyout-menu-item-context';
 const headerStyles = {
   root: "_zulp12x7 _bozg1b66 _85i512x7 _1e0c1txw _2lx21bp4",
   flex: "_zulppxbi _1bah1yb4 _2lx21sbv _4cvr1h6o _1bsb1osq _bozgv77o"
@@ -24,6 +24,7 @@ export const FlyoutHeader = props => {
     title,
     closeButtonLabel
   } = props;
+  const id = useTitleId();
   const setIsOpen = useContext(SetIsOpenContext);
   const onClose = useContext(OnCloseContext);
   const handleClose = useCallback(() => {
@@ -41,6 +42,7 @@ export const FlyoutHeader = props => {
     testId: testId && `${testId}--close-button`
   }), /*#__PURE__*/React.createElement(Heading, {
     size: "xsmall",
-    as: "span"
+    as: "span",
+    id: id
   }, title)), children);
 };

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

@@ -1,11 +1,11 @@
 /* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./flyout-menu-item-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupContent } from '@atlaskit/popup/experimental';
-import { OnCloseProvider, SetIsOpenContext } from './flyout-menu-item-context';
+import { OnCloseProvider, SetIsOpenContext, TitleIdContextProvider } from './flyout-menu-item-context';
 
 /**
  * The vertical offset in px to ensure the flyout container does not exceed the bounds of
@@ -42,6 +42,7 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setIsOpen(false);
   }, [setIsOpen, onClose]);
+  const titleId = useId();
   return /*#__PURE__*/React.createElement(PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
     onClose: handleClose,
@@ -54,7 +55,9 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
     shouldFitViewport: true,
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,
-    autoFocus: autoFocus
+    autoFocus: autoFocus,
+    role: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? "dialog" : undefined,
+    titleId: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? titleId : undefined
     /**
      * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
      *
@@ -75,11 +78,13 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
   }) => /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
     ref: forwardedRef,
     update: update
-  }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(OnCloseProvider, {
+  }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
+    value: titleId
+  }, /*#__PURE__*/React.createElement(OnCloseProvider, {
     value: () => onClose
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([flyoutMenuItemContentContainerStyles.container])
-  }, children)) : children));
+  }, children))) : children));
 });
 function createResizeObserver(update) {
   return new ResizeObserver(update);

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

@@ -29,4 +29,21 @@ export const OnCloseContext = /*#__PURE__*/createContext(null);
  * 
  * A context provider for supplying the onClose function to the FlyoutHeader.
  */
-export const OnCloseProvider = OnCloseContext.Provider;
+export const OnCloseProvider = OnCloseContext.Provider;
+
+/**
+ * __Title id context__
+ * 
+ * A context for storing the title id of the FlyoutMenuItem that is displayed in
+ * FlyoutHeader, and used as the aria-labelledby on the FlyoutMenuItemContent
+ * container.
+ */
+export const TitleIdContext = /*#__PURE__*/createContext(undefined);
+export const useTitleId = () => useContext(TitleIdContext);
+
+/**
+ * __Title id provider__
+ * 
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+export const TitleIdContextProvider = TitleIdContext.Provider;

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

@@ -1,6 +1,7 @@
 import React, { forwardRef, useEffect } from 'react';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popup } from '@atlaskit/popup/experimental';
 import { MenuListItem } from '../menu-list-item';
 import { IsOpenContext, SetIsOpenContext } from './flyout-menu-item-context';
@@ -54,6 +55,7 @@ export const FlyoutMenuItem = /*#__PURE__*/forwardRef(({
     ref: forwardedRef
   }, /*#__PURE__*/React.createElement(Popup, {
     id: id,
-    isOpen: isOpen
+    isOpen: isOpen,
+    role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
   }, children))));
 });

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

@@ -5,7 +5,7 @@ import React, { useCallback, useContext } from 'react';
 import Heading from '@atlaskit/heading';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { CloseButton } from './close-button';
-import { OnCloseContext, SetIsOpenContext } from './flyout-menu-item-context';
+import { OnCloseContext, SetIsOpenContext, useTitleId } from './flyout-menu-item-context';
 var headerStyles = {
   root: "_zulp12x7 _bozg1b66 _85i512x7 _1e0c1txw _2lx21bp4",
   flex: "_zulppxbi _1bah1yb4 _2lx21sbv _4cvr1h6o _1bsb1osq _bozgv77o"
@@ -22,6 +22,7 @@ export var FlyoutHeader = function FlyoutHeader(props) {
     testId = props.testId,
     title = props.title,
     closeButtonLabel = props.closeButtonLabel;
+  var id = useTitleId();
   var setIsOpen = useContext(SetIsOpenContext);
   var onClose = useContext(OnCloseContext);
   var handleClose = useCallback(function () {
@@ -39,6 +40,7 @@ export var FlyoutHeader = function FlyoutHeader(props) {
     testId: testId && "".concat(testId, "--close-button")
   }), /*#__PURE__*/React.createElement(Heading, {
     size: "xsmall",
-    as: "span"
+    as: "span",
+    id: id
   }, title)), children);
 };

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

@@ -2,11 +2,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./flyout-menu-item-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupContent } from '@atlaskit/popup/experimental';
-import { OnCloseProvider, SetIsOpenContext } from './flyout-menu-item-context';
+import { OnCloseProvider, SetIsOpenContext, TitleIdContextProvider } from './flyout-menu-item-context';
 
 /**
  * The vertical offset in px to ensure the flyout container does not exceed the bounds of
@@ -42,6 +42,7 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
     onClose === null || onClose === void 0 || onClose();
     setIsOpen(false);
   }, [setIsOpen, onClose]);
+  var titleId = useId();
   return /*#__PURE__*/React.createElement(PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
     onClose: handleClose,
@@ -54,7 +55,9 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
     shouldFitViewport: true,
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,
-    autoFocus: autoFocus
+    autoFocus: autoFocus,
+    role: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? "dialog" : undefined,
+    titleId: fg("platform_dst_nav4_flyout_menu_slots_close_button") ? titleId : undefined
     /**
      * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
      *
@@ -75,13 +78,15 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
     return /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
       ref: forwardedRef,
       update: update
-    }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(OnCloseProvider, {
+    }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
+      value: titleId
+    }, /*#__PURE__*/React.createElement(OnCloseProvider, {
       value: function value() {
         return onClose;
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: ax([flyoutMenuItemContentContainerStyles.container])
-    }, children)) : children);
+    }, children))) : children);
   });
 });
 function createResizeObserver(update) {

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

@@ -33,4 +33,23 @@ export var OnCloseContext = /*#__PURE__*/createContext(null);
  * 
  * A context provider for supplying the onClose function to the FlyoutHeader.
  */
-export var OnCloseProvider = OnCloseContext.Provider;
+export var OnCloseProvider = OnCloseContext.Provider;
+
+/**
+ * __Title id context__
+ * 
+ * A context for storing the title id of the FlyoutMenuItem that is displayed in
+ * FlyoutHeader, and used as the aria-labelledby on the FlyoutMenuItemContent
+ * container.
+ */
+export var TitleIdContext = /*#__PURE__*/createContext(undefined);
+export var useTitleId = function useTitleId() {
+  return useContext(TitleIdContext);
+};
+
+/**
+ * __Title id provider__
+ * 
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+export var TitleIdContextProvider = TitleIdContext.Provider;

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

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { forwardRef, useEffect } from 'react';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popup } from '@atlaskit/popup/experimental';
 import { MenuListItem } from '../menu-list-item';
 import { IsOpenContext, SetIsOpenContext } from './flyout-menu-item-context';
@@ -60,6 +61,7 @@ export var FlyoutMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
     ref: forwardedRef
   }, /*#__PURE__*/React.createElement(Popup, {
     id: id,
-    isOpen: isOpen
+    isOpen: isOpen,
+    role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
   }, children))));
 });

package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item-context.d.ts

@@ -24,3 +24,18 @@ export declare const OnCloseContext: import("react").Context<(() => void) | null
  * A context provider for supplying the onClose function to the FlyoutHeader.
  */
 export declare const OnCloseProvider: import("react").Provider<(() => void) | null | undefined>;
+/**
+ * __Title id context__
+ *
+ * A context for storing the title id of the FlyoutMenuItem that is displayed in
+ * FlyoutHeader, and used as the aria-labelledby on the FlyoutMenuItemContent
+ * container.
+ */
+export declare const TitleIdContext: import("react").Context<string | undefined>;
+export declare const useTitleId: () => string | undefined;
+/**
+ * __Title id provider__
+ *
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+export declare const TitleIdContextProvider: import("react").Provider<string | undefined>;

package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-menu-item-context.d.ts

@@ -24,3 +24,18 @@ export declare const OnCloseContext: import("react").Context<(() => void) | null
  * A context provider for supplying the onClose function to the FlyoutHeader.
  */
 export declare const OnCloseProvider: import("react").Provider<(() => void) | null | undefined>;
+/**
+ * __Title id context__
+ *
+ * A context for storing the title id of the FlyoutMenuItem that is displayed in
+ * FlyoutHeader, and used as the aria-labelledby on the FlyoutMenuItemContent
+ * container.
+ */
+export declare const TitleIdContext: import("react").Context<string | undefined>;
+export declare const useTitleId: () => string | undefined;
+/**
+ * __Title id provider__
+ *
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+export declare const TitleIdContextProvider: import("react").Provider<string | undefined>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.16.0",
+	"version": "5.17.0",
 	"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/layering": "^3.5.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.10.0",
+		"@atlaskit/popup": "^4.11.0",
 		"@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",
@@ -102,9 +102,9 @@
 		"@atlaskit/badge": "^18.3.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
-		"@atlaskit/dropdown-menu": "^16.3.0",
+		"@atlaskit/dropdown-menu": "^16.4.0",
 		"@atlaskit/form": "^15.2.0",
-		"@atlaskit/link": "^3.2.0",
+		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/lozenge": "^13.3.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/modal-dialog": "^14.9.0",