@atlaskit/emoji 67.1.0 → 67.2.1

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

@@ -1,20 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useRef, useEffect, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import EmojiDeletePreview from '../common/EmojiDeletePreview';
 import EmojiUploadPicker from '../common/EmojiUploadPicker';
 import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
 import ToneSelector from './ToneSelector';
-import EmojiButton from './EmojiButton';
+import TonePreviewButton from './TonePreviewButton';
 import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
 import { addCustomEmoji, addCustomEmojiButton, emojiActionsWrapper, emojiPickerAddEmoji, emojiToneSelectorContainer } from './styles';
 import { emojiActionsContainerWithBottomShadow, emojiPickerFooter } from '../picker/styles';
+import { DEFAULT_TONE } from '../../util/constants';
 export var emojiActionsTestId = 'emoji-actions';
 export var uploadEmojiTestId = 'upload-emoji';
 
@@ -22,8 +23,7 @@ export var uploadEmojiTestId = 'upload-emoji';
 
 var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
-    uploadEnabled = props.uploadEnabled,
-    formatMessage = props.intl.formatMessage;
+    uploadEnabled = props.uploadEnabled;
   return jsx(Fragment, null, uploadEnabled && jsx("div", {
     css: addCustomEmoji,
     "data-testid": uploadEmojiTestId
@@ -31,44 +31,73 @@ var AddOwnEmoji = function AddOwnEmoji(props) {
     return jsx(AkButton, {
       onClick: onOpenUpload,
       iconBefore: jsx(AddIcon, {
-        label: formatMessage(messages.addCustomEmojiLabel),
+        label: "",
         size: "small"
       }),
       appearance: "subtle",
       css: addCustomEmojiButton,
-      className: emojiPickerAddEmoji
+      className: emojiPickerAddEmoji,
+      tabIndex: 0,
+      id: "add-custom-emoji"
     }, label);
   })));
 };
 var TonesWrapper = function TonesWrapper(props) {
   var toneEmoji = props.toneEmoji,
-    selectedTone = props.selectedTone,
+    _props$selectedTone = props.selectedTone,
+    selectedTone = _props$selectedTone === void 0 ? DEFAULT_TONE : _props$selectedTone,
     intl = props.intl,
-    onToneSelected = props.onToneSelected,
     onToneOpen = props.onToneOpen,
     showToneSelector = props.showToneSelector;
   var formatMessage = intl.formatMessage;
+  var tonePreviewButtonRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusTonePreviewButton = _useState2[0],
+    setFocusTonePreviewButton = _useState2[1];
+  useEffect(function () {
+    if (focusTonePreviewButton && tonePreviewButtonRef.current) {
+      tonePreviewButtonRef.current.focus();
+    }
+    return function () {
+      setFocusTonePreviewButton(false);
+    };
+  });
+  var onToneCloseHandler = function onToneCloseHandler() {
+    var onToneClose = props.onToneClose;
+    onToneClose();
+    setFocusTonePreviewButton(true);
+  };
+  var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
+    var onToneSelected = props.onToneSelected;
+    onToneSelected(toneValue);
+    setFocusTonePreviewButton(true);
+  };
   if (!toneEmoji) {
     return null;
   }
-  var previewEmoji = toneEmoji;
-  if (selectedTone && previewEmoji.skinVariations) {
-    previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
+  var previewToneEmoji = toneEmoji;
+  if (selectedTone !== DEFAULT_TONE && previewToneEmoji.skinVariations) {
+    previewToneEmoji = previewToneEmoji.skinVariations[selectedTone - 1];
   }
   return jsx("div", {
     css: emojiToneSelectorContainer
-  }, showToneSelector && jsx(ToneSelector, {
+  }, jsx(ToneSelector, {
     emoji: toneEmoji,
-    onToneSelected: onToneSelected,
-    previewEmojiId: previewEmoji.id
-  }), jsx(EmojiButton, {
+    onToneSelected: onToneSelectedHandler,
+    onToneClose: onToneCloseHandler,
+    selectedTone: selectedTone,
+    isVisible: showToneSelector
+  }), jsx(TonePreviewButton, {
+    ref: tonePreviewButtonRef,
     ariaExpanded: showToneSelector,
-    emoji: previewEmoji,
+    emoji: previewToneEmoji,
     selectOnHover: true,
     onSelected: onToneOpen,
     ariaLabelText: formatMessage(messages.emojiSelectSkinToneButtonAriaLabelText, {
-      selectedTone: "".concat(setSkinToneAriaLabelText(previewEmoji.name), " selected")
-    })
+      selectedTone: "".concat(setSkinToneAriaLabelText(previewToneEmoji.name))
+    }),
+    isVisible: !showToneSelector
   }));
 };
 export var EmojiActions = function EmojiActions(props) {
@@ -84,15 +113,20 @@ export var EmojiActions = function EmojiActions(props) {
     onFileChooserClicked = props.onFileChooserClicked,
     emojiToDelete = props.emojiToDelete,
     onChange = props.onChange,
-    query = props.query;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showToneSelector = _useState2[0],
-    setShowToneSelector = _useState2[1];
+    query = props.query,
+    _props$resultsCount = props.resultsCount,
+    resultsCount = _props$resultsCount === void 0 ? 0 : _props$resultsCount;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showToneSelector = _useState4[0],
+    setShowToneSelector = _useState4[1];
   var previewFooterClassnames = [emojiPickerFooter, emojiActionsContainerWithBottomShadow];
   var onToneOpenHandler = function onToneOpenHandler() {
     return setShowToneSelector(true);
   };
+  var onToneCloseHandler = function onToneCloseHandler() {
+    return setShowToneSelector(false);
+  };
   var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
     setShowToneSelector(false);
     if (onToneSelected) {
@@ -133,11 +167,13 @@ export var EmojiActions = function EmojiActions(props) {
     css: emojiActionsWrapper
   }, !showToneSelector && jsx(EmojiPickerListSearch, {
     onChange: onChange,
-    query: query
+    query: query,
+    resultsCount: resultsCount
   }), jsx(TonesWrapper, _extends({}, props, {
     onToneOpen: onToneOpenHandler,
+    onToneClose: onToneCloseHandler,
     onToneSelected: onToneSelectedHandler,
     showToneSelector: showToneSelector
   }))), jsx(AddOwnEmoji, props));
 };
-export default injectIntl(EmojiActions);
+export default injectIntl( /*#__PURE__*/memo(EmojiActions));

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

@@ -1,8 +1,9 @@
 /** @jsx jsx */
-
+import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 export var emojiErrorMessageTestId = 'emoji-error-message';
 export var emojiErrorMessageTooltipTestId = 'emoji-error-message-tooltip';
 export var emojiErrorIconTestId = 'emoji-error-icon';
@@ -10,7 +11,7 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
   var messageStyles = props.messageStyles,
     message = props.message,
     tooltip = props.tooltip;
-  return tooltip ? jsx("div", {
+  var visualContent = tooltip ? jsx("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
   }, jsx(Tooltip, {
@@ -27,6 +28,9 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
   }, jsx(ErrorIcon, {
     label: "Error",
     size: "small"
-  }), " ", message);
+  }), message);
+  return jsx(Fragment, null, jsx(VisuallyHidden, {
+    role: "alert"
+  }, message), visualContent);
 };
 export default EmojiErrorMessage;

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

@@ -34,6 +34,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
   return jsx("span", {
     "data-testid": emojiPlaceholderTestId(shortName),
     "aria-busy": loading,
+    role: "status",
     "aria-label": shortName,
     className: placeholder,
     css: loading ? [placeholderContainer, placeholderContainerAnimated] : placeholderContainer,

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

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+import React, { memo, forwardRef } from 'react';
+import { jsx } from '@emotion/react';
+import { leftClick } from '../../util/mouse';
+import { emojiButton, emojiRadio } from './styles';
+import Emoji from './Emoji';
+import { TONESELECTOR_KEYBOARD_KEYS_SUPPORTED } from '../../util/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+var handleMouseDown = function handleMouseDown(props, event) {
+  var onSelected = props.onSelected;
+  event.preventDefault();
+  if (onSelected && leftClick(event)) {
+    onSelected();
+  }
+};
+var handleKeyPress = function handleKeyPress(props, event) {
+  if (TONESELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(event.key)) {
+    var onSelected = props.onSelected;
+    event.preventDefault();
+    if (onSelected) {
+      onSelected();
+    }
+  }
+};
+export var EmojiRadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var emoji = props.emoji,
+    selectOnHover = props.selectOnHover,
+    ariaLabelText = props.ariaLabelText,
+    defaultChecked = props.defaultChecked;
+  return jsx("label", {
+    css: emojiButton,
+    onMouseDown: function onMouseDown(event) {
+      return handleMouseDown(props, event);
+    },
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyPress(props, event);
+    }
+  }, jsx(VisuallyHidden, null, ariaLabelText), jsx("input", {
+    ref: ref,
+    "data-testid": ariaLabelText,
+    type: "radio",
+    name: "skin-tone",
+    css: emojiRadio,
+    defaultChecked: defaultChecked
+  }), jsx(Emoji, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  }));
+});
+export default /*#__PURE__*/memo(EmojiRadioButton);

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

@@ -2,12 +2,13 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
-import React, { Fragment, useEffect, useState } from 'react';
+import { Fragment, useEffect, useState, useRef, memo, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import TextField from '@atlaskit/textfield';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import AkButton from '@atlaskit/button/standard-button';
+import FocusLock from 'react-focus-lock';
 import * as ImageUtil from '../../util/image';
 import debug from '../../util/logger';
 import { messages } from '../i18n';
@@ -17,6 +18,8 @@ import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
 import { closeEmojiUploadButton, emojiChooseFileErrorMessage, emojiUpload, emojiUploadBottom, emojiUploadTop, 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 disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 var sanitizeName = function sanitizeName(name) {
   // prevent / replace certain characters, allow others
@@ -30,7 +33,7 @@ var toEmojiName = function toEmojiName(uploadName) {
   var name = uploadName.split('_').join(' ');
   return "".concat(name.substr(0, 1).toLocaleUpperCase()).concat(name.substr(1));
 };
-var ChooseEmojiFile = function ChooseEmojiFile(props) {
+var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
   var _props$name = props.name,
     name = _props$name === void 0 ? '' : _props$name,
     onChooseFile = props.onChooseFile,
@@ -42,13 +45,31 @@ var ChooseEmojiFile = function ChooseEmojiFile(props) {
   var formatMessage = intl.formatMessage;
   var disableChooser = !name;
   var fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id';
-  var onKeyDownHandler = function onKeyDownHandler(event) {
+  var inputRef = useRef(null);
+  var onKeyDownHandler = useCallback(function (event) {
     if (event.key === 'Escape') {
       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();
+    }
+  }, []);
+
+  // 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);
+  var emojiChooseFileTitle = formatMessage(messages.emojiChooseFileTitle);
   return jsx("div", {
-    css: emojiUpload
+    css: emojiUpload,
+    "data-testid": uploadEmojiComponentTestId
   }, jsx("div", {
     css: emojiUploadTop
   }, jsx("span", {
@@ -59,27 +80,30 @@ var ChooseEmojiFile = function ChooseEmojiFile(props) {
     css: closeEmojiUploadButton
   }, jsx(AkButton, {
     onClick: onUploadCancelled,
-    "aria-describedby": formatMessage(messages.cancelLabel),
+    "aria-label": cancelLabel,
     appearance: "subtle",
     spacing: "none",
-    shouldFitContainer: true
+    shouldFitContainer: true,
+    testId: cancelEmojiUploadPickerTestId
   }, jsx(CrossIcon, {
     size: "small",
-    label: formatMessage(messages.cancelLabel)
+    label: cancelLabel
   })))), jsx("div", {
     css: uploadChooseFileRow
   }, jsx("span", {
     css: uploadChooseFileEmojiName
   }, jsx(TextField, {
-    placeholder: formatMessage(messages.emojiPlaceholder),
-    "aria-label": formatMessage(messages.emojiNameAriaLabel),
+    placeholder: emojiPlaceholder,
+    "aria-label": emojiNameAriaLabel,
     maxLength: maxNameLength,
     onChange: onNameChange,
     onKeyDown: onKeyDownHandler,
     value: name,
     isCompact: true,
     autoFocus: true,
-    testId: uploadEmojiNameInputTestId
+    testId: uploadEmojiNameInputTestId,
+    ref: inputRef,
+    id: "new-emoji-name-input"
   })), jsx("span", {
     css: uploadChooseFileBrowse
   }, jsx(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
@@ -87,7 +111,7 @@ var ChooseEmojiFile = function ChooseEmojiFile(props) {
       hidden: true,
       id: fileChooserButtonDescriptionId
     }, screenReaderDescription), jsx(FileChooser, {
-      label: formatMessage(messages.emojiChooseFileTitle),
+      label: emojiChooseFileTitle,
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",
@@ -100,8 +124,9 @@ var ChooseEmojiFile = function ChooseEmojiFile(props) {
     messageStyles: emojiChooseFileErrorMessage,
     message: errorMessage
   })));
-};
+});
 var EmojiUploadPicker = function EmojiUploadPicker(props) {
+  var _document$activeEleme2;
   var errorMessage = props.errorMessage,
     initialUploadName = props.initialUploadName,
     onUploadEmoji = props.onUploadEmoji,
@@ -128,6 +153,8 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     _useState10 = _slicedToArray(_useState9, 2),
     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 : '');
   useEffect(function () {
     if (errorMessage) {
       setUploadStatus(UploadStatus.Error);
@@ -143,13 +170,18 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       setName(sanitizeName(initialUploadName));
     }
   }, [initialUploadName]);
-  var onNameChange = function onNameChange(event) {
+  var clearUploadPicker = useCallback(function () {
+    setName(undefined);
+    setPreviewImage(undefined);
+    setUploadStatus(UploadStatus.Waiting);
+  }, []);
+  var onNameChange = useCallback(function (event) {
     var newName = sanitizeName(event.target.value);
     if (name !== newName) {
       setName(newName);
     }
-  };
-  var onAddEmoji = function onAddEmoji() {
+  }, [name]);
+  var onAddEmoji = useCallback(function () {
     if (uploadStatus === UploadStatus.Uploading) {
       return;
     }
@@ -179,13 +211,16 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
         });
       });
     }
-  };
-  var errorOnUpload = function errorOnUpload(event) {
+  }, [clearUploadPicker, filename, name, onUploadEmoji, previewImage, uploadStatus]);
+  var cancelChooseFile = useCallback(function () {
+    setPreviewImage(undefined);
+  }, []);
+  var errorOnUpload = useCallback(function (event) {
     debug('File load error: ', event);
     setChooseEmojiErrorMessage(messages.emojiUploadFailed);
     cancelChooseFile();
-  };
-  var onFileLoad = function onFileLoad(file) {
+  }, [cancelChooseFile]);
+  var onFileLoad = useCallback(function (file) {
     return /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(f) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -216,11 +251,8 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
         return _ref.apply(this, arguments);
       };
     }();
-  };
-  var cancelChooseFile = function cancelChooseFile() {
-    setPreviewImage(undefined);
-  };
-  var onChooseFile = function onChooseFile(event) {
+  }, [cancelChooseFile]);
+  var onChooseFile = useCallback(function (event) {
     var files = event.target.files;
     if (files.length) {
       var reader = new FileReader();
@@ -237,17 +269,25 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     } else {
       cancelChooseFile();
     }
-  };
-  var clearUploadPicker = function clearUploadPicker() {
-    setName(undefined);
-    setPreviewImage(undefined);
-    setUploadStatus(UploadStatus.Waiting);
-  };
-  var cancelUpload = function cancelUpload() {
+  }, [cancelChooseFile, errorOnUpload, onFileLoad]);
+  var cancelUpload = useCallback(function () {
     clearUploadPicker();
     onUploadCancelled();
-  };
-  return jsx(React.Fragment, null, name && previewImage ? jsx(EmojiUploadPreview, {
+
+    // using setTimeout here to allow the UI to update before setting focus
+    setTimeout(function (lastFocus) {
+      if (lastFocus) {
+        var _document$getElementB;
+        (_document$getElementB = document.getElementById(lastFocus)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
+      }
+    }, 0, lastFocusedElementId.current);
+  }, [clearUploadPicker, onUploadCancelled]);
+  var chooseErrorMessage = useMemo(function () {
+    return chooseEmojiErrorMessage ? jsx(FormattedMessage, chooseEmojiErrorMessage) : undefined;
+  }, [chooseEmojiErrorMessage]);
+  return jsx(FocusLock, {
+    noFocusGuards: true
+  }, name && previewImage ? jsx(EmojiUploadPreview, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -260,8 +300,9 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     onClick: onFileChooserClicked,
     onNameChange: onNameChange,
     onUploadCancelled: cancelUpload,
-    errorMessage: chooseEmojiErrorMessage ? jsx(FormattedMessage, chooseEmojiErrorMessage) : undefined,
+    errorMessage: chooseErrorMessage,
     intl: intl
   }));
 };
-export default injectIntl(EmojiUploadPicker);
+var EmojiUploadPickerComponent = injectIntl( /*#__PURE__*/memo(EmojiUploadPicker));
+export default EmojiUploadPickerComponent;

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

@@ -18,8 +18,10 @@ import EmojiErrorMessage 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 EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiUploadPreview, _PureComponent);
   var _super = _createSuper(EmojiUploadPreview);
@@ -76,12 +78,19 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
         messageStyles: emojiPreviewErrorMessage,
         message: errorMessage,
         tooltip: true
-      }) : null, jsx(RetryableButton, {
+      }) : null, !errorMessage && jsx(VisuallyHidden, {
+        id: addEmojiButtonDescriptionId
+      }, jsx(FormattedMessage, _extends({}, messages.emojiPreview, {
+        values: {
+          emoji: name
+        }
+      }))), jsx(RetryableButton, {
         label: formatMessage(messages.addEmojiLabel),
         onSubmit: onAddEmoji,
         appearance: "primary",
         loading: uploading,
-        error: !!errorMessage
+        error: !!errorMessage,
+        ariaDescribedby: addEmojiButtonDescriptionId
       }), jsx(AkButton, {
         onClick: onUploadCancelled,
         appearance: "subtle",

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

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import AkButton from '@atlaskit/button/custom-theme-button';
+import AkButton from '@atlaskit/button/standard-button';
 export var chooseFileButtonTestId = 'choose-file-button';
 export var fileUploadInputTestId = 'file-upload';
 var FileChooser = function FileChooser(props) {

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

@@ -14,7 +14,8 @@ var ResourcedEmojiComponent = Loadable({
   }
 });
 var ResourcedEmoji = function ResourcedEmoji(props) {
-  var emojiId = props.emojiId;
+  var emojiId = props.emojiId,
+    optimisticImageURL = props.optimisticImageURL;
   useEffect(function () {
     if (!emojiId) {
       return;
@@ -24,7 +25,8 @@ var ResourcedEmoji = function ResourcedEmoji(props) {
     });
     ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName).addMetadata({
       source: 'ResourcedEmoji',
-      emojiId: emojiId.id
+      emojiId: emojiId.id,
+      isOptimisticImageURL: !!optimisticImageURL
     });
     return function () {
       sampledUfoRenderedEmoji(emojiId).abort({
@@ -34,7 +36,7 @@ var ResourcedEmoji = function 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/esm/components/common/ResourcedEmojiComponent.js

@@ -139,6 +139,10 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     }
     fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
   }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+
+  /**
+   * Setting resolved emoji provider for optimistic rendering
+   */
   useEffect(function () {
     Promise.resolve(emojiProvider).then(function (emojiProvider) {
       setResolvedEmojiProvider(emojiProvider);

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

@@ -20,19 +20,23 @@ var RetryButton = function RetryButton(props) {
       css: uploadRetryButton,
       appearance: "warning",
       onClick: onSubmit,
-      testId: retryUploadButtonTestId
+      testId: retryUploadButtonTestId,
+      autoFocus: true
     }, retryLabel);
   });
 };
 var UploadButton = function UploadButton(props) {
   var appearance = props.appearance,
     onSubmit = props.onSubmit,
-    label = props.label;
+    label = props.label,
+    ariaDescribedby = props.ariaDescribedby;
   return jsx(AkButton, {
     css: uploadEmojiButton,
     appearance: appearance,
     onClick: onSubmit,
-    testId: uploadEmojiButtonTestId
+    testId: uploadEmojiButtonTestId,
+    "aria-describedby": ariaDescribedby,
+    autoFocus: true
   }, label);
 };
 var RetryableButton = function RetryableButton(props) {

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

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { jsx } from '@emotion/react';
+import { emojiButton, hidden } from './styles';
+import Emoji from './Emoji';
+export var tonePreviewTestId = 'tone-preview';
+export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var emoji = props.emoji,
+    selectOnHover = props.selectOnHover,
+    ariaLabelText = props.ariaLabelText,
+    ariaExpanded = props.ariaExpanded,
+    onSelected = props.onSelected,
+    _props$isVisible = props.isVisible,
+    isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
+  return jsx("button", {
+    ref: ref,
+    css: [emojiButton, !isVisible && hidden],
+    onClick: onSelected,
+    "aria-label": ariaLabelText,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": "emoji-picker-tone-selector",
+    style: {
+      overflow: 'hidden'
+    },
+    "data-testid": tonePreviewTestId
+  }, jsx(Emoji, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  }));
+});
+export default /*#__PURE__*/memo(TonePreviewButton);