@atlaskit/reactions 35.12.9 → 35.12.11

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/reactions
 
+## 35.12.11
+
+### Patch Changes
+
+- [`c93de6bde10fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c93de6bde10fd) -
+  Cleanup feature gate `platform_ceps-5921-a11y-fix-reactions`. The reaction picker panel now always
+  uses non-modal dialog semantics for assistive technology.
+- Updated dependencies
+
+## 35.12.10
+
+### Patch Changes
+
+- [`26d8af3468aee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26d8af3468aee) -
+  Group added reaction controls with an accessible name behind
+  platform_reactions_a11y_group_added_reactions
+
 ## 35.12.9
 
 ### Patch Changes

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.12.8";
+var packageVersion = "35.12.10";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionPicker.js

@@ -382,11 +382,6 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
     setPopupRef = _useState12[1];
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  /**
-   * Expose the reaction picker panel as a non-modal dialog to assistive technology.
-   * When disabled, fall back to the previous `role="group"` semantics.
-   */
-  var isDialogRoleEnabled = (0, _platformFeatureFlags.fg)('platform_ceps-5921-a11y-fix-reactions');
   /**
    * add focus lock to popup
    */
@@ -414,8 +409,7 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
       style = _ref3.style,
       update = _ref3.update;
     return /*#__PURE__*/_react.default.createElement("div", {
-      role: isDialogRoleEnabled ? 'dialog' : 'group',
-      "aria-modal": isDialogRoleEnabled ? false : undefined,
+      role: "dialog",
       "aria-label": formatMessage(_i18n.messages.popperWrapperLabel),
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,

package/dist/cjs/components/Reactions.js

@@ -18,7 +18,7 @@ var _reactIntl = require("react-intl");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _modalDialog = require("@atlaskit/modal-dialog");
 var _segment = _interopRequireDefault(require("@atlaskit/react-ufo/segment"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _analytics = require("../analytics");
 var _constants = require("../shared/constants");
 var _i18n = require("../shared/i18n");
@@ -155,6 +155,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _ref$renderParticleEf = _ref.renderParticleEffectOnSummaryView,
     renderParticleEffectOnSummaryView = _ref$renderParticleEf === void 0 ? false : _ref$renderParticleEf,
     reactionPickerPopperZIndex = _ref.reactionPickerPopperZIndex;
+  var intl = (0, _reactIntl.useIntl)();
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -335,6 +336,39 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       }
     });
   };
+  var renderReactionItem = function renderReactionItem(reaction, rootElement) {
+    return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
+      key: reaction.emojiId,
+      rootElement: rootElement,
+      reaction: reaction,
+      emojiProvider: emojiProvider,
+      onClick: onReactionClick,
+      onMouseEnter: handleReactionMouseEnter,
+      onFocused: handleReactionFocused,
+      flash: flash[reaction.emojiId],
+      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+      showOpaqueBackground: showOpaqueBackground,
+      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+      handleOpenReactionsDialog: _handleOpenReactionsDialog,
+      isViewOnly: isViewOnly,
+      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
+      optimisticImageURL: (0, _fg.fg)('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
+    });
+  };
+  var renderReactionGroup = function renderReactionGroup() {
+    var shouldRenderReactionList = (0, _fg.fg)('jfp_a11y_team_comment_actions_semantic');
+    return /*#__PURE__*/_react.default.createElement("div", {
+      role: "group",
+      "aria-label": intl.formatMessage(_i18n.messages.addedReaction),
+      className: (0, _runtime.ax)([!shouldRenderReactionList && "_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm", !shouldRenderReactionList && noWrap && "_1n261q9c"])
+    }, shouldRenderReactionList ? /*#__PURE__*/_react.default.createElement("ul", {
+      className: (0, _runtime.ax)(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm", noWrap && "_1n261q9c"])
+    }, memorizedReactions.map(function (reaction) {
+      return renderReactionItem(reaction, 'li');
+    })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, memorizedReactions.map(function (reaction) {
+      return renderReactionItem(reaction);
+    })));
+  };
   return /*#__PURE__*/_react.default.createElement(_segment.default, {
     name: "reactions"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -373,43 +407,12 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
-  })) : (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/_react.default.createElement("ul", {
+  })) : reactions.length > 0 && (0, _fg.fg)('platform_reactions_a11y_group_added_reactions') ? renderReactionGroup() : (0, _fg.fg)('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/_react.default.createElement("ul", {
     className: (0, _runtime.ax)(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm"])
   }, memorizedReactions.map(function (reaction) {
-    return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
-      key: reaction.emojiId,
-      rootElement: "li",
-      reaction: reaction,
-      emojiProvider: emojiProvider,
-      onClick: onReactionClick,
-      onMouseEnter: handleReactionMouseEnter,
-      onFocused: handleReactionFocused,
-      flash: flash[reaction.emojiId],
-      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
-      showOpaqueBackground: showOpaqueBackground,
-      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-      handleOpenReactionsDialog: _handleOpenReactionsDialog,
-      isViewOnly: isViewOnly,
-      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
-      optimisticImageURL: (0, _platformFeatureFlags.fg)('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
-    });
+    return renderReactionItem(reaction, 'li');
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, memorizedReactions.map(function (reaction) {
-    return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
-      key: reaction.emojiId,
-      reaction: reaction,
-      emojiProvider: emojiProvider,
-      onClick: onReactionClick,
-      onMouseEnter: handleReactionMouseEnter,
-      onFocused: handleReactionFocused,
-      flash: flash[reaction.emojiId],
-      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
-      showOpaqueBackground: showOpaqueBackground,
-      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-      handleOpenReactionsDialog: _handleOpenReactionsDialog,
-      isViewOnly: isViewOnly,
-      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
-      optimisticImageURL: (0, _platformFeatureFlags.fg)('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
-    });
+    return renderReactionItem(reaction);
   }))), shouldShowPicker && /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,

package/dist/cjs/shared/i18n.js

@@ -11,6 +11,11 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
     defaultMessage: 'Add reaction',
     description: 'Label for the add reaction button that opens the emoji picker for users to choose a reaction.'
   },
+  addedReaction: {
+    id: 'reactions.shared.i18n.addedReaction',
+    defaultMessage: 'Added reaction',
+    description: 'Accessible label for the group of added reaction toggle buttons displayed with a comment or content item.'
+  },
   addNewReaction: {
     id: 'fabric.reactions.add.new',
     defaultMessage: 'Add new',

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.12.8";
+const packageVersion = "35.12.10";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/ReactionPicker.js

@@ -338,11 +338,6 @@ export const PopperWrapper = props => {
   const {
     formatMessage
   } = useIntl();
-  /**
-   * Expose the reaction picker panel as a non-modal dialog to assistive technology.
-   * When disabled, fall back to the previous `role="group"` semantics.
-   */
-  const isDialogRoleEnabled = fg('platform_ceps-5921-a11y-fix-reactions');
   /**
    * add focus lock to popup
    */
@@ -369,8 +364,7 @@ export const PopperWrapper = props => {
     update
   }) => {
     return /*#__PURE__*/React.createElement("div", {
-      role: isDialogRoleEnabled ? 'dialog' : 'group',
-      "aria-modal": isDialogRoleEnabled ? false : undefined,
+      role: "dialog",
       "aria-label": formatMessage(messages.popperWrapperLabel),
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,

package/dist/es2019/components/Reactions.js

@@ -2,11 +2,11 @@
 import "./Reactions.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
 import UFOSegment from '@atlaskit/react-ufo/segment';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
 import { messages } from '../shared/i18n';
@@ -118,6 +118,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
   renderParticleEffectOnSummaryView = false,
   reactionPickerPopperZIndex
 }) => {
+  const intl = useIntl();
   const [selectedEmojiId, setSelectedEmojiId] = useState('');
   const [summaryViewParticleEffectEmojiId, setSummaryViewParticleEffectEmojiId] = useState(null);
 
@@ -281,6 +282,33 @@ export const Reactions = /*#__PURE__*/React.memo(({
       }
     });
   };
+  const renderReactionItem = (reaction, rootElement) => /*#__PURE__*/React.createElement(Reaction, {
+    key: reaction.emojiId,
+    rootElement: rootElement,
+    reaction: reaction,
+    emojiProvider: emojiProvider,
+    onClick: onReactionClick,
+    onMouseEnter: handleReactionMouseEnter,
+    onFocused: handleReactionFocused,
+    flash: flash[reaction.emojiId],
+    showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+    showOpaqueBackground: showOpaqueBackground,
+    allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+    handleOpenReactionsDialog: handleOpenReactionsDialog,
+    isViewOnly: isViewOnly,
+    showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
+    optimisticImageURL: fg('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
+  });
+  const renderReactionGroup = () => {
+    const shouldRenderReactionList = fg('jfp_a11y_team_comment_actions_semantic');
+    return /*#__PURE__*/React.createElement("div", {
+      role: "group",
+      "aria-label": intl.formatMessage(messages.addedReaction),
+      className: ax([!shouldRenderReactionList && "_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm", !shouldRenderReactionList && noWrap && "_1n261q9c"])
+    }, shouldRenderReactionList ? /*#__PURE__*/React.createElement("ul", {
+      className: ax(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm", noWrap && "_1n261q9c"])
+    }, memorizedReactions.map(reaction => renderReactionItem(reaction, 'li'))) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(reaction => renderReactionItem(reaction))));
+  };
   return /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions"
   }, /*#__PURE__*/React.createElement("div", {
@@ -317,40 +345,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
     summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
-  })) : fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("ul", {
+  })) : reactions.length > 0 && fg('platform_reactions_a11y_group_added_reactions') ? renderReactionGroup() : fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("ul", {
     className: ax(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm"])
-  }, memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
-    key: reaction.emojiId,
-    rootElement: "li",
-    reaction: reaction,
-    emojiProvider: emojiProvider,
-    onClick: onReactionClick,
-    onMouseEnter: handleReactionMouseEnter,
-    onFocused: handleReactionFocused,
-    flash: flash[reaction.emojiId],
-    showParticleEffect: particleEffectByEmoji[reaction.emojiId],
-    showOpaqueBackground: showOpaqueBackground,
-    allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-    handleOpenReactionsDialog: handleOpenReactionsDialog,
-    isViewOnly: isViewOnly,
-    showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
-    optimisticImageURL: fg('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
-  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
-    key: reaction.emojiId,
-    reaction: reaction,
-    emojiProvider: emojiProvider,
-    onClick: onReactionClick,
-    onMouseEnter: handleReactionMouseEnter,
-    onFocused: handleReactionFocused,
-    flash: flash[reaction.emojiId],
-    showParticleEffect: particleEffectByEmoji[reaction.emojiId],
-    showOpaqueBackground: showOpaqueBackground,
-    allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-    handleOpenReactionsDialog: handleOpenReactionsDialog,
-    isViewOnly: isViewOnly,
-    showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
-    optimisticImageURL: fg('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
-  })))), shouldShowPicker && /*#__PURE__*/React.createElement(ReactionPicker, {
+  }, memorizedReactions.map(reaction => renderReactionItem(reaction, 'li'))) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(reaction => renderReactionItem(reaction)))), shouldShowPicker && /*#__PURE__*/React.createElement(ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,

package/dist/es2019/shared/i18n.js

@@ -5,6 +5,11 @@ export const messages = defineMessages({
     defaultMessage: 'Add reaction',
     description: 'Label for the add reaction button that opens the emoji picker for users to choose a reaction.'
   },
+  addedReaction: {
+    id: 'reactions.shared.i18n.addedReaction',
+    defaultMessage: 'Added reaction',
+    description: 'Accessible label for the group of added reaction toggle buttons displayed with a comment or content item.'
+  },
   addNewReaction: {
     id: 'fabric.reactions.add.new',
     defaultMessage: 'Add new',

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.12.8";
+var packageVersion = "35.12.10";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/ReactionPicker.js

@@ -373,11 +373,6 @@ export var PopperWrapper = function PopperWrapper(props) {
     setPopupRef = _useState12[1];
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  /**
-   * Expose the reaction picker panel as a non-modal dialog to assistive technology.
-   * When disabled, fall back to the previous `role="group"` semantics.
-   */
-  var isDialogRoleEnabled = fg('platform_ceps-5921-a11y-fix-reactions');
   /**
    * add focus lock to popup
    */
@@ -405,8 +400,7 @@ export var PopperWrapper = function PopperWrapper(props) {
       style = _ref3.style,
       update = _ref3.update;
     return /*#__PURE__*/React.createElement("div", {
-      role: isDialogRoleEnabled ? 'dialog' : 'group',
-      "aria-modal": isDialogRoleEnabled ? false : undefined,
+      role: "dialog",
       "aria-label": formatMessage(messages.popperWrapperLabel),
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,

package/dist/esm/components/Reactions.js

@@ -4,11 +4,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./Reactions.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
 import UFOSegment from '@atlaskit/react-ufo/segment';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
 import { messages } from '../shared/i18n';
@@ -144,6 +144,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     _ref$renderParticleEf = _ref.renderParticleEffectOnSummaryView,
     renderParticleEffectOnSummaryView = _ref$renderParticleEf === void 0 ? false : _ref$renderParticleEf,
     reactionPickerPopperZIndex = _ref.reactionPickerPopperZIndex;
+  var intl = useIntl();
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -324,6 +325,39 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       }
     });
   };
+  var renderReactionItem = function renderReactionItem(reaction, rootElement) {
+    return /*#__PURE__*/React.createElement(Reaction, {
+      key: reaction.emojiId,
+      rootElement: rootElement,
+      reaction: reaction,
+      emojiProvider: emojiProvider,
+      onClick: onReactionClick,
+      onMouseEnter: handleReactionMouseEnter,
+      onFocused: handleReactionFocused,
+      flash: flash[reaction.emojiId],
+      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+      showOpaqueBackground: showOpaqueBackground,
+      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+      handleOpenReactionsDialog: _handleOpenReactionsDialog,
+      isViewOnly: isViewOnly,
+      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
+      optimisticImageURL: fg('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
+    });
+  };
+  var renderReactionGroup = function renderReactionGroup() {
+    var shouldRenderReactionList = fg('jfp_a11y_team_comment_actions_semantic');
+    return /*#__PURE__*/React.createElement("div", {
+      role: "group",
+      "aria-label": intl.formatMessage(messages.addedReaction),
+      className: ax([!shouldRenderReactionList && "_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm", !shouldRenderReactionList && noWrap && "_1n261q9c"])
+    }, shouldRenderReactionList ? /*#__PURE__*/React.createElement("ul", {
+      className: ax(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm", noWrap && "_1n261q9c"])
+    }, memorizedReactions.map(function (reaction) {
+      return renderReactionItem(reaction, 'li');
+    })) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(function (reaction) {
+      return renderReactionItem(reaction);
+    })));
+  };
   return /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions"
   }, /*#__PURE__*/React.createElement("div", {
@@ -362,43 +396,12 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
-  })) : fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("ul", {
+  })) : reactions.length > 0 && fg('platform_reactions_a11y_group_added_reactions') ? renderReactionGroup() : fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("ul", {
     className: ax(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm"])
   }, memorizedReactions.map(function (reaction) {
-    return /*#__PURE__*/React.createElement(Reaction, {
-      key: reaction.emojiId,
-      rootElement: "li",
-      reaction: reaction,
-      emojiProvider: emojiProvider,
-      onClick: onReactionClick,
-      onMouseEnter: handleReactionMouseEnter,
-      onFocused: handleReactionFocused,
-      flash: flash[reaction.emojiId],
-      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
-      showOpaqueBackground: showOpaqueBackground,
-      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-      handleOpenReactionsDialog: _handleOpenReactionsDialog,
-      isViewOnly: isViewOnly,
-      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
-      optimisticImageURL: fg('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
-    });
+    return renderReactionItem(reaction, 'li');
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(function (reaction) {
-    return /*#__PURE__*/React.createElement(Reaction, {
-      key: reaction.emojiId,
-      reaction: reaction,
-      emojiProvider: emojiProvider,
-      onClick: onReactionClick,
-      onMouseEnter: handleReactionMouseEnter,
-      onFocused: handleReactionFocused,
-      flash: flash[reaction.emojiId],
-      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
-      showOpaqueBackground: showOpaqueBackground,
-      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-      handleOpenReactionsDialog: _handleOpenReactionsDialog,
-      isViewOnly: isViewOnly,
-      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
-      optimisticImageURL: fg('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
-    });
+    return renderReactionItem(reaction);
   }))), shouldShowPicker && /*#__PURE__*/React.createElement(ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,

package/dist/esm/shared/i18n.js

@@ -5,6 +5,11 @@ export var messages = defineMessages({
     defaultMessage: 'Add reaction',
     description: 'Label for the add reaction button that opens the emoji picker for users to choose a reaction.'
   },
+  addedReaction: {
+    id: 'reactions.shared.i18n.addedReaction',
+    defaultMessage: 'Added reaction',
+    description: 'Accessible label for the group of added reaction toggle buttons displayed with a comment or content item.'
+  },
   addNewReaction: {
     id: 'fabric.reactions.add.new',
     defaultMessage: 'Add new',

package/dist/types/shared/i18n.d.ts

@@ -1,4 +1,9 @@
 export declare const messages: {
+    addedReaction: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     addNewReaction: {
         defaultMessage: string;
         description: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "35.12.9",
+	"version": "35.12.11",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 		"@atlaskit/avatar": "^27.0.0",
 		"@atlaskit/button": "^25.0.0",
 		"@atlaskit/css": "^1.0.0",
-		"@atlaskit/emoji": "^71.16.0",
+		"@atlaskit/emoji": "^71.17.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/heading": "^7.0.0",
 		"@atlaskit/icon": "^37.3.0",
@@ -51,11 +51,11 @@
 		"@atlaskit/portal": "^6.2.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/react-ufo": "^7.4.0",
+		"@atlaskit/react-ufo": "^7.6.0",
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/tabs": "^21.0.0",
 		"@atlaskit/theme": "^28.0.0",
-		"@atlaskit/tmp-editor-statsig": "^147.0.0",
+		"@atlaskit/tmp-editor-statsig": "^148.0.0",
 		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/ufo": "^1.0.0",
@@ -133,10 +133,10 @@
 		"platform_suppression_removal_fix_reactions": {
 			"type": "boolean"
 		},
-		"platform_ceps-5921-a11y-fix-reactions": {
+		"a11y_reactions_reading_order": {
 			"type": "boolean"
 		},
-		"a11y_reactions_reading_order": {
+		"platform_reactions_a11y_group_added_reactions": {
 			"type": "boolean"
 		}
 	},

package/reactions.docs.tsx

@@ -1,74 +0,0 @@
-/**
- * Structured MCP docs for `@atlaskit/reactions`.
- */
-
-import path from 'path';
-
-import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
-
-import packageJson from './package.json';
-
-const packagePath = path.resolve(__dirname);
-
-const documentation: StructuredContentSource = {
-	package: {
-		package: '@atlaskit/reactions',
-		packagePath,
-		packageJson,
-		overview:
-			'React components for displaying and managing emoji reactions on content. It includes support for reaction pickers and reaction views with backend integration.',
-	},
-	components: [
-		{
-			name: 'ConnectedReactionPicker',
-			description: 'A reaction picker component pre-wired with a reactions store.',
-			status: 'general-availability',
-			import: {
-				name: 'ConnectedReactionPicker',
-				package: '@atlaskit/reactions',
-				type: 'named',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: [
-				'Use `ConnectedReactionPicker` to allow users to add reactions to content.',
-				'Requires a `ReactionsStore` to manage reaction state.',
-			],
-			keywords: ['reactions', 'picker', 'emoji'],
-			categories: ['elements'],
-			examples: [
-				{
-					name: 'Connected reaction picker',
-					description: 'Basic usage of ConnectedReactionPicker.',
-					source: path.resolve(packagePath, './examples/00-connected-reaction-picker.tsx'),
-				},
-			],
-		},
-		{
-			name: 'ConnectedReactionsView',
-			description: 'A component for displaying the current reactions on a piece of content.',
-			status: 'general-availability',
-			import: {
-				name: 'ConnectedReactionsView',
-				package: '@atlaskit/reactions',
-				type: 'named',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: [
-				'Use `ConnectedReactionsView` to show the list of reactions and allow users to toggle their own reactions.',
-			],
-			keywords: ['reactions', 'view', 'display'],
-			categories: ['elements'],
-			examples: [
-				{
-					name: 'Connected reactions view',
-					description: 'Basic usage of ConnectedReactionsView.',
-					source: path.resolve(packagePath, './examples/01-connected-reactions-view.tsx'),
-				},
-			],
-		},
-	],
-};
-
-export default documentation;