@atlaskit/emoji 67.2.0 → 67.3.0

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

@@ -5,12 +5,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 const emojiDeletePreviewTestId = 'emoji-delete-preview';
+const deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
 class EmojiDeletePreview extends Component {
   constructor(props) {
     super(props);
@@ -63,12 +66,16 @@ class EmojiDeletePreview extends Component {
     const {
       formatMessage
     } = intl;
-    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
       }
@@ -82,17 +89,20 @@ class EmojiDeletePreview extends 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: `${emojiErrorScreenreaderTestId} ${deleteEmojiLabelId}`
     }), jsx(AkButton, {
       appearance: "subtle",
       onClick: this.onCancel,
       css: cancelButton
-    }, jsx(FormattedMessage, messages.cancelLabel)))));
+    }, jsx(FormattedMessage, messages.cancelLabel))))));
   }
 }
 export default injectIntl(EmojiDeletePreview);

package/dist/es2019/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 const emojiErrorScreenreaderTestId = 'emoji-error-screenreader-message';
 export const emojiErrorMessageTestId = 'emoji-error-message';
 export const emojiErrorMessageTooltipTestId = 'emoji-error-message-tooltip';
 export const emojiErrorIconTestId = 'emoji-error-icon';
@@ -13,6 +16,9 @@ const EmojiErrorMessage = props => {
     message,
     tooltip
   } = props;
+  const {
+    formatMessage
+  } = useIntl();
   const visualContent = tooltip ? jsx("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
@@ -21,18 +27,18 @@ const 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, errMsg => jsx("span", null, errMsg, " ", message, "."))), visualContent);
 };
 export default EmojiErrorMessage;

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

@@ -21,6 +21,7 @@ const handleKeyPress = (props, event) => {
       onSelected
     } = props;
     event.preventDefault();
+    event.stopPropagation();
     if (onSelected) {
       onSelected();
     }

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

@@ -1,5 +1,5 @@
 /** @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';
@@ -9,14 +9,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 const uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 export const uploadEmojiComponentTestId = 'upload-emoji-component';
 export const cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
+const addCustomEmojiChooseFileScreenreaderId = 'fabric.emoji.choose.file.label.id';
 const disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 const sanitizeName = name => {
   // prevent / replace certain characters, allow others
@@ -51,18 +52,12 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
       onUploadCancelled();
     }
   }, [onUploadCancelled]);
-  const setInputFocus = useCallback(() => {
-    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(() => {
+    requestAnimationFrame(() => {
+      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(() => {
-    window.requestAnimationFrame(setInputFocus);
-  }, [setInputFocus]);
   const cancelLabel = formatMessage(messages.cancelLabel);
   const emojiPlaceholder = formatMessage(messages.emojiPlaceholder);
   const emojiNameAriaLabel = formatMessage(messages.emojiNameAriaLabel);
@@ -72,9 +67,12 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     "data-testid": uploadEmojiComponentTestId
   }, jsx("div", {
     css: emojiUploadTop
-  }, jsx("span", {
-    css: uploadChooseFileMessage
-  }, jsx(FormattedMessage, messages.addCustomEmojiLabel, message => 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,
@@ -101,18 +99,23 @@ const ChooseEmojiFile = /*#__PURE__*/memo(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, screenReaderDescription => 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: `${emojiErrorScreenreaderTestId} ${addCustomEmojiChooseFileScreenreaderId}`,
     isDisabled: disableChooser
   }))))), jsx("div", {
     css: emojiUploadBottom
@@ -122,7 +125,7 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
   })));
 });
 const EmojiUploadPicker = props => {
-  var _document$activeEleme2;
+  var _document$activeEleme;
   const {
     errorMessage,
     initialUploadName,
@@ -137,7 +140,7 @@ const EmojiUploadPicker = props => {
   const [filename, setFilename] = useState();
   const [previewImage, setPreviewImage] = useState();
   // document is undefined during ssr rendering and throws an error
-  const lastFocusedElementId = useRef(typeof document !== 'undefined' ? (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.id : '');
+  const lastFocusedElementId = useRef(typeof document !== 'undefined' ? (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.id : '');
   useEffect(() => {
     if (errorMessage) {
       setUploadStatus(UploadStatus.Error);
@@ -202,7 +205,7 @@ const EmojiUploadPicker = props => {
   }, []);
   const errorOnUpload = useCallback(event => {
     debug('File load error: ', event);
-    setChooseEmojiErrorMessage(messages.emojiUploadFailed);
+    setChooseEmojiErrorMessage(jsx(FormattedMessage, messages.emojiUploadFailed));
     cancelChooseFile();
   }, [cancelChooseFile]);
   const onFileLoad = useCallback(file => async f => {
@@ -211,7 +214,7 @@ const EmojiUploadPicker = props => {
       await ImageUtil.parseImage(f.target.result);
       setPreviewImage(f.target.result);
     } catch {
-      setChooseEmojiErrorMessage(messages.emojiInvalidImage);
+      setChooseEmojiErrorMessage(jsx(FormattedMessage, messages.emojiInvalidImage));
       cancelChooseFile();
     }
   }, [cancelChooseFile]);
@@ -221,7 +224,7 @@ const EmojiUploadPicker = props => {
       const reader = new FileReader();
       const file = files[0];
       if (ImageUtil.hasFileExceededSize(file)) {
-        setChooseEmojiErrorMessage(messages.emojiImageTooBig);
+        setChooseEmojiErrorMessage(jsx(FormattedMessage, messages.emojiImageTooBig));
         cancelChooseFile();
         return;
       }
@@ -245,7 +248,9 @@ const EmojiUploadPicker = props => {
       }
     }, 0, lastFocusedElementId.current);
   }, [clearUploadPicker, onUploadCancelled]);
-  const chooseErrorMessage = useMemo(() => chooseEmojiErrorMessage ? jsx(FormattedMessage, chooseEmojiErrorMessage) : undefined, [chooseEmojiErrorMessage]);
+  const onChooseFileClicked = () => {
+    onFileChooserClicked && onFileChooserClicked();
+  };
   return jsx(FocusLock, {
     noFocusGuards: true
   }, name && previewImage ? jsx(EmojiUploadPreview, {
@@ -258,10 +263,10 @@ const EmojiUploadPicker = props => {
   }) : jsx(ChooseEmojiFile, {
     name: name,
     onChooseFile: onChooseFile,
-    onClick: onFileChooserClicked,
+    onClick: onChooseFileClicked,
     onNameChange: onNameChange,
     onUploadCancelled: cancelUpload,
-    errorMessage: chooseErrorMessage,
+    errorMessage: chooseEmojiErrorMessage,
     intl: intl
   }));
 };

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

@@ -7,14 +7,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 const uploadPreviewTestId = 'upload-preview';
 export const cancelUploadButtonTestId = 'cancel-upload-button';
-const addEmojiButtonDescriptionId = 'add.emoji.button.screen.reader.description.id';
+const addEmojiPreviewDescriptionId = 'fabric.emoji.preview.description.id';
+const addEmojiButtonLabelId = 'fabric.emoji.add.label.id';
 class EmojiUploadPreview extends PureComponent {
   render() {
     const {
@@ -67,18 +68,21 @@ class EmojiUploadPreview extends 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: `${emojiErrorScreenreaderTestId} ${addEmojiButtonLabelId}`
     }), jsx(AkButton, {
       onClick: onUploadCancelled,
       appearance: "subtle",

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

@@ -6,13 +6,16 @@ const FileChooser = props => {
   const {
     accept,
     ariaDescribedBy,
+    ariaLabelledBy,
     isDisabled,
     label,
     onChange,
     onClick
   } = props;
   const filePickerRef = useRef(null);
+  const fileButtonRef = useRef(null);
   const handleOnChooseFile = () => {
+    var _fileButtonRef$curren;
     if (!filePickerRef.current) {
       return;
     }
@@ -20,12 +23,15 @@ const 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/es2019/components/common/ResourcedEmoji.js

@@ -9,7 +9,8 @@ const ResourcedEmojiComponent = Loadable({
 });
 const ResourcedEmoji = props => {
   const {
-    emojiId
+    emojiId,
+    optimisticImageURL
   } = props;
   useEffect(() => {
     if (!emojiId) {
@@ -20,7 +21,8 @@ const ResourcedEmoji = props => {
     });
     ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName).addMetadata({
       source: 'ResourcedEmoji',
-      emojiId: emojiId.id
+      emojiId: emojiId.id,
+      isOptimisticImageURL: !!optimisticImageURL
     });
     return () => {
       sampledUfoRenderedEmoji(emojiId).abort({
@@ -30,7 +32,7 @@ const ResourcedEmoji = props => {
         }
       });
     };
-  }, [emojiId]);
+  }, [emojiId, optimisticImageURL]);
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
     experiences: [ufoExperiences['emoji-rendered'].getInstance(props.emojiId.id || props.emojiId.shortName)]
   }, /*#__PURE__*/React.createElement(ResourcedEmojiComponent, props));

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

@@ -15,13 +15,17 @@ const LoadingSpinner = () => {
 };
 const RetryButton = props => {
   const {
-    onSubmit
+    onSubmit,
+    ariaLabelledBy,
+    ariaDescribedBy
   } = props;
   return jsx(FormattedMessage, messages.retryLabel, retryLabel => jsx(AkButton, {
     css: uploadRetryButton,
     appearance: "warning",
     onClick: onSubmit,
     testId: retryUploadButtonTestId,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
     autoFocus: true
   }, retryLabel));
 };
@@ -30,14 +34,16 @@ const UploadButton = props => {
     appearance,
     onSubmit,
     label,
-    ariaDescribedby
+    ariaLabelledBy,
+    ariaDescribedBy
   } = props;
   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/es2019/components/common/ToolTipContentWithKeymap.js

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

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

@@ -1,7 +1,8 @@
 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 const commonSelectedStyles = 'emoji-common-selected';
 export const selectOnHoverStyles = 'emoji-common-select-on-hover';
 export const emojiSprite = 'emoji-common-emoji-sprite';
@@ -9,18 +10,15 @@ export const emojiNodeStyles = 'emoji-common-node';
 export const emojiImage = 'emoji-common-emoji-image';
 export const emojiDeleteButton = 'emoji-common-deleteButton';
 export const emojiMainStyle = 'emoji-common-main-styles';
+export const deletableEmoji = 'emoji-common-deletable';
 export const 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 const emojiToneSelectorContainer = css({
   flex: 1,
@@ -28,7 +26,7 @@ export const emojiToneSelectorContainer = css({
   justifyContent: 'flex-end',
   padding: '10px 10px 11px 0'
 });
-export const emojiStyles = css({
+export const emojiImageContainer = css({
   borderRadius: "var(--ds-radius-100, 3px)",
   backgroundColor: 'transparent',
   display: 'inline-block',
@@ -37,6 +35,9 @@ export const emojiStyles = css({
   // 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',
+  img: {
+    display: 'block'
+  },
   [`&.${commonSelectedStyles},&.${selectOnHoverStyles}:hover`]: {
     backgroundColor: akEmojiSelectedBackgroundColor
   },
@@ -44,8 +45,12 @@ export const emojiStyles = css({
     // show delete button on hover
     visibility: 'visible'
   },
-  img: {
-    display: 'block'
+  [`&.${deletableEmoji}`]: {
+    position: 'relative'
+  },
+  // show delete button on focus
+  [`&.${deletableEmoji}:focus-within .${emojiDeleteButton}`]: {
+    visibility: 'visible'
   },
   '&:focus': {
     boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
@@ -53,7 +58,7 @@ export const emojiStyles = css({
     outline: 'none'
   }
 });
-export const emojiContainer = css({
+export const emojiSpriteContainer = css({
   display: 'inline-block',
   // Ensure along with vertical align middle, we don't increase the line height for h1..h6, and p
   margin: '-1px 0',
@@ -206,13 +211,13 @@ export const previewImg = css({
   display: 'inline-block',
   flex: 'initial',
   width: '32px',
-  [`& .${emojiSprite}, > span`]: {
+  [`& .${emojiSprite}, span[role="img"]`]: {
     width: '32px',
     height: '32px',
     padding: 0,
     maxHeight: 'inherit'
   },
-  [`& > span > img`]: {
+  [`& span[role="img"] > img`]: {
     position: 'relative',
     left: '50%',
     top: '50%',
@@ -346,6 +351,17 @@ export const deleteText = css({
     lineHeight: '16px'
   }
 });
+export const 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 const requiredSymbol = css({
+  paddingLeft: `${getGridSize() / 4}px`,
+  color: `var(--ds-text-danger, ${R400})`,
+  fontFamily: getFontFamily()
+});
 export const previewButtonGroup = css({
   display: 'flex'
 });
@@ -416,4 +432,12 @@ export const emojiActionsWrapper = css({
   display: 'flex',
   justifyContent: 'flex-end',
   alignItems: 'center'
+});
+export const tooltipShortcutStyle = css({
+  borderRadius: '3px',
+  backgroundColor: `var(--ds-background-inverse-subtle, ${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/es2019/components/i18n.js

@@ -1,5 +1,15 @@
 import { defineMessages } from 'react-intl-next';
 export const 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',
@@ -102,7 +112,7 @@ export const 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: {
@@ -202,12 +212,17 @@ export const messages = defineMessages({
   },
   emojiPickerGrid: {
     id: 'fabric.emoji.pickerlist.grid',
-    defaultMessage: '{showSearchResults, select, true{Search results} other{Emojis}}',
+    defaultMessage: '{showSearchResults, select, true{Search results} other{Emojis}}.',
     description: `Aria label for emoji picker grid, showSearchResults is a boolean variable, message will be "Entering Emojis table", or "Leaving Emojis"`
   },
   emojiButtonRoleDescription: {
     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/es2019/components/picker/CategorySelector.js

@@ -52,6 +52,7 @@ const CategorySelector = props => {
       return;
     }
     e.preventDefault();
+    e.stopPropagation();
     const lastCategoryIndex = categories.length - 1;
     switch (e.key) {
       // navigate to the right category
@@ -111,7 +112,7 @@ const 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/es2019/components/picker/CategoryTracker.js

@@ -21,4 +21,7 @@ export default class CategoryTracker {
   getRow(category) {
     return this.categoryToRow.get(category);
   }
+  getFirstCategory() {
+    return this.rowToCategory.get(0);
+  }
 }