@atlaskit/reactions 35.11.7 → 35.11.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/reactions
 
+## 35.11.8
+
+### Patch Changes
+
+- [`603c0eaa6238b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/603c0eaa6238b) -
+  Fix reading order of the reaction picker for assistive technologies. When the
+  `a11y_reactions_reading_order` gate is enabled, the expanded picker panel is rendered inline as a
+  DOM sibling directly after the trigger button instead of in a portal at the end of the document,
+  so screen readers encounter the expanded content in the correct order. Visual placement is
+  unchanged as the popper continues to position with `position: fixed`.
+- Updated dependencies
+
 ## 35.11.7
 
 ### Patch Changes

package/afm-products/tsconfig.json

@@ -61,6 +61,9 @@
 		{
 			"path": "../../../design-system/motion/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-experiments/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags/afm-products/tsconfig.json"
 		},

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 var packageName = "@atlaskit/reactions";
-var packageVersion = "35.11.6";
+var packageVersion = "35.11.7";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionPicker.js

@@ -241,7 +241,11 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     }
     onOpen();
     // ufo reactions picker opened success
-    _ufo.PickerRender.success();
+    _ufo.PickerRender.success({
+      metadata: {
+        readingOrderInline: (0, _platformFeatureFlags.fg)('a11y_reactions_reading_order')
+      }
+    });
   }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isTriggerClicked, setIsTriggerClicked, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
   var handleTriggerMouseEnter = (0, _react.useCallback)(function () {
     if (hoverableReactionPicker) {
@@ -284,6 +288,33 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     close();
     onCancel();
   };
+  var pickerPanel = /*#__PURE__*/_react.default.createElement(PopperWrapper, {
+    settings: settings,
+    popperModifiers: popperModifiers,
+    isOpen: isPopupTrayOpen,
+    onClose: onClose,
+    triggerRef: triggerRef,
+    zIndex: reactionPickerPopperZIndex || _constants.layers.flag()
+  }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: additionalStyles.selectorContainer,
+    onMouseEnter: handlePopupMouseEnter,
+    onMouseLeave: handlePopupMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    size: emojiPickerSize
+  })) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: additionalStyles.selectorContainer,
+    onMouseEnter: handlePopupMouseEnter,
+    onMouseLeave: handlePopupMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_Selector.Selector, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    showMore: allowAllEmojis,
+    onMoreClick: onSelectMoreClick,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    hoverableReactionPickerSelector: hoverableReactionPicker
+  })));
   return /*#__PURE__*/_react.default.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: (0, _runtime.ax)(["_s7n4nkob _1pra1o8l", wrapperClassName]),
@@ -328,35 +359,14 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         emojiPickerSize: emojiPickerSize
       }))
     );
-  }), isPopupTrayOpen && /*#__PURE__*/_react.default.createElement(_portal.default, {
-    zIndex: reactionPickerPopperZIndex || _constants.layers.flag()
-  }, /*#__PURE__*/_react.default.createElement(PopperWrapper, {
-    settings: settings,
-    popperModifiers: popperModifiers,
-    isOpen: isPopupTrayOpen,
-    onClose: onClose,
-    triggerRef: triggerRef,
+  }), isPopupTrayOpen && ((0, _platformFeatureFlags.fg)('a11y_reactions_reading_order') ?
+  // Render the picker panel inline (a DOM sibling directly after the trigger)
+  // so assistive technologies encounter the expanded content in the correct
+  // reading order. The popper still positions with `position: fixed`, so the
+  // visual placement is unchanged.
+  pickerPanel : /*#__PURE__*/_react.default.createElement(_portal.default, {
     zIndex: reactionPickerPopperZIndex || _constants.layers.flag()
-  }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: additionalStyles.selectorContainer,
-    onMouseEnter: handlePopupMouseEnter,
-    onMouseLeave: handlePopupMouseLeave
-  }, /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
-    emojiProvider: emojiProvider,
-    onSelection: onEmojiSelected,
-    size: emojiPickerSize
-  })) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: additionalStyles.selectorContainer,
-    onMouseEnter: handlePopupMouseEnter,
-    onMouseLeave: handlePopupMouseLeave
-  }, /*#__PURE__*/_react.default.createElement(_Selector.Selector, {
-    emojiProvider: emojiProvider,
-    onSelection: onEmojiSelected,
-    showMore: allowAllEmojis,
-    onMoreClick: onSelectMoreClick,
-    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
-    hoverableReactionPickerSelector: hoverableReactionPicker
-  }))))));
+  }, pickerPanel))));
 });
 var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
   var triggerRef = props.triggerRef,

package/dist/es2019/analytics/index.js

@@ -2,7 +2,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "35.11.6";
+const packageVersion = "35.11.7";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/ReactionPicker.js

@@ -198,7 +198,11 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     }
     onOpen();
     // ufo reactions picker opened success
-    PickerRender.success();
+    PickerRender.success({
+      metadata: {
+        readingOrderInline: fg('a11y_reactions_reading_order')
+      }
+    });
   }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isTriggerClicked, setIsTriggerClicked, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
   const handleTriggerMouseEnter = useCallback(() => {
     if (hoverableReactionPicker) {
@@ -241,6 +245,33 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     close();
     onCancel();
   };
+  const pickerPanel = /*#__PURE__*/React.createElement(PopperWrapper, {
+    settings: settings,
+    popperModifiers: popperModifiers,
+    isOpen: isPopupTrayOpen,
+    onClose: onClose,
+    triggerRef: triggerRef,
+    zIndex: reactionPickerPopperZIndex || layers.flag()
+  }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(Box, {
+    xcss: additionalStyles.selectorContainer,
+    onMouseEnter: handlePopupMouseEnter,
+    onMouseLeave: handlePopupMouseLeave
+  }, /*#__PURE__*/React.createElement(EmojiPicker, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    size: emojiPickerSize
+  })) : /*#__PURE__*/React.createElement(Box, {
+    xcss: additionalStyles.selectorContainer,
+    onMouseEnter: handlePopupMouseEnter,
+    onMouseLeave: handlePopupMouseLeave
+  }, /*#__PURE__*/React.createElement(Selector, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    showMore: allowAllEmojis,
+    onMoreClick: onSelectMoreClick,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    hoverableReactionPickerSelector: hoverableReactionPicker
+  })));
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ax(["_s7n4nkob _1pra1o8l", wrapperClassName]),
@@ -284,35 +315,14 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     reactionPickerTriggerText: reactionPickerTriggerText,
     isListItem: isListItem,
     emojiPickerSize: emojiPickerSize
-  }))), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
-    zIndex: reactionPickerPopperZIndex || layers.flag()
-  }, /*#__PURE__*/React.createElement(PopperWrapper, {
-    settings: settings,
-    popperModifiers: popperModifiers,
-    isOpen: isPopupTrayOpen,
-    onClose: onClose,
-    triggerRef: triggerRef,
+  }))), isPopupTrayOpen && (fg('a11y_reactions_reading_order') ?
+  // Render the picker panel inline (a DOM sibling directly after the trigger)
+  // so assistive technologies encounter the expanded content in the correct
+  // reading order. The popper still positions with `position: fixed`, so the
+  // visual placement is unchanged.
+  pickerPanel : /*#__PURE__*/React.createElement(Portal, {
     zIndex: reactionPickerPopperZIndex || layers.flag()
-  }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(Box, {
-    xcss: additionalStyles.selectorContainer,
-    onMouseEnter: handlePopupMouseEnter,
-    onMouseLeave: handlePopupMouseLeave
-  }, /*#__PURE__*/React.createElement(EmojiPicker, {
-    emojiProvider: emojiProvider,
-    onSelection: onEmojiSelected,
-    size: emojiPickerSize
-  })) : /*#__PURE__*/React.createElement(Box, {
-    xcss: additionalStyles.selectorContainer,
-    onMouseEnter: handlePopupMouseEnter,
-    onMouseLeave: handlePopupMouseLeave
-  }, /*#__PURE__*/React.createElement(Selector, {
-    emojiProvider: emojiProvider,
-    onSelection: onEmojiSelected,
-    showMore: allowAllEmojis,
-    onMoreClick: onSelectMoreClick,
-    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
-    hoverableReactionPickerSelector: hoverableReactionPicker
-  }))))));
+  }, pickerPanel))));
 });
 export const PopperWrapper = props => {
   const {

package/dist/esm/analytics/index.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "35.11.6";
+var packageVersion = "35.11.7";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/ReactionPicker.js

@@ -232,7 +232,11 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     }
     onOpen();
     // ufo reactions picker opened success
-    PickerRender.success();
+    PickerRender.success({
+      metadata: {
+        readingOrderInline: fg('a11y_reactions_reading_order')
+      }
+    });
   }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isTriggerClicked, setIsTriggerClicked, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
   var handleTriggerMouseEnter = useCallback(function () {
     if (hoverableReactionPicker) {
@@ -275,6 +279,33 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     close();
     onCancel();
   };
+  var pickerPanel = /*#__PURE__*/React.createElement(PopperWrapper, {
+    settings: settings,
+    popperModifiers: popperModifiers,
+    isOpen: isPopupTrayOpen,
+    onClose: onClose,
+    triggerRef: triggerRef,
+    zIndex: reactionPickerPopperZIndex || layers.flag()
+  }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(Box, {
+    xcss: additionalStyles.selectorContainer,
+    onMouseEnter: handlePopupMouseEnter,
+    onMouseLeave: handlePopupMouseLeave
+  }, /*#__PURE__*/React.createElement(EmojiPicker, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    size: emojiPickerSize
+  })) : /*#__PURE__*/React.createElement(Box, {
+    xcss: additionalStyles.selectorContainer,
+    onMouseEnter: handlePopupMouseEnter,
+    onMouseLeave: handlePopupMouseLeave
+  }, /*#__PURE__*/React.createElement(Selector, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    showMore: allowAllEmojis,
+    onMoreClick: onSelectMoreClick,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    hoverableReactionPickerSelector: hoverableReactionPicker
+  })));
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ax(["_s7n4nkob _1pra1o8l", wrapperClassName]),
@@ -319,35 +350,14 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         emojiPickerSize: emojiPickerSize
       }))
     );
-  }), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
-    zIndex: reactionPickerPopperZIndex || layers.flag()
-  }, /*#__PURE__*/React.createElement(PopperWrapper, {
-    settings: settings,
-    popperModifiers: popperModifiers,
-    isOpen: isPopupTrayOpen,
-    onClose: onClose,
-    triggerRef: triggerRef,
+  }), isPopupTrayOpen && (fg('a11y_reactions_reading_order') ?
+  // Render the picker panel inline (a DOM sibling directly after the trigger)
+  // so assistive technologies encounter the expanded content in the correct
+  // reading order. The popper still positions with `position: fixed`, so the
+  // visual placement is unchanged.
+  pickerPanel : /*#__PURE__*/React.createElement(Portal, {
     zIndex: reactionPickerPopperZIndex || layers.flag()
-  }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(Box, {
-    xcss: additionalStyles.selectorContainer,
-    onMouseEnter: handlePopupMouseEnter,
-    onMouseLeave: handlePopupMouseLeave
-  }, /*#__PURE__*/React.createElement(EmojiPicker, {
-    emojiProvider: emojiProvider,
-    onSelection: onEmojiSelected,
-    size: emojiPickerSize
-  })) : /*#__PURE__*/React.createElement(Box, {
-    xcss: additionalStyles.selectorContainer,
-    onMouseEnter: handlePopupMouseEnter,
-    onMouseLeave: handlePopupMouseLeave
-  }, /*#__PURE__*/React.createElement(Selector, {
-    emojiProvider: emojiProvider,
-    onSelection: onEmojiSelected,
-    showMore: allowAllEmojis,
-    onMoreClick: onSelectMoreClick,
-    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
-    hoverableReactionPickerSelector: hoverableReactionPicker
-  }))))));
+  }, pickerPanel))));
 });
 export var PopperWrapper = function PopperWrapper(props) {
   var triggerRef = props.triggerRef,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "35.11.7",
+	"version": "35.11.8",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
 		"@atlaskit/emoji": "^71.15.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/heading": "^7.0.0",
-		"@atlaskit/icon": "^37.2.0",
+		"@atlaskit/icon": "^37.3.0",
 		"@atlaskit/link": "^5.0.0",
 		"@atlaskit/modal-dialog": "^16.2.0",
 		"@atlaskit/motion": "^8.0.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/popper": "^9.0.0",
 		"@atlaskit/popup": "^6.0.0",
-		"@atlaskit/portal": "^6.1.0",
+		"@atlaskit/portal": "^6.2.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-ufo": "^7.3.0",
@@ -141,6 +141,9 @@
 		},
 		"platform_a11y_fixes_reaction_emoji": {
 			"type": "boolean"
+		},
+		"a11y_reactions_reading_order": {
+			"type": "boolean"
 		}
 	},
 	"platform-experiments": {