@atlaskit/reactions 35.11.6 → 35.11.7

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/reactions
 
+## 35.11.7
+
+### Patch Changes
+
+- [`bc98a973e0455`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bc98a973e0455) -
+  [ux] A11Y-31804: Add semantic list markup to the hoverable reaction selector gated by experiment
+  `platform_a11y_reactions_hover_selector_list`
+- Updated dependencies
+
 ## 35.11.6
 
 ### Patch Changes

package/afm-cc/tsconfig.json

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

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 var packageName = "@atlaskit/reactions";
-var packageVersion = "35.11.5";
+var packageVersion = "35.11.6";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

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

package/dist/cjs/components/Selector.js

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

package/dist/es2019/analytics/index.js

@@ -2,7 +2,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "35.11.5";
+const packageVersion = "35.11.6";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

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

package/dist/es2019/components/Selector.js

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

package/dist/esm/analytics/index.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "35.11.5";
+var packageVersion = "35.11.6";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

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

package/dist/esm/components/Selector.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "35.11.6",
+	"version": "35.11.7",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,9 +44,10 @@
 		"@atlaskit/link": "^5.0.0",
 		"@atlaskit/modal-dialog": "^16.2.0",
 		"@atlaskit/motion": "^8.0.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/popper": "^8.5.0",
-		"@atlaskit/popup": "^5.2.0",
+		"@atlaskit/popper": "^9.0.0",
+		"@atlaskit/popup": "^6.0.0",
 		"@atlaskit/portal": "^6.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
@@ -54,7 +55,7 @@
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/tabs": "^20.1.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^138.0.0",
+		"@atlaskit/tmp-editor-statsig": "^139.0.0",
 		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/ufo": "^1.0.0",
@@ -73,6 +74,7 @@
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/util-data-test": "^19.1.0",
 		"@atlassian/a11y-jest-testing": "^0.14.0",
+		"@atlassian/experiment-test-utils": "^0.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
@@ -141,6 +143,12 @@
 			"type": "boolean"
 		}
 	},
+	"platform-experiments": {
+		"platform_a11y_reactions_hover_selector_list": {
+			"param": "isEnabled",
+			"defaultValue": false
+		}
+	},
 	"sideEffects": [
 		"*.compiled.css"
 	]