@atlaskit/emoji 67.1.0 → 67.2.0

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/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);

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

@@ -2,11 +2,17 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useEffect, useMemo, useRef } from 'react';
-import EmojiButton from './EmojiButton';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel, toneSelectedEvent, toneSelectorOpenedEvent } from '../../util/analytics';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+import EmojiRadioButton from './EmojiRadioButton';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../i18n';
+import { hidden } from './styles';
+export var toneSelectorTestId = 'tone-selector';
 var extractAllTones = function extractAllTones(emoji) {
   if (emoji.skinVariations) {
     return [emoji].concat(_toConsumableArray(emoji.skinVariations));
@@ -16,24 +22,39 @@ var extractAllTones = function extractAllTones(emoji) {
 export var ToneSelectorInternal = function ToneSelectorInternal(props) {
   var createAnalyticsEvent = props.createAnalyticsEvent,
     emoji = props.emoji,
-    previewEmojiId = props.previewEmojiId,
-    onToneSelected = props.onToneSelected;
+    onToneSelected = props.onToneSelected,
+    onToneClose = props.onToneClose,
+    selectedTone = props.selectedTone,
+    isVisible = props.isVisible;
   var isMounted = useRef(false);
-  var firstToneButtonRef = useRef(null);
+  var selectedToneRadioRef = useRef(null);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var emojiToneCollection = useMemo(function () {
-    return extractAllTones(emoji).map(function (tone, index) {
+    var selectedToneIndex = -1;
+    var toneColletion = extractAllTones(emoji).map(function (tone, index) {
+      var isSelected = index === selectedTone;
+      if (isSelected) {
+        selectedToneIndex = index;
+      }
       return _objectSpread(_objectSpread({}, tone), {}, {
-        focused: tone.id !== previewEmojiId,
+        isSelected: isSelected,
         label: setSkinToneAriaLabelText(tone.name),
-        toneId: index
+        toneIndex: index
       });
     });
-  }, [emoji, previewEmojiId]);
+
+    // push description of selected tone to the end of the array
+    // so that it gets rendered last/rightmost
+    toneColletion.push(toneColletion.splice(selectedToneIndex, 1)[0]);
+    return toneColletion;
+  }, [emoji, selectedTone]);
   useEffect(function () {
-    if (firstToneButtonRef.current) {
-      firstToneButtonRef.current.focus();
+    if (isVisible) {
+      var _selectedToneRadioRef;
+      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 ? void 0 : _selectedToneRadioRef.focus();
     }
-  }, [firstToneButtonRef]);
+  }, [isVisible, selectedToneRadioRef]);
   var fireAnalyticsEvent = function fireAnalyticsEvent(event) {
     if (createAnalyticsEvent) {
       createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
@@ -41,6 +62,10 @@ export var ToneSelectorInternal = function ToneSelectorInternal(props) {
   };
   var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
     return function () {
+      if (selectedTone === toneValue && onToneClose) {
+        onToneClose();
+        return;
+      }
       onToneSelected(toneValue);
       var toneList = ['default', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'];
       fireAnalyticsEvent(toneSelectedEvent({
@@ -52,17 +77,23 @@ export var ToneSelectorInternal = function ToneSelectorInternal(props) {
     fireAnalyticsEvent(toneSelectorOpenedEvent({}));
   }
   isMounted.current = true;
-  return /*#__PURE__*/React.createElement("div", null, emojiToneCollection.map(function (tone) {
-    return /*#__PURE__*/React.createElement(EmojiButton, {
-      ref: tone.focused ? firstToneButtonRef : null,
-      shouldHideButton: tone.id === previewEmojiId,
+  return jsx("div", {
+    role: "radiogroup",
+    "data-testid": toneSelectorTestId,
+    id: "emoji-picker-tone-selector",
+    "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText),
+    css: !isVisible && hidden
+  }, emojiToneCollection.map(function (tone) {
+    return jsx(EmojiRadioButton, {
+      ref: tone.isSelected ? selectedToneRadioRef : null,
+      defaultChecked: tone.isSelected,
       ariaLabelText: tone.label,
       key: "".concat(tone.id),
-      onSelected: onToneSelectedHandler(tone.toneId),
       emoji: tone,
+      onSelected: onToneSelectedHandler(tone.toneIndex),
       selectOnHover: true
     });
   }));
 };
 var ToneSelector = withAnalyticsEvents()(ToneSelectorInternal);
-export default ToneSelector;
+export default /*#__PURE__*/memo(ToneSelector);

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

@@ -2,10 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _css, _css2, _templateObject, _span, _css3, _css6, _input;
 import { css, keyframes } from '@emotion/react';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
-import { N20, N200, N20A, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
+import { B100, N20, N200, N20A, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
 export var commonSelectedStyles = 'emoji-common-selected';
 export var selectOnHoverStyles = 'emoji-common-select-on-hover';
 export var emojiSprite = 'emoji-common-emoji-sprite';
@@ -33,7 +32,7 @@ export var emojiToneSelectorContainer = css({
   padding: '10px 10px 11px 0'
 });
 export var emojiStyles = css((_css = {
-  borderRadius: "".concat(borderRadius(), "px"),
+  borderRadius: "var(--ds-radius-100, 3px)",
   backgroundColor: 'transparent',
   display: 'inline-block',
   verticalAlign: 'middle',
@@ -48,6 +47,10 @@ export var emojiStyles = css((_css = {
   visibility: 'visible'
 }), _defineProperty(_css, "img", {
   display: 'block'
+}), _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 = {
   display: 'inline-block',
@@ -61,6 +64,10 @@ export var emojiContainer = css((_css2 = {
   minHeight: "".concat(defaultEmojiHeight, "px"),
   minWidth: "".concat(defaultEmojiHeight, "px"),
   verticalAlign: 'middle'
+}), _defineProperty(_css2, '&:focus', {
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
+  transitionDuration: '0s, 0.2s',
+  outline: 'none'
 }), _css2));
 export var placeholder = 'emoji-common-placeholder';
 export var placeholderContainer = css({
@@ -68,7 +75,7 @@ export var placeholderContainer = css({
   margin: '-1px 0',
   display: 'inline-block',
   background: "var(--ds-border, #f7f7f7)",
-  borderRadius: "".concat(borderRadius(), "px"),
+  borderRadius: "var(--ds-radius-100, 3px)",
   overflow: 'hidden',
   verticalAlign: 'middle',
   whiteSpace: 'nowrap',
@@ -86,16 +93,23 @@ export var placeholderContainerAnimated = css({
     animation: "".concat(easeSweep, " 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite")
   }
 });
+export var hidden = css({
+  opacity: 0,
+  visibility: 'hidden',
+  display: 'none'
+});
 export var emojiButton = css((_css3 = {
   backgroundColor: 'transparent',
   border: '0',
+  borderRadius: "var(--ds-radius-100, 3px)",
   cursor: 'pointer',
-  padding: 0
+  padding: 0,
+  position: 'relative',
+  display: 'inline-block'
 }, _defineProperty(_css3, '&::-moz-focus-inner', {
   border: '0 none',
   padding: 0
 }), _defineProperty(_css3, '&>span', (_span = {
-  borderRadius: "".concat(borderRadius(), "px"),
   padding: '6px'
 }, _defineProperty(_span, "&>.".concat(emojiSprite), {
   height: '24px',
@@ -103,10 +117,24 @@ export var emojiButton = css((_css3 = {
 }), _defineProperty(_span, "&>img", {
   height: '24px',
   width: '24px'
-}), _span)), _css3));
-export var hiddenToneButton = css({
-  // Hide currently selected tone that rendered in the ToneSelector to avoid duplication
-  display: 'none'
+}), _span)), _defineProperty(_css3, '&:focus', {
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
+  transitionDuration: '0s, 0.2s',
+  outline: 'none'
+}), _css3));
+export var emojiRadio = css({
+  opacity: 0,
+  position: 'absolute',
+  top: '-10px',
+  left: '-10px',
+  '+span': {
+    borderRadius: "var(--ds-radius-100, 3px)"
+  },
+  '&:focus + span': {
+    boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
+    transitionDuration: '0s, 0.2s',
+    outline: 'none'
+  }
 });
 
 // Emoji Preview
@@ -177,7 +205,7 @@ export var previewImg = css((_css6 = {
 
 export var emojiScrollable = css({
   border: "1px solid ".concat("var(--ds-border, #fff)"),
-  borderRadius: "".concat(borderRadius(), "px"),
+  borderRadius: "var(--ds-radius-100, 3px)",
   display: 'block',
   margin: '0',
   overflowX: 'hidden',
@@ -242,7 +270,7 @@ export var uploadPreview = css({
   justifyContent: 'space-between',
   alignItems: 'center',
   background: "var(--ds-background-neutral, ".concat(N20, ")"),
-  borderRadius: "".concat(borderRadius(), "px"),
+  borderRadius: "var(--ds-radius-100, 3px)",
   padding: '10px'
 });
 export var uploadPreviewText = css({

package/dist/esm/components/i18n.js

@@ -22,8 +22,8 @@ export var messages = defineMessages({
   },
   emojiPlaceholder: {
     id: 'fabric.emoji.placeholder',
-    defaultMessage: 'Emoji name',
-    description: 'Placeholder for emoji'
+    defaultMessage: 'e.g. hello',
+    description: 'Placeholder for emoji that provides an example for emoji name'
   },
   emojiNameAriaLabel: {
     id: 'fabric.emoji.name.ariaLabel',
@@ -42,9 +42,14 @@ export var messages = defineMessages({
   },
   emojiSelectSkinToneButtonAriaLabelText: {
     id: 'fabric.emoji.select.skin.tone.ariaLabel',
-    defaultMessage: 'Select skin tone, {selectedTone}',
+    defaultMessage: 'Choose your skin tone, {selectedTone} selected',
     description: 'Message indicating the purpose of the skin tone selection button and the selected tone'
   },
+  emojiSelectSkinToneListAriaLabelText: {
+    id: 'fabric.emoji.select.skin.list.ariaLabel',
+    defaultMessage: 'Skin tone selector',
+    description: 'Message indicating the purpose of the skin tone list and make user to choose one tone'
+  },
   emojiImageRequirements: {
     id: 'fabric.emoji.image.requirements',
     defaultMessage: 'JPG, PNG or GIF. Max size 1 MB.',
@@ -82,9 +87,24 @@ export var messages = defineMessages({
   },
   searchLabel: {
     id: 'fabric.emoji.search.label',
-    defaultMessage: 'Search emoji',
+    defaultMessage: 'Emoji name',
     description: 'verb - button label to search'
   },
+  searchResultsStatus: {
+    id: 'fabric.emoji.search.status',
+    defaultMessage: 'Found {count} emojis',
+    description: 'search results status for screenreader to read out'
+  },
+  searchResultsStatusSeeAll: {
+    id: 'fabric.emoji.search.status',
+    defaultMessage: 'Seeing all emojis',
+    description: 'search results status when no search query for screenreader to read out'
+  },
+  categoriesSelectorLabel: {
+    id: 'fabric.emoji.categories.label',
+    defaultMessage: 'Choose a emoji category',
+    description: 'Aria label for Emoji categories selector at the top of emoji picker'
+  },
   categoriesSearchResults: {
     id: 'fabric.emoji.categories.search.results',
     defaultMessage: 'Search results',
@@ -169,5 +189,25 @@ export var messages = defineMessages({
     id: 'fabric.emoji.error.image.too.big',
     defaultMessage: 'Selected image is more than 1 MB',
     description: 'Error message for image too big, beyond the size limit'
+  },
+  emojiPickerTitle: {
+    id: 'fabric.emoji.picker',
+    defaultMessage: 'Emoji picker',
+    description: 'Aria label for emoji picker'
+  },
+  emojiPickerListPanel: {
+    id: 'fabric.emoji.pickerlist.tabpanel',
+    defaultMessage: 'Emojis actions and list panel',
+    description: 'Aria lable for tabpanel of emoji picker, which shows emojis actions and list'
+  },
+  emojiPickerGrid: {
+    id: 'fabric.emoji.pickerlist.grid',
+    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."
   }
 });