@atlaskit/reactions 33.8.19 → 33.8.20

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/reactions
 
+## 33.8.20
+
+### Patch Changes
+
+- [`0f66751ec3512`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0f66751ec3512) -
+  Click events should also have key events for accessibility
+
 ## 33.8.19
 
 ### 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; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "33.8.18";
+var packageVersion = "33.8.19";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Reaction.compiled.css

@@ -1,9 +1,12 @@
-._19bv19bv{padding-left:10px}
-._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._18zrze3t{padding-inline:var(--ds-space-0,0)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
+._1mouze3t{margin-block:var(--ds-space-0,0)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
 ._8hrz1nam{transform-origin:center center 0}
-._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._bozg19bv{padding-inline-start:10px}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
 ._kqswh2mm{position:relative}
-._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
-._u5f3v77o{padding-right:var(--ds-space-025,2px)}
-._vwz41crf{line-height:9pt}
+._vwz41crf{line-height:9pt}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}

package/dist/cjs/components/Reaction.js

@@ -15,6 +15,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _reactIntlNext = require("react-intl-next");
+var _css = require("@atlaskit/css");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _emoji = require("@atlaskit/emoji");
 var _analytics = require("../analytics");
@@ -30,7 +31,8 @@ var _StaticReaction = require("./StaticReaction");
 var _compiled = require("@atlaskit/primitives/compiled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  container: "_kqswh2mm"
+  container: "_kqswh2mm",
+  listItem: "_195gze3t _1mouze3t _18zrze3t _1rjcze3t"
 };
 var emojiStyle = null;
 var emojiNoReactionStyle = null;
@@ -137,7 +139,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     setIsTooltipEnabled(false);
   };
   var emojiAndCount = /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_8hrz1nam _vwz41crf _ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc", reaction.count === 0 && "_ca0q1b66 _u5f3v77o _n3td1b66 _19bv19bv"])
+    className: (0, _runtime.ax)(["_1rjc1b66 _8hrz1nam _vwz41crf _bozgu2gc _y4ti1b66", reaction.count === 0 && "_1rjc1b66 _bozg19bv _y4tiv77o"])
   }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
@@ -156,7 +158,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     });
   }
   return /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: styles.container,
+    xcss: (0, _css.cx)(styles.container, (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') ? styles.listItem : undefined),
     as: (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
   }, showParticleEffect && /*#__PURE__*/React.createElement(_ReactionParticleEffect.ReactionParticleEffect, {
     emojiId: emojiId,

package/dist/cjs/components/ReactionTooltip.js

@@ -59,6 +59,7 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
   }), /*#__PURE__*/_react.default.createElement("li", {
     onMouseDown: handleClick,
     onClick: handleClick,
+    onKeyDown: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? handleClick : undefined,
     className: (0, _runtime.ax)(["_syaz1lqe", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3pioe _30l31i9p"]),
     style: {
       "--_14nrcaz": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N90, ")")),

package/dist/cjs/components/Reactions.compiled.css

@@ -1,24 +1,20 @@
 
-._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
-._17s9idpf >li{padding-bottom:0}
-._18u0idpf{margin-left:0}
+._qtt8glyw{list-style:none}
+._18zrze3t{padding-inline:var(--ds-space-0,0)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
-._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkidpf{margin-top:0}
-._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
-._1b3sidpf >li{padding-left:0}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
-._1l0sidpf >li{margin-bottom:0}
+._1fohidpf >:first-of-type>:first-of-type{margin-inline-start:0}
 ._1n261g80{flex-wrap:wrap}
 ._1n261q9c{flex-wrap:nowrap}
-._1pyaidpf >li{margin-top:0}
+._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
+._1pfhr5cr{margin-block-start:var(--ds-space-negative-050,-4px)}
 ._2hwxidpf{margin-right:0}
 ._4cvr1h6o{align-items:center}
-._694cidpf >li{margin-right:0}
-._9g0pidpf >li{margin-left:0}
-._ahxuidpf >li{padding-top:0}
-._bapwidpf >li{padding-right:0}
+._6rthze3t{margin-block-end:var(--ds-space-0,0)}
 ._ca0qidpf{padding-top:0}
 ._kqswh2mm{position:relative}
 ._kqswpfqs{position:static}

package/dist/cjs/components/Reactions.js

@@ -36,7 +36,7 @@ var noContainerPositionStyles = null;
 var reactionPickerStyle = null;
 var listContainerStyles = null;
 var pickerListItemStyles = {
-  picker: "_1e0c1o8l _19pk1b66"
+  picker: "_195gze3t _18zrze3t _1rjcze3t _1e0c1o8l _1pfh1b66 _6rthze3t"
 };
 
 /**
@@ -345,7 +345,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     name: "reactions"
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": RENDER_REACTIONS_TESTID,
-    className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
+    className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _1pfhr5cr _1fohidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
   }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
   }, /*#__PURE__*/_react.default.createElement(_ReactionSummaryView.ReactionSummaryView, {
@@ -380,7 +380,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
   })) : (0, _platformFeatureFlags.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 _1pyaidpf _694cidpf _1l0sidpf _9g0pidpf _ahxuidpf _bapwidpf _17s9idpf _1b3sidpf"])
+    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,
@@ -460,7 +460,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
     reactionPickerPlacement: reactionPickerPlacement,
     reactionPickerPopperZIndex: reactionPickerPopperZIndex,
-    className: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
+    className: (0, _runtime.ax)(["_1e0c1o8l _1pfh1b66"])
   }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/_react.default.createElement(_segment.default, {
     name: "reactions-dialog"
   }, /*#__PURE__*/_react.default.createElement(_ReactionsDialog.ReactionsDialog, {

package/dist/es2019/analytics/index.js

@@ -1,7 +1,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 = "33.8.18";
+const packageVersion = "33.8.19";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/Reaction.compiled.css

@@ -1,9 +1,12 @@
-._19bv19bv{padding-left:10px}
-._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._18zrze3t{padding-inline:var(--ds-space-0,0)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
+._1mouze3t{margin-block:var(--ds-space-0,0)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
 ._8hrz1nam{transform-origin:center center 0}
-._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._bozg19bv{padding-inline-start:10px}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
 ._kqswh2mm{position:relative}
-._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
-._u5f3v77o{padding-right:var(--ds-space-025,2px)}
-._vwz41crf{line-height:9pt}
+._vwz41crf{line-height:9pt}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}

package/dist/es2019/components/Reaction.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
+import { cx } from '@atlaskit/css';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
 import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../analytics';
@@ -18,7 +19,8 @@ import { ReactionButton } from './ReactionButton';
 import { StaticReaction } from './StaticReaction';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 const styles = {
-  container: "_kqswh2mm"
+  container: "_kqswh2mm",
+  listItem: "_195gze3t _1mouze3t _18zrze3t _1rjcze3t"
 };
 const emojiStyle = null;
 const emojiNoReactionStyle = null;
@@ -104,7 +106,7 @@ export const Reaction = ({
     setIsTooltipEnabled(false);
   };
   const emojiAndCount = /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_8hrz1nam _vwz41crf _ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc", reaction.count === 0 && "_ca0q1b66 _u5f3v77o _n3td1b66 _19bv19bv"])
+    className: ax(["_1rjc1b66 _8hrz1nam _vwz41crf _bozgu2gc _y4ti1b66", reaction.count === 0 && "_1rjc1b66 _bozg19bv _y4tiv77o"])
   }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
@@ -123,7 +125,7 @@ export const Reaction = ({
     });
   }
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container,
+    xcss: cx(styles.container, fg('jfp_a11y_team_comment_actions_semantic') ? styles.listItem : undefined),
     as: fg('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
   }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
     emojiId: emojiId,

package/dist/es2019/components/ReactionTooltip.js

@@ -49,6 +49,7 @@ export const ReactionTooltip = ({
   }), /*#__PURE__*/React.createElement("li", {
     onMouseDown: handleClick,
     onClick: handleClick,
+    onKeyDown: fg('platform_suppression_removal_fix_reactions') ? handleClick : undefined,
     className: ax(["_syaz6r0x", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3gkf6 _30l315cr"])
   }, users.length > maxReactions && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {

package/dist/es2019/components/Reactions.compiled.css

@@ -1,24 +1,20 @@
 
-._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
-._17s9idpf >li{padding-bottom:0}
-._18u0idpf{margin-left:0}
+._qtt8glyw{list-style:none}
+._18zrze3t{padding-inline:var(--ds-space-0,0)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
-._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkidpf{margin-top:0}
-._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
-._1b3sidpf >li{padding-left:0}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
-._1l0sidpf >li{margin-bottom:0}
+._1fohidpf >:first-of-type>:first-of-type{margin-inline-start:0}
 ._1n261g80{flex-wrap:wrap}
 ._1n261q9c{flex-wrap:nowrap}
-._1pyaidpf >li{margin-top:0}
+._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
+._1pfhr5cr{margin-block-start:var(--ds-space-negative-050,-4px)}
 ._2hwxidpf{margin-right:0}
 ._4cvr1h6o{align-items:center}
-._694cidpf >li{margin-right:0}
-._9g0pidpf >li{margin-left:0}
-._ahxuidpf >li{padding-top:0}
-._bapwidpf >li{padding-right:0}
+._6rthze3t{margin-block-end:var(--ds-space-0,0)}
 ._ca0qidpf{padding-top:0}
 ._kqswh2mm{position:relative}
 ._kqswpfqs{position:static}

package/dist/es2019/components/Reactions.js

@@ -23,7 +23,7 @@ const noContainerPositionStyles = null;
 const reactionPickerStyle = null;
 const listContainerStyles = null;
 const pickerListItemStyles = {
-  picker: "_1e0c1o8l _19pk1b66"
+  picker: "_195gze3t _18zrze3t _1rjcze3t _1e0c1o8l _1pfh1b66 _6rthze3t"
 };
 
 /**
@@ -291,7 +291,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     name: "reactions"
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": RENDER_REACTIONS_TESTID,
-    className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
+    className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _1pfhr5cr _1fohidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
   }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/React.createElement("div", {
     "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
   }, /*#__PURE__*/React.createElement(ReactionSummaryView, {
@@ -324,7 +324,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
   })) : 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 _1pyaidpf _694cidpf _1l0sidpf _9g0pidpf _ahxuidpf _bapwidpf _17s9idpf _1b3sidpf"])
+    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,
     reaction: reaction,
@@ -400,7 +400,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
     reactionPickerPlacement: reactionPickerPlacement,
     reactionPickerPopperZIndex: reactionPickerPopperZIndex,
-    className: ax(["_1e0c1o8l _19pk1b66"])
+    className: ax(["_1e0c1o8l _1pfh1b66"])
   }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions-dialog"
   }, /*#__PURE__*/React.createElement(ReactionsDialog, {

package/dist/esm/analytics/index.js

@@ -4,7 +4,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 = "33.8.18";
+var packageVersion = "33.8.19";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/Reaction.compiled.css

@@ -1,9 +1,12 @@
-._19bv19bv{padding-left:10px}
-._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._18zrze3t{padding-inline:var(--ds-space-0,0)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
+._1mouze3t{margin-block:var(--ds-space-0,0)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
 ._8hrz1nam{transform-origin:center center 0}
-._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._bozg19bv{padding-inline-start:10px}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
 ._kqswh2mm{position:relative}
-._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
-._u5f3v77o{padding-right:var(--ds-space-025,2px)}
-._vwz41crf{line-height:9pt}
+._vwz41crf{line-height:9pt}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}

package/dist/esm/components/Reaction.js

@@ -7,6 +7,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
+import { cx } from '@atlaskit/css';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
 import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../analytics';
@@ -21,7 +22,8 @@ import { ReactionButton } from './ReactionButton';
 import { StaticReaction } from './StaticReaction';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 var styles = {
-  container: "_kqswh2mm"
+  container: "_kqswh2mm",
+  listItem: "_195gze3t _1mouze3t _18zrze3t _1rjcze3t"
 };
 var emojiStyle = null;
 var emojiNoReactionStyle = null;
@@ -128,7 +130,7 @@ export var Reaction = function Reaction(_ref) {
     setIsTooltipEnabled(false);
   };
   var emojiAndCount = /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_8hrz1nam _vwz41crf _ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc", reaction.count === 0 && "_ca0q1b66 _u5f3v77o _n3td1b66 _19bv19bv"])
+    className: ax(["_1rjc1b66 _8hrz1nam _vwz41crf _bozgu2gc _y4ti1b66", reaction.count === 0 && "_1rjc1b66 _bozg19bv _y4tiv77o"])
   }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
@@ -147,7 +149,7 @@ export var Reaction = function Reaction(_ref) {
     });
   }
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container,
+    xcss: cx(styles.container, fg('jfp_a11y_team_comment_actions_semantic') ? styles.listItem : undefined),
     as: fg('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
   }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
     emojiId: emojiId,

package/dist/esm/components/ReactionTooltip.js

@@ -52,6 +52,7 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
   }), /*#__PURE__*/React.createElement("li", {
     onMouseDown: handleClick,
     onClick: handleClick,
+    onKeyDown: fg('platform_suppression_removal_fix_reactions') ? handleClick : undefined,
     className: ax(["_syaz1lqe", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3pioe _30l31i9p"]),
     style: {
       "--_14nrcaz": ix("var(--ds-text-inverse, ".concat(N90, ")")),

package/dist/esm/components/Reactions.compiled.css

@@ -1,24 +1,20 @@
 
-._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
-._17s9idpf >li{padding-bottom:0}
-._18u0idpf{margin-left:0}
+._qtt8glyw{list-style:none}
+._18zrze3t{padding-inline:var(--ds-space-0,0)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
-._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkidpf{margin-top:0}
-._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
-._1b3sidpf >li{padding-left:0}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
-._1l0sidpf >li{margin-bottom:0}
+._1fohidpf >:first-of-type>:first-of-type{margin-inline-start:0}
 ._1n261g80{flex-wrap:wrap}
 ._1n261q9c{flex-wrap:nowrap}
-._1pyaidpf >li{margin-top:0}
+._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
+._1pfhr5cr{margin-block-start:var(--ds-space-negative-050,-4px)}
 ._2hwxidpf{margin-right:0}
 ._4cvr1h6o{align-items:center}
-._694cidpf >li{margin-right:0}
-._9g0pidpf >li{margin-left:0}
-._ahxuidpf >li{padding-top:0}
-._bapwidpf >li{padding-right:0}
+._6rthze3t{margin-block-end:var(--ds-space-0,0)}
 ._ca0qidpf{padding-top:0}
 ._kqswh2mm{position:relative}
 ._kqswpfqs{position:static}

package/dist/esm/components/Reactions.js

@@ -25,7 +25,7 @@ var noContainerPositionStyles = null;
 var reactionPickerStyle = null;
 var listContainerStyles = null;
 var pickerListItemStyles = {
-  picker: "_1e0c1o8l _19pk1b66"
+  picker: "_195gze3t _18zrze3t _1rjcze3t _1e0c1o8l _1pfh1b66 _6rthze3t"
 };
 
 /**
@@ -334,7 +334,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     name: "reactions"
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": RENDER_REACTIONS_TESTID,
-    className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
+    className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _1pfhr5cr _1fohidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
   }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/React.createElement("div", {
     "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
   }, /*#__PURE__*/React.createElement(ReactionSummaryView, {
@@ -369,7 +369,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
   })) : 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 _1pyaidpf _694cidpf _1l0sidpf _9g0pidpf _ahxuidpf _bapwidpf _17s9idpf _1b3sidpf"])
+    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,
@@ -449,7 +449,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
     reactionPickerPlacement: reactionPickerPlacement,
     reactionPickerPopperZIndex: reactionPickerPopperZIndex,
-    className: ax(["_1e0c1o8l _19pk1b66"])
+    className: ax(["_1e0c1o8l _1pfh1b66"])
   }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions-dialog"
   }, /*#__PURE__*/React.createElement(ReactionsDialog, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "33.8.19",
+	"version": "33.8.20",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"