@atlaskit/emoji 67.1.0 → 67.2.0

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 => {

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

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

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

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

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

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { jsx } from '@emotion/react';
+import { emojiButton, hidden } from './styles';
+import Emoji from './Emoji';
+export const tonePreviewTestId = 'tone-preview';
+export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    emoji,
+    selectOnHover,
+    ariaLabelText,
+    ariaExpanded,
+    onSelected,
+    isVisible = true
+  } = props;
+  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/es2019/components/common/ToneSelector.js

@@ -1,8 +1,14 @@
-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 const toneSelectorTestId = 'tone-selector';
 const extractAllTones = emoji => {
   if (emoji.skinVariations) {
     return [emoji, ...emoji.skinVariations];
@@ -13,30 +19,52 @@ export const ToneSelectorInternal = props => {
   const {
     createAnalyticsEvent,
     emoji,
-    previewEmojiId,
-    onToneSelected
+    onToneSelected,
+    onToneClose,
+    selectedTone,
+    isVisible
   } = props;
   const isMounted = useRef(false);
-  const firstToneButtonRef = useRef(null);
+  const selectedToneRadioRef = useRef(null);
+  const {
+    formatMessage
+  } = useIntl();
   const emojiToneCollection = useMemo(() => {
-    return extractAllTones(emoji).map((tone, index) => ({
-      ...tone,
-      focused: tone.id !== previewEmojiId,
-      label: setSkinToneAriaLabelText(tone.name),
-      toneId: index
-    }));
-  }, [emoji, previewEmojiId]);
+    var selectedToneIndex = -1;
+    const toneColletion = extractAllTones(emoji).map((tone, index) => {
+      const isSelected = index === selectedTone;
+      if (isSelected) {
+        selectedToneIndex = index;
+      }
+      return {
+        ...tone,
+        isSelected: isSelected,
+        label: setSkinToneAriaLabelText(tone.name),
+        toneIndex: index
+      };
+    });
+
+    // 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(() => {
-    if (firstToneButtonRef.current) {
-      firstToneButtonRef.current.focus();
+    if (isVisible) {
+      var _selectedToneRadioRef;
+      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 ? void 0 : _selectedToneRadioRef.focus();
     }
-  }, [firstToneButtonRef]);
+  }, [isVisible, selectedToneRadioRef]);
   const fireAnalyticsEvent = event => {
     if (createAnalyticsEvent) {
       createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
     }
   };
   const onToneSelectedHandler = toneValue => () => {
+    if (selectedTone === toneValue && onToneClose) {
+      onToneClose();
+      return;
+    }
     onToneSelected(toneValue);
     const toneList = ['default', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'];
     fireAnalyticsEvent(toneSelectedEvent({
@@ -47,17 +75,23 @@ export const ToneSelectorInternal = props => {
     fireAnalyticsEvent(toneSelectorOpenedEvent({}));
   }
   isMounted.current = true;
-  return /*#__PURE__*/React.createElement("div", null, emojiToneCollection.map(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(tone => {
+    return jsx(EmojiRadioButton, {
+      ref: tone.isSelected ? selectedToneRadioRef : null,
+      defaultChecked: tone.isSelected,
       ariaLabelText: tone.label,
       key: `${tone.id}`,
-      onSelected: onToneSelectedHandler(tone.toneId),
       emoji: tone,
+      onSelected: onToneSelectedHandler(tone.toneIndex),
       selectOnHover: true
     });
   }));
 };
 const ToneSelector = withAnalyticsEvents()(ToneSelectorInternal);
-export default ToneSelector;
+export default /*#__PURE__*/memo(ToneSelector);

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

@@ -1,8 +1,7 @@
 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 const commonSelectedStyles = 'emoji-common-selected';
 export const selectOnHoverStyles = 'emoji-common-select-on-hover';
 export const emojiSprite = 'emoji-common-emoji-sprite';
@@ -30,7 +29,7 @@ export const emojiToneSelectorContainer = css({
   padding: '10px 10px 11px 0'
 });
 export const emojiStyles = css({
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-radius-100, 3px)",
   backgroundColor: 'transparent',
   display: 'inline-block',
   verticalAlign: 'middle',
@@ -47,6 +46,11 @@ export const emojiStyles = css({
   },
   img: {
     display: 'block'
+  },
+  '&:focus': {
+    boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
+    transitionDuration: '0s, 0.2s',
+    outline: 'none'
   }
 });
 export const emojiContainer = css({
@@ -62,6 +66,11 @@ export const emojiContainer = css({
     minHeight: `${defaultEmojiHeight}px`,
     minWidth: `${defaultEmojiHeight}px`,
     verticalAlign: 'middle'
+  },
+  '&:focus': {
+    boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
+    transitionDuration: '0s, 0.2s',
+    outline: 'none'
   }
 });
 export const placeholder = 'emoji-common-placeholder';
@@ -70,7 +79,7 @@ export const placeholderContainer = css({
   margin: '-1px 0',
   display: 'inline-block',
   background: "var(--ds-border, #f7f7f7)",
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-radius-100, 3px)",
   overflow: 'hidden',
   verticalAlign: 'middle',
   whiteSpace: 'nowrap',
@@ -95,18 +104,25 @@ export const placeholderContainerAnimated = css({
     animation: `${easeSweep} 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite`
   }
 });
+export const hidden = css({
+  opacity: 0,
+  visibility: 'hidden',
+  display: 'none'
+});
 export const emojiButton = css({
   backgroundColor: 'transparent',
   border: '0',
+  borderRadius: "var(--ds-radius-100, 3px)",
   cursor: 'pointer',
   padding: 0,
+  position: 'relative',
+  display: 'inline-block',
   /* Firefox */
   ['&::-moz-focus-inner']: {
     border: '0 none',
     padding: 0
   },
   '&>span': {
-    borderRadius: `${borderRadius()}px`,
     padding: '6px',
     // Scale sprite to fit regardless of default emoji size
     [`&>.${emojiSprite}`]: {
@@ -118,11 +134,26 @@ export const emojiButton = css({
       height: '24px',
       width: '24px'
     }
+  },
+  '&:focus': {
+    boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
+    transitionDuration: '0s, 0.2s',
+    outline: 'none'
   }
 });
-export const hiddenToneButton = css({
-  // Hide currently selected tone that rendered in the ToneSelector to avoid duplication
-  display: 'none'
+export const emojiRadio = css({
+  opacity: 0,
+  position: 'absolute',
+  top: '-10px',
+  left: '-10px',
+  '+span': {
+    borderRadius: "var(--ds-radius-100, 3px)"
+  },
+  '&:focus + span': {
+    boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
+    transitionDuration: '0s, 0.2s',
+    outline: 'none'
+  }
 });
 
 // Emoji Preview
@@ -197,7 +228,7 @@ export const previewImg = css({
 
 export const emojiScrollable = css({
   border: `1px solid ${"var(--ds-border, #fff)"}`,
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-radius-100, 3px)",
   display: 'block',
   margin: '0',
   overflowX: 'hidden',
@@ -264,7 +295,7 @@ export const uploadPreview = css({
   justifyContent: 'space-between',
   alignItems: 'center',
   background: `var(--ds-background-neutral, ${N20})`,
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-radius-100, 3px)",
   padding: '10px'
 });
 export const uploadPreviewText = css({

package/dist/es2019/components/i18n.js

@@ -22,8 +22,8 @@ export const 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 const 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 const 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 const 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.`
   }
 });