@atlaskit/editor-core 153.1.4 → 154.0.0

package/dist/esm/plugins/floating-toolbar/ui/Button.js

@@ -30,7 +30,8 @@ export default (function (_ref) {
       tooltipContent = _ref.tooltipContent,
       testId = _ref.testId,
       _ref$hideTooltipOnCli = _ref.hideTooltipOnClick,
-      hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? true : _ref$hideTooltipOnCli;
+      hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? true : _ref$hideTooltipOnCli,
+      ariaHasPopup = _ref.ariaHasPopup;
   // Check if there's only an icon and add additional styles
   var iconOnly = (icon || iconAfter) && !children;
   var customSpacing = iconOnly ? iconOnlySpacing : {};
@@ -57,11 +58,12 @@ export default (function (_ref) {
       }, rest);
     },
     "aria-label": title,
+    "aria-pressed": selected,
     spacing: 'compact',
     href: href,
     target: target,
     appearance: appearance,
-    "aria-haspopup": true,
+    "aria-haspopup": ariaHasPopup,
     iconBefore: icon || undefined,
     iconAfter: iconAfter,
     onClick: onClick,

package/dist/esm/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -6,7 +6,8 @@ var _templateObject, _templateObject2;
 import React from 'react';
 import styled from 'styled-components';
 import Button from '@atlaskit/button';
-import { Popup, withOuterListeners, WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
 import { EmojiPicker } from '@atlaskit/emoji';
 import Tooltip from '@atlaskit/tooltip';
 import EditorEmojiAddIcon from './EditorEmojiAddIcon'; // helps adjusts position of popup
@@ -36,6 +37,20 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
     props.onChange && props.onChange(emoji);
   };
 
+  var isDetachedElement = function isDetachedElement(el) {
+    return !document.body.contains(el);
+  };
+
+  var handleEmojiClickOutside = function handleEmojiClickOutside(e) {
+    // Ignore click events for detached elements.
+    // Workaround for CETI-240 - where two onClicks fire - one when the upload button is
+    // still in the document, and one once it's detached. Does not always occur, and
+    // may be a side effect of a react render optimisation
+    if (e && e.target && !isDetachedElement(e.target)) {
+      togglePopup();
+    }
+  };
+
   var renderPicker = function renderPicker(providers) {
     if (!providers.emojiProvider) {
       return null;
@@ -45,7 +60,7 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
       emojiProvider: providers.emojiProvider,
       onSelection: updateEmoji,
       onPickerRef: function onPickerRef() {},
-      handleClickOutside: togglePopup
+      handleClickOutside: handleEmojiClickOutside
     });
   };
 

package/dist/esm/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -3,7 +3,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import React, { useEffect, useState } from 'react';
 import Loadable from 'react-loadable';
-import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common';
+import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { nodeToJSON } from '../../../utils';
 import { createExtensionAPI } from '../../extension/extension-api';

package/dist/esm/plugins/floating-toolbar/ui/Toolbar.js

@@ -29,6 +29,7 @@ import Input from './Input';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import ColorPickerButton from '../../../ui/ColorPickerButton';
 import { EmojiPickerButton } from './EmojiPickerButton';
+import Announcer from '../../../utils/announcer/announcer';
 var akGridSize = gridSize();
 var ToolbarContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n  padding: ", "px ", "px;\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n  ", ";\n  & > div {\n    align-items: center;\n  }\n"])), themed({
   light: 'white',
@@ -149,7 +150,10 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         "aria-label": "Floating Toolbar",
         hasCompactLeftPadding: firstElementIsSelect,
         className: className
-      }, /*#__PURE__*/React.createElement(ButtonGroup, null, items.filter(function (item) {
+      }, /*#__PURE__*/React.createElement(Announcer, {
+        text: "Floating toolbar controls have been opened",
+        delay: 250
+      }), /*#__PURE__*/React.createElement(ButtonGroup, null, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
         switch (item.type) {
@@ -191,7 +195,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
               disabled: item.disabled,
               tooltipContent: item.tooltipContent,
               testId: item.testId,
-              hideTooltipOnClick: item.hideTooltipOnClick
+              hideTooltipOnClick: item.hideTooltipOnClick,
+              ariaHasPopup: item.ariaHasPopup
             }, item.showTitle && item.title);
 
           case 'input':
@@ -272,7 +277,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
                 providerFactory: providerFactory,
                 isSelected: item.selected,
                 onChange: function onChange(selected) {
-                  return dispatchCommand(item.onChange(selected.shortName));
+                  return dispatchCommand(item.onChange(selected));
                 }
               });
             }

package/dist/esm/plugins/fragment/index.js

@@ -1,6 +1,7 @@
 import { fragment } from '@atlaskit/adf-schema';
 import { Plugin } from 'prosemirror-state';
 import { pluginKey } from './plugin-key';
+import { createPlugin as createFragmentMarkConsistencyPlugin } from './pm-plugins/fragment-consistency';
 export function createPlugin() {
   return new Plugin({
     key: pluginKey
@@ -15,6 +16,15 @@ var fragmentMarkPlugin = function fragmentMarkPlugin() {
         name: 'fragment',
         mark: fragment
       }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'fragmentMarkConsistency',
+        plugin: function plugin(_ref) {
+          var dispatch = _ref.dispatch;
+          return createFragmentMarkConsistencyPlugin(dispatch);
+        }
+      }];
     }
   };
 };

package/dist/esm/plugins/fragment/pm-plugins/fragment-consistency.js

@@ -0,0 +1,145 @@
+/**
+ * This plugin ensures that certain nodes (such as tables, and various extension ones)
+ * have a unique `localId` attribute value for `fragment` marks.
+ * It also ensures the preservation of these IDs when nodes are being cut-and-pasted
+ * around the document.
+ *
+ * The implementation has been _heavily_ borrowed from
+ * - packages/editor/editor-core/src/plugins/table/pm-plugins/table-local-id.ts
+ */
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { uuid } from '@atlaskit/adf-schema';
+import { stepAddsOneOf } from '../../../utils/step';
+var pluginKey = new PluginKey('fragmentMarkConsistencyPlugin');
+/**
+ * Traverses a transaction's steps to see if we're inserting a node which supports a fragment mark
+ */
+
+var checkIsAddingSupportedNode = function checkIsAddingSupportedNode(schema, transaction) {
+  var nodesSupportingFragmentMark = getNodesSupportingFragmentMark(schema);
+  return transaction.steps.some(function (step) {
+    return nodesSupportingFragmentMark.some(function (nodeType) {
+      return stepAddsOneOf(step, new Set([nodeType]));
+    });
+  });
+};
+
+var getNodesSupportingFragmentMark = function getNodesSupportingFragmentMark(schema) {
+  var _schema$nodes = schema.nodes,
+      table = _schema$nodes.table,
+      extension = _schema$nodes.extension,
+      bodiedExtension = _schema$nodes.bodiedExtension,
+      inlineExtension = _schema$nodes.inlineExtension;
+  return [table, extension, bodiedExtension, inlineExtension];
+};
+
+var regenerateFragmentIdIfNeeded = function regenerateFragmentIdIfNeeded(_ref) {
+  var transaction = _ref.transaction,
+      schema = _ref.schema,
+      doc = _ref.doc,
+      shouldRegenerateLocalId = _ref.shouldRegenerateLocalId;
+  var fragment = schema.marks.fragment;
+  var nodesSupportingFragmentMark = getNodesSupportingFragmentMark(schema);
+  var transactionChanged = false;
+  doc.descendants(function (node, pos) {
+    var isSupportedNode = nodesSupportingFragmentMark.some(function (supportedNode) {
+      return node.type === supportedNode;
+    });
+
+    if (!isSupportedNode) {
+      // continue traversing
+      return true;
+    }
+
+    var existingFragmentMark = node.marks.find(function (mark) {
+      return mark.type === fragment;
+    });
+
+    if (!existingFragmentMark) {
+      // continue traversing
+      return true;
+    }
+
+    if (shouldRegenerateLocalId(existingFragmentMark.attrs.localId)) {
+      transactionChanged = true;
+      transaction.setNodeMarkup(pos, undefined, node.attrs, node.marks.map(function (mark) {
+        if (mark.type === fragment) {
+          mark.attrs.localId = uuid.generate();
+        }
+
+        return mark;
+      }));
+    }
+    /**
+     * Continue traversing, as we can encounter inline extension nodes pretty much anywhere
+     */
+
+
+    return true;
+  });
+  return {
+    transactionChanged: transactionChanged
+  };
+};
+/**
+ * Ensures presence of `fragment` mark on certain node types and the uniqueness of their `localId` attributes
+ */
+
+
+export var createPlugin = function createPlugin(dispatch) {
+  return new Plugin({
+    key: pluginKey,
+    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+      var modified = false;
+      var tr = newState.tr;
+      transactions.forEach(function (transaction) {
+        var fragmentLocalIdsObserved = new Set();
+
+        if (!transaction.docChanged) {
+          return;
+        } // Don't interfere with cut as it clashes with fixTables & we don't need
+        // to handle any extra cut cases in this plugin
+
+
+        var uiEvent = transaction.getMeta('uiEvent');
+
+        if (uiEvent === 'cut') {
+          return;
+        }
+        /** Check if we're actually inserting a supported node, otherwise we can ignore this tr */
+
+
+        var isAddingSupportedNode = checkIsAddingSupportedNode(newState.schema, transaction);
+
+        if (!isAddingSupportedNode) {
+          return;
+        }
+
+        var _regenerateFragmentId = regenerateFragmentIdIfNeeded({
+          doc: newState.doc,
+          schema: newState.schema,
+          transaction: tr,
+          shouldRegenerateLocalId: function shouldRegenerateLocalId(localId) {
+            if (fragmentLocalIdsObserved.has(localId)) {
+              return true;
+            }
+
+            fragmentLocalIdsObserved.add(localId);
+            return false;
+          }
+        }),
+            transactionChanged = _regenerateFragmentId.transactionChanged;
+
+        if (transactionChanged) {
+          modified = true;
+        }
+      });
+
+      if (modified) {
+        return tr;
+      }
+
+      return;
+    }
+  });
+};

package/dist/esm/plugins/help-dialog/ui/index.js

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl-next';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import AkModalDialog, { ModalTransition, ModalBody, useModal } from '@atlaskit/modal-dialog';
 import { Header, Footer, ContentWrapper, Line, Content, ColumnRight, ColumnLeft, Row, CodeSm, CodeMd, CodeLg, Title } from './styles';
@@ -25,6 +25,7 @@ import { messages as listMessages } from '../../list/messages';
 import { messages as insertBlockMessages } from '../../insert-block/ui/ToolbarInsertBlock/messages';
 import { messages as blockTypeMessages } from '../../block-type/messages';
 import { messages as undoRedoMessages } from '../../undo-redo/messages';
+import { alignmentMessages } from '../../../ui/Alignment/messages';
 import { closeHelpCommand } from '../commands';
 import { annotationMessages } from '../../annotation/toolbar';
 var messages = defineMessages({
@@ -105,6 +106,18 @@ export var formatting = function formatting(_ref) {
     autoFormatting: function autoFormatting() {
       return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "~~", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.strike), "~~"));
     }
+  }, {
+    name: formatMessage(toolbarMessages.subscript),
+    type: 'subsup',
+    keymap: function keymap() {
+      return keymaps.toggleSubscript;
+    }
+  }, {
+    name: formatMessage(toolbarMessages.superscript),
+    type: 'subsup',
+    keymap: function keymap() {
+      return keymaps.toggleSuperscript;
+    }
   }, {
     name: formatMessage(blockTypeMessages.heading1),
     type: 'heading',
@@ -249,6 +262,18 @@ export var formatting = function formatting(_ref) {
     autoFormatting: function autoFormatting() {
       return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "@"));
     }
+  }, {
+    name: formatMessage(alignmentMessages.alignLeft),
+    type: 'alignment',
+    keymap: function keymap() {
+      return keymaps.alignLeft;
+    }
+  }, {
+    name: formatMessage(alignmentMessages.alignRight),
+    type: 'alignment',
+    keymap: function keymap() {
+      return keymaps.alignRight;
+    }
   }];
 };
 var shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];

package/dist/esm/plugins/hyperlink/styles.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3;
 
 import styled, { css } from 'styled-components';
-import { linkSharedStyle } from '@atlaskit/editor-common';
+import { linkSharedStyle } from '@atlaskit/editor-common/styles';
 export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", "\n  }\n"])), linkSharedStyle);
 /**
  * Visible only to screenreaders. Use when there is a need

package/dist/esm/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -41,8 +41,11 @@ import { mapContentTypeToIcon, sha1, wordCount } from './utils';
 import { hideLinkToolbar } from '../../commands';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
 import { ScreenReaderText } from '../../styles';
+import { browser } from '@atlaskit/editor-common/utils';
+import { transformTimeStamp } from '../../../../ui/LinkSearch/transformTimeStamp';
+import Announcer from '../../../../utils/announcer/announcer';
 export var RECENT_SEARCH_LIST_SIZE = 5;
-var ClearText = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding-right: 8px;\n  color: ", ";\n"])), N90);
+var ClearText = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: 8px;\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), N90);
 var TextInputWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), InputWrapper, N30, N30);
 var IconWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), N80);
 export var messages = defineMessages({
@@ -423,6 +426,23 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getScreenReaderText", function () {
+      var intl = _this.props.intl;
+      var _this$state3 = _this.state,
+          items = _this$state3.items,
+          selectedIndex = _this$state3.selectedIndex;
+
+      if (items.length && selectedIndex > -1) {
+        var _items$selectedIndex = items[selectedIndex],
+            name = _items$selectedIndex.name,
+            container = _items$selectedIndex.container,
+            lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
+            lastViewedDate = _items$selectedIndex.lastViewedDate;
+        var date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
+        return "".concat(name, ", ").concat(container, ", ").concat(date === null || date === void 0 ? void 0 : date.pageAction, " ").concat(date === null || date === void 0 ? void 0 : date.dateString, " ").concat((date === null || date === void 0 ? void 0 : date.timeSince) || '');
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "isUrlPopulatedWithSelectedItem", function () {
       /**
        * When we use ArrowKey to navigate through result items,
@@ -433,10 +453,10 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
        * It can be useful to detect whether we want to insert a
        * smartlink or a hyperlink with customized title
        */
-      var _this$state3 = _this.state,
-          items = _this$state3.items,
-          selectedIndex = _this$state3.selectedIndex,
-          displayUrl = _this$state3.displayUrl;
+      var _this$state4 = _this.state,
+          items = _this$state4.items,
+          selectedIndex = _this$state4.selectedIndex,
+          displayUrl = _this$state4.displayUrl;
       var selectedItem = items[selectedIndex];
 
       if (selectedItem && selectedItem.url === displayUrl) {
@@ -454,10 +474,10 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
       var _this$props = _this.props,
           pluginState = _this$props.pluginState,
           onSubmit = _this$props.onSubmit;
-      var _this$state4 = _this.state,
-          items = _this$state4.items,
-          selectedIndex = _this$state4.selectedIndex,
-          displayText = _this$state4.displayText;
+      var _this$state5 = _this.state,
+          items = _this$state5.items,
+          selectedIndex = _this$state5.selectedIndex,
+          displayText = _this$state5.displayText;
 
       if (onSubmit) {
         _this.submitted = true;
@@ -503,9 +523,9 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleMouseLeaveResultItem", function (objectId) {
-      var _this$state5 = _this.state,
-          items = _this$state5.items,
-          selectedIndex = _this$state5.selectedIndex;
+      var _this$state6 = _this.state,
+          items = _this$state6.items,
+          selectedIndex = _this$state6.selectedIndex;
       var index = findIndex(items, function (item) {
         return item.objectId === objectId;
       }); // This is to avoid updating index that was set by other mouseenter event
@@ -518,10 +538,10 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleSubmit", function () {
-      var _this$state6 = _this.state,
-          displayUrl = _this$state6.displayUrl,
-          selectedIndex = _this$state6.selectedIndex,
-          items = _this$state6.items;
+      var _this$state7 = _this.state,
+          displayUrl = _this$state7.displayUrl,
+          selectedIndex = _this$state7.selectedIndex,
+          items = _this$state7.items;
       var selectedItem = items[selectedIndex];
 
       if (_this.isUrlPopulatedWithSelectedItem()) {
@@ -535,15 +555,15 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleTextKeyDown", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "handleClearTextKeyDown", function (event) {
       var KEY_CODE_TAB = 9;
       var keyCode = event.keyCode;
 
       if (keyCode === KEY_CODE_TAB) {
         if (!_this.submitted) {
-          var _this$state7 = _this.state,
-              displayUrl = _this$state7.displayUrl,
-              _displayText = _this$state7.displayText;
+          var _this$state8 = _this.state,
+              displayUrl = _this$state8.displayUrl,
+              _displayText = _this$state8.displayText;
           var url = normalizeUrl(displayUrl);
 
           _this.handleInsert(url, _displayText || displayUrl, INPUT_METHOD.MANUAL, 'notselected');
@@ -552,14 +572,12 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         event.preventDefault();
         return;
       }
-
-      _this.handleKeyDown(event);
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
-      var _this$state8 = _this.state,
-          items = _this$state8.items,
-          selectedIndex = _this$state8.selectedIndex;
+      var _this$state9 = _this.state,
+          items = _this$state9.items,
+          selectedIndex = _this$state9.selectedIndex;
       var _this$props2 = _this.props,
           pluginState = _this$props2.pluginState,
           view = _this$props2.view;
@@ -837,13 +855,13 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
     key: "loadInitialLinkSearchResult",
     value: function () {
       var _loadInitialLinkSearchResult = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-        var _this$state9, displayUrl, activityProvider, _items3;
+        var _this$state10, displayUrl, activityProvider, _items3;
 
         return _regeneratorRuntime.wrap(function _callee6$(_context6) {
           while (1) {
             switch (_context6.prev = _context6.next) {
               case 0:
-                _this$state9 = this.state, displayUrl = _this$state9.displayUrl, activityProvider = _this$state9.activityProvider;
+                _this$state10 = this.state, displayUrl = _this$state10.displayUrl, activityProvider = _this$state10.activityProvider;
                 _context6.prev = 1;
 
                 if (!(!displayUrl && activityProvider)) {
@@ -889,12 +907,12 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this2 = this;
 
-      var _this$state10 = this.state,
-          items = _this$state10.items,
-          isLoading = _this$state10.isLoading,
-          selectedIndex = _this$state10.selectedIndex,
-          displayUrl = _this$state10.displayUrl,
-          displayText = _this$state10.displayText;
+      var _this$state11 = this.state,
+          items = _this$state11.items,
+          isLoading = _this$state11.isLoading,
+          selectedIndex = _this$state11.selectedIndex,
+          displayUrl = _this$state11.displayUrl,
+          displayText = _this$state11.displayText;
       var _this$props3 = this.props,
           formatMessage = _this$props3.intl.formatMessage,
           activityProvider = _this$props3.activityProvider;
@@ -903,6 +921,12 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
       var formatClearLinkText = formatMessage(messages.clearLink);
       var formatDisplayText = formatMessage(messages.displayText);
       var screenReaderDescriptionId = 'search-recent-links-field-description';
+      var linkSearchListId = 'hyperlink-search-list';
+      var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
+      // as the Aria design pattern for combobox does not work in this case
+      // for details: https://a11y-internal.atlassian.net/browse/AK-740
+
+      var screenReaderText = browser.safari && this.getScreenReaderText();
       return /*#__PURE__*/React.createElement("div", {
         className: "recent-list"
       }, /*#__PURE__*/React.createElement(Container, {
@@ -912,10 +936,20 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         content: formatLinkAddressText
       }, /*#__PURE__*/React.createElement(LinkIcon, {
         label: formatLinkAddressText
-      }))), /*#__PURE__*/React.createElement(ScreenReaderText, {
+      }))), screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+        ariaLive: "assertive",
+        text: screenReaderText,
+        ariaRelevant: "additions",
+        delay: 250
+      }), /*#__PURE__*/React.createElement(ScreenReaderText, {
         "aria-hidden": "true",
         id: screenReaderDescriptionId
       }, formatMessage(messages.searchLinkAriaDescription)), /*#__PURE__*/React.createElement(PanelTextInput, {
+        role: "combobox",
+        ariaExpanded: true,
+        ariaActiveDescendant: ariaActiveDescendant,
+        ariaControls: linkSearchListId,
+        ariaAutoComplete: true,
         describedById: screenReaderDescriptionId,
         ref: function ref(ele) {
           return _this2.urlInputContainer = ele;
@@ -951,20 +985,24 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         onCancel: this.handleCancel,
         defaultValue: displayText,
         onSubmit: this.handleSubmit,
-        onKeyDown: this.handleTextKeyDown
+        onKeyDown: this.handleKeyDown
       }), displayText && /*#__PURE__*/React.createElement(Tooltip, {
         content: formatMessage(messages.clearText)
       }, /*#__PURE__*/React.createElement(ClearText, {
-        onClick: this.handleClearDisplayText
+        onClick: this.handleClearDisplayText,
+        onKeyDown: this.handleClearTextKeyDown
       }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
         label: formatMessage(messages.clearText)
       })))), /*#__PURE__*/React.createElement(ScreenReaderText, {
-        "aria-live": "assertive",
+        "aria-live": "polite",
+        "aria-atomic": "true",
         id: "fabric.editor.hyperlink.suggested.results"
       }, displayUrl && formatMessage(messages.searchLinkResults, {
         count: items.length
       })), /*#__PURE__*/React.createElement(LinkSearchList, {
         ariaControls: "fabric.editor.hyperlink.suggested.results",
+        id: linkSearchListId,
+        role: "listbox",
         items: items,
         isLoading: isLoading,
         selectedIndex: selectedIndex,

package/dist/esm/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -9,7 +9,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import HyperlinkAddToolbarComp from './HyperlinkAddToolbar';
 import { stateKey as pluginKey } from '../../pm-plugins/main';
 import WithPluginState from '../../../../ui/WithPluginState';

package/dist/esm/plugins/insert-block/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { pluginKey as blockTypeStateKey } from '../block-type/pm-plugins/main';
 import { stateKey as mediaStateKey } from '../media/pm-plugins/plugin-key';
 import { stateKey as hyperlinkPluginKey } from '../hyperlink/pm-plugins/main';

package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import InsertMenu from '../../../../ui/ElementBrowser/InsertMenu';
 import { DropDownButton } from './dropdown-button';
 export var BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
@@ -17,6 +17,8 @@ export var BlockInsertElementBrowser = function BlockInsertElementBrowser(props)
     onInsert: props.onInsert,
     toggleVisiblity: props.togglePlusMenuVisibility
   })), /*#__PURE__*/React.createElement(DropDownButton, {
+    "aria-expanded": props.open,
+    "aria-haspopup": true,
     handleRef: props.onRef,
     selected: props.open,
     disabled: props.disabled,

package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-menu-legacy.js

@@ -21,6 +21,8 @@ export var BlockInsertMenuLegacy = function BlockInsertMenuLegacy(props) {
     fitWidth: 175,
     zIndex: akEditorMenuZIndex
   }, /*#__PURE__*/React.createElement(DropDownButton, {
+    "aria-expanded": props.open,
+    "aria-haspopup": true,
     handleRef: props.onRef,
     selected: props.open,
     disabled: props.disabled,

package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -9,6 +9,8 @@ export var BlockInsertMenu = function BlockInsertMenu(props) {
 
   if (props.disabled) {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropDownButton, {
+      "aria-expanded": props.open,
+      "aria-haspopup": true,
       handleRef: props.onRef,
       selected: props.open,
       disabled: props.disabled,

package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/create-items.js

@@ -74,7 +74,8 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     items.push(link({
       content: formatMessage(messages.link),
       tooltipDescription: formatMessage(messages.linkDescription),
-      disabled: !!linkDisabled
+      disabled: !!linkDisabled,
+      'aria-haspopup': 'dialog'
     }));
   }
 
@@ -97,7 +98,8 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     items.push(mention({
       content: formatMessage(messages.mention),
       tooltipDescription: formatMessage(messages.mentionDescription),
-      disabled: !isTypeAheadAllowed
+      disabled: !isTypeAheadAllowed,
+      'aria-haspopup': 'listbox'
     }));
   }
 
@@ -105,7 +107,8 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     items.push(emoji({
       content: formatMessage(messages.emoji),
       tooltipDescription: formatMessage(messages.emojiDescription),
-      disabled: emojiDisabled || !isTypeAheadAllowed
+      disabled: emojiDisabled || !isTypeAheadAllowed,
+      'aria-haspopup': 'dialog'
     }));
   }