@atlaskit/emoji 67.1.0 → 67.2.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/emoji
 
+## 67.2.0
+
+### Minor Changes
+
+- [`2b2aa109521`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b2aa109521) - [ux] improve keyboard navigation in emoji picker list, improve category highlight logic in emoji picker
+- [`7e3c38a86ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e3c38a86ef) - [ux] [COLLAB-2264] add arrow keys support for navigating categories selctor in emoji picker, used tabs structure for emoji picker with category selctor for better accessibility, added more aria-labels for category selector and picker list panel for accessibility, highlight first category in emoji picker at start
+
+### Patch Changes
+
+- [`d06e5f9c381`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d06e5f9c381) - Fixed accessibility issues in upload emoji journey flagged by axe and added accessibility tests
+- [`2c650251e9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2c650251e9a) - Improve uploading custom emoji experience for screen reader user
+- [`ef218ded5ca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ef218ded5ca) - ResourcedEmoji component will fallback when provider fails to fetch
+- [`37192cbc921`](https://bitbucket.org/atlassian/atlassian-frontend/commits/37192cbc921) - Scroll and focus on newly uploaded emoji in the picker list after uploading
+- [`36f471471e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/36f471471e3) - fix scroll to category when click category in category toolbar
+- [`ed20cc3d0d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed20cc3d0d9) - Changed 'Choose File' button in Emoji Picker to a standard button
+- [`47c411e6564`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47c411e6564) - [ux] [COLLAB-2281] Improve keyboard experience with tone selector, changes include allow arrow key nagivation, allow Tab key to close tone selector, focus on the selected/default tone when tone selector is expanded, focus on tone selector trigger button after closing tone selector
+- [`2896c02e6cb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2896c02e6cb) - update aria attributes across emoji components to improve accessibility
+- [`d4234822fb6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4234822fb6) - [ux] Updated focus styling to align with Atlassian Design System styling
+- [`221f0101322`](https://bitbucket.org/atlassian/atlassian-frontend/commits/221f0101322) - Fixes a bug where get token could be called multiple times while in flight
+- [`1537683bd72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1537683bd72) - clean up css of emoji picker
+- [`73b9fda49ad`](https://bitbucket.org/atlassian/atlassian-frontend/commits/73b9fda49ad) - Fixed accessibility issues in emoji picker flagged by axe
+- Updated dependencies
+
 ## 67.1.0
 
 ### Minor Changes

package/dist/cjs/api/EmojiResource.js

@@ -49,6 +49,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     (0, _classCallCheck2.default)(this, EmojiResource);
     _this = _super.call(this);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "activeLoaders", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initialLoaders", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "retries", new Map());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isInitialised", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOptimisticImageURL", function (emojiId) {
@@ -57,8 +58,11 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
       }
       return;
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isRepositoryAvailable", function (repository) {
+      return !!repository;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isLoaded", function () {
-      return _this.activeLoaders === 0 && !!_this.emojiRepository;
+      return _this.initialLoaders !== 0 && _this.activeLoaders === 0;
     });
     _this.emojiProviderConfig = config;
     _this.recordConfig = config.recordConfig;
@@ -69,6 +73,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     if (config.providers.length === 0) {
       throw new Error('No providers specified');
     }
+    _this.initialLoaders = _this.emojiProviderConfig.providers.length;
     _this.activeLoaders = _this.emojiProviderConfig.providers.length;
     _this.emojiResponses = [];
     return _this;
@@ -192,7 +197,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
             switch (_context3.prev = _context3.next) {
               case 0:
                 force = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : false;
-                if (!(force || !this.emojiRepository && !this.isInitialised)) {
+                if (!(force || !this.isRepositoryAvailable(this.emojiRepository) && !this.isInitialised)) {
                   _context3.next = 6;
                   break;
                 }
@@ -226,7 +231,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
           while (1) {
             switch (_context4.prev = _context4.next) {
               case 0:
-                if (!(this.emojiRepository && this.isLoaded())) {
+                if (!(this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository))) {
                   _context4.next = 8;
                   break;
                 }
@@ -264,7 +269,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
                 }
                 return _context4.abrupt("return");
               case 17:
-                if (this.siteEmojiResource) {
+                if (this.isRepositoryAvailable(this.siteEmojiResource)) {
                   _context4.next = 20;
                   break;
                 }
@@ -334,7 +339,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
   }, {
     key: "initSiteEmojiResource",
     value: function initSiteEmojiResource(emojiResponse, provider) {
-      if (!this.siteEmojiResource && emojiResponse.mediaApiToken) {
+      if (!this.isRepositoryAvailable(this.siteEmojiResource) && emojiResponse.mediaApiToken) {
         this.siteEmojiResource = new _SiteEmojiResource.default(provider, emojiResponse.mediaApiToken);
 
         // Prime cache type + optimistic rendering by checking first Emoji.
@@ -432,7 +437,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
           while (1) {
             switch (_context5.prev = _context5.next) {
               case 0:
-                if (!(this.siteEmojiResource && (0, _typeHelpers.isMediaRepresentation)(emoji.representation))) {
+                if (!(this.isRepositoryAvailable(this.siteEmojiResource) && (0, _typeHelpers.isMediaRepresentation)(emoji.representation))) {
                   _context5.next = 5;
                   break;
                 }
@@ -462,7 +467,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
   }, {
     key: "loadMediaEmoji",
     value: function loadMediaEmoji(emoji, useAlt) {
-      if (!this.siteEmojiResource || !(0, _typeHelpers.isMediaEmoji)(emoji)) {
+      if (!this.isRepositoryAvailable(this.siteEmojiResource) || !(0, _typeHelpers.isMediaEmoji)(emoji)) {
         return emoji;
       }
       return this.siteEmojiResource.loadMediaEmoji(emoji, useAlt);
@@ -473,7 +478,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
       if (!(0, _typeHelpers.isMediaEmoji)(emoji)) {
         return true;
       }
-      if (!this.siteEmojiResource) {
+      if (!this.isRepositoryAvailable(this.siteEmojiResource)) {
         // Shouldn't have a media emoji without a siteEmojiResouce, but anyway ;)
         return false;
       }
@@ -495,7 +500,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
         query: query,
         options: options
       };
-      if (this.emojiRepository) {
+      if (this.isRepositoryAvailable(this.emojiRepository)) {
         var searchResults = this.emojiRepository.search(query, options);
         this.notifyResult(searchResults);
         _ufoExperiences.ufoExperiences['emoji-searched'].success({
@@ -513,7 +518,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "findByShortName",
     value: function findByShortName(shortName) {
       var _this4 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         // Wait for all emoji to load before looking by shortName (to ensure correct priority)
         return this.emojiRepository.findByShortName(shortName);
       }
@@ -527,7 +532,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
       var _this5 = this;
       var id = emojiId.id,
         shortName = emojiId.shortName;
-      if (this.emojiRepository) {
+      if (this.isRepositoryAvailable(this.emojiRepository)) {
         if (id) {
           var emoji = this.emojiRepository.findById(id);
           if (emoji) {
@@ -536,7 +541,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
           if (this.isLoaded()) {
             // all loaded but not found by id, try server to see if
             // this is a newly uploaded emoji
-            if (this.siteEmojiResource) {
+            if (this.isRepositoryAvailable(this.siteEmojiResource)) {
               return this.siteEmojiResource.findEmoji(emojiId).then(function (emoji) {
                 if (!emoji) {
                   // if not, fallback to searching by shortName to
@@ -565,7 +570,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "findById",
     value: function findById(id) {
       var _this6 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         return this.emojiRepository.findById(id);
       }
       return this.retryIfLoading(function () {
@@ -576,7 +581,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "findInCategory",
     value: function findInCategory(categoryId) {
       var _this7 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         return Promise.resolve(this.emojiRepository.findInCategory(categoryId));
       }
       return this.retryIfLoading(function () {
@@ -587,7 +592,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "getAsciiMap",
     value: function getAsciiMap() {
       var _this8 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         return Promise.resolve(this.emojiRepository.getAsciiMap());
       }
       return this.retryIfLoading(function () {
@@ -598,7 +603,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "getFrequentlyUsed",
     value: function getFrequentlyUsed(options) {
       var _this9 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         return Promise.resolve(this.emojiRepository.getFrequentlyUsed(options));
       }
       return this.retryIfLoading(function () {
@@ -617,7 +622,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "recordSelection",
     value: function recordSelection(emoji) {
       var recordConfig = this.recordConfig;
-      if (this.emojiRepository) {
+      if (this.isRepositoryAvailable(this.emojiRepository)) {
         this.emojiRepository.used(emoji);
       }
       if (recordConfig) {
@@ -638,9 +643,9 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "deleteSiteEmoji",
     value: function deleteSiteEmoji(emoji) {
       var _this10 = this;
-      if (this.siteEmojiResource && emoji.id) {
+      if (this.isRepositoryAvailable(this.siteEmojiResource) && emoji.id) {
         return this.siteEmojiResource.deleteEmoji(emoji).then(function (success) {
-          if (success && _this10.emojiRepository) {
+          if (success && _this10.isRepositoryAvailable(_this10.emojiRepository)) {
             _this10.emojiRepository.delete(emoji);
             return true;
           }
@@ -680,7 +685,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "calculateDynamicCategories",
     value: function calculateDynamicCategories() {
       var _this11 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         return Promise.resolve(this.emojiRepository.getDynamicCategoryList());
       }
       return this.retryIfLoading(function () {
@@ -695,7 +700,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
   }, {
     key: "addUnknownEmoji",
     value: function addUnknownEmoji(emoji) {
-      if (this.emojiRepository) {
+      if (this.isRepositoryAvailable(this.emojiRepository)) {
         this.emojiRepository.addUnknownEmoji(emoji);
       }
     }
@@ -720,7 +725,7 @@ var UploadingEmojiResource = /*#__PURE__*/function (_EmojiResource) {
       if (!this.allowUpload) {
         return Promise.resolve(false);
       }
-      if (this.siteEmojiResource) {
+      if (this.isRepositoryAvailable(this.siteEmojiResource)) {
         return this.siteEmojiResource.hasUploadToken();
       }
       return this.retryIfLoading(function () {
@@ -733,7 +738,7 @@ var UploadingEmojiResource = /*#__PURE__*/function (_EmojiResource) {
       var _this14 = this;
       var retry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       return this.isUploadSupported().then(function (supported) {
-        if (!supported || !_this14.siteEmojiResource) {
+        if (!supported || !_this14.isRepositoryAvailable(_this14.siteEmojiResource)) {
           return Promise.reject('No media api support is configured');
         }
         return _this14.siteEmojiResource.uploadEmoji(upload, retry).then(function (emoji) {
@@ -747,7 +752,7 @@ var UploadingEmojiResource = /*#__PURE__*/function (_EmojiResource) {
     key: "prepareForUpload",
     value: function prepareForUpload() {
       var _this15 = this;
-      if (this.siteEmojiResource) {
+      if (this.isRepositoryAvailable(this.siteEmojiResource)) {
         this.siteEmojiResource.prepareForUpload();
       }
       return this.retryIfLoading(function () {

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

@@ -57,10 +57,10 @@ var TokenManager = /*#__PURE__*/function () {
           // 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/cjs/components/common/CachingEmoji.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CachingMediaEmoji = exports.CachingEmoji = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _typeHelpers = require("../../util/type-helpers");
@@ -21,7 +21,8 @@ var _constants = require("../../util/constants");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 var _useEmoji2 = require("../../hooks/useEmoji");
 var _analytics2 = require("../../util/analytics/analytics");
-var _excluded = ["emoji", "placeholderSize", "showTooltip", "fitToHeight", "children"];
+var _excluded = ["emoji", "placeholderSize"],
+  _excluded2 = ["emoji", "placeholderSize", "showTooltip", "fitToHeight", "children"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -30,7 +31,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CachingEmoji = function CachingEmoji(props) {
   // Optimisation to only render CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
-  var emoji = props.emoji;
+  var emoji = props.emoji,
+    placeholderSize = props.placeholderSize,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   // start emoji rendered experience, it may have already started earlier in `ResourcedEmoji`.
   (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'CachingEmoji',
@@ -44,9 +47,14 @@ var CachingEmoji = function CachingEmoji(props) {
   }, []);
   var emojiNode = function emojiNode() {
     if ((0, _typeHelpers.isMediaEmoji)(emoji)) {
-      return /*#__PURE__*/_react.default.createElement(CachingMediaEmoji, props);
+      return /*#__PURE__*/_react.default.createElement(CachingMediaEmoji, (0, _extends2.default)({
+        emoji: emoji,
+        placeholderSize: placeholderSize
+      }, restProps));
     }
-    return /*#__PURE__*/_react.default.createElement(_Emoji.default, props);
+    return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({
+      emoji: emoji
+    }, restProps));
   };
   return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
     experiences: [_analytics.ufoExperiences['emoji-rendered'].getInstance(props.emoji.id || props.emoji.shortName)]
@@ -64,7 +72,7 @@ var CachingMediaEmoji = function CachingMediaEmoji(props) {
     showTooltip = props.showTooltip,
     fitToHeight = props.fitToHeight,
     children = props.children,
-    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
   var shortName = emoji.shortName,
     representation = emoji.representation;
   var _useState = (0, _react.useState)(),

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

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SpriteEmoji = exports.ImageEmoji = exports.Emoji = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _EmojiUtils = require("../../api/EmojiUtils");
@@ -22,6 +23,8 @@ var _analytics = require("../../util/analytics");
 var _browserSupport = require("../../util/browser-support");
 var _useInView3 = require("../../util/useInView");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
+var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "showDelete", "disableLazyLoad", "autoWidth"],
+  _excluded2 = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -57,6 +60,13 @@ var handleMouseMove = function handleMouseMove(props, event) {
     onMouseMove((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
   }
 };
+var handleFocus = function handleFocus(props, event) {
+  var emoji = props.emoji,
+    onFocus = props.onFocus;
+  if (onFocus) {
+    onFocus((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+  }
+};
 var handleDelete = function handleDelete(props, event) {
   var emoji = props.emoji,
     onDelete = props.onDelete;
@@ -88,7 +98,19 @@ var SpriteEmoji = function SpriteEmoji(props) {
     selectOnHover = props.selectOnHover,
     className = props.className,
     showTooltip = props.showTooltip,
-    shouldBeInteractive = props.shouldBeInteractive;
+    _props$shouldBeIntera = props.shouldBeInteractive,
+    shouldBeInteractive = _props$shouldBeIntera === void 0 ? false : _props$shouldBeIntera,
+    tabIndex = props.tabIndex,
+    onSelected = props.onSelected,
+    onMouseMove = props.onMouseMove,
+    onFocus = props.onFocus,
+    onDelete = props.onDelete,
+    onLoadError = props.onLoadError,
+    onLoadSuccess = props.onLoadSuccess,
+    showDelete = props.showDelete,
+    disableLazyLoad = props.disableLazyLoad,
+    autoWidth = props.autoWidth,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
   var representation = emoji.representation;
   var sprite = representation.sprite;
   var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
@@ -108,11 +130,11 @@ var SpriteEmoji = function SpriteEmoji(props) {
     backgroundPosition: "".concat(xPositionInPercent, "% ").concat(yPositionInPercent, "%"),
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, sizing);
-  return (0, _react2.jsx)("span", {
+  return (0, _react2.jsx)("span", (0, _extends2.default)({
     "data-testid": "sprite-emoji-".concat(emoji.shortName),
     "data-emoji-type": "sprite",
-    tabIndex: shouldBeInteractive ? 0 : undefined,
-    role: shouldBeInteractive ? 'button' : undefined,
+    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
+    role: shouldBeInteractive ? 'button' : 'img',
     css: _styles.emojiContainer,
     className: classes,
     onKeyPress: function onKeyPress(event) {
@@ -124,9 +146,12 @@ var SpriteEmoji = function SpriteEmoji(props) {
     onMouseEnter: function onMouseEnter(event) {
       handleMouseMove(props, event);
     },
+    onFocus: function onFocus(event) {
+      handleFocus(props, event);
+    },
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : ''
-  }, (0, _react2.jsx)("span", {
+  }, other), (0, _react2.jsx)("span", {
     className: _styles.emojiSprite,
     style: style
   }, "\xA0"));
@@ -142,10 +167,18 @@ var ImageEmoji = function ImageEmoji(props) {
     className = props.className,
     showTooltip = props.showTooltip,
     showDelete = props.showDelete,
-    shouldBeInteractive = props.shouldBeInteractive,
+    _props$shouldBeIntera2 = props.shouldBeInteractive,
+    shouldBeInteractive = _props$shouldBeIntera2 === void 0 ? false : _props$shouldBeIntera2,
+    tabIndex = props.tabIndex,
+    onSelected = props.onSelected,
+    onMouseMove = props.onMouseMove,
+    onFocus = props.onFocus,
+    onDelete = props.onDelete,
+    onLoadError = props.onLoadError,
     onLoadSuccess = props.onLoadSuccess,
     disableLazyLoad = props.disableLazyLoad,
-    autoWidth = props.autoWidth;
+    autoWidth = props.autoWidth,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded2);
   var _useInView = (0, _useInView3.useInView)({
       triggerOnce: true
     }),
@@ -243,12 +276,12 @@ var ImageEmoji = function ImageEmoji(props) {
     onError: onError,
     onLoad: onLoad
   }, sizing));
-  return (0, _react2.jsx)("span", {
+  return (0, _react2.jsx)("span", (0, _extends2.default)({
     "data-testid": "image-emoji-".concat(emoji.shortName),
     "data-emoji-type": "image",
     css: _styles.emojiStyles,
-    tabIndex: shouldBeInteractive ? 0 : undefined,
-    role: shouldBeInteractive ? 'button' : undefined,
+    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
+    role: shouldBeInteractive ? 'button' : 'img',
     className: classes,
     onKeyPress: function onKeyPress(event) {
       return handleKeyPress(props, event);
@@ -259,10 +292,13 @@ var ImageEmoji = function ImageEmoji(props) {
     onMouseEnter: function onMouseEnter(event) {
       handleMouseMove(props, event);
     },
+    onFocus: function onFocus(event) {
+      handleFocus(props, event);
+    },
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : '',
     ref: ref
-  }, deleteButton, emojiNode);
+  }, other), deleteButton, emojiNode);
 };
 exports.ImageEmoji = ImageEmoji;
 var Emoji = function Emoji(props) {

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

@@ -14,13 +14,14 @@ var _EmojiDeletePreview = _interopRequireDefault(require("../common/EmojiDeleteP
 var _EmojiUploadPicker = _interopRequireDefault(require("../common/EmojiUploadPicker"));
 var _EmojiPickerListSearch = require("../picker/EmojiPickerListSearch");
 var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
-var _EmojiButton = _interopRequireDefault(require("./EmojiButton"));
+var _TonePreviewButton = _interopRequireDefault(require("./TonePreviewButton"));
 var _i18n = require("../i18n");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
 var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
 var _styles = require("./styles");
 var _styles2 = require("../picker/styles");
+var _constants = require("../../util/constants");
 /** @jsx jsx */
 
 var emojiActionsTestId = 'emoji-actions';
@@ -31,8 +32,7 @@ var uploadEmojiTestId = 'upload-emoji';
 exports.uploadEmojiTestId = uploadEmojiTestId;
 var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
-    uploadEnabled = props.uploadEnabled,
-    formatMessage = props.intl.formatMessage;
+    uploadEnabled = props.uploadEnabled;
   return (0, _react2.jsx)(_react.Fragment, null, uploadEnabled && (0, _react2.jsx)("div", {
     css: _styles.addCustomEmoji,
     "data-testid": uploadEmojiTestId
@@ -40,44 +40,73 @@ var AddOwnEmoji = function AddOwnEmoji(props) {
     return (0, _react2.jsx)(_standardButton.default, {
       onClick: onOpenUpload,
       iconBefore: (0, _react2.jsx)(_add.default, {
-        label: formatMessage(_i18n.messages.addCustomEmojiLabel),
+        label: "",
         size: "small"
       }),
       appearance: "subtle",
       css: _styles.addCustomEmojiButton,
-      className: _styles.emojiPickerAddEmoji
+      className: _styles.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 ? _constants.DEFAULT_TONE : _props$selectedTone,
     intl = props.intl,
-    onToneSelected = props.onToneSelected,
     onToneOpen = props.onToneOpen,
     showToneSelector = props.showToneSelector;
   var formatMessage = intl.formatMessage;
+  var tonePreviewButtonRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    focusTonePreviewButton = _useState2[0],
+    setFocusTonePreviewButton = _useState2[1];
+  (0, _react.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 !== _constants.DEFAULT_TONE && previewToneEmoji.skinVariations) {
+    previewToneEmoji = previewToneEmoji.skinVariations[selectedTone - 1];
   }
   return (0, _react2.jsx)("div", {
     css: _styles.emojiToneSelectorContainer
-  }, showToneSelector && (0, _react2.jsx)(_ToneSelector.default, {
+  }, (0, _react2.jsx)(_ToneSelector.default, {
     emoji: toneEmoji,
-    onToneSelected: onToneSelected,
-    previewEmojiId: previewEmoji.id
-  }), (0, _react2.jsx)(_EmojiButton.default, {
+    onToneSelected: onToneSelectedHandler,
+    onToneClose: onToneCloseHandler,
+    selectedTone: selectedTone,
+    isVisible: showToneSelector
+  }), (0, _react2.jsx)(_TonePreviewButton.default, {
+    ref: tonePreviewButtonRef,
     ariaExpanded: showToneSelector,
-    emoji: previewEmoji,
+    emoji: previewToneEmoji,
     selectOnHover: true,
     onSelected: onToneOpen,
     ariaLabelText: formatMessage(_i18n.messages.emojiSelectSkinToneButtonAriaLabelText, {
-      selectedTone: "".concat((0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(previewEmoji.name), " selected")
-    })
+      selectedTone: "".concat((0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(previewToneEmoji.name))
+    }),
+    isVisible: !showToneSelector
   }));
 };
 var EmojiActions = function EmojiActions(props) {
@@ -93,15 +122,20 @@ var EmojiActions = function EmojiActions(props) {
     onFileChooserClicked = props.onFileChooserClicked,
     emojiToDelete = props.emojiToDelete,
     onChange = props.onChange,
-    query = props.query;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_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 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    showToneSelector = _useState4[0],
+    setShowToneSelector = _useState4[1];
   var previewFooterClassnames = [_styles2.emojiPickerFooter, _styles2.emojiActionsContainerWithBottomShadow];
   var onToneOpenHandler = function onToneOpenHandler() {
     return setShowToneSelector(true);
   };
+  var onToneCloseHandler = function onToneCloseHandler() {
+    return setShowToneSelector(false);
+  };
   var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
     setShowToneSelector(false);
     if (onToneSelected) {
@@ -142,13 +176,15 @@ var EmojiActions = function EmojiActions(props) {
     css: _styles.emojiActionsWrapper
   }, !showToneSelector && (0, _react2.jsx)(_EmojiPickerListSearch.EmojiPickerListSearch, {
     onChange: onChange,
-    query: query
+    query: query,
+    resultsCount: resultsCount
   }), (0, _react2.jsx)(TonesWrapper, (0, _extends2.default)({}, props, {
     onToneOpen: onToneOpenHandler,
+    onToneClose: onToneCloseHandler,
     onToneSelected: onToneSelectedHandler,
     showToneSelector: showToneSelector
   }))), (0, _react2.jsx)(AddOwnEmoji, props));
 };
 exports.EmojiActions = EmojiActions;
-var _default = (0, _reactIntlNext.injectIntl)(EmojiActions);
+var _default = (0, _reactIntlNext.injectIntl)( /*#__PURE__*/(0, _react.memo)(EmojiActions));
 exports.default = _default;