@atlaskit/emoji 67.2.1 → 67.3.1

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

@@ -13,12 +13,15 @@ import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import AkButton from '@atlaskit/button/custom-theme-button';
+import FocusLock from 'react-focus-lock';
 import { messages } from '../i18n';
 import CachingEmoji from './CachingEmoji';
-import EmojiErrorMessage from './EmojiErrorMessage';
+import EmojiErrorMessage, { emojiErrorScreenreaderTestId } from './EmojiErrorMessage';
 import RetryableButton from './RetryableButton';
-import { cancelButton, deleteFooter, deletePreview, deleteText, emojiDeleteErrorMessage, previewButtonGroup } from './styles';
+import { cancelButton, deleteFooter, deletePreview, deleteText, emojiDeleteErrorMessage, headingH5, previewButtonGroup } from './styles';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 export var emojiDeletePreviewTestId = 'emoji-delete-preview';
+var deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
 var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
   _inherits(EmojiDeletePreview, _Component);
   var _super = _createSuper(EmojiDeletePreview);
@@ -75,12 +78,16 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         loading = _this$state.loading,
         error = _this$state.error;
       var formatMessage = intl.formatMessage;
-      return jsx("div", {
+      return jsx(FocusLock, {
+        noFocusGuards: true
+      }, jsx("div", {
         css: deletePreview,
         "data-testid": emojiDeletePreviewTestId
       }, jsx("div", {
         css: deleteText
-      }, jsx("h5", null, jsx(FormattedMessage, messages.deleteEmojiTitle)), jsx(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
+      }, jsx("h2", {
+        css: headingH5
+      }, jsx(FormattedMessage, messages.deleteEmojiTitle)), jsx(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
         values: {
           emojiShortName: emoji.shortName
         }
@@ -94,17 +101,20 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         message: formatMessage(messages.deleteEmojiFailed),
         messageStyles: emojiDeleteErrorMessage,
         tooltip: true
-      }) : null : null, jsx(RetryableButton, {
+      }) : null : null, jsx(VisuallyHidden, {
+        id: deleteEmojiLabelId
+      }, formatMessage(messages.deleteEmojiLabel)), jsx(RetryableButton, {
         label: formatMessage(messages.deleteEmojiLabel),
         onSubmit: this.onSubmit,
         appearance: "danger",
         loading: loading,
-        error: error
+        error: error,
+        ariaLabelledBy: "".concat(emojiErrorScreenreaderTestId, " ").concat(deleteEmojiLabelId)
       }), jsx(AkButton, {
         appearance: "subtle",
         onClick: this.onCancel,
         css: cancelButton
-      }, jsx(FormattedMessage, messages.cancelLabel)))));
+      }, jsx(FormattedMessage, messages.cancelLabel))))));
     }
   }]);
   return EmojiDeletePreview;

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

@@ -4,6 +4,9 @@ import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import { messages } from '../i18n';
+export var emojiErrorScreenreaderTestId = 'emoji-error-screenreader-message';
 export var emojiErrorMessageTestId = 'emoji-error-message';
 export var emojiErrorMessageTooltipTestId = 'emoji-error-message-tooltip';
 export var emojiErrorIconTestId = 'emoji-error-icon';
@@ -11,6 +14,8 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
   var messageStyles = props.messageStyles,
     message = props.message,
     tooltip = props.tooltip;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var visualContent = tooltip ? jsx("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
@@ -19,18 +24,20 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
     position: "top",
     testId: emojiErrorMessageTooltipTestId
   }, jsx(ErrorIcon, {
-    label: "Error",
+    label: formatMessage(messages.error),
     size: "medium",
     testId: emojiErrorIconTestId
   }))) : jsx("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
   }, jsx(ErrorIcon, {
-    label: "Error",
+    label: formatMessage(messages.error),
     size: "small"
   }), message);
   return jsx(Fragment, null, jsx(VisuallyHidden, {
-    role: "alert"
-  }, message), visualContent);
+    id: emojiErrorScreenreaderTestId
+  }, jsx(FormattedMessage, messages.error, function (errMsg) {
+    return jsx("span", null, errMsg, " ", message, ".");
+  })), visualContent);
 };
 export default EmojiErrorMessage;

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

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

package/dist/esm/components/common/EmojiUploadPicker.js

@@ -2,7 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
-import { Fragment, useEffect, useState, useRef, memo, useCallback, useMemo } from 'react';
+import { Fragment, useEffect, useLayoutEffect, useState, useRef, memo, useCallback } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import TextField from '@atlaskit/textfield';
@@ -12,14 +12,15 @@ import FocusLock from 'react-focus-lock';
 import * as ImageUtil from '../../util/image';
 import debug from '../../util/logger';
 import { messages } from '../i18n';
-import EmojiErrorMessage from './EmojiErrorMessage';
+import EmojiErrorMessage, { emojiErrorScreenreaderTestId } from './EmojiErrorMessage';
 import EmojiUploadPreview from './EmojiUploadPreview';
 import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
-import { closeEmojiUploadButton, emojiChooseFileErrorMessage, emojiUpload, emojiUploadBottom, emojiUploadTop, uploadChooseFileBrowse, uploadChooseFileEmojiName, uploadChooseFileMessage, uploadChooseFileRow } from './styles';
+import { closeEmojiUploadButton, emojiChooseFileErrorMessage, emojiUpload, emojiUploadBottom, emojiUploadTop, headingH5, requiredSymbol, uploadChooseFileBrowse, uploadChooseFileEmojiName, uploadChooseFileMessage, uploadChooseFileRow } from './styles';
 export var uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 export var uploadEmojiComponentTestId = 'upload-emoji-component';
 export var cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
+var addCustomEmojiChooseFileScreenreaderId = 'fabric.emoji.choose.file.label.id';
 var disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 var sanitizeName = function sanitizeName(name) {
   // prevent / replace certain characters, allow others
@@ -51,18 +52,12 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
       onUploadCancelled();
     }
   }, [onUploadCancelled]);
-  var setInputFocus = useCallback(function () {
-    var _inputRef$current, _document$activeEleme, _inputRef$current2;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    if (((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.id) !== ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.id)) {
-      setInputFocus();
-    }
+  useLayoutEffect(function () {
+    requestAnimationFrame(function () {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    });
   }, []);
-
-  // make sure input has focus after update
-  useEffect(function () {
-    window.requestAnimationFrame(setInputFocus);
-  }, [setInputFocus]);
   var cancelLabel = formatMessage(messages.cancelLabel);
   var emojiPlaceholder = formatMessage(messages.emojiPlaceholder);
   var emojiNameAriaLabel = formatMessage(messages.emojiNameAriaLabel);
@@ -72,11 +67,12 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
     "data-testid": uploadEmojiComponentTestId
   }, jsx("div", {
     css: emojiUploadTop
-  }, jsx("span", {
-    css: uploadChooseFileMessage
-  }, jsx(FormattedMessage, messages.addCustomEmojiLabel, function (message) {
-    return jsx("h5", null, message);
-  })), jsx("div", {
+  }, jsx("h2", {
+    css: [uploadChooseFileMessage, headingH5]
+  }, jsx(FormattedMessage, messages.addCustomEmojiLabel), jsx("span", {
+    "aria-hidden": "true",
+    css: requiredSymbol
+  }, "*")), jsx("div", {
     css: closeEmojiUploadButton
   }, jsx(AkButton, {
     onClick: onUploadCancelled,
@@ -103,19 +99,24 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
     autoFocus: true,
     testId: uploadEmojiNameInputTestId,
     ref: inputRef,
-    id: "new-emoji-name-input"
+    id: "new-emoji-name-input",
+    "aria-required": true
   })), jsx("span", {
     css: uploadChooseFileBrowse
   }, jsx(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
     return jsx(Fragment, null, jsx("span", {
       hidden: true,
       id: fileChooserButtonDescriptionId
-    }, screenReaderDescription), jsx(FileChooser, {
+    }, screenReaderDescription), jsx("span", {
+      hidden: true,
+      id: addCustomEmojiChooseFileScreenreaderId
+    }, emojiChooseFileTitle), jsx(FileChooser, {
       label: emojiChooseFileTitle,
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",
       ariaDescribedBy: fileChooserButtonDescriptionId,
+      ariaLabelledBy: "".concat(emojiErrorScreenreaderTestId, " ").concat(addCustomEmojiChooseFileScreenreaderId),
       isDisabled: disableChooser
     }));
   }))), jsx("div", {
@@ -126,7 +127,7 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
   })));
 });
 var EmojiUploadPicker = function EmojiUploadPicker(props) {
-  var _document$activeEleme2;
+  var _document$activeEleme;
   var errorMessage = props.errorMessage,
     initialUploadName = props.initialUploadName,
     onUploadEmoji = props.onUploadEmoji,
@@ -154,7 +155,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     previewImage = _useState10[0],
     setPreviewImage = _useState10[1];
   // document is undefined during ssr rendering and throws an error
-  var lastFocusedElementId = useRef(typeof document !== 'undefined' ? (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.id : '');
+  var lastFocusedElementId = useRef(typeof document !== 'undefined' ? (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.id : '');
   useEffect(function () {
     if (errorMessage) {
       setUploadStatus(UploadStatus.Error);
@@ -217,7 +218,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   }, []);
   var errorOnUpload = useCallback(function (event) {
     debug('File load error: ', event);
-    setChooseEmojiErrorMessage(messages.emojiUploadFailed);
+    setChooseEmojiErrorMessage(jsx(FormattedMessage, messages.emojiUploadFailed));
     cancelChooseFile();
   }, [cancelChooseFile]);
   var onFileLoad = useCallback(function (file) {
@@ -238,7 +239,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
               case 7:
                 _context.prev = 7;
                 _context.t0 = _context["catch"](0);
-                setChooseEmojiErrorMessage(messages.emojiInvalidImage);
+                setChooseEmojiErrorMessage(jsx(FormattedMessage, messages.emojiInvalidImage));
                 cancelChooseFile();
               case 11:
               case "end":
@@ -258,7 +259,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       var reader = new FileReader();
       var file = files[0];
       if (ImageUtil.hasFileExceededSize(file)) {
-        setChooseEmojiErrorMessage(messages.emojiImageTooBig);
+        setChooseEmojiErrorMessage(jsx(FormattedMessage, messages.emojiImageTooBig));
         cancelChooseFile();
         return;
       }
@@ -282,9 +283,9 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       }
     }, 0, lastFocusedElementId.current);
   }, [clearUploadPicker, onUploadCancelled]);
-  var chooseErrorMessage = useMemo(function () {
-    return chooseEmojiErrorMessage ? jsx(FormattedMessage, chooseEmojiErrorMessage) : undefined;
-  }, [chooseEmojiErrorMessage]);
+  var onChooseFileClicked = function onChooseFileClicked() {
+    onFileChooserClicked && onFileChooserClicked();
+  };
   return jsx(FocusLock, {
     noFocusGuards: true
   }, name && previewImage ? jsx(EmojiUploadPreview, {
@@ -297,10 +298,10 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   }) : jsx(ChooseEmojiFile, {
     name: name,
     onChooseFile: onChooseFile,
-    onClick: onFileChooserClicked,
+    onClick: onChooseFileClicked,
     onNameChange: onNameChange,
     onUploadCancelled: cancelUpload,
-    errorMessage: chooseErrorMessage,
+    errorMessage: chooseEmojiErrorMessage,
     intl: intl
   }));
 };

package/dist/esm/components/common/EmojiUploadPreview.js

@@ -14,14 +14,15 @@ import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { customCategory } from '../../util/constants';
 import { messages } from '../i18n';
 import Emoji from './Emoji';
-import EmojiErrorMessage from './EmojiErrorMessage';
+import EmojiErrorMessage, { emojiErrorScreenreaderTestId } from './EmojiErrorMessage';
 import { UploadStatus } from './internal-types';
 import RetryableButton from './RetryableButton';
 import { bigEmojiPreview, cancelButton, emojiPreviewErrorMessage, uploadAddRow, uploadPreview, uploadPreviewFooter, uploadPreviewText } from './styles';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 export var uploadPreviewTestId = 'upload-preview';
 export var cancelUploadButtonTestId = 'cancel-upload-button';
-var addEmojiButtonDescriptionId = 'add.emoji.button.screen.reader.description.id';
+var addEmojiPreviewDescriptionId = 'fabric.emoji.preview.description.id';
+var addEmojiButtonLabelId = 'fabric.emoji.add.label.id';
 var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiUploadPreview, _PureComponent);
   var _super = _createSuper(EmojiUploadPreview);
@@ -79,18 +80,21 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
         message: errorMessage,
         tooltip: true
       }) : null, !errorMessage && jsx(VisuallyHidden, {
-        id: addEmojiButtonDescriptionId
+        id: addEmojiPreviewDescriptionId
       }, jsx(FormattedMessage, _extends({}, messages.emojiPreview, {
         values: {
           emoji: name
         }
-      }))), jsx(RetryableButton, {
+      }))), jsx(VisuallyHidden, {
+        id: addEmojiButtonLabelId
+      }, errorMessage ? formatMessage(messages.retryLabel) : formatMessage(messages.addEmojiLabel)), jsx(RetryableButton, {
         label: formatMessage(messages.addEmojiLabel),
         onSubmit: onAddEmoji,
         appearance: "primary",
         loading: uploading,
         error: !!errorMessage,
-        ariaDescribedby: addEmojiButtonDescriptionId
+        ariaDescribedBy: addEmojiPreviewDescriptionId,
+        ariaLabelledBy: "".concat(emojiErrorScreenreaderTestId, " ").concat(addEmojiButtonLabelId)
       }), jsx(AkButton, {
         onClick: onUploadCancelled,
         appearance: "subtle",

package/dist/esm/components/common/FileChooser.js

@@ -5,12 +5,15 @@ export var fileUploadInputTestId = 'file-upload';
 var FileChooser = function FileChooser(props) {
   var accept = props.accept,
     ariaDescribedBy = props.ariaDescribedBy,
+    ariaLabelledBy = props.ariaLabelledBy,
     isDisabled = props.isDisabled,
     label = props.label,
     onChange = props.onChange,
     onClick = props.onClick;
   var filePickerRef = useRef(null);
+  var fileButtonRef = useRef(null);
   var handleOnChooseFile = function handleOnChooseFile() {
+    var _fileButtonRef$curren;
     if (!filePickerRef.current) {
       return;
     }
@@ -18,12 +21,15 @@ var FileChooser = function FileChooser(props) {
       onClick();
     }
     filePickerRef.current.click();
+    (_fileButtonRef$curren = fileButtonRef.current) === null || _fileButtonRef$curren === void 0 ? void 0 : _fileButtonRef$curren.focus();
   };
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AkButton, {
     onClick: handleOnChooseFile,
     isDisabled: isDisabled,
     "aria-describedby": ariaDescribedBy,
-    testId: chooseFileButtonTestId
+    "aria-labelledby": ariaLabelledBy,
+    testId: chooseFileButtonTestId,
+    ref: fileButtonRef
   }, label), /*#__PURE__*/React.createElement("input", {
     className: "emojiUploadFileInput",
     ref: filePickerRef,

package/dist/esm/components/common/RetryableButton.js

@@ -14,13 +14,17 @@ var LoadingSpinner = function LoadingSpinner() {
   }, jsx(Spinner, null));
 };
 var RetryButton = function RetryButton(props) {
-  var onSubmit = props.onSubmit;
+  var onSubmit = props.onSubmit,
+    ariaLabelledBy = props.ariaLabelledBy,
+    ariaDescribedBy = props.ariaDescribedBy;
   return jsx(FormattedMessage, messages.retryLabel, function (retryLabel) {
     return jsx(AkButton, {
       css: uploadRetryButton,
       appearance: "warning",
       onClick: onSubmit,
       testId: retryUploadButtonTestId,
+      "aria-describedby": ariaDescribedBy,
+      "aria-labelledby": ariaLabelledBy,
       autoFocus: true
     }, retryLabel);
   });
@@ -29,13 +33,15 @@ var UploadButton = function UploadButton(props) {
   var appearance = props.appearance,
     onSubmit = props.onSubmit,
     label = props.label,
-    ariaDescribedby = props.ariaDescribedby;
+    ariaLabelledBy = props.ariaLabelledBy,
+    ariaDescribedBy = props.ariaDescribedBy;
   return jsx(AkButton, {
     css: uploadEmojiButton,
     appearance: appearance,
     onClick: onSubmit,
     testId: uploadEmojiButtonTestId,
-    "aria-describedby": ariaDescribedby,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
     autoFocus: true
   }, label);
 };

package/dist/esm/components/common/ToolTipContentWithKeymap.js

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { jsx } from '@emotion/react';
+import { formatShortcut } from '../../util/keymaps';
+import { tooltipShortcutStyle } from './styles';
+export var ToolTipContentWithKeymap = /*#__PURE__*/React.memo(function (_ref) {
+  var description = _ref.description,
+    shortcutOverride = _ref.shortcutOverride,
+    keymap = _ref.keymap;
+  var shortcut = shortcutOverride || keymap && formatShortcut(keymap);
+  return shortcut || description ? jsx(Fragment, null, description, shortcut && description && "\xA0", shortcut && jsx("span", {
+    css: tooltipShortcutStyle
+  }, shortcut)) : null;
+});

package/dist/esm/components/common/styles.js

@@ -4,7 +4,8 @@ var _css, _css2, _templateObject, _span, _css3, _css6, _input;
 import { css, keyframes } from '@emotion/react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
-import { B100, N20, N200, N20A, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
+import { B100, N20, N200, N20A, N300, N400, N900, R300, R400 } from '@atlaskit/theme/colors';
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 export var commonSelectedStyles = 'emoji-common-selected';
 export var selectOnHoverStyles = 'emoji-common-select-on-hover';
 export var emojiSprite = 'emoji-common-emoji-sprite';
@@ -12,18 +13,15 @@ export var emojiNodeStyles = 'emoji-common-node';
 export var emojiImage = 'emoji-common-emoji-image';
 export var emojiDeleteButton = 'emoji-common-deleteButton';
 export var emojiMainStyle = 'emoji-common-main-styles';
+export var deletableEmoji = 'emoji-common-deletable';
 export var deleteButton = css({
   // hide by default
   visibility: 'hidden',
   display: 'flex',
-  height: '0px',
-  // 40px emoji width with 2px left offset
-  width: '38px',
-  alignItems: 'flex-end',
-  justifyContent: 'flex-end',
-  // vertically align button and prevent emoji offset
-  paddingTop: '4px',
-  marginBottom: '-4px'
+  position: 'absolute',
+  top: '-8px',
+  right: '-8px',
+  zIndex: 1
 });
 export var emojiToneSelectorContainer = css({
   flex: 1,
@@ -31,7 +29,7 @@ export var emojiToneSelectorContainer = css({
   justifyContent: 'flex-end',
   padding: '10px 10px 11px 0'
 });
-export var emojiStyles = css((_css = {
+export var emojiImageContainer = css((_css = {
   borderRadius: "var(--ds-radius-100, 3px)",
   backgroundColor: 'transparent',
   display: 'inline-block',
@@ -39,20 +37,25 @@ export var emojiStyles = css((_css = {
   // Ensure along with vertical align middle, we don't increase the line height for p and some
   // headings. Smaller headings get a slight increase in height, cannot add more negative margin
   // as a "selected" emoji (e.g. in the editor) will not look good.
-  margin: '-1px 0'
+  margin: '-1px 0',
+  img: {
+    display: 'block'
+  }
 }, _defineProperty(_css, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover"), {
   backgroundColor: akEmojiSelectedBackgroundColor
 }), _defineProperty(_css, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover .").concat(emojiDeleteButton), {
   // show delete button on hover
   visibility: 'visible'
-}), _defineProperty(_css, "img", {
-  display: 'block'
+}), _defineProperty(_css, "&.".concat(deletableEmoji), {
+  position: 'relative'
+}), _defineProperty(_css, "&.".concat(deletableEmoji, ":focus-within .").concat(emojiDeleteButton), {
+  visibility: 'visible'
 }), _defineProperty(_css, '&:focus', {
   boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
   transitionDuration: '0s, 0.2s',
   outline: 'none'
 }), _css));
-export var emojiContainer = css((_css2 = {
+export var emojiSpriteContainer = css((_css2 = {
   display: 'inline-block',
   // Ensure along with vertical align middle, we don't increase the line height for h1..h6, and p
   margin: '-1px 0'
@@ -185,12 +188,12 @@ export var previewImg = css((_css6 = {
   display: 'inline-block',
   flex: 'initial',
   width: '32px'
-}, _defineProperty(_css6, "& .".concat(emojiSprite, ", > span"), {
+}, _defineProperty(_css6, "& .".concat(emojiSprite, ", span[role=\"img\"]"), {
   width: '32px',
   height: '32px',
   padding: 0,
   maxHeight: 'inherit'
-}), _defineProperty(_css6, "& > span > img", {
+}), _defineProperty(_css6, "& span[role=\"img\"] > img", {
   position: 'relative',
   left: '50%',
   top: '50%',
@@ -230,7 +233,9 @@ export var emojiUploadTop = css({
   fontSize: '12px'
 });
 export var uploadChooseFileMessage = css({
-  color: "var(--ds-text-subtle, ".concat(N300, ")")
+  '&&': {
+    color: "var(--ds-text-subtle, ".concat(N300, ")")
+  }
 });
 export var closeEmojiUploadButton = css({
   display: 'flex'
@@ -321,6 +326,19 @@ export var deleteText = css({
     lineHeight: '16px'
   }
 });
+export var headingH5 = css({
+  '&&': {
+    fontSize: "var(--ds-font-size-075, 12px)",
+    fontWeight: "var(--ds-font-weight-semibold, 600)",
+    letterSpacing: '-0.003em',
+    lineHeight: "var(--ds-font-lineHeight-100, 16px)"
+  }
+});
+export var requiredSymbol = css({
+  paddingLeft: "".concat(getGridSize() / 4, "px"),
+  color: "var(--ds-text-danger, ".concat(R400, ")"),
+  fontFamily: getFontFamily()
+});
 export var previewButtonGroup = css({
   display: 'flex'
 });
@@ -390,4 +408,12 @@ export var emojiActionsWrapper = css({
   display: 'flex',
   justifyContent: 'flex-end',
   alignItems: 'center'
+});
+export var tooltipShortcutStyle = css({
+  borderRadius: '3px',
+  backgroundColor: "var(--ds-background-inverse-subtle, ".concat(N400, ")"),
+  padding: '0 2px',
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: 'tooltip-shortcut'
 });

package/dist/esm/components/i18n.js

@@ -1,5 +1,15 @@
 import { defineMessages } from 'react-intl-next';
 export var messages = defineMessages({
+  deleteEmojiTooltip: {
+    id: 'fabric.emoji.delete.tooltip',
+    defaultMessage: 'Delete',
+    description: 'Tooltip content for delete emoji when focus on deletable emoji'
+  },
+  deleteEmojiTooltipForScreenreader: {
+    id: 'fabric.emoji.delete.screenreader.tooltip',
+    defaultMessage: 'To delete {shortName} emoji, press Backspace',
+    description: 'Tooltip content for delete emoji when focus on deletable emoji'
+  },
   deleteEmojiTitle: {
     id: 'fabric.emoji.delete.title',
     defaultMessage: 'Remove emoji',
@@ -37,7 +47,7 @@ export var messages = defineMessages({
   },
   emojiChooseFileScreenReaderDescription: {
     id: 'fabric.emoji.choose.file.screenReaderDescription',
-    defaultMessage: 'Choose a file for the emoji. JPG, PNG or GIF. Max size 1 MB.',
+    defaultMessage: 'Choose a file for the emoji. JPG, PNG or GIF. Max size 1 MB',
     description: 'Message indicating the purpose of choosing the file and requirements for the file'
   },
   emojiSelectSkinToneButtonAriaLabelText: {
@@ -102,7 +112,7 @@ export var messages = defineMessages({
   },
   categoriesSelectorLabel: {
     id: 'fabric.emoji.categories.label',
-    defaultMessage: 'Choose a emoji category',
+    defaultMessage: 'Choose an emoji category',
     description: 'Aria label for Emoji categories selector at the top of emoji picker'
   },
   categoriesSearchResults: {
@@ -209,5 +219,10 @@ export var messages = defineMessages({
     id: 'fabric.emoji.emojipicker.emoi.roledescription',
     defaultMessage: 'emoji button',
     description: "Aria roledescription for emoji button, used in emoji picker."
+  },
+  error: {
+    id: 'fabric.emoji.emojipicker.error',
+    defaultMessage: 'Error!',
+    description: "Aria label for error icon, apperaed in emoji uploader screens and delete emoji screens of emoji picker"
   }
 });

package/dist/esm/components/picker/CategorySelector.js

@@ -62,6 +62,7 @@ var CategorySelector = function CategorySelector(props) {
       return;
     }
     e.preventDefault();
+    e.stopPropagation();
     var lastCategoryIndex = categories.length - 1;
     switch (e.key) {
       // navigate to the right category
@@ -123,7 +124,7 @@ var CategorySelector = function CategorySelector(props) {
         "data-focus-index": index,
         "aria-label": categoryName,
         "aria-controls": currentFocus === index ? RENDER_EMOJI_PICKER_LIST_TESTID : undefined,
-        "aria-selected": currentFocus === index ? true : false,
+        "aria-selected": categoryId === activeCategoryId,
         css: categoryClasses,
         disabled: disableCategories,
         onClick: handleClick(categoryId, index),

package/dist/esm/components/picker/CategoryTracker.js

@@ -30,6 +30,11 @@ var CategoryTracker = /*#__PURE__*/function () {
     value: function getRow(category) {
       return this.categoryToRow.get(category);
     }
+  }, {
+    key: "getFirstCategory",
+    value: function getFirstCategory() {
+      return this.rowToCategory.get(0);
+    }
   }]);
   return CategoryTracker;
 }();