@atlaskit/emoji 67.2.0 → 67.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/emoji
 
+## 67.3.0
+
+### Minor Changes
+
+- [`f31280da145`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f31280da145) - fix category reset when tone changed, update error message translations, improve error message for screen reader, improve auto focus on choose file screen
+
+### Patch Changes
+
+- [`e8ff53a79be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e8ff53a79be) - minor accessibility improvements in emoji picker
+- [`53c4778831c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/53c4778831c) - [ux] add keyboard support for delete emoji
+- [`3256c34030f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3256c34030f) - Fix picker so that it always highlights the first category when first opened
+- [`788a4d63c82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/788a4d63c82) - fix focus issue with tone selector
+- [`10ae56adac7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/10ae56adac7) - fix: emoji is shown as grey box after successfully uploading
+
+## 67.2.1
+
+### Patch Changes
+
+- [`a73ef9ebecb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a73ef9ebecb) - Add ssr rendering metadata to resourced emoji loaded experience
+
 ## 67.2.0
 
 ### Minor Changes

package/dist/cjs/api/EmojiResource.js

@@ -742,6 +742,12 @@ var UploadingEmojiResource = /*#__PURE__*/function (_EmojiResource) {
           return Promise.reject('No media api support is configured');
         }
         return _this14.siteEmojiResource.uploadEmoji(upload, retry).then(function (emoji) {
+          // Use file preview blob URL to temporarily fix the graybox issue after uploading,
+          // Because the media service takes time to process the image.
+          // Ideally should improve CachingMediaImage by using mediaClient or mediaImage,
+          // But that requires more efforts in FE & BE.
+          // TODO: revist this when pick up COLLAB-2294
+          emoji.representation.imagePath = upload.dataURL;
           _this14.addUnknownEmoji(emoji);
           _this14.refreshLastFilter();
           return emoji;

package/dist/cjs/components/common/DeletableEmojiTooltipContent.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeletableEmojiTooltipContentForScreenReader = exports.DeletableEmojiTooltipContent = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _i18n = require("../i18n");
+var _ToolTipContentWithKeymap = require("./ToolTipContentWithKeymap");
+var _keymaps = require("../../util/keymaps");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var DeletableEmojiTooltipContent = function DeletableEmojiTooltipContent() {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_ToolTipContentWithKeymap.ToolTipContentWithKeymap, {
+    description: formatMessage(_i18n.messages.deleteEmojiTooltip),
+    keymap: _keymaps.backspace
+  });
+};
+exports.DeletableEmojiTooltipContent = DeletableEmojiTooltipContent;
+var DeletableEmojiTooltipContentForScreenReader = function DeletableEmojiTooltipContentForScreenReader(_ref) {
+  var emoji = _ref.emoji;
+  return /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+    id: "screenreader-emoji-".concat(emoji.id)
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiTooltipForScreenreader, {
+    values: {
+      shortName: emoji.shortName
+    }
+  })));
+};
+exports.DeletableEmojiTooltipContentForScreenReader = DeletableEmojiTooltipContentForScreenReader;

package/dist/cjs/components/common/DeleteButton.js

@@ -32,7 +32,8 @@ var DeleteButton = function DeleteButton(props) {
     onClick: props.onClick,
     appearance: "subtle-link",
     spacing: "none",
-    testId: "emoji-delete-button"
+    testId: "emoji-delete-button",
+    tabIndex: -1
   }));
 };
 var _default = DeleteButton;

package/dist/cjs/components/common/Emoji.js

@@ -5,13 +5,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SpriteEmoji = exports.ImageEmoji = exports.Emoji = void 0;
+exports.default = exports.SpriteEmoji = exports.ImageEmoji = exports.EmojiNodeWrapper = exports.Emoji = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _EmojiUtils = require("../../api/EmojiUtils");
 var _constants = require("../../util/constants");
 var _typeHelpers = require("../../util/type-helpers");
@@ -20,11 +21,11 @@ var _mouse = require("../../util/mouse");
 var _DeleteButton = _interopRequireDefault(require("./DeleteButton"));
 var _styles = require("./styles");
 var _analytics = require("../../util/analytics");
-var _browserSupport = require("../../util/browser-support");
-var _useInView3 = require("../../util/useInView");
+var _browserSupport = _interopRequireDefault(require("../../util/browser-support"));
+var _useInView3 = require("../../hooks/useInView");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
-var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "showDelete", "disableLazyLoad", "autoWidth"],
-  _excluded2 = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth"];
+var _DeletableEmojiTooltipContent = require("./DeletableEmojiTooltipContent");
+var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -41,17 +42,21 @@ var handleMouseDown = function handleMouseDown(props, event) {
     onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
   }
 };
-var handleKeyPress = function handleKeyPress(props, event) {
-  // Clicked emoji delete button
-  if (event.target instanceof Element && event.target.getAttribute('aria-label') === _constants.deleteEmojiLabel) {
+var handleKeyDown = function handleKeyDown(props, event) {
+  if (!_constants.EMOJI_KEYBOARD_KEYS_SUPPORTED.includes(event.key)) {
     return;
   }
-  var emoji = props.emoji,
-    onSelected = props.onSelected;
   event.preventDefault();
-  if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
+  event.stopPropagation();
+  var emoji = props.emoji,
+    onSelected = props.onSelected,
+    showDelete = props.showDelete;
+  if (onSelected && (event.key === _constants.KeyboardKeys.Enter || event.key === _constants.KeyboardKeys.Space)) {
     onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
   }
+  if (showDelete && event.key === _constants.KeyboardKeys.Backspace) {
+    handleDelete(props, event);
+  }
 };
 var handleMouseMove = function handleMouseMove(props, event) {
   var emoji = props.emoji,
@@ -96,21 +101,7 @@ var SpriteEmoji = function SpriteEmoji(props) {
     fitToHeight = props.fitToHeight,
     selected = props.selected,
     selectOnHover = props.selectOnHover,
-    className = props.className,
-    showTooltip = props.showTooltip,
-    _props$shouldBeIntera = props.shouldBeInteractive,
-    shouldBeInteractive = _props$shouldBeIntera === void 0 ? false : _props$shouldBeIntera,
-    tabIndex = props.tabIndex,
-    onSelected = props.onSelected,
-    onMouseMove = props.onMouseMove,
-    onFocus = props.onFocus,
-    onDelete = props.onDelete,
-    onLoadError = props.onLoadError,
-    onLoadSuccess = props.onLoadSuccess,
-    showDelete = props.showDelete,
-    disableLazyLoad = props.disableLazyLoad,
-    autoWidth = props.autoWidth,
-    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+    className = props.className;
   var representation = emoji.representation;
   var sprite = representation.sprite;
   var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
@@ -130,28 +121,10 @@ var SpriteEmoji = function SpriteEmoji(props) {
     backgroundPosition: "".concat(xPositionInPercent, "% ").concat(yPositionInPercent, "%"),
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, sizing);
-  return (0, _react2.jsx)("span", (0, _extends2.default)({
-    "data-testid": "sprite-emoji-".concat(emoji.shortName),
-    "data-emoji-type": "sprite",
-    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
-    role: shouldBeInteractive ? 'button' : 'img',
-    css: _styles.emojiContainer,
-    className: classes,
-    onKeyPress: function onKeyPress(event) {
-      return handleKeyPress(props, event);
-    },
-    onMouseDown: function onMouseDown(event) {
-      handleMouseDown(props, event);
-    },
-    onMouseEnter: function onMouseEnter(event) {
-      handleMouseMove(props, event);
-    },
-    onFocus: function onFocus(event) {
-      handleFocus(props, event);
-    },
-    "aria-label": emoji.shortName,
-    title: showTooltip ? emoji.shortName : ''
-  }, other), (0, _react2.jsx)("span", {
+  return (0, _react2.jsx)(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+    type: "sprite",
+    className: classes
+  }), (0, _react2.jsx)("span", {
     className: _styles.emojiSprite,
     style: style
   }, "\xA0"));
@@ -165,20 +138,10 @@ var ImageEmoji = function ImageEmoji(props) {
     selected = props.selected,
     selectOnHover = props.selectOnHover,
     className = props.className,
-    showTooltip = props.showTooltip,
     showDelete = props.showDelete,
-    _props$shouldBeIntera2 = props.shouldBeInteractive,
-    shouldBeInteractive = _props$shouldBeIntera2 === void 0 ? false : _props$shouldBeIntera2,
-    tabIndex = props.tabIndex,
-    onSelected = props.onSelected,
-    onMouseMove = props.onMouseMove,
-    onFocus = props.onFocus,
-    onDelete = props.onDelete,
-    onLoadError = props.onLoadError,
     onLoadSuccess = props.onLoadSuccess,
     disableLazyLoad = props.disableLazyLoad,
-    autoWidth = props.autoWidth,
-    other = (0, _objectWithoutProperties2.default)(props, _excluded2);
+    autoWidth = props.autoWidth;
   var _useInView = (0, _useInView3.useInView)({
       triggerOnce: true
     }),
@@ -186,7 +149,7 @@ var ImageEmoji = function ImageEmoji(props) {
     ref = _useInView2[0],
     inView = _useInView2[1];
   var ufoExp = (0, _analytics.sampledUfoRenderedEmoji)(emoji);
-  var classes = "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(_styles.emojiImage, " ").concat(className ? className : '');
+  var classes = "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(_styles.emojiImage, " ").concat(className ? className : '', " ").concat(showDelete ? _styles.deletableEmoji : '');
   var width;
   var height;
   var src;
@@ -200,14 +163,6 @@ var ImageEmoji = function ImageEmoji(props) {
     width = representation.width;
     height = representation.height;
   }
-  var deleteButton;
-  if (showDelete) {
-    deleteButton = (0, _react2.jsx)(_DeleteButton.default, {
-      onClick: function onClick(event) {
-        return handleDelete(props, event);
-      }
-    });
-  }
   var sizing = {};
   if (fitToHeight && width && height) {
     // Presize image, to prevent reflow due to size changes after loading
@@ -241,7 +196,7 @@ var ImageEmoji = function ImageEmoji(props) {
     }
     ufoExp.success({
       metadata: {
-        IBSupported: _browserSupport.isIntersectionObserverSupported
+        IBSupported: _browserSupport.default.supportsIntersectionObserver
       }
     });
     if (onLoadSuccess) {
@@ -276,15 +231,74 @@ var ImageEmoji = function ImageEmoji(props) {
     onError: onError,
     onLoad: onLoad
   }, sizing));
+
+  // show a tooltip for deletable emoji only on focus
+  if (showDelete) {
+    return (0, _react2.jsx)(_tooltip.default, {
+      content: (0, _react2.jsx)(_DeletableEmojiTooltipContent.DeletableEmojiTooltipContent, null),
+      position: "right-start",
+      tag: "span"
+    }, (0, _react2.jsx)(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+      "aria-labelledby": "screenreader-emoji-".concat(emoji.id),
+      type: "image",
+      className: classes,
+      ref: ref,
+      showTooltip: false // avoid showing both tooltip and title
+      ,
+      onMouseOver: function onMouseOver(e) {
+        var _document$activeEleme;
+        // only disable tooltip when not on focus
+        if (!((_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.contains(e.target))) {
+          e.stopPropagation();
+        }
+      }
+    }), emojiNode, (0, _react2.jsx)(_DeleteButton.default, {
+      onClick: function onClick(event) {
+        return handleDelete(props, event);
+      }
+    }), (0, _react2.jsx)(_DeletableEmojiTooltipContent.DeletableEmojiTooltipContentForScreenReader, {
+      emoji: emoji
+    })));
+  }
+  return (0, _react2.jsx)(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+    type: "image",
+    className: classes,
+    ref: ref
+  }), emojiNode);
+};
+exports.ImageEmoji = ImageEmoji;
+var EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var emoji = props.emoji,
+    fitToHeight = props.fitToHeight,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className,
+    showTooltip = props.showTooltip,
+    showDelete = props.showDelete,
+    _props$shouldBeIntera = props.shouldBeInteractive,
+    shouldBeInteractive = _props$shouldBeIntera === void 0 ? false : _props$shouldBeIntera,
+    tabIndex = props.tabIndex,
+    onSelected = props.onSelected,
+    onMouseMove = props.onMouseMove,
+    onFocus = props.onFocus,
+    onDelete = props.onDelete,
+    onLoadError = props.onLoadError,
+    onLoadSuccess = props.onLoadSuccess,
+    disableLazyLoad = props.disableLazyLoad,
+    autoWidth = props.autoWidth,
+    children = props.children,
+    type = props.type,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
   return (0, _react2.jsx)("span", (0, _extends2.default)({
-    "data-testid": "image-emoji-".concat(emoji.shortName),
-    "data-emoji-type": "image",
-    css: _styles.emojiStyles,
+    ref: ref,
+    "data-testid": "".concat(type, "-emoji-").concat(emoji.shortName),
+    "data-emoji-type": type,
     tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
     role: shouldBeInteractive ? 'button' : 'img',
-    className: classes,
-    onKeyPress: function onKeyPress(event) {
-      return handleKeyPress(props, event);
+    css: type === 'sprite' ? _styles.emojiSpriteContainer : _styles.emojiImageContainer,
+    className: className,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(props, event);
     },
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
@@ -296,11 +310,10 @@ var ImageEmoji = function ImageEmoji(props) {
       handleFocus(props, event);
     },
     "aria-label": emoji.shortName,
-    title: showTooltip ? emoji.shortName : '',
-    ref: ref
-  }, other), deleteButton, emojiNode);
-};
-exports.ImageEmoji = ImageEmoji;
+    title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
+  }, other), children);
+});
+exports.EmojiNodeWrapper = EmojiNodeWrapper;
 var Emoji = function Emoji(props) {
   var emoji = props.emoji;
   // start emoji rendered experience, it may have already started earlier in ResourcedEmoji or CachingEmoji

package/dist/cjs/components/common/EmojiActions.js

@@ -64,14 +64,15 @@ var TonesWrapper = function TonesWrapper(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     focusTonePreviewButton = _useState2[0],
     setFocusTonePreviewButton = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if (focusTonePreviewButton && tonePreviewButtonRef.current) {
-      tonePreviewButtonRef.current.focus();
+  (0, _react.useLayoutEffect)(function () {
+    if (focusTonePreviewButton && !showToneSelector) {
+      var _tonePreviewButtonRef;
+      (_tonePreviewButtonRef = tonePreviewButtonRef.current) === null || _tonePreviewButtonRef === void 0 ? void 0 : _tonePreviewButtonRef.focus();
     }
     return function () {
       setFocusTonePreviewButton(false);
     };
-  });
+  }, [focusTonePreviewButton, showToneSelector]);
   var onToneCloseHandler = function onToneCloseHandler() {
     var onToneClose = props.onToneClose;
     onToneClose();
@@ -174,10 +175,11 @@ var EmojiActions = function EmojiActions(props) {
     onMouseLeave: onMouseLeaveHandler
   }, (0, _react2.jsx)("div", {
     css: _styles.emojiActionsWrapper
-  }, !showToneSelector && (0, _react2.jsx)(_EmojiPickerListSearch.EmojiPickerListSearch, {
+  }, (0, _react2.jsx)(_EmojiPickerListSearch.EmojiPickerListSearch, {
     onChange: onChange,
     query: query,
-    resultsCount: resultsCount
+    resultsCount: resultsCount,
+    isVisible: !showToneSelector
   }), (0, _react2.jsx)(TonesWrapper, (0, _extends2.default)({}, props, {
     onToneOpen: onToneOpenHandler,
     onToneClose: onToneCloseHandler,

package/dist/cjs/components/common/EmojiDeletePreview.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,15 +18,20 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _i18n = require("../i18n");
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
-var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
+var _EmojiErrorMessage = _interopRequireWildcard(require("./EmojiErrorMessage"));
 var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
 var _styles = require("./styles");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var emojiDeletePreviewTestId = 'emoji-delete-preview';
 exports.emojiDeletePreviewTestId = emojiDeletePreviewTestId;
+var deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
 var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(EmojiDeletePreview, _Component);
   var _super = _createSuper(EmojiDeletePreview);
@@ -82,12 +88,16 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         loading = _this$state.loading,
         error = _this$state.error;
       var formatMessage = intl.formatMessage;
-      return (0, _react2.jsx)("div", {
+      return (0, _react2.jsx)(_reactFocusLock.default, {
+        noFocusGuards: true
+      }, (0, _react2.jsx)("div", {
         css: _styles.deletePreview,
         "data-testid": emojiDeletePreviewTestId
       }, (0, _react2.jsx)("div", {
         css: _styles.deleteText
-      }, (0, _react2.jsx)("h5", null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
+      }, (0, _react2.jsx)("h2", {
+        css: _styles.headingH5
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
         values: {
           emojiShortName: emoji.shortName
         }
@@ -101,17 +111,20 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         message: formatMessage(_i18n.messages.deleteEmojiFailed),
         messageStyles: _styles.emojiDeleteErrorMessage,
         tooltip: true
-      }) : null : null, (0, _react2.jsx)(_RetryableButton.default, {
+      }) : null : null, (0, _react2.jsx)(_visuallyHidden.default, {
+        id: deleteEmojiLabelId
+      }, formatMessage(_i18n.messages.deleteEmojiLabel)), (0, _react2.jsx)(_RetryableButton.default, {
         label: formatMessage(_i18n.messages.deleteEmojiLabel),
         onSubmit: this.onSubmit,
         appearance: "danger",
         loading: loading,
-        error: error
+        error: error,
+        ariaLabelledBy: "".concat(_EmojiErrorMessage.emojiErrorScreenreaderTestId, " ").concat(deleteEmojiLabelId)
       }), (0, _react2.jsx)(_customThemeButton.default, {
         appearance: "subtle",
         onClick: this.onCancel,
         css: _styles.cancelButton
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel)))));
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel))))));
     }
   }]);
   return EmojiDeletePreview;

package/dist/cjs/components/common/EmojiErrorMessage.js

@@ -4,14 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiErrorMessageTooltipTestId = exports.emojiErrorMessageTestId = exports.emojiErrorIconTestId = exports.default = void 0;
+exports.emojiErrorScreenreaderTestId = exports.emojiErrorMessageTooltipTestId = exports.emojiErrorMessageTestId = exports.emojiErrorIconTestId = exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _reactIntlNext = require("react-intl-next");
+var _i18n = require("../i18n");
 /** @jsx jsx */
 
+var emojiErrorScreenreaderTestId = 'emoji-error-screenreader-message';
+exports.emojiErrorScreenreaderTestId = emojiErrorScreenreaderTestId;
 var emojiErrorMessageTestId = 'emoji-error-message';
 exports.emojiErrorMessageTestId = emojiErrorMessageTestId;
 var emojiErrorMessageTooltipTestId = 'emoji-error-message-tooltip';
@@ -22,6 +26,8 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
   var messageStyles = props.messageStyles,
     message = props.message,
     tooltip = props.tooltip;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var visualContent = tooltip ? (0, _react2.jsx)("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
@@ -30,19 +36,21 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
     position: "top",
     testId: emojiErrorMessageTooltipTestId
   }, (0, _react2.jsx)(_error.default, {
-    label: "Error",
+    label: formatMessage(_i18n.messages.error),
     size: "medium",
     testId: emojiErrorIconTestId
   }))) : (0, _react2.jsx)("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
   }, (0, _react2.jsx)(_error.default, {
-    label: "Error",
+    label: formatMessage(_i18n.messages.error),
     size: "small"
   }), message);
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_visuallyHidden.default, {
-    role: "alert"
-  }, message), visualContent);
+    id: emojiErrorScreenreaderTestId
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.error, function (errMsg) {
+    return (0, _react2.jsx)("span", null, errMsg, " ", message, ".");
+  })), visualContent);
 };
 var _default = EmojiErrorMessage;
 exports.default = _default;

package/dist/cjs/components/common/EmojiRadioButton.js

@@ -28,6 +28,7 @@ var handleKeyPress = function handleKeyPress(props, event) {
   if (_constants.TONESELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(event.key)) {
     var onSelected = props.onSelected;
     event.preventDefault();
+    event.stopPropagation();
     if (onSelected) {
       onSelected();
     }