@atlaskit/emoji 67.0.7 → 67.2.0

package/dist/es2019/api/media/TokenManager.js

@@ -40,10 +40,10 @@ export default class TokenManager {
         // still valid
         return Promise.resolve(mediaApiToken);
       }
-      if (activeTokenRefresh) {
-        // refresh token promise already active, return that
-        return activeTokenRefresh;
-      }
+    }
+    if (activeTokenRefresh) {
+      // refresh token promise already active, return that
+      return activeTokenRefresh;
     }
 
     // request a new token and track the promise for future requests until completed

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

@@ -19,7 +19,9 @@ export const CachingEmoji = props => {
   // Optimisation to only render CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
   const {
-    emoji
+    emoji,
+    placeholderSize,
+    ...restProps
   } = props;
   // start emoji rendered experience, it may have already started earlier in `ResourcedEmoji`.
   useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
@@ -34,9 +36,14 @@ export const CachingEmoji = props => {
   }, []);
   const emojiNode = () => {
     if (isMediaEmoji(emoji)) {
-      return /*#__PURE__*/React.createElement(CachingMediaEmoji, props);
+      return /*#__PURE__*/React.createElement(CachingMediaEmoji, _extends({
+        emoji: emoji,
+        placeholderSize: placeholderSize
+      }, restProps));
     }
-    return /*#__PURE__*/React.createElement(Emoji, props);
+    return /*#__PURE__*/React.createElement(Emoji, _extends({
+      emoji: emoji
+    }, restProps));
   };
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
     experiences: [ufoExperiences['emoji-rendered'].getInstance(props.emoji.id || props.emoji.shortName)]

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

@@ -50,6 +50,15 @@ const handleMouseMove = (props, event) => {
     onMouseMove(toEmojiId(emoji), emoji, event);
   }
 };
+const handleFocus = (props, event) => {
+  const {
+    emoji,
+    onFocus
+  } = props;
+  if (onFocus) {
+    onFocus(toEmojiId(emoji), emoji, event);
+  }
+};
 const handleDelete = (props, event) => {
   const {
     emoji,
@@ -86,7 +95,18 @@ export const SpriteEmoji = props => {
     selectOnHover,
     className,
     showTooltip,
-    shouldBeInteractive
+    shouldBeInteractive = false,
+    tabIndex,
+    onSelected,
+    onMouseMove,
+    onFocus,
+    onDelete,
+    onLoadError,
+    onLoadSuccess,
+    showDelete,
+    disableLazyLoad,
+    autoWidth,
+    ...other
   } = props;
   const representation = emoji.representation;
   const sprite = representation.sprite;
@@ -108,11 +128,11 @@ export const SpriteEmoji = props => {
     backgroundSize: `${sprite.column * 100}% ${sprite.row * 100}%`,
     ...sizing
   };
-  return jsx("span", {
+  return jsx("span", _extends({
     "data-testid": `sprite-emoji-${emoji.shortName}`,
     "data-emoji-type": "sprite",
-    tabIndex: shouldBeInteractive ? 0 : undefined,
-    role: shouldBeInteractive ? 'button' : undefined,
+    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
+    role: shouldBeInteractive ? 'button' : 'img',
     css: emojiContainer,
     className: classes,
     onKeyPress: event => handleKeyPress(props, event),
@@ -122,9 +142,12 @@ export const SpriteEmoji = props => {
     onMouseEnter: event => {
       handleMouseMove(props, event);
     },
+    onFocus: event => {
+      handleFocus(props, event);
+    },
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : ''
-  }, jsx("span", {
+  }, other), jsx("span", {
     className: emojiSprite,
     style: style
   }, "\xA0"));
@@ -140,10 +163,17 @@ export const ImageEmoji = props => {
     className,
     showTooltip,
     showDelete,
-    shouldBeInteractive,
+    shouldBeInteractive = false,
+    tabIndex,
+    onSelected,
+    onMouseMove,
+    onFocus,
+    onDelete,
+    onLoadError,
     onLoadSuccess,
     disableLazyLoad,
-    autoWidth
+    autoWidth,
+    ...other
   } = props;
   const [ref, inView] = useInView({
     triggerOnce: true
@@ -233,12 +263,12 @@ export const ImageEmoji = props => {
     onError: onError,
     onLoad: onLoad
   }, sizing));
-  return jsx("span", {
+  return jsx("span", _extends({
     "data-testid": `image-emoji-${emoji.shortName}`,
     "data-emoji-type": "image",
     css: emojiStyles,
-    tabIndex: shouldBeInteractive ? 0 : undefined,
-    role: shouldBeInteractive ? 'button' : undefined,
+    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
+    role: shouldBeInteractive ? 'button' : 'img',
     className: classes,
     onKeyPress: event => handleKeyPress(props, event),
     onMouseDown: event => {
@@ -247,10 +277,13 @@ export const ImageEmoji = props => {
     onMouseEnter: event => {
       handleMouseMove(props, event);
     },
+    onFocus: event => {
+      handleFocus(props, event);
+    },
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : '',
     ref: ref
-  }, deleteButton, emojiNode);
+  }, other), deleteButton, emojiNode);
 };
 export const Emoji = props => {
   const {

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

@@ -1,19 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @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 { 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 const emojiActionsTestId = 'emoji-actions';
 export const uploadEmojiTestId = 'upload-emoji';
 
@@ -22,10 +23,7 @@ export const uploadEmojiTestId = 'upload-emoji';
 const AddOwnEmoji = props => {
   const {
     onOpenUpload,
-    uploadEnabled,
-    intl: {
-      formatMessage
-    }
+    uploadEnabled
   } = props;
   return jsx(Fragment, null, uploadEnabled && jsx("div", {
     css: addCustomEmoji,
@@ -33,47 +31,76 @@ const AddOwnEmoji = props => {
   }, jsx(FormattedMessage, messages.addCustomEmojiLabel, label => 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))));
 };
 const TonesWrapper = props => {
   const {
     toneEmoji,
-    selectedTone,
+    selectedTone = DEFAULT_TONE,
     intl,
-    onToneSelected,
     onToneOpen,
     showToneSelector
   } = props;
   const {
     formatMessage
   } = intl;
+  const tonePreviewButtonRef = useRef(null);
+  const [focusTonePreviewButton, setFocusTonePreviewButton] = useState(false);
+  useEffect(() => {
+    if (focusTonePreviewButton && tonePreviewButtonRef.current) {
+      tonePreviewButtonRef.current.focus();
+    }
+    return () => {
+      setFocusTonePreviewButton(false);
+    };
+  });
+  const onToneCloseHandler = () => {
+    const {
+      onToneClose
+    } = props;
+    onToneClose();
+    setFocusTonePreviewButton(true);
+  };
+  const onToneSelectedHandler = toneValue => {
+    const {
+      onToneSelected
+    } = props;
+    onToneSelected(toneValue);
+    setFocusTonePreviewButton(true);
+  };
   if (!toneEmoji) {
     return null;
   }
-  let previewEmoji = toneEmoji;
-  if (selectedTone && previewEmoji.skinVariations) {
-    previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
+  let 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: `${setSkinToneAriaLabelText(previewEmoji.name)} selected`
-    })
+      selectedTone: `${setSkinToneAriaLabelText(previewToneEmoji.name)}`
+    }),
+    isVisible: !showToneSelector
   }));
 };
 export const EmojiActions = props => {
@@ -90,11 +117,13 @@ export const EmojiActions = props => {
     onFileChooserClicked,
     emojiToDelete,
     onChange,
-    query
+    query,
+    resultsCount = 0
   } = props;
   const [showToneSelector, setShowToneSelector] = useState(false);
   const previewFooterClassnames = [emojiPickerFooter, emojiActionsContainerWithBottomShadow];
   const onToneOpenHandler = () => setShowToneSelector(true);
+  const onToneCloseHandler = () => setShowToneSelector(false);
   const onToneSelectedHandler = toneValue => {
     setShowToneSelector(false);
     if (onToneSelected) {
@@ -135,11 +164,13 @@ export const 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/es2019/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 const emojiErrorMessageTestId = 'emoji-error-message';
 export const emojiErrorMessageTooltipTestId = 'emoji-error-message-tooltip';
 export const emojiErrorIconTestId = 'emoji-error-icon';
@@ -12,7 +13,7 @@ const EmojiErrorMessage = props => {
     message,
     tooltip
   } = props;
-  return tooltip ? jsx("div", {
+  const visualContent = tooltip ? jsx("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
   }, jsx(Tooltip, {
@@ -29,6 +30,9 @@ const 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/es2019/components/common/EmojiPlaceholder.js

@@ -32,6 +32,7 @@ const 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/es2019/components/common/EmojiRadioButton.js

@@ -0,0 +1,54 @@
+/** @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';
+const handleMouseDown = (props, event) => {
+  const {
+    onSelected
+  } = props;
+  event.preventDefault();
+  if (onSelected && leftClick(event)) {
+    onSelected();
+  }
+};
+const handleKeyPress = (props, event) => {
+  if (TONESELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(event.key)) {
+    const {
+      onSelected
+    } = props;
+    event.preventDefault();
+    if (onSelected) {
+      onSelected();
+    }
+  }
+};
+export const EmojiRadioButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    emoji,
+    selectOnHover,
+    ariaLabelText,
+    defaultChecked
+  } = props;
+  return jsx("label", {
+    css: emojiButton,
+    onMouseDown: event => handleMouseDown(props, event),
+    onKeyDown: event => 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/es2019/components/common/EmojiUploadPicker.js

@@ -1,10 +1,11 @@
 /** @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';
@@ -14,6 +15,8 @@ import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
 import { closeEmojiUploadButton, emojiChooseFileErrorMessage, emojiUpload, emojiUploadBottom, emojiUploadTop, 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 disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 const sanitizeName = name => {
   // prevent / replace certain characters, allow others
@@ -27,7 +30,7 @@ const toEmojiName = uploadName => {
   const name = uploadName.split('_').join(' ');
   return `${name.substr(0, 1).toLocaleUpperCase()}${name.substr(1)}`;
 };
-const ChooseEmojiFile = props => {
+const ChooseEmojiFile = /*#__PURE__*/memo(props => {
   const {
     name = '',
     onChooseFile,
@@ -42,13 +45,31 @@ const ChooseEmojiFile = props => {
   } = intl;
   const disableChooser = !name;
   const fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id';
-  const onKeyDownHandler = event => {
+  const inputRef = useRef(null);
+  const onKeyDownHandler = useCallback(event => {
     if (event.key === 'Escape') {
       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();
+    }
+  }, []);
+
+  // 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);
+  const emojiChooseFileTitle = formatMessage(messages.emojiChooseFileTitle);
   return jsx("div", {
-    css: emojiUpload
+    css: emojiUpload,
+    "data-testid": uploadEmojiComponentTestId
   }, jsx("div", {
     css: emojiUploadTop
   }, jsx("span", {
@@ -57,34 +78,37 @@ const 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, screenReaderDescription => jsx(Fragment, null, jsx("span", {
     hidden: true,
     id: fileChooserButtonDescriptionId
   }, screenReaderDescription), jsx(FileChooser, {
-    label: formatMessage(messages.emojiChooseFileTitle),
+    label: emojiChooseFileTitle,
     onChange: onChooseFile,
     onClick: onClick,
     accept: "image/png,image/jpeg,image/gif",
@@ -96,8 +120,9 @@ const ChooseEmojiFile = props => {
     messageStyles: emojiChooseFileErrorMessage,
     message: errorMessage
   })));
-};
+});
 const EmojiUploadPicker = props => {
+  var _document$activeEleme2;
   const {
     errorMessage,
     initialUploadName,
@@ -111,6 +136,8 @@ const EmojiUploadPicker = props => {
   const [name, setName] = useState(initialUploadName && sanitizeName(initialUploadName));
   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 : '');
   useEffect(() => {
     if (errorMessage) {
       setUploadStatus(UploadStatus.Error);
@@ -126,13 +153,18 @@ const EmojiUploadPicker = props => {
       setName(sanitizeName(initialUploadName));
     }
   }, [initialUploadName]);
-  const onNameChange = event => {
+  const clearUploadPicker = useCallback(() => {
+    setName(undefined);
+    setPreviewImage(undefined);
+    setUploadStatus(UploadStatus.Waiting);
+  }, []);
+  const onNameChange = useCallback(event => {
     let newName = sanitizeName(event.target.value);
     if (name !== newName) {
       setName(newName);
     }
-  };
-  const onAddEmoji = () => {
+  }, [name]);
+  const onAddEmoji = useCallback(() => {
     if (uploadStatus === UploadStatus.Uploading) {
       return;
     }
@@ -164,13 +196,16 @@ const EmojiUploadPicker = props => {
         });
       });
     }
-  };
-  const errorOnUpload = event => {
+  }, [clearUploadPicker, filename, name, onUploadEmoji, previewImage, uploadStatus]);
+  const cancelChooseFile = useCallback(() => {
+    setPreviewImage(undefined);
+  }, []);
+  const errorOnUpload = useCallback(event => {
     debug('File load error: ', event);
     setChooseEmojiErrorMessage(messages.emojiUploadFailed);
     cancelChooseFile();
-  };
-  const onFileLoad = file => async f => {
+  }, [cancelChooseFile]);
+  const onFileLoad = useCallback(file => async f => {
     try {
       setFilename(file.name);
       await ImageUtil.parseImage(f.target.result);
@@ -179,11 +214,8 @@ const EmojiUploadPicker = props => {
       setChooseEmojiErrorMessage(messages.emojiInvalidImage);
       cancelChooseFile();
     }
-  };
-  const cancelChooseFile = () => {
-    setPreviewImage(undefined);
-  };
-  const onChooseFile = event => {
+  }, [cancelChooseFile]);
+  const onChooseFile = useCallback(event => {
     const files = event.target.files;
     if (files.length) {
       const reader = new FileReader();
@@ -200,17 +232,23 @@ const EmojiUploadPicker = props => {
     } else {
       cancelChooseFile();
     }
-  };
-  const clearUploadPicker = () => {
-    setName(undefined);
-    setPreviewImage(undefined);
-    setUploadStatus(UploadStatus.Waiting);
-  };
-  const cancelUpload = () => {
+  }, [cancelChooseFile, errorOnUpload, onFileLoad]);
+  const cancelUpload = useCallback(() => {
     clearUploadPicker();
     onUploadCancelled();
-  };
-  return jsx(React.Fragment, null, name && previewImage ? jsx(EmojiUploadPreview, {
+
+    // using setTimeout here to allow the UI to update before setting focus
+    setTimeout(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]);
+  const chooseErrorMessage = useMemo(() => chooseEmojiErrorMessage ? jsx(FormattedMessage, chooseEmojiErrorMessage) : undefined, [chooseEmojiErrorMessage]);
+  return jsx(FocusLock, {
+    noFocusGuards: true
+  }, name && previewImage ? jsx(EmojiUploadPreview, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -223,8 +261,9 @@ const EmojiUploadPicker = props => {
     onClick: onFileChooserClicked,
     onNameChange: onNameChange,
     onUploadCancelled: cancelUpload,
-    errorMessage: chooseEmojiErrorMessage ? jsx(FormattedMessage, chooseEmojiErrorMessage) : undefined,
+    errorMessage: chooseErrorMessage,
     intl: intl
   }));
 };
-export default injectIntl(EmojiUploadPicker);
+const EmojiUploadPickerComponent = injectIntl( /*#__PURE__*/memo(EmojiUploadPicker));
+export default EmojiUploadPickerComponent;

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

@@ -11,8 +11,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 const uploadPreviewTestId = 'upload-preview';
 export const cancelUploadButtonTestId = 'cancel-upload-button';
+const addEmojiButtonDescriptionId = 'add.emoji.button.screen.reader.description.id';
 class EmojiUploadPreview extends PureComponent {
   render() {
     const {
@@ -64,12 +66,19 @@ class EmojiUploadPreview extends 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/es2019/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 const chooseFileButtonTestId = 'choose-file-button';
 export const fileUploadInputTestId = 'file-upload';
 const FileChooser = props => {