@atlaskit/reactions 37.0.0 → 37.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/reactions
 
+## 37.1.0
+
+### Minor Changes
+
+- [`5157e2c52cfcd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5157e2c52cfcd) -
+  Update i18n NPM package versions for editor,editor-extensions,activity-platform,media,elements
+  (Group 3)
+
+### Patch Changes
+
+- [`87589cc4647ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87589cc4647ba) -
+  Keep keyboard focus when the focused reaction is removed or re-rendered, including with quick
+  reactions and in the summary view, instead of losing it to the document body. Behind feature gate
+  platform_a11y_reactions_removal_focus.
+- Updated dependencies
+
+## 37.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 37.0.0
 
 ### Major Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _createAndFireEvents = _interopRequireDefault(require("@atlaskit/analytics-n
 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 = "36.7.26";
+var packageVersion = "37.0.1";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Reactions.js

@@ -28,7 +28,11 @@ var _Reaction = require("./Reaction");
 var _ReactionPicker = require("./ReactionPicker");
 var _ReactionsDialog = require("./ReactionsDialog");
 var _ReactionSummaryView = require("./ReactionSummaryView");
+var _Trigger = require("./Trigger");
 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); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var wrapperStyle = null;
 var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;
@@ -313,6 +317,114 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
     });
   }, [memorizedReactions]);
+  var wrapperRef = (0, _react.useRef)(null);
+  /**
+   * The reaction button the user activated while it had focus, with the order of the reactions shown alongside it
+   */
+  var activatedReactionRef = (0, _react.useRef)(null);
+  var trackActivatedReaction = (0, _react.useCallback)(function (emojiId, event, shownReactions) {
+    var button = event.currentTarget;
+    // Only keyboard and screen reader users, or mouse clicks that focus the button, can lose focus with it
+    if (button.ownerDocument.activeElement !== button) {
+      activatedReactionRef.current = null;
+      return;
+    }
+    activatedReactionRef.current = {
+      button: button,
+      emojiId: emojiId,
+      // Read now, as a removed button no longer has ancestors
+      list: button.closest('ul'),
+      shownEmojiIds: shownReactions.map(function (reaction) {
+        return reaction.emojiId;
+      })
+    };
+    // Focus moved away by the user while the button is still shown was not lost with it.
+    // Chrome fires focusout before detaching a removed button, so check once the removal has finished.
+    button.addEventListener('focusout', function () {
+      return queueMicrotask(function () {
+        var _activatedReactionRef;
+        if (button.isConnected && ((_activatedReactionRef = activatedReactionRef.current) === null || _activatedReactionRef === void 0 ? void 0 : _activatedReactionRef.button) === button) {
+          activatedReactionRef.current = null;
+        }
+      });
+    }, {
+      once: true
+    });
+  }, []);
+  var handleTrackedReactionClick = (0, _react.useCallback)(function (emojiId, event) {
+    trackActivatedReaction(emojiId, event, memorizedReactions);
+    onReactionClick(emojiId, event);
+  }, [memorizedReactions, onReactionClick, trackActivatedReaction]);
+  var handleTrackedSummaryViewReactionClick = (0, _react.useCallback)(function (emojiId, event) {
+    trackActivatedReaction(emojiId, event, sortedReactions);
+    handleSummaryViewReactionClick(emojiId, event);
+  }, [handleSummaryViewReactionClick, sortedReactions, trackActivatedReaction]);
+
+  /**
+   * Restore focus when the activated reaction button leaves the DOM, either because the reaction was removed or
+   * because the reactions re-rendered in a different layout, rather than losing it to the document body
+   */
+  (0, _react.useEffect)(function () {
+    if (!(0, _fg.fg)('platform_a11y_reactions_removal_focus')) {
+      return;
+    }
+    var activatedReaction = activatedReactionRef.current;
+    // Only the first update after an activation can be its result
+    activatedReactionRef.current = null;
+    var wrapper = wrapperRef.current;
+    if (!activatedReaction || activatedReaction.button.isConnected || !wrapper) {
+      return;
+    }
+    var activeElement = wrapper.ownerDocument.activeElement;
+    // Never take focus from where the user has since moved it
+    if (activeElement && activeElement !== wrapper.ownerDocument.body) {
+      return;
+    }
+
+    // The summary view tray can be portalled outside the wrapper, so search the activated button's list first
+    var list = activatedReaction.list;
+    var findReactionButton = function findReactionButton(emojiId) {
+      return [list !== null && list !== void 0 && list.isConnected ? list : null, wrapper].flatMap(function (root) {
+        return root ? Array.from(root.querySelectorAll('button[data-emoji-id]')) : [];
+      }).find(function (button) {
+        return button.dataset.emojiId === emojiId;
+      });
+    };
+    var emojiId = activatedReaction.emojiId,
+      shownEmojiIds = activatedReaction.shownEmojiIds;
+    var index = shownEmojiIds.indexOf(emojiId);
+    var focusCandidates = [
+    // The same reaction re-rendered, e.g. a quick reaction going back to a zero count
+    function () {
+      return findReactionButton(emojiId);
+    }].concat((0, _toConsumableArray2.default)(shownEmojiIds.slice(index + 1).map(function (id) {
+      return function () {
+        return findReactionButton(id);
+      };
+    })), [function () {
+      return wrapper.querySelector("[data-testid=\"".concat(_Trigger.RENDER_TRIGGER_BUTTON_TESTID, "\"]"));
+    }], (0, _toConsumableArray2.default)(shownEmojiIds.slice(0, index).reverse().map(function (id) {
+      return function () {
+        return findReactionButton(id);
+      };
+    })));
+    var _iterator = _createForOfIteratorHelper(focusCandidates),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var findCandidate = _step.value;
+        var candidate = findCandidate();
+        if (candidate !== null && candidate !== void 0 && candidate.isConnected) {
+          candidate.focus();
+          return;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }, [memorizedReactions]);
 
   /**
    * event handler to open dialog with selected reaction
@@ -346,7 +458,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       rootElement: rootElement,
       reaction: reaction,
       emojiProvider: emojiProvider,
-      onClick: onReactionClick,
+      onClick: (0, _fg.fg)('platform_a11y_reactions_removal_focus') ? handleTrackedReactionClick : onReactionClick,
       onMouseEnter: handleReactionMouseEnter,
       onFocused: handleReactionFocused,
       flash: flash[reaction.emojiId],
@@ -376,6 +488,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
   return /*#__PURE__*/_react.default.createElement(_ufoSegment.default, {
     name: "reactions"
   }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: wrapperRef,
     "data-testid": RENDER_REACTIONS_TESTID,
     className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _1pfhr5cr _1fohidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
   }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/_react.default.createElement("div", {
@@ -386,7 +499,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     flash: flash,
     particleEffectByEmoji: particleEffectByEmoji,
     onSelection: handleOnSelection,
-    onReactionClick: handleSummaryViewReactionClick,
+    onReactionClick: (0, _fg.fg)('platform_a11y_reactions_removal_focus') ? handleTrackedSummaryViewReactionClick : handleSummaryViewReactionClick,
     onReactionFocused: handleReactionFocused,
     onReactionMouseEnter: handleReactionMouseEnter,
     placement: summaryViewPlacement,

package/dist/es2019/analytics/index.js

@@ -2,7 +2,7 @@ import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "36.7.26";
+const packageVersion = "37.0.1";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/Reactions.js

@@ -16,6 +16,7 @@ import { Reaction } from './Reaction';
 import { ReactionPicker } from './ReactionPicker';
 import { ReactionsDialog } from './ReactionsDialog';
 import { ReactionSummaryView } from './ReactionSummaryView';
+import { RENDER_TRIGGER_BUTTON_TESTID } from './Trigger';
 const wrapperStyle = null;
 const noFlexWrapStyles = null;
 const noContainerPositionStyles = null;
@@ -261,6 +262,89 @@ export const Reactions = /*#__PURE__*/React.memo(({
   const sortedReactions = useMemo(() => {
     return [...memorizedReactions].sort((a, b) => (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count));
   }, [memorizedReactions]);
+  const wrapperRef = useRef(null);
+  /**
+   * The reaction button the user activated while it had focus, with the order of the reactions shown alongside it
+   */
+  const activatedReactionRef = useRef(null);
+  const trackActivatedReaction = useCallback((emojiId, event, shownReactions) => {
+    const button = event.currentTarget;
+    // Only keyboard and screen reader users, or mouse clicks that focus the button, can lose focus with it
+    if (button.ownerDocument.activeElement !== button) {
+      activatedReactionRef.current = null;
+      return;
+    }
+    activatedReactionRef.current = {
+      button,
+      emojiId,
+      // Read now, as a removed button no longer has ancestors
+      list: button.closest('ul'),
+      shownEmojiIds: shownReactions.map(reaction => reaction.emojiId)
+    };
+    // Focus moved away by the user while the button is still shown was not lost with it.
+    // Chrome fires focusout before detaching a removed button, so check once the removal has finished.
+    button.addEventListener('focusout', () => queueMicrotask(() => {
+      var _activatedReactionRef;
+      if (button.isConnected && ((_activatedReactionRef = activatedReactionRef.current) === null || _activatedReactionRef === void 0 ? void 0 : _activatedReactionRef.button) === button) {
+        activatedReactionRef.current = null;
+      }
+    }), {
+      once: true
+    });
+  }, []);
+  const handleTrackedReactionClick = useCallback((emojiId, event) => {
+    trackActivatedReaction(emojiId, event, memorizedReactions);
+    onReactionClick(emojiId, event);
+  }, [memorizedReactions, onReactionClick, trackActivatedReaction]);
+  const handleTrackedSummaryViewReactionClick = useCallback((emojiId, event) => {
+    trackActivatedReaction(emojiId, event, sortedReactions);
+    handleSummaryViewReactionClick(emojiId, event);
+  }, [handleSummaryViewReactionClick, sortedReactions, trackActivatedReaction]);
+
+  /**
+   * Restore focus when the activated reaction button leaves the DOM, either because the reaction was removed or
+   * because the reactions re-rendered in a different layout, rather than losing it to the document body
+   */
+  useEffect(() => {
+    if (!fg('platform_a11y_reactions_removal_focus')) {
+      return;
+    }
+    const activatedReaction = activatedReactionRef.current;
+    // Only the first update after an activation can be its result
+    activatedReactionRef.current = null;
+    const wrapper = wrapperRef.current;
+    if (!activatedReaction || activatedReaction.button.isConnected || !wrapper) {
+      return;
+    }
+    const {
+      activeElement
+    } = wrapper.ownerDocument;
+    // Never take focus from where the user has since moved it
+    if (activeElement && activeElement !== wrapper.ownerDocument.body) {
+      return;
+    }
+
+    // The summary view tray can be portalled outside the wrapper, so search the activated button's list first
+    const {
+      list
+    } = activatedReaction;
+    const findReactionButton = emojiId => [list !== null && list !== void 0 && list.isConnected ? list : null, wrapper].flatMap(root => root ? Array.from(root.querySelectorAll('button[data-emoji-id]')) : []).find(button => button.dataset.emojiId === emojiId);
+    const {
+      emojiId,
+      shownEmojiIds
+    } = activatedReaction;
+    const index = shownEmojiIds.indexOf(emojiId);
+    const focusCandidates = [
+    // The same reaction re-rendered, e.g. a quick reaction going back to a zero count
+    () => findReactionButton(emojiId), ...shownEmojiIds.slice(index + 1).map(id => () => findReactionButton(id)), () => wrapper.querySelector(`[data-testid="${RENDER_TRIGGER_BUTTON_TESTID}"]`), ...shownEmojiIds.slice(0, index).reverse().map(id => () => findReactionButton(id))];
+    for (const findCandidate of focusCandidates) {
+      const candidate = findCandidate();
+      if (candidate !== null && candidate !== void 0 && candidate.isConnected) {
+        candidate.focus();
+        return;
+      }
+    }
+  }, [memorizedReactions]);
 
   /**
    * event handler to open dialog with selected reaction
@@ -291,7 +375,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     rootElement: rootElement,
     reaction: reaction,
     emojiProvider: emojiProvider,
-    onClick: onReactionClick,
+    onClick: fg('platform_a11y_reactions_removal_focus') ? handleTrackedReactionClick : onReactionClick,
     onMouseEnter: handleReactionMouseEnter,
     onFocused: handleReactionFocused,
     flash: flash[reaction.emojiId],
@@ -316,6 +400,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
   return /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions"
   }, /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef,
     "data-testid": RENDER_REACTIONS_TESTID,
     className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _1pfhr5cr _1fohidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
   }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/React.createElement("div", {
@@ -326,7 +411,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     flash: flash,
     particleEffectByEmoji: particleEffectByEmoji,
     onSelection: handleOnSelection,
-    onReactionClick: handleSummaryViewReactionClick,
+    onReactionClick: fg('platform_a11y_reactions_removal_focus') ? handleTrackedSummaryViewReactionClick : handleSummaryViewReactionClick,
     onReactionFocused: handleReactionFocused,
     onReactionMouseEnter: handleReactionMouseEnter,
     placement: summaryViewPlacement,

package/dist/esm/analytics/index.js

@@ -5,7 +5,7 @@ import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "36.7.26";
+var packageVersion = "37.0.1";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/Reactions.js

@@ -3,6 +3,9 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./Reactions.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
@@ -18,6 +21,7 @@ import { Reaction } from './Reaction';
 import { ReactionPicker } from './ReactionPicker';
 import { ReactionsDialog } from './ReactionsDialog';
 import { ReactionSummaryView } from './ReactionSummaryView';
+import { RENDER_TRIGGER_BUTTON_TESTID } from './Trigger';
 var wrapperStyle = null;
 var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;
@@ -302,6 +306,114 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
     });
   }, [memorizedReactions]);
+  var wrapperRef = useRef(null);
+  /**
+   * The reaction button the user activated while it had focus, with the order of the reactions shown alongside it
+   */
+  var activatedReactionRef = useRef(null);
+  var trackActivatedReaction = useCallback(function (emojiId, event, shownReactions) {
+    var button = event.currentTarget;
+    // Only keyboard and screen reader users, or mouse clicks that focus the button, can lose focus with it
+    if (button.ownerDocument.activeElement !== button) {
+      activatedReactionRef.current = null;
+      return;
+    }
+    activatedReactionRef.current = {
+      button: button,
+      emojiId: emojiId,
+      // Read now, as a removed button no longer has ancestors
+      list: button.closest('ul'),
+      shownEmojiIds: shownReactions.map(function (reaction) {
+        return reaction.emojiId;
+      })
+    };
+    // Focus moved away by the user while the button is still shown was not lost with it.
+    // Chrome fires focusout before detaching a removed button, so check once the removal has finished.
+    button.addEventListener('focusout', function () {
+      return queueMicrotask(function () {
+        var _activatedReactionRef;
+        if (button.isConnected && ((_activatedReactionRef = activatedReactionRef.current) === null || _activatedReactionRef === void 0 ? void 0 : _activatedReactionRef.button) === button) {
+          activatedReactionRef.current = null;
+        }
+      });
+    }, {
+      once: true
+    });
+  }, []);
+  var handleTrackedReactionClick = useCallback(function (emojiId, event) {
+    trackActivatedReaction(emojiId, event, memorizedReactions);
+    onReactionClick(emojiId, event);
+  }, [memorizedReactions, onReactionClick, trackActivatedReaction]);
+  var handleTrackedSummaryViewReactionClick = useCallback(function (emojiId, event) {
+    trackActivatedReaction(emojiId, event, sortedReactions);
+    handleSummaryViewReactionClick(emojiId, event);
+  }, [handleSummaryViewReactionClick, sortedReactions, trackActivatedReaction]);
+
+  /**
+   * Restore focus when the activated reaction button leaves the DOM, either because the reaction was removed or
+   * because the reactions re-rendered in a different layout, rather than losing it to the document body
+   */
+  useEffect(function () {
+    if (!fg('platform_a11y_reactions_removal_focus')) {
+      return;
+    }
+    var activatedReaction = activatedReactionRef.current;
+    // Only the first update after an activation can be its result
+    activatedReactionRef.current = null;
+    var wrapper = wrapperRef.current;
+    if (!activatedReaction || activatedReaction.button.isConnected || !wrapper) {
+      return;
+    }
+    var activeElement = wrapper.ownerDocument.activeElement;
+    // Never take focus from where the user has since moved it
+    if (activeElement && activeElement !== wrapper.ownerDocument.body) {
+      return;
+    }
+
+    // The summary view tray can be portalled outside the wrapper, so search the activated button's list first
+    var list = activatedReaction.list;
+    var findReactionButton = function findReactionButton(emojiId) {
+      return [list !== null && list !== void 0 && list.isConnected ? list : null, wrapper].flatMap(function (root) {
+        return root ? Array.from(root.querySelectorAll('button[data-emoji-id]')) : [];
+      }).find(function (button) {
+        return button.dataset.emojiId === emojiId;
+      });
+    };
+    var emojiId = activatedReaction.emojiId,
+      shownEmojiIds = activatedReaction.shownEmojiIds;
+    var index = shownEmojiIds.indexOf(emojiId);
+    var focusCandidates = [
+    // The same reaction re-rendered, e.g. a quick reaction going back to a zero count
+    function () {
+      return findReactionButton(emojiId);
+    }].concat(_toConsumableArray(shownEmojiIds.slice(index + 1).map(function (id) {
+      return function () {
+        return findReactionButton(id);
+      };
+    })), [function () {
+      return wrapper.querySelector("[data-testid=\"".concat(RENDER_TRIGGER_BUTTON_TESTID, "\"]"));
+    }], _toConsumableArray(shownEmojiIds.slice(0, index).reverse().map(function (id) {
+      return function () {
+        return findReactionButton(id);
+      };
+    })));
+    var _iterator = _createForOfIteratorHelper(focusCandidates),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var findCandidate = _step.value;
+        var candidate = findCandidate();
+        if (candidate !== null && candidate !== void 0 && candidate.isConnected) {
+          candidate.focus();
+          return;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }, [memorizedReactions]);
 
   /**
    * event handler to open dialog with selected reaction
@@ -335,7 +447,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       rootElement: rootElement,
       reaction: reaction,
       emojiProvider: emojiProvider,
-      onClick: onReactionClick,
+      onClick: fg('platform_a11y_reactions_removal_focus') ? handleTrackedReactionClick : onReactionClick,
       onMouseEnter: handleReactionMouseEnter,
       onFocused: handleReactionFocused,
       flash: flash[reaction.emojiId],
@@ -365,6 +477,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
   return /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions"
   }, /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef,
     "data-testid": RENDER_REACTIONS_TESTID,
     className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _1pfhr5cr _1fohidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
   }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/React.createElement("div", {
@@ -375,7 +488,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     flash: flash,
     particleEffectByEmoji: particleEffectByEmoji,
     onSelection: handleOnSelection,
-    onReactionClick: handleSummaryViewReactionClick,
+    onReactionClick: fg('platform_a11y_reactions_removal_focus') ? handleTrackedSummaryViewReactionClick : handleSummaryViewReactionClick,
     onReactionFocused: handleReactionFocused,
     onReactionMouseEnter: handleReactionMouseEnter,
     placement: summaryViewPlacement,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "37.0.0",
+	"version": "37.1.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,14 +33,14 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@atlaskit/afm-i18n-platform-elements-reactions": "2.270.0",
+		"@atlaskit/afm-i18n-platform-elements-reactions": "2.287.0",
 		"@atlaskit/analytics-gas-types": "^6.2.0",
 		"@atlaskit/analytics-namespaced-context": "^8.2.0",
 		"@atlaskit/analytics-next": "^12.6.0",
 		"@atlaskit/avatar": "^30.0.0",
-		"@atlaskit/button": "^25.5.0",
+		"@atlaskit/button": "^25.6.0",
 		"@atlaskit/css": "^1.1.0",
-		"@atlaskit/emoji": "^73.0.0",
+		"@atlaskit/emoji": "^73.1.0",
 		"@atlaskit/feature-gate-js-client": "^7.0.0",
 		"@atlaskit/heading": "^8.0.0",
 		"@atlaskit/icon": "^38.0.0",
@@ -58,8 +58,8 @@
 		"@atlaskit/spinner": "^20.4.0",
 		"@atlaskit/tabs": "^21.3.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^243.0.0",
-		"@atlaskit/tokens": "^20.6.0",
+		"@atlaskit/tmp-editor-statsig": "^245.0.0",
+		"@atlaskit/tokens": "^20.7.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/ufo": "^2.0.0",
 		"@atlaskit/util-service-support": "^7.4.0",