@atlaskit/reactions 33.8.17 → 33.8.20

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @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
+
+- [`5e648de49f54d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5e648de49f54d) -
+  All mouse events must also have key events for accessibility
+- Updated dependencies
+
+## 33.8.18
+
+### Patch Changes
+
+- [`e16fa4dbfb0d6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e16fa4dbfb0d6) -
+  Remove missing content from anchor a11y suppression from docs
+- [`368204368d995`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/368204368d995) -
+  Remove redundant inaccessible tabIndex
+- Updated dependencies
+
 ## 33.8.17
 
 ### 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 = "0.0.0-development";
+var packageVersion = "33.8.19";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Counter.js

@@ -1,4 +1,4 @@
-/* Counter.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Counter.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/EmojiButton.js

@@ -1,4 +1,4 @@
-/* EmojiButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* EmojiButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/FlashAnimation.js

@@ -1,4 +1,4 @@
-/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* Reaction.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Reaction.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -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/ReactionButton.js

@@ -1,4 +1,4 @@
-/* ReactionButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionParticleEffect.js

@@ -1,4 +1,4 @@
-/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionPicker.js

@@ -1,4 +1,4 @@
-/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -14,6 +14,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _picker = require("@atlaskit/emoji/picker");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _constants = require("@atlaskit/theme/constants");
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -413,7 +414,7 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
         }
       },
       // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
-      tabIndex: 0,
+      tabIndex: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? undefined : 0,
       className: (0, _runtime.ax)(["_nt751r31 _49pcglyw _1hvw1o36"])
     }, /*#__PURE__*/_react.default.createElement(_RepositionOnUpdate.RepositionOnUpdate, {
       update: update,

package/dist/cjs/components/ReactionSummaryButton.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionSummaryView.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionTooltip.js

@@ -1,4 +1,4 @@
-/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -10,11 +10,12 @@ require("./ReactionTooltip.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../shared/constants");
 var _i18n = require("../shared/i18n");
-var _colors = require("@atlaskit/theme/colors");
 var verticalMargin = exports.verticalMargin = 5;
 var tooltipStyle = null;
 var emojiNameStyle = null;
@@ -44,7 +45,7 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
     }
   };
   var content = !users || users.length === 0 || !isEnabled ? null : /*#__PURE__*/_react.default.createElement("div", {
-    tabIndex: 0,
+    tabIndex: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? undefined : 0,
     className: (0, _runtime.ax)(["_1reo15vq _18m915vq _p12f1w81 _1bto1l2s _o5721q9c _otyr14y2 _d1n8glyw _102oidpf _1kvxidpf _1ysjidpf _17d4idpf _1hziidpf _3n4midpf _ltofidpf _k7zyidpf _1ywo1e5h _1pru15vq _u0h115vq _5qec1l2s _1eg614y2"])
   }, /*#__PURE__*/_react.default.createElement("ul", null, emojiName ? /*#__PURE__*/_react.default.createElement("li", {
     className: (0, _runtime.ax)(["_1p1d1dk0 _syaz1lqe _k48p1pd9"]),
@@ -58,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/ReactionView.js

@@ -1,4 +1,4 @@
-/* ReactionView.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionView.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* Reactions.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Reactions.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -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/cjs/components/ReactionsDialog.js

@@ -1,4 +1,4 @@
-/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionsDialogHeader.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -23,6 +23,7 @@ var _tabs = require("@atlaskit/tabs");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _new = require("@atlaskit/button/new");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
@@ -166,12 +167,13 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: (0, _runtime.ax)([customTabWrapper.base, colorMode === 'dark' && customTabWrapper.darkTheme, index === 0 && "_19bvpxbi", "reaction-elements"]),
       key: reaction.emojiId,
-      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
-      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-      ,
+      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
       onMouseEnter: function onMouseEnter() {
         handleMouseEnter(reaction);
-      }
+      },
+      onFocus: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? function () {
+        handleMouseEnter(reaction);
+      } : undefined
     }, /*#__PURE__*/React.createElement(_tabs.Tab, null, /*#__PURE__*/React.createElement(_tooltip.default, {
       content: cache[reaction.emojiId],
       canAppear: function canAppear() {

package/dist/cjs/components/ReactionsDialogTrigger.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/Selector.js

@@ -1,4 +1,4 @@
-/* Selector.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Selector.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/StaticReaction.js

@@ -1,4 +1,4 @@
-/* StaticReaction.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* StaticReaction.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/Trigger.js

@@ -1,4 +1,4 @@
-/* Trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

package/dist/es2019/components/Counter.js

@@ -1,4 +1,4 @@
-/* Counter.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Counter.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./Counter.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/EmojiButton.js

@@ -1,4 +1,4 @@
-/* EmojiButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* EmojiButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./EmojiButton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/FlashAnimation.js

@@ -1,4 +1,4 @@
-/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./FlashAnimation.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,9 +1,10 @@
-/* Reaction.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Reaction.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./Reaction.compiled.css";
 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/ReactionButton.js

@@ -1,4 +1,4 @@
-/* ReactionButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionButton.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/ReactionParticleEffect.js

@@ -1,4 +1,4 @@
-/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ReactionParticleEffect.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/ReactionPicker.js

@@ -1,9 +1,10 @@
-/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ReactionPicker.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { layers } from '@atlaskit/theme/constants';
 import { Box } from '@atlaskit/primitives/compiled';
@@ -369,7 +370,7 @@ export const PopperWrapper = props => {
         }
       },
       // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
-      tabIndex: 0,
+      tabIndex: fg('platform_suppression_removal_fix_reactions') ? undefined : 0,
       className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
     }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update,

package/dist/es2019/components/ReactionSummaryButton.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ReactionSummaryButton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/ReactionSummaryView.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionSummaryView.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/ReactionTooltip.js

@@ -1,13 +1,14 @@
-/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionTooltip.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import Tooltip from '@atlaskit/tooltip';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N90, N800, N0 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
 import { TOOLTIP_USERS_LIMIT } from '../shared/constants';
 import { messages } from '../shared/i18n';
-import { N90, N800, N0 } from '@atlaskit/theme/colors';
 export const verticalMargin = 5;
 const tooltipStyle = null;
 const emojiNameStyle = null;
@@ -37,7 +38,7 @@ export const ReactionTooltip = ({
     }
   };
   const content = !users || users.length === 0 || !isEnabled ? null : /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
+    tabIndex: fg('platform_suppression_removal_fix_reactions') ? undefined : 0,
     className: ax(["_1reo15vq _18m915vq _p12f1w81 _1bto1l2s _o5721q9c _otyr14y2 _d1n8glyw _102oidpf _1kvxidpf _1ysjidpf _17d4idpf _1hziidpf _3n4midpf _ltofidpf _k7zyidpf _1ywo1e5h _1pru15vq _u0h115vq _5qec1l2s _1eg614y2"])
   }, /*#__PURE__*/React.createElement("ul", null, emojiName ? /*#__PURE__*/React.createElement("li", {
     className: ax(["_1p1d1dk0 _syaz6r0x _k48p1pd9"])
@@ -48,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/ReactionView.js

@@ -1,4 +1,4 @@
-/* ReactionView.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionView.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ReactionView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* Reactions.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Reactions.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./Reactions.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -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/es2019/components/ReactionsDialog.js

@@ -1,4 +1,4 @@
-/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ReactionsDialog.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/ReactionsDialogHeader.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionsDialogHeader.compiled.css";
 import * as React from 'react';
@@ -12,6 +12,7 @@ import { Box, Flex, Inline, Stack } from '@atlaskit/primitives/compiled';
 import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
 import { useModal } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import ChevronLeftIcon from '@atlaskit/icon/core/chevron-left';
@@ -137,12 +138,13 @@ export const ReactionsDialogHeader = ({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ax([customTabWrapper.base, colorMode === 'dark' && customTabWrapper.darkTheme, index === 0 && "_19bvpxbi", "reaction-elements"]),
       key: reaction.emojiId,
-      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
-      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-      ,
+      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
       onMouseEnter: () => {
         handleMouseEnter(reaction);
-      }
+      },
+      onFocus: fg('platform_suppression_removal_fix_reactions') ? () => {
+        handleMouseEnter(reaction);
+      } : undefined
     }, /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Tooltip, {
       content: cache[reaction.emojiId],
       canAppear: () => !!cache[reaction.emojiId]

package/dist/es2019/components/ReactionsDialogTrigger.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ReactionsDialogTrigger.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/Selector.js

@@ -1,4 +1,4 @@
-/* Selector.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Selector.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./Selector.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/StaticReaction.js

@@ -1,4 +1,4 @@
-/* StaticReaction.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* StaticReaction.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./StaticReaction.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/Trigger.js

@@ -1,4 +1,4 @@
-/* Trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./Trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

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

package/dist/esm/components/Counter.js

@@ -1,4 +1,4 @@
-/* Counter.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Counter.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./Counter.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/EmojiButton.js

@@ -1,4 +1,4 @@
-/* EmojiButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* EmojiButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./EmojiButton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/FlashAnimation.js

@@ -1,4 +1,4 @@
-/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./FlashAnimation.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* Reaction.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Reaction.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./Reaction.compiled.css";
@@ -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/ReactionButton.js

@@ -1,4 +1,4 @@
-/* ReactionButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionButton.compiled.css";
 import * as React from 'react';

package/dist/esm/components/ReactionParticleEffect.js

@@ -1,4 +1,4 @@
-/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import "./ReactionParticleEffect.compiled.css";
 import * as React from 'react';

package/dist/esm/components/ReactionPicker.js

@@ -1,4 +1,4 @@
-/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./ReactionPicker.compiled.css";
@@ -8,6 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { layers } from '@atlaskit/theme/constants';
 import { Box } from '@atlaskit/primitives/compiled';
@@ -404,7 +405,7 @@ export var PopperWrapper = function PopperWrapper(props) {
         }
       },
       // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
-      tabIndex: 0,
+      tabIndex: fg('platform_suppression_removal_fix_reactions') ? undefined : 0,
       className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
     }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update,

package/dist/esm/components/ReactionSummaryButton.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import "./ReactionSummaryButton.compiled.css";
 import * as React from 'react';

package/dist/esm/components/ReactionSummaryView.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./ReactionSummaryView.compiled.css";

package/dist/esm/components/ReactionTooltip.js

@@ -1,13 +1,14 @@
-/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionTooltip.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import Tooltip from '@atlaskit/tooltip';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N90, N800, N0 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
 import { TOOLTIP_USERS_LIMIT } from '../shared/constants';
 import { messages } from '../shared/i18n';
-import { N90, N800, N0 } from '@atlaskit/theme/colors';
 export var verticalMargin = 5;
 var tooltipStyle = null;
 var emojiNameStyle = null;
@@ -37,7 +38,7 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
     }
   };
   var content = !users || users.length === 0 || !isEnabled ? null : /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
+    tabIndex: fg('platform_suppression_removal_fix_reactions') ? undefined : 0,
     className: ax(["_1reo15vq _18m915vq _p12f1w81 _1bto1l2s _o5721q9c _otyr14y2 _d1n8glyw _102oidpf _1kvxidpf _1ysjidpf _17d4idpf _1hziidpf _3n4midpf _ltofidpf _k7zyidpf _1ywo1e5h _1pru15vq _u0h115vq _5qec1l2s _1eg614y2"])
   }, /*#__PURE__*/React.createElement("ul", null, emojiName ? /*#__PURE__*/React.createElement("li", {
     className: ax(["_1p1d1dk0 _syaz1lqe _k48p1pd9"]),
@@ -51,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/ReactionView.js

@@ -1,4 +1,4 @@
-/* ReactionView.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionView.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ReactionView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* Reactions.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Reactions.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./Reactions.compiled.css";
@@ -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/dist/esm/components/ReactionsDialog.js

@@ -1,4 +1,4 @@
-/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./ReactionsDialog.compiled.css";
 import * as React from 'react';

package/dist/esm/components/ReactionsDialogHeader.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -18,6 +18,7 @@ import { Box, Flex, Inline, Stack } from '@atlaskit/primitives/compiled';
 import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
 import { useModal } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import ChevronLeftIcon from '@atlaskit/icon/core/chevron-left';
@@ -158,12 +159,13 @@ export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref3) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ax([customTabWrapper.base, colorMode === 'dark' && customTabWrapper.darkTheme, index === 0 && "_19bvpxbi", "reaction-elements"]),
       key: reaction.emojiId,
-      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
-      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-      ,
+      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
       onMouseEnter: function onMouseEnter() {
         handleMouseEnter(reaction);
-      }
+      },
+      onFocus: fg('platform_suppression_removal_fix_reactions') ? function () {
+        handleMouseEnter(reaction);
+      } : undefined
     }, /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Tooltip, {
       content: cache[reaction.emojiId],
       canAppear: function canAppear() {

package/dist/esm/components/ReactionsDialogTrigger.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ReactionsDialogTrigger.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/Selector.js

@@ -1,4 +1,4 @@
-/* Selector.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Selector.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./Selector.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/StaticReaction.js

@@ -1,4 +1,4 @@
-/* StaticReaction.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* StaticReaction.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./StaticReaction.compiled.css";
 import * as React from 'react';

package/dist/esm/components/Trigger.js

@@ -1,4 +1,4 @@
-/* Trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./Trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/docs/0-intro.tsx

@@ -6,8 +6,7 @@ import { Text } from '@atlaskit/primitives/compiled';
 
 import ReactionsExample from '../examples/01-connected-reactions-view';
 
-// eslint-disable-next-line @atlassian/a11y/anchor-has-content
-const LinkComponent = (props: any) => <Link {...props} />;
+const LinkComponent = (props: any) => <Link {...props}>{props.children}</Link>;
 
 const _default_1: any = md`
   ${(<AtlassianInternalWarning />)}

package/docs/3-reactions-store.tsx

@@ -4,8 +4,7 @@ import { md, code, Props } from '@atlaskit/docs';
 import SectionMessage from '@atlaskit/section-message';
 import { Text } from '@atlaskit/primitives/compiled';
 
-// eslint-disable-next-line @atlassian/a11y/anchor-has-content
-const LinkComponent = (props: any) => <Link {...props} />;
+const LinkComponent = (props: any) => <Link {...props}>{props.children}</Link>;
 
 const _default_1: any = md`
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "33.8.17",
+	"version": "33.8.20",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
 		"@atlaskit/icon": "^32.0.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/modal-dialog": "^14.11.0",
-		"@atlaskit/motion": "^5.3.0",
+		"@atlaskit/motion": "^5.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/popup": "^4.13.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tabs": "^18.3.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
@@ -71,7 +71,7 @@
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/elements-test-helpers": "workspace:^",
 		"@atlaskit/util-data-test": "^18.5.0",
-		"@atlassian/a11y-jest-testing": "^0.11.0",
+		"@atlassian/a11y-jest-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
@@ -128,6 +128,9 @@
 		},
 		"platform-a11y-add-reactions-button-ul-item": {
 			"type": "boolean"
+		},
+		"platform_suppression_removal_fix_reactions": {
+			"type": "boolean"
 		}
 	},
 	"sideEffects": [