@atlaskit/popup 4.10.0 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/popup
 
+## 4.11.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.
+
 ## 4.10.0
 
 ### Minor Changes

package/dist/cjs/compositional/popup.js

@@ -13,6 +13,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _layering = require("@atlaskit/layering");
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _popperWrapper = _interopRequireDefault(require("../popper-wrapper"));
@@ -24,6 +25,7 @@ var IdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var TriggerRefContext = /*#__PURE__*/(0, _react.createContext)(null);
 var SetTriggerRefContext = /*#__PURE__*/(0, _react.createContext)(_noop.default);
 var EnsureIsInsidePopupContext = /*#__PURE__*/(0, _react.createContext)(false);
+var RoleContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 
 // Used to ensure popup sub-components are used within a Popup
 // and provide a useful error message if not.
@@ -54,14 +56,17 @@ var Popup = exports.Popup = function Popup(_ref) {
   var children = _ref.children,
     providedId = _ref.id,
     _ref$isOpen = _ref.isOpen,
-    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen;
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    role = _ref.role;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
   var generatedId = (0, _useId.useId)();
   var id = providedId || generatedId;
-  return /*#__PURE__*/_react.default.createElement(EnsureIsInsidePopupContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(RoleContext.Provider, {
+    value: role
+  }, /*#__PURE__*/_react.default.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true
   }, /*#__PURE__*/_react.default.createElement(IdContext.Provider, {
     value: id
@@ -71,7 +76,7 @@ var Popup = exports.Popup = function Popup(_ref) {
     value: setTriggerRef
   }, /*#__PURE__*/_react.default.createElement(IsOpenContext.Provider, {
     value: isOpen
-  }, /*#__PURE__*/_react.default.createElement(_popper.Manager, null, children))))));
+  }, /*#__PURE__*/_react.default.createElement(_popper.Manager, null, children)))))));
 };
 /**
  * __Popup trigger__
@@ -87,13 +92,14 @@ var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref2) {
   var setTriggerRef = (0, _react.useContext)(SetTriggerRefContext);
   var isOpen = (0, _react.useContext)(IsOpenContext);
   var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRefNew.useGetMemoizedMergedTriggerRefNew)();
+  var role = (0, _react.useContext)(RoleContext);
   return /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref3) {
     var ref = _ref3.ref;
     return children({
       ref: getMergedTriggerRef(ref, setTriggerRef),
       'aria-controls': id,
       'aria-expanded': isOpen,
-      'aria-haspopup': true
+      'aria-haspopup': role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
     });
   });
 };
@@ -148,7 +154,9 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
     shouldFitContainer = _ref4.shouldFitContainer,
     shouldFitViewport = _ref4.shouldFitViewport,
     _ref4$shouldDisableGp = _ref4.shouldDisableGpuAcceleration,
-    shouldDisableGpuAcceleration = _ref4$shouldDisableGp === void 0 ? false : _ref4$shouldDisableGp;
+    shouldDisableGpuAcceleration = _ref4$shouldDisableGp === void 0 ? false : _ref4$shouldDisableGp,
+    role = _ref4.role,
+    titleId = _ref4.titleId;
   useEnsureIsInsidePopup();
   var isOpen = (0, _react.useContext)(IsOpenContext);
   var id = (0, _react.useContext)(IdContext);
@@ -195,7 +203,9 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
     triggerRef: triggerRef,
     strategy: strategy,
     shouldFitViewport: shouldFitViewport,
-    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined
+    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
+    role: role,
+    titleId: titleId
   }));
   if (shouldRenderToParent) {
     return popperWrapper;

package/dist/es2019/compositional/popup.js

@@ -4,6 +4,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { Layering } from '@atlaskit/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import PopperWrapper from '../popper-wrapper';
@@ -14,6 +15,7 @@ const IdContext = /*#__PURE__*/createContext(undefined);
 const TriggerRefContext = /*#__PURE__*/createContext(null);
 const SetTriggerRefContext = /*#__PURE__*/createContext(noop);
 const EnsureIsInsidePopupContext = /*#__PURE__*/createContext(false);
+const RoleContext = /*#__PURE__*/createContext(undefined);
 
 // Used to ensure popup sub-components are used within a Popup
 // and provide a useful error message if not.
@@ -43,12 +45,15 @@ const useEnsureIsInsidePopup = () => {
 export const Popup = ({
   children,
   id: providedId,
-  isOpen = false
+  isOpen = false,
+  role
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const generatedId = useId();
   const id = providedId || generatedId;
-  return /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
+  return /*#__PURE__*/React.createElement(RoleContext.Provider, {
+    value: role
+  }, /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(IdContext.Provider, {
     value: id
@@ -58,7 +63,7 @@ export const Popup = ({
     value: setTriggerRef
   }, /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
     value: isOpen
-  }, /*#__PURE__*/React.createElement(Manager, null, children))))));
+  }, /*#__PURE__*/React.createElement(Manager, null, children)))))));
 };
 /**
  * __Popup trigger__
@@ -75,13 +80,14 @@ export const PopupTrigger = ({
   const setTriggerRef = useContext(SetTriggerRefContext);
   const isOpen = useContext(IsOpenContext);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRefNew();
+  const role = useContext(RoleContext);
   return /*#__PURE__*/React.createElement(Reference, null, ({
     ref
   }) => children({
     ref: getMergedTriggerRef(ref, setTriggerRef),
     'aria-controls': id,
     'aria-expanded': isOpen,
-    'aria-haspopup': true
+    'aria-haspopup': role === 'dialog' && fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
   }));
 };
 const defaultLayer = 400;
@@ -126,7 +132,9 @@ export const PopupContent = ({
   shouldDisableFocusLock = false,
   shouldFitContainer,
   shouldFitViewport,
-  shouldDisableGpuAcceleration = false
+  shouldDisableGpuAcceleration = false,
+  role,
+  titleId
 }) => {
   useEnsureIsInsidePopup();
   const isOpen = useContext(IsOpenContext);
@@ -175,7 +183,9 @@ export const PopupContent = ({
     triggerRef: triggerRef,
     strategy: strategy,
     shouldFitViewport: shouldFitViewport,
-    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined
+    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
+    role: role,
+    titleId: titleId
   }));
   if (shouldRenderToParent) {
     return popperWrapper;

package/dist/esm/compositional/popup.js

@@ -5,6 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { Layering } from '@atlaskit/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import PopperWrapper from '../popper-wrapper';
@@ -15,6 +16,7 @@ var IdContext = /*#__PURE__*/createContext(undefined);
 var TriggerRefContext = /*#__PURE__*/createContext(null);
 var SetTriggerRefContext = /*#__PURE__*/createContext(noop);
 var EnsureIsInsidePopupContext = /*#__PURE__*/createContext(false);
+var RoleContext = /*#__PURE__*/createContext(undefined);
 
 // Used to ensure popup sub-components are used within a Popup
 // and provide a useful error message if not.
@@ -45,14 +47,17 @@ export var Popup = function Popup(_ref) {
   var children = _ref.children,
     providedId = _ref.id,
     _ref$isOpen = _ref.isOpen,
-    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen;
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    role = _ref.role;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
   var generatedId = useId();
   var id = providedId || generatedId;
-  return /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
+  return /*#__PURE__*/React.createElement(RoleContext.Provider, {
+    value: role
+  }, /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(IdContext.Provider, {
     value: id
@@ -62,7 +67,7 @@ export var Popup = function Popup(_ref) {
     value: setTriggerRef
   }, /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
     value: isOpen
-  }, /*#__PURE__*/React.createElement(Manager, null, children))))));
+  }, /*#__PURE__*/React.createElement(Manager, null, children)))))));
 };
 /**
  * __Popup trigger__
@@ -78,13 +83,14 @@ export var PopupTrigger = function PopupTrigger(_ref2) {
   var setTriggerRef = useContext(SetTriggerRefContext);
   var isOpen = useContext(IsOpenContext);
   var getMergedTriggerRef = useGetMemoizedMergedTriggerRefNew();
+  var role = useContext(RoleContext);
   return /*#__PURE__*/React.createElement(Reference, null, function (_ref3) {
     var ref = _ref3.ref;
     return children({
       ref: getMergedTriggerRef(ref, setTriggerRef),
       'aria-controls': id,
       'aria-expanded': isOpen,
-      'aria-haspopup': true
+      'aria-haspopup': role === 'dialog' && fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
     });
   });
 };
@@ -139,7 +145,9 @@ export var PopupContent = function PopupContent(_ref4) {
     shouldFitContainer = _ref4.shouldFitContainer,
     shouldFitViewport = _ref4.shouldFitViewport,
     _ref4$shouldDisableGp = _ref4.shouldDisableGpuAcceleration,
-    shouldDisableGpuAcceleration = _ref4$shouldDisableGp === void 0 ? false : _ref4$shouldDisableGp;
+    shouldDisableGpuAcceleration = _ref4$shouldDisableGp === void 0 ? false : _ref4$shouldDisableGp,
+    role = _ref4.role,
+    titleId = _ref4.titleId;
   useEnsureIsInsidePopup();
   var isOpen = useContext(IsOpenContext);
   var id = useContext(IdContext);
@@ -186,7 +194,9 @@ export var PopupContent = function PopupContent(_ref4) {
     triggerRef: triggerRef,
     strategy: strategy,
     shouldFitViewport: shouldFitViewport,
-    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined
+    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
+    role: role,
+    titleId: titleId
   }));
   if (shouldRenderToParent) {
     return popperWrapper;

package/dist/types/compositional/popup.d.ts

@@ -4,6 +4,7 @@ export type PopupProps = {
     children: React.ReactNode;
     isOpen?: boolean;
     id?: string;
+    role?: 'dialog';
 };
 /**
  * __Popup__
@@ -24,7 +25,7 @@ export type PopupProps = {
  * </Popup>
  * ```
  */
-export declare const Popup: ({ children, id: providedId, isOpen, }: PopupProps) => React.JSX.Element;
+export declare const Popup: ({ children, id: providedId, isOpen, role }: PopupProps) => React.JSX.Element;
 export type PopupTriggerProps = {
     children: (props: TriggerProps) => React.ReactNode;
 };
@@ -36,7 +37,7 @@ export type PopupTriggerProps = {
  * It must be a child of the Popup component.
  */
 export declare const PopupTrigger: ({ children }: PopupTriggerProps) => React.JSX.Element;
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'titleId'> & {
     children: (props: ContentProps) => React.ReactNode;
     /**
      * ___Use with caution___
@@ -67,5 +68,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, }: PopupContentProps) => React.JSX.Element | null;
+export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId }: PopupContentProps) => React.JSX.Element | null;
 export {};

package/dist/types-ts4.5/compositional/popup.d.ts

@@ -4,6 +4,7 @@ export type PopupProps = {
     children: React.ReactNode;
     isOpen?: boolean;
     id?: string;
+    role?: 'dialog';
 };
 /**
  * __Popup__
@@ -24,7 +25,7 @@ export type PopupProps = {
  * </Popup>
  * ```
  */
-export declare const Popup: ({ children, id: providedId, isOpen, }: PopupProps) => React.JSX.Element;
+export declare const Popup: ({ children, id: providedId, isOpen, role }: PopupProps) => React.JSX.Element;
 export type PopupTriggerProps = {
     children: (props: TriggerProps) => React.ReactNode;
 };
@@ -36,7 +37,7 @@ export type PopupTriggerProps = {
  * It must be a child of the Popup component.
  */
 export declare const PopupTrigger: ({ children }: PopupTriggerProps) => React.JSX.Element;
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'titleId'> & {
     children: (props: ContentProps) => React.ReactNode;
     /**
      * ___Use with caution___
@@ -67,5 +68,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, }: PopupContentProps) => React.JSX.Element | null;
+export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId }: PopupContentProps) => React.JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.10.0",
+	"version": "4.11.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -61,7 +61,7 @@
 		"@atlaskit/form": "^15.2.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^29.3.0",
-		"@atlaskit/link": "^3.2.0",
+		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/modal-dialog": "^14.9.0",
 		"@atlaskit/section-message": "^8.11.0",
 		"@atlaskit/textfield": "^8.2.0",
@@ -116,6 +116,9 @@
 		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
+		},
+		"platform_dst_nav4_flyout_menu_slots_close_button": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"