@atlaskit/emoji 67.6.8 → 67.6.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/emoji
 
+## 67.6.9
+
+### Patch Changes
+
+- [#64647](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64647) [`f2cd17119b76`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f2cd17119b76) - [ECA11Y-15] Fixing screen reader announcement for Emoji
+
 ## 67.6.8
 
 ### Patch Changes

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

@@ -25,7 +25,7 @@ var _browserSupport = _interopRequireDefault(require("../../util/browser-support
 var _useInView3 = require("../../hooks/useInView");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 var _DeletableEmojiTooltipContent = require("./DeletableEmojiTooltipContent");
-var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type"];
+var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji"];
 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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -286,13 +286,29 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
     autoWidth = props.autoWidth,
     children = props.children,
     type = props.type,
+    editorEmoji = props.editorEmoji,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return (0, _react2.jsx)("span", (0, _extends2.default)({
+  var accessibilityProps;
+  if (editorEmoji) {
+    accessibilityProps = {
+      role: undefined
+    };
+  } else if (shouldBeInteractive) {
+    accessibilityProps = {
+      role: 'button',
+      'aria-label': emoji.shortName
+    };
+  } else {
+    accessibilityProps = {
+      role: 'img',
+      'aria-label': emoji.shortName
+    };
+  }
+  return (0, _react2.jsx)("span", (0, _extends2.default)({}, accessibilityProps, {
     ref: ref,
     "data-testid": "".concat(type, "-emoji-").concat(emoji.shortName),
     "data-emoji-type": type,
     tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
-    role: shouldBeInteractive ? 'button' : 'img',
     css: type === 'sprite' ? _styles.emojiSpriteContainer : _styles.emojiImageContainer,
     className: className,
     onKeyDown: function onKeyDown(event) {
@@ -307,7 +323,6 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
     onFocus: function onFocus(event) {
       handleFocus(props, event);
     },
-    "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
   }, other), children);
 });

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

@@ -41,7 +41,8 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     _props$optimistic = props.optimistic,
     optimistic = _props$optimistic === void 0 ? false : _props$optimistic,
     _props$optimisticImag = props.optimisticImageURL,
-    optimisticImageURL = _props$optimisticImag === void 0 ? undefined : _props$optimisticImag;
+    optimisticImageURL = _props$optimisticImag === void 0 ? undefined : _props$optimisticImag,
+    editorEmoji = props.editorEmoji;
   var shortName = emojiId.shortName,
     id = emojiId.id,
     fallback = emojiId.fallback;
@@ -221,7 +222,8 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     onLoadError: handleOnLoadError,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
-    autoWidth: !!emoji ? false : true
+    autoWidth: !!emoji ? false : true,
+    editorEmoji: editorEmoji
   })));
 };
 var _default = exports.default = ResourcedEmojiComponent;

package/dist/cjs/components/picker/EmojiPickerListSearch.js

@@ -7,22 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.emojiPickerSearchTestId = exports.EmojiPickerListSearch = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
-var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _i18n = require("../i18n");
-var _styles = require("./styles");
-var _constants = require("../../util/constants");
 var _useDebounce = require("use-debounce");
-var _styles2 = require("../common/styles");
+var _constants = require("../../util/constants");
+var _styles = require("../common/styles");
+var _i18n = require("../i18n");
+var _styles2 = require("./styles");
 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; }
 /** @jsx jsx */
 
-var emojiPickerSearchTestId = exports.emojiPickerSearchTestId = 'emoji-picker-serach';
+var emojiPickerSearchTestId = exports.emojiPickerSearchTestId = 'emoji-picker-search';
 var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPickerListSearch(props) {
   var style = props.style,
     query = props.query,
@@ -30,8 +30,8 @@ var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPicker
     isVisible = _props$isVisible === void 0 ? true : _props$isVisible,
     resultsCount = props.resultsCount,
     onChange = props.onChange;
-  var textRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
+  var textRef = (0, _react2.useRef)(null);
+  var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     dirty = _useState2[0],
     setDirty = _useState2[1];
@@ -50,7 +50,7 @@ var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPicker
   var handleOnChange = function handleOnChange(e) {
     debouncedSearch(e.target.value);
   };
-  (0, _react.useLayoutEffect)(function () {
+  (0, _react2.useLayoutEffect)(function () {
     requestAnimationFrame(function () {
       if (textRef) {
         var _textRef$current;
@@ -58,26 +58,26 @@ var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPicker
       }
     });
   }, []);
-  return (0, _react2.jsx)("div", {
-    css: [_styles.pickerSearch, !isVisible && _styles2.hidden],
+  return (0, _react.jsx)("div", {
+    css: [_styles2.pickerSearch, !isVisible && _styles.hidden],
     style: style
-  }, (0, _react2.jsx)(_visuallyHidden.default, {
+  }, (0, _react.jsx)(_visuallyHidden.default, {
     id: "emoji-search-results-status",
     role: "status"
   }, dirty && query === '' && formatMessage(_i18n.messages.searchResultsStatusSeeAll), query !== '' && formatMessage(_i18n.messages.searchResultsStatus, {
     count: resultsCount
-  })), (0, _react2.jsx)(_textfield.default, {
+  })), (0, _react.jsx)(_textfield.default, {
     role: "searchbox",
     "aria-label": formatMessage(_i18n.messages.searchLabel),
-    css: _styles.input,
+    css: _styles2.input,
     autoComplete: "off",
     name: "search",
     placeholder: "".concat(formatMessage(_i18n.messages.searchPlaceholder), "..."),
     defaultValue: query || '',
     onChange: handleOnChange,
-    elemBeforeInput: (0, _react2.jsx)("span", {
-      css: _styles.searchIcon
-    }, (0, _react2.jsx)(_search.default, {
+    elemBeforeInput: (0, _react.jsx)("span", {
+      css: _styles2.searchIcon
+    }, (0, _react.jsx)(_search.default, {
       label: ""
     })),
     testId: emojiPickerSearchTestId,

package/dist/cjs/components/typeahead/EmojiTypeAheadComponent.js

@@ -12,15 +12,16 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
+var _react = require("@emotion/react");
+var _react2 = require("react");
+var _reactDom = require("react-dom");
 var _uuid = _interopRequireDefault(require("uuid"));
-var _react2 = require("@emotion/react");
-var _constants = require("../../util/constants");
-var _typeHelpers = require("../../util/type-helpers");
+var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
 var _types = require("../../types");
-var _logger = _interopRequireDefault(require("../../util/logger"));
 var _analytics = require("../../util/analytics");
-var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
+var _constants = require("../../util/constants");
+var _logger = _interopRequireDefault(require("../../util/logger"));
+var _typeHelpers = require("../../util/type-helpers");
 var _RecordSelectionDefault = require("../common/RecordSelectionDefault");
 var _EmojiTypeAheadList = _interopRequireDefault(require("./EmojiTypeAheadList"));
 var _styles = require("./styles");
@@ -100,10 +101,15 @@ var EmojiTypeAheadComponent = exports.default = /*#__PURE__*/function (_PureComp
       var visible = emojis.length > 0;
       _this.fireAnalyticsEvent((0, _analytics.typeaheadRenderedEvent)(Date.now() - _this.renderStartTime, query, emojis));
       (0, _logger.default)('emoji-typeahead.applyPropChanges', emojis.length, wasVisible, visible);
-      _this.setState({
-        emojis: emojis,
-        visible: visible,
-        loading: false
+
+      // Synchronously flush state update, because there is some analytics in fireSelectionEvent
+      // that relies on emojis being set to determine the position
+      (0, _reactDom.flushSync)(function () {
+        _this.setState({
+          emojis: emojis,
+          visible: visible,
+          loading: false
+        });
       });
       if (isFullShortName(query)) {
         var matchIndex = uniqueExactShortNameMatchIndex(result, query);
@@ -255,13 +261,13 @@ var EmojiTypeAheadComponent = exports.default = /*#__PURE__*/function (_PureComp
       var style = {
         display: visible ? 'block' : 'none'
       };
-      return (0, _react2.jsx)(_EmojiCommonProvider.EmojiCommonProvider, {
+      return (0, _react.jsx)(_EmojiCommonProvider.EmojiCommonProvider, {
         emojiProvider: this.props.emojiProvider
-      }, (0, _react2.jsx)("div", {
+      }, (0, _react.jsx)("div", {
         style: style,
         className: 'ak-emoji-typeahead',
         css: _styles.emojiTypeAhead
-      }, (0, _react2.jsx)(_EmojiTypeAheadList.default, {
+      }, (0, _react.jsx)(_EmojiTypeAheadList.default, {
         emojis: emojis,
         onEmojiSelected: recordUsageOnSelection,
         ref: this.onEmojiListRef,
@@ -270,7 +276,7 @@ var EmojiTypeAheadComponent = exports.default = /*#__PURE__*/function (_PureComp
     }
   }]);
   return EmojiTypeAheadComponent;
-}(_react.PureComponent);
+}(_react2.PureComponent);
 (0, _defineProperty2.default)(EmojiTypeAheadComponent, "defaultProps", {
   onSelection: function onSelection() {},
   onOpen: function onOpen() {},

package/dist/cjs/util/analytics/analytics.js

@@ -19,7 +19,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "67.6.8"
+      packageVersion: "67.6.9"
     }, attributes)
   };
 };

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

@@ -279,14 +279,30 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
     autoWidth,
     children,
     type,
+    editorEmoji,
     ...other
   } = props;
-  return jsx("span", _extends({
+  let accessibilityProps;
+  if (editorEmoji) {
+    accessibilityProps = {
+      role: undefined
+    };
+  } else if (shouldBeInteractive) {
+    accessibilityProps = {
+      role: 'button',
+      'aria-label': emoji.shortName
+    };
+  } else {
+    accessibilityProps = {
+      role: 'img',
+      'aria-label': emoji.shortName
+    };
+  }
+  return jsx("span", _extends({}, accessibilityProps, {
     ref: ref,
     "data-testid": `${type}-emoji-${emoji.shortName}`,
     "data-emoji-type": type,
     tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
-    role: shouldBeInteractive ? 'button' : 'img',
     css: type === 'sprite' ? emojiSpriteContainer : emojiImageContainer,
     className: className,
     onKeyDown: event => handleKeyDown(props, event),
@@ -299,7 +315,6 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
     onFocus: event => {
       handleFocus(props, event);
     },
-    "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
   }, other), children);
 });

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

@@ -21,7 +21,8 @@ export const ResourcedEmojiComponent = props => {
     customFallback = undefined,
     fitToHeight = defaultEmojiHeight,
     optimistic = false,
-    optimisticImageURL = undefined
+    optimisticImageURL = undefined,
+    editorEmoji
   } = props;
   const {
     shortName,
@@ -177,7 +178,8 @@ export const ResourcedEmojiComponent = props => {
     onLoadError: handleOnLoadError,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
-    autoWidth: !!emoji ? false : true
+    autoWidth: !!emoji ? false : true,
+    editorEmoji: editorEmoji
   })));
 };
 export default ResourcedEmojiComponent;

package/dist/es2019/components/picker/EmojiPickerListSearch.js

@@ -1,16 +1,16 @@
 /** @jsx jsx */
-import React, { useLayoutEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
-import TextField from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
+import TextField from '@atlaskit/textfield';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { jsx } from '@emotion/react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
-import { messages } from '../i18n';
-import { input, pickerSearch, searchIcon } from './styles';
-import { EMOJI_SEARCH_DEBOUNCE } from '../../util/constants';
 import { useDebouncedCallback } from 'use-debounce';
+import { EMOJI_SEARCH_DEBOUNCE } from '../../util/constants';
 import { hidden } from '../common/styles';
-export const emojiPickerSearchTestId = 'emoji-picker-serach';
+import { messages } from '../i18n';
+import { input, pickerSearch, searchIcon } from './styles';
+export const emojiPickerSearchTestId = 'emoji-picker-search';
 export const EmojiPickerListSearch = props => {
   const {
     style,

package/dist/es2019/components/typeahead/EmojiTypeAheadComponent.js

@@ -1,14 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
+
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
+import { flushSync } from 'react-dom';
 import uuid from 'uuid';
-import { jsx } from '@emotion/react';
-import { defaultListLimit } from '../../util/constants';
-import { toEmojiId } from '../../util/type-helpers';
+import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { SearchSort } from '../../types';
+import { typeaheadCancelledEvent, typeaheadRenderedEvent, typeaheadSelectedEvent, ufoExperiences } from '../../util/analytics';
+import { defaultListLimit } from '../../util/constants';
 import debug from '../../util/logger';
-import { typeaheadCancelledEvent, typeaheadSelectedEvent, typeaheadRenderedEvent, ufoExperiences } from '../../util/analytics';
-import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
+import { toEmojiId } from '../../util/type-helpers';
 import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import EmojiList from './EmojiTypeAheadList';
 import { emojiTypeAhead } from './styles';
@@ -72,10 +74,15 @@ export default class EmojiTypeAheadComponent extends PureComponent {
       const visible = emojis.length > 0;
       this.fireAnalyticsEvent(typeaheadRenderedEvent(Date.now() - this.renderStartTime, query, emojis));
       debug('emoji-typeahead.applyPropChanges', emojis.length, wasVisible, visible);
-      this.setState({
-        emojis: emojis,
-        visible,
-        loading: false
+
+      // Synchronously flush state update, because there is some analytics in fireSelectionEvent
+      // that relies on emojis being set to determine the position
+      flushSync(() => {
+        this.setState({
+          emojis: emojis,
+          visible,
+          loading: false
+        });
       });
       if (isFullShortName(query)) {
         const matchIndex = uniqueExactShortNameMatchIndex(result, query);

package/dist/es2019/util/analytics/analytics.js

@@ -7,7 +7,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "67.6.8",
+    packageVersion: "67.6.9",
     ...attributes
   }
 });

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

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type"];
+var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
@@ -277,13 +277,29 @@ export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     autoWidth = props.autoWidth,
     children = props.children,
     type = props.type,
+    editorEmoji = props.editorEmoji,
     other = _objectWithoutProperties(props, _excluded);
-  return jsx("span", _extends({
+  var accessibilityProps;
+  if (editorEmoji) {
+    accessibilityProps = {
+      role: undefined
+    };
+  } else if (shouldBeInteractive) {
+    accessibilityProps = {
+      role: 'button',
+      'aria-label': emoji.shortName
+    };
+  } else {
+    accessibilityProps = {
+      role: 'img',
+      'aria-label': emoji.shortName
+    };
+  }
+  return jsx("span", _extends({}, accessibilityProps, {
     ref: ref,
     "data-testid": "".concat(type, "-emoji-").concat(emoji.shortName),
     "data-emoji-type": type,
     tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
-    role: shouldBeInteractive ? 'button' : 'img',
     css: type === 'sprite' ? emojiSpriteContainer : emojiImageContainer,
     className: className,
     onKeyDown: function onKeyDown(event) {
@@ -298,7 +314,6 @@ export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     onFocus: function onFocus(event) {
       handleFocus(props, event);
     },
-    "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
   }, other), children);
 });

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

@@ -31,7 +31,8 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     _props$optimistic = props.optimistic,
     optimistic = _props$optimistic === void 0 ? false : _props$optimistic,
     _props$optimisticImag = props.optimisticImageURL,
-    optimisticImageURL = _props$optimisticImag === void 0 ? undefined : _props$optimisticImag;
+    optimisticImageURL = _props$optimisticImag === void 0 ? undefined : _props$optimisticImag,
+    editorEmoji = props.editorEmoji;
   var shortName = emojiId.shortName,
     id = emojiId.id,
     fallback = emojiId.fallback;
@@ -211,7 +212,8 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     onLoadError: handleOnLoadError,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
-    autoWidth: !!emoji ? false : true
+    autoWidth: !!emoji ? false : true,
+    editorEmoji: editorEmoji
   })));
 };
 export default ResourcedEmojiComponent;

package/dist/esm/components/picker/EmojiPickerListSearch.js

@@ -1,17 +1,17 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import React, { useLayoutEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
-import TextField from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
+import TextField from '@atlaskit/textfield';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { jsx } from '@emotion/react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
-import { messages } from '../i18n';
-import { input, pickerSearch, searchIcon } from './styles';
-import { EMOJI_SEARCH_DEBOUNCE } from '../../util/constants';
 import { useDebouncedCallback } from 'use-debounce';
+import { EMOJI_SEARCH_DEBOUNCE } from '../../util/constants';
 import { hidden } from '../common/styles';
-export var emojiPickerSearchTestId = 'emoji-picker-serach';
+import { messages } from '../i18n';
+import { input, pickerSearch, searchIcon } from './styles';
+export var emojiPickerSearchTestId = 'emoji-picker-search';
 export var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
   var style = props.style,
     query = props.query,

package/dist/esm/components/typeahead/EmojiTypeAheadComponent.js

@@ -11,15 +11,17 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 /** @jsx jsx */
+
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
+import { flushSync } from 'react-dom';
 import uuid from 'uuid';
-import { jsx } from '@emotion/react';
-import { defaultListLimit } from '../../util/constants';
-import { toEmojiId } from '../../util/type-helpers';
+import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { SearchSort } from '../../types';
+import { typeaheadCancelledEvent, typeaheadRenderedEvent, typeaheadSelectedEvent, ufoExperiences } from '../../util/analytics';
+import { defaultListLimit } from '../../util/constants';
 import debug from '../../util/logger';
-import { typeaheadCancelledEvent, typeaheadSelectedEvent, typeaheadRenderedEvent, ufoExperiences } from '../../util/analytics';
-import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
+import { toEmojiId } from '../../util/type-helpers';
 import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import EmojiList from './EmojiTypeAheadList';
 import { emojiTypeAhead } from './styles';
@@ -94,10 +96,15 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
       var visible = emojis.length > 0;
       _this.fireAnalyticsEvent(typeaheadRenderedEvent(Date.now() - _this.renderStartTime, query, emojis));
       debug('emoji-typeahead.applyPropChanges', emojis.length, wasVisible, visible);
-      _this.setState({
-        emojis: emojis,
-        visible: visible,
-        loading: false
+
+      // Synchronously flush state update, because there is some analytics in fireSelectionEvent
+      // that relies on emojis being set to determine the position
+      flushSync(function () {
+        _this.setState({
+          emojis: emojis,
+          visible: visible,
+          loading: false
+        });
       });
       if (isFullShortName(query)) {
         var matchIndex = uniqueExactShortNameMatchIndex(result, query);

package/dist/esm/util/analytics/analytics.js

@@ -12,7 +12,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "67.6.8"
+      packageVersion: "67.6.9"
     }, attributes)
   };
 };

package/dist/types/components/common/Emoji.d.ts

@@ -74,6 +74,12 @@ export interface Props extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onMo
      * Used only for image based emojis
      */
     autoWidth?: boolean;
+    /**
+     * This should only be set when the emoji is being used in the Editor.
+     * Currently when set -- this prevents any aria labels being added.
+     * This is acceptable in Editor -- as it uses another technique to announce the emoji nodes.
+     */
+    editorEmoji?: true;
 }
 export declare const SpriteEmoji: (props: Props) => jsx.JSX.Element;
 export declare const ImageEmoji: (props: Props) => jsx.JSX.Element;

package/dist/types/components/common/ResourcedEmojiComponent.d.ts

@@ -37,6 +37,12 @@ export interface BaseResourcedEmojiProps {
      * Defaults to `undefined`.
      */
     optimisticImageURL?: string;
+    /**
+     * This should only be set when the emoji is being used in the Editor.
+     * Currently when set -- this prevents any aria labels being added.
+     * This is acceptable in Editor -- as it uses another technique to announce the emoji nodes.
+     */
+    editorEmoji?: true;
 }
 export interface Props extends BaseResourcedEmojiProps {
     /**

package/dist/types/components/picker/EmojiPickerListSearch.d.ts

@@ -7,5 +7,5 @@ export interface Props {
     onChange: (value: string) => void;
     resultsCount: number;
 }
-export declare const emojiPickerSearchTestId = "emoji-picker-serach";
+export declare const emojiPickerSearchTestId = "emoji-picker-search";
 export declare const EmojiPickerListSearch: (props: Props) => jsx.JSX.Element;

package/dist/types/components/typeahead/EmojiTypeAheadComponent.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { PureComponent } from 'react';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { jsx } from '@emotion/react';
+import { PureComponent } from 'react';
 import type { EmojiProvider } from '../../api/EmojiResource';
 import { type EmojiDescription, type OnEmojiEvent } from '../../types';
 export interface OnLifecycle {

package/dist/types-ts4.5/components/common/Emoji.d.ts

@@ -74,6 +74,12 @@ export interface Props extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onMo
      * Used only for image based emojis
      */
     autoWidth?: boolean;
+    /**
+     * This should only be set when the emoji is being used in the Editor.
+     * Currently when set -- this prevents any aria labels being added.
+     * This is acceptable in Editor -- as it uses another technique to announce the emoji nodes.
+     */
+    editorEmoji?: true;
 }
 export declare const SpriteEmoji: (props: Props) => jsx.JSX.Element;
 export declare const ImageEmoji: (props: Props) => jsx.JSX.Element;

package/dist/types-ts4.5/components/common/ResourcedEmojiComponent.d.ts

@@ -37,6 +37,12 @@ export interface BaseResourcedEmojiProps {
      * Defaults to `undefined`.
      */
     optimisticImageURL?: string;
+    /**
+     * This should only be set when the emoji is being used in the Editor.
+     * Currently when set -- this prevents any aria labels being added.
+     * This is acceptable in Editor -- as it uses another technique to announce the emoji nodes.
+     */
+    editorEmoji?: true;
 }
 export interface Props extends BaseResourcedEmojiProps {
     /**

package/dist/types-ts4.5/components/picker/EmojiPickerListSearch.d.ts

@@ -7,5 +7,5 @@ export interface Props {
     onChange: (value: string) => void;
     resultsCount: number;
 }
-export declare const emojiPickerSearchTestId = "emoji-picker-serach";
+export declare const emojiPickerSearchTestId = "emoji-picker-search";
 export declare const EmojiPickerListSearch: (props: Props) => jsx.JSX.Element;

package/dist/types-ts4.5/components/typeahead/EmojiTypeAheadComponent.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { PureComponent } from 'react';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { jsx } from '@emotion/react';
+import { PureComponent } from 'react';
 import type { EmojiProvider } from '../../api/EmojiResource';
 import { type EmojiDescription, type OnEmojiEvent } from '../../types';
 export interface OnLifecycle {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "67.6.8",
+  "version": "67.6.9",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,22 +27,23 @@
     "releaseModel": "continuous",
     "website": {
       "name": "Emoji"
-    }
+    },
+    "runReact18": false
   },
   "config": {
     "access": "public"
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^17.0.0",
+    "@atlaskit/button": "^17.2.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/media-client": "^26.1.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
-    "@atlaskit/tooltip": "^18.0.0",
+    "@atlaskit/tokens": "^1.33.0",
+    "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/util-service-support": "^6.2.0",
     "@atlaskit/visually-hidden": "^1.2.0",