@atlaskit/reactions 35.11.6 → 35.11.8

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @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
+
+- [`bc98a973e0455`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bc98a973e0455) -
+  [ux] A11Y-31804: Add semantic list markup to the hoverable reaction selector gated by experiment
+  `platform_a11y_reactions_hover_selector_list`
+- Updated dependencies
+
 ## 35.11.6
 
 ### Patch Changes

package/afm-cc/tsconfig.json

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

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.5";
+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/cjs/components/Selector.compiled.css

@@ -1,10 +1,12 @@
 ._zulp1b66{gap:var(--ds-space-050,4px)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1e0c1o8l{display:inline-block}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1p3lnqa1{border-left-style:solid}
 ._1pgl1ytf{animation-timing-function:ease-in-out}
+._2hwxze3t{margin-right:var(--ds-space-0,0)}
 ._2mzuglyw{list-style-type:none}
 ._4t3i1tcg{height:24px}
 ._5sag6ebc{animation-duration:.15s}
@@ -13,6 +15,7 @@
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._j7hqordv{animation-name:k12q5x3s}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
 ._t6vde4h9{border-left-width:var(--ds-border-width,1px)}
 ._tzy4idpf{opacity:0}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/components/Selector.js

@@ -13,6 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _i18n = require("../shared/i18n");
@@ -25,7 +26,8 @@ var styles = {
   container: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
   emojiContainer: "_2mzuglyw _19pkze3t",
   separator: "_t6vde4h9 _5wra1l7x _1p3lnqa1 _ahbq1b66 _12l2u2gc _4t3i1tcg _1e0c1o8l",
-  hoverableReactionPickerSelectorContainer: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
+  hoverableReactionPickerSelectorContainer: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  hoverableReactionPickerSelectorList: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _2mzuglyw"
 };
 var revealAnimation = null;
 var revealStyle = null;
@@ -65,6 +67,7 @@ var Selector = exports.Selector = function Selector(_ref2) {
     setIsTeamojiPickerRefreshEnabled((0, _expValEquals.expValEquals)('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', true));
   }, []);
   var quickReactionEmojiIds = pickerQuickReactionEmojiIds !== null && pickerQuickReactionEmojiIds !== void 0 ? pickerQuickReactionEmojiIds : (0, _constants.getDefaultReactions)(isTeamojiPickerRefreshEnabled);
+  var shouldRenderHoverableReactionPickerSelectorList = hoverableReactionPickerSelector && (0, _isExperimentEnabled.isExperimentEnabled)('platform_a11y_reactions_hover_selector_list');
 
   /**
    * Render the default emoji icon
@@ -72,7 +75,7 @@ var Selector = exports.Selector = function Selector(_ref2) {
    * @param index location of the emoji in the array
    */
   var renderEmoji = function renderEmoji(emoji, index) {
-    var _emoji$id, _emoji$id2;
+    var _emoji$id, _emoji$id2, _emoji$id3;
     var emojiButtonAndTooltip = /*#__PURE__*/React.createElement(_tooltip.default, {
       key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
       content: emoji.shortName
@@ -82,8 +85,12 @@ var Selector = exports.Selector = function Selector(_ref2) {
       onClick: onSelection,
       hoverableReactionPickerSelectorEmoji: hoverableReactionPickerSelector
     }));
-    return hoverableReactionPickerSelector ? emojiButtonAndTooltip : /*#__PURE__*/React.createElement(Reveal, {
+    return hoverableReactionPickerSelector ? shouldRenderHoverableReactionPickerSelectorList ? /*#__PURE__*/React.createElement(_compiled.Box, {
+      as: "li",
       key: (_emoji$id2 = emoji.id) !== null && _emoji$id2 !== void 0 ? _emoji$id2 : emoji.shortName,
+      xcss: styles.emojiContainer
+    }, emojiButtonAndTooltip) : emojiButtonAndTooltip : /*#__PURE__*/React.createElement(Reveal, {
+      key: (_emoji$id3 = emoji.id) !== null && _emoji$id3 !== void 0 ? _emoji$id3 : emoji.shortName,
       testId: RENDER_SELECTOR_TESTID
     }, emojiButtonAndTooltip);
   };
@@ -97,8 +104,9 @@ var Selector = exports.Selector = function Selector(_ref2) {
       reactionPickerTriggerText: _i18n.messages.addNewReaction.defaultMessage,
       fullWidthSelectorTrayReactionPickerTrigger: true
     }), /*#__PURE__*/React.createElement(_compiled.Inline, {
+      as: shouldRenderHoverableReactionPickerSelectorList ? 'ul' : undefined,
       alignBlock: "center",
-      xcss: hoverableReactionPickerSelector ? styles.hoverableReactionPickerSelectorContainer : styles.container
+      xcss: shouldRenderHoverableReactionPickerSelectorList ? styles.hoverableReactionPickerSelectorList : styles.hoverableReactionPickerSelectorContainer
     }, quickReactionEmojiIds.map(renderEmoji)));
   }
   var isSelectorListMarkupFixEnabled = (0, _expValEquals.expValEquals)('platform_a11y_fixes_reactions_selector_list', 'isEnabled', true);

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.5";
+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/es2019/components/Selector.compiled.css

@@ -1,10 +1,12 @@
 ._zulp1b66{gap:var(--ds-space-050,4px)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1e0c1o8l{display:inline-block}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1p3lnqa1{border-left-style:solid}
 ._1pgl1ytf{animation-timing-function:ease-in-out}
+._2hwxze3t{margin-right:var(--ds-space-0,0)}
 ._2mzuglyw{list-style-type:none}
 ._4t3i1tcg{height:24px}
 ._5sag6ebc{animation-duration:.15s}
@@ -13,6 +15,7 @@
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._j7hqordv{animation-name:k12q5x3s}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
 ._t6vde4h9{border-left-width:var(--ds-border-width,1px)}
 ._tzy4idpf{opacity:0}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/components/Selector.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, useEffect, useState } from 'react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../shared/i18n';
@@ -15,7 +16,8 @@ const styles = {
   container: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
   emojiContainer: "_2mzuglyw _19pkze3t",
   separator: "_t6vde4h9 _5wra1l7x _1p3lnqa1 _ahbq1b66 _12l2u2gc _4t3i1tcg _1e0c1o8l",
-  hoverableReactionPickerSelectorContainer: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
+  hoverableReactionPickerSelectorContainer: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  hoverableReactionPickerSelectorList: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _2mzuglyw"
 };
 const revealAnimation = null;
 const revealStyle = null;
@@ -53,6 +55,7 @@ export const Selector = ({
     setIsTeamojiPickerRefreshEnabled(expValEquals('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', true));
   }, []);
   const quickReactionEmojiIds = pickerQuickReactionEmojiIds !== null && pickerQuickReactionEmojiIds !== void 0 ? pickerQuickReactionEmojiIds : getDefaultReactions(isTeamojiPickerRefreshEnabled);
+  const shouldRenderHoverableReactionPickerSelectorList = hoverableReactionPickerSelector && isExperimentEnabled('platform_a11y_reactions_hover_selector_list');
 
   /**
    * Render the default emoji icon
@@ -60,7 +63,7 @@ export const Selector = ({
    * @param index location of the emoji in the array
    */
   const renderEmoji = (emoji, index) => {
-    var _emoji$id, _emoji$id2;
+    var _emoji$id, _emoji$id2, _emoji$id3;
     const emojiButtonAndTooltip = /*#__PURE__*/React.createElement(Tooltip, {
       key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
       content: emoji.shortName
@@ -70,8 +73,12 @@ export const Selector = ({
       onClick: onSelection,
       hoverableReactionPickerSelectorEmoji: hoverableReactionPickerSelector
     }));
-    return hoverableReactionPickerSelector ? emojiButtonAndTooltip : /*#__PURE__*/React.createElement(Reveal, {
+    return hoverableReactionPickerSelector ? shouldRenderHoverableReactionPickerSelectorList ? /*#__PURE__*/React.createElement(Box, {
+      as: "li",
       key: (_emoji$id2 = emoji.id) !== null && _emoji$id2 !== void 0 ? _emoji$id2 : emoji.shortName,
+      xcss: styles.emojiContainer
+    }, emojiButtonAndTooltip) : emojiButtonAndTooltip : /*#__PURE__*/React.createElement(Reveal, {
+      key: (_emoji$id3 = emoji.id) !== null && _emoji$id3 !== void 0 ? _emoji$id3 : emoji.shortName,
       testId: RENDER_SELECTOR_TESTID
     }, emojiButtonAndTooltip);
   };
@@ -85,8 +92,9 @@ export const Selector = ({
       reactionPickerTriggerText: messages.addNewReaction.defaultMessage,
       fullWidthSelectorTrayReactionPickerTrigger: true
     }), /*#__PURE__*/React.createElement(Inline, {
+      as: shouldRenderHoverableReactionPickerSelectorList ? 'ul' : undefined,
       alignBlock: "center",
-      xcss: hoverableReactionPickerSelector ? styles.hoverableReactionPickerSelectorContainer : styles.container
+      xcss: shouldRenderHoverableReactionPickerSelectorList ? styles.hoverableReactionPickerSelectorList : styles.hoverableReactionPickerSelectorContainer
     }, quickReactionEmojiIds.map(renderEmoji)));
   }
   const isSelectorListMarkupFixEnabled = expValEquals('platform_a11y_fixes_reactions_selector_list', 'isEnabled', true);

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.5";
+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/dist/esm/components/Selector.compiled.css

@@ -1,10 +1,12 @@
 ._zulp1b66{gap:var(--ds-space-050,4px)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1e0c1o8l{display:inline-block}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1p3lnqa1{border-left-style:solid}
 ._1pgl1ytf{animation-timing-function:ease-in-out}
+._2hwxze3t{margin-right:var(--ds-space-0,0)}
 ._2mzuglyw{list-style-type:none}
 ._4t3i1tcg{height:24px}
 ._5sag6ebc{animation-duration:.15s}
@@ -13,6 +15,7 @@
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._j7hqordv{animation-name:k12q5x3s}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
 ._t6vde4h9{border-left-width:var(--ds-border-width,1px)}
 ._tzy4idpf{opacity:0}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/esm/components/Selector.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, useEffect, useState } from 'react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../shared/i18n';
@@ -16,7 +17,8 @@ var styles = {
   container: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
   emojiContainer: "_2mzuglyw _19pkze3t",
   separator: "_t6vde4h9 _5wra1l7x _1p3lnqa1 _ahbq1b66 _12l2u2gc _4t3i1tcg _1e0c1o8l",
-  hoverableReactionPickerSelectorContainer: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
+  hoverableReactionPickerSelectorContainer: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  hoverableReactionPickerSelectorList: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _2mzuglyw"
 };
 var revealAnimation = null;
 var revealStyle = null;
@@ -56,6 +58,7 @@ export var Selector = function Selector(_ref2) {
     setIsTeamojiPickerRefreshEnabled(expValEquals('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', true));
   }, []);
   var quickReactionEmojiIds = pickerQuickReactionEmojiIds !== null && pickerQuickReactionEmojiIds !== void 0 ? pickerQuickReactionEmojiIds : getDefaultReactions(isTeamojiPickerRefreshEnabled);
+  var shouldRenderHoverableReactionPickerSelectorList = hoverableReactionPickerSelector && isExperimentEnabled('platform_a11y_reactions_hover_selector_list');
 
   /**
    * Render the default emoji icon
@@ -63,7 +66,7 @@ export var Selector = function Selector(_ref2) {
    * @param index location of the emoji in the array
    */
   var renderEmoji = function renderEmoji(emoji, index) {
-    var _emoji$id, _emoji$id2;
+    var _emoji$id, _emoji$id2, _emoji$id3;
     var emojiButtonAndTooltip = /*#__PURE__*/React.createElement(Tooltip, {
       key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
       content: emoji.shortName
@@ -73,8 +76,12 @@ export var Selector = function Selector(_ref2) {
       onClick: onSelection,
       hoverableReactionPickerSelectorEmoji: hoverableReactionPickerSelector
     }));
-    return hoverableReactionPickerSelector ? emojiButtonAndTooltip : /*#__PURE__*/React.createElement(Reveal, {
+    return hoverableReactionPickerSelector ? shouldRenderHoverableReactionPickerSelectorList ? /*#__PURE__*/React.createElement(Box, {
+      as: "li",
       key: (_emoji$id2 = emoji.id) !== null && _emoji$id2 !== void 0 ? _emoji$id2 : emoji.shortName,
+      xcss: styles.emojiContainer
+    }, emojiButtonAndTooltip) : emojiButtonAndTooltip : /*#__PURE__*/React.createElement(Reveal, {
+      key: (_emoji$id3 = emoji.id) !== null && _emoji$id3 !== void 0 ? _emoji$id3 : emoji.shortName,
       testId: RENDER_SELECTOR_TESTID
     }, emojiButtonAndTooltip);
   };
@@ -88,8 +95,9 @@ export var Selector = function Selector(_ref2) {
       reactionPickerTriggerText: messages.addNewReaction.defaultMessage,
       fullWidthSelectorTrayReactionPickerTrigger: true
     }), /*#__PURE__*/React.createElement(Inline, {
+      as: shouldRenderHoverableReactionPickerSelectorList ? 'ul' : undefined,
       alignBlock: "center",
-      xcss: hoverableReactionPickerSelector ? styles.hoverableReactionPickerSelectorContainer : styles.container
+      xcss: shouldRenderHoverableReactionPickerSelectorList ? styles.hoverableReactionPickerSelectorList : styles.hoverableReactionPickerSelectorContainer
     }, quickReactionEmojiIds.map(renderEmoji)));
   }
   var isSelectorListMarkupFixEnabled = expValEquals('platform_a11y_fixes_reactions_selector_list', 'isEnabled', true);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "35.11.6",
+	"version": "35.11.8",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,21 +40,22 @@
 		"@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",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/popper": "^8.5.0",
-		"@atlaskit/popup": "^5.2.0",
-		"@atlaskit/portal": "^6.1.0",
+		"@atlaskit/popper": "^9.0.0",
+		"@atlaskit/popup": "^6.0.0",
+		"@atlaskit/portal": "^6.2.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-ufo": "^7.3.0",
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/tabs": "^20.1.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^138.0.0",
+		"@atlaskit/tmp-editor-statsig": "^139.0.0",
 		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/ufo": "^1.0.0",
@@ -73,6 +74,7 @@
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/util-data-test": "^19.1.0",
 		"@atlassian/a11y-jest-testing": "^0.14.0",
+		"@atlassian/experiment-test-utils": "^0.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
@@ -139,6 +141,15 @@
 		},
 		"platform_a11y_fixes_reaction_emoji": {
 			"type": "boolean"
+		},
+		"a11y_reactions_reading_order": {
+			"type": "boolean"
+		}
+	},
+	"platform-experiments": {
+		"platform_a11y_reactions_hover_selector_list": {
+			"param": "isEnabled",
+			"defaultValue": false
 		}
 	},
 	"sideEffects": [