@atlaskit/editor-core 172.3.2 → 173.0.1

package/dist/esm/plugins/table/toolbar.js

@@ -1,12 +1,16 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import commonMessages from '@atlaskit/editor-common/messages';
 import { clearHoverSelection, hoverTable } from './commands';
-import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
+import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { TableCssClassName } from './types';
+import { getMergedCellsPositions } from './utils';
 import { isReferencedSource } from './utils/referentiality';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
@@ -17,6 +21,12 @@ import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/
 import { findParentDomRefOfType } from 'prosemirror-utils';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
+import { addColumnAfter, addRowAfter, tooltip, backspace } from '@atlaskit/editor-common/keymaps';
+import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
+import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
+import { getFeatureFlags } from '../feature-flags-context';
 // TODO: ED-14403 investigate why these translations don't work
 export var messages = defineMessages({
   tableOptions: {
@@ -94,6 +104,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       left = initialSelectionRect.left;
   var numberOfColumns = right - left;
   var numberOfRows = bottom - top;
+  var pluginState = getPluginState(editorState);
   var options = [{
     id: 'editor.table.insertColumn',
     title: formatMessage(tableMessages.insertColumn),
@@ -108,7 +119,10 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       return true;
     },
     selected: false,
-    disabled: false
+    disabled: false,
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(addColumnAfter))
   }, {
     id: 'editor.table.insertRow',
     title: formatMessage(tableMessages.insertRow),
@@ -126,7 +140,10 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       return true;
     },
     selected: false,
-    disabled: false
+    disabled: false,
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(addRowAfter))
   }, {
     id: 'editor.table.removeColumns',
     title: formatMessage(tableMessages.removeColumns, {
@@ -162,16 +179,63 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
   }, {
     id: 'editor.table.mergeCells',
     title: formatMessage(ContextualMenuMessages.mergeCells),
-    onClick: mergeCellsWithAnalytics(editorAnalyticsAPI),
+    onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
     selected: false,
     disabled: !canMergeCells(editorState.tr)
   }, {
     id: 'editor.table.splitCell',
     title: formatMessage(ContextualMenuMessages.splitCell),
-    onClick: splitCellWithAnalytics(editorAnalyticsAPI),
+    onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
     selected: false,
     disabled: !splitCell(editorState)
-  }, {
+  }];
+
+  if (pluginState.pluginConfig.allowDistributeColumns) {
+    var distributeColumnWidths = function distributeColumnWidths(state, dispatch, view) {
+      var newResizeStateWithAnalytics = view ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, view.domAtPos.bind(view), getEditorContainerWidth) : undefined;
+
+      if (newResizeStateWithAnalytics) {
+        distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+        return true;
+      }
+
+      return false;
+    };
+
+    options.push({
+      id: 'editor.table.distributeColumns',
+      title: formatMessage(ContextualMenuMessages.distributeColumns),
+      onClick: distributeColumnWidths,
+      selected: false,
+      disabled: numberOfColumns <= 1
+    });
+  }
+
+  if (pluginState.pluginConfig.allowColumnSorting) {
+    var hasMergedCellsInTable = getMergedCellsPositions(editorState.tr).length > 0;
+    options.push({
+      id: 'editor.table.sortColumnAsc',
+      title: formatMessage(ContextualMenuMessages.sortColumnASC),
+      onClick: function onClick(state, dispatch) {
+        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.ASC)(state, dispatch);
+        return true;
+      },
+      selected: false,
+      disabled: hasMergedCellsInTable
+    });
+    options.push({
+      id: 'editor.table.sortColumnDesc',
+      title: formatMessage(ContextualMenuMessages.sortColumnDESC),
+      onClick: function onClick(state, dispatch) {
+        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.DESC)(state, dispatch);
+        return true;
+      },
+      selected: false,
+      disabled: hasMergedCellsInTable
+    });
+  }
+
+  options.push({
     id: 'editor.table.clearCells',
     title: formatMessage(ContextualMenuMessages.clearCells, {
       0: Math.max(numberOfColumns, numberOfRows)
@@ -184,14 +248,19 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       return true;
     },
     selected: false,
-    disabled: false
-  }];
+    disabled: false,
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(backspace))
+  });
   return {
     id: 'editor.table.cellOptions',
     type: 'dropdown',
     title: formatMessage(tableMessages.cellOptions),
-    hidden: true,
-    options: options
+    options: options,
+    // Increased dropdown item width to prevent labels from being truncated
+    dropdownWidth: 230,
+    showSelected: false
   };
 };
 
@@ -210,7 +279,12 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
       if (tableObject && pluginState.editorHasFocus) {
         var nodeType = state.schema.nodes.table;
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-        var cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI); // Check if we need to show confirm dialog for delete button
+
+        var _ref3 = getFeatureFlags(state) || {},
+            tableCellOptionsInFloatingToolbar = _ref3.tableCellOptionsInFloatingToolbar;
+
+        var cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
+        var colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
 
         var confirmDialog;
         var localId = tableObject.node.attrs.localId;
@@ -243,7 +317,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           getDomRef: getDomRef,
           nodeType: nodeType,
           offset: [0, 3],
-          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), [{
+          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), _toConsumableArray(colorPicker), [{
             type: 'extensions-placeholder',
             separator: 'end'
           }], _toConsumableArray(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, nodeType, hoverTable(false, true), clearHoverSelection()), {
@@ -275,10 +349,10 @@ var separator = function separator(hidden) {
   };
 };
 
-var getCellItems = function getCellItems(pluginConfig, state, _ref3, getEditorContainerWidth, editorAnalyticsAPI) {
-  var formatMessage = _ref3.formatMessage;
+var getCellItems = function getCellItems(pluginConfig, state, _ref4, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
+  var formatMessage = _ref4.formatMessage;
 
-  if (pluginConfig.allowCellOptionsInFloatingToolbar) {
+  if (pluginConfig.allowCellOptionsInFloatingToolbar || tableCellOptionsInFloatingToolbar) {
     var initialSelectionRect = getClosestSelectionRect(state);
 
     if (initialSelectionRect) {
@@ -290,4 +364,39 @@ var getCellItems = function getCellItems(pluginConfig, state, _ref3, getEditorCo
   }
 
   return [];
+};
+
+var getColorPicker = function getColorPicker(state, menu, _ref5, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
+  var _node$attrs;
+
+  var formatMessage = _ref5.formatMessage;
+
+  var _getPluginState2 = getPluginState(state),
+      targetCellPosition = _getPluginState2.targetCellPosition,
+      pluginConfig = _getPluginState2.pluginConfig;
+
+  if (!pluginConfig.allowBackgroundColor || !tableCellOptionsInFloatingToolbar) {
+    return [];
+  }
+
+  var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
+  var currentBackground = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
+  var defaultPalette = cellBackgroundColorPalette.find(function (item) {
+    return item.value === currentBackground;
+  }) || {
+    label: 'Custom',
+    value: currentBackground,
+    border: DEFAULT_BORDER_COLOR
+  };
+  return [{
+    id: 'editor.panel.colorPicker',
+    title: formatMessage(ContextualMenuMessages.cellBackground),
+    type: 'select',
+    selectType: 'color',
+    defaultValue: defaultPalette,
+    options: cellBackgroundColorPalette,
+    onChange: function onChange(option) {
+      return setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition);
+    }
+  }, separator(menu.hidden)];
 };

package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -293,14 +293,14 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           break;
 
         case 'merge':
-          mergeCellsWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+          mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU)(state, dispatch);
 
           _this.toggleOpen();
 
           break;
 
         case 'split':
-          splitCellWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+          splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU)(state, dispatch);
 
           _this.toggleOpen();
 
@@ -448,7 +448,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
 
       var state = editorView.state,
           dispatch = editorView.dispatch;
-      setColorWithAnalytics(editorAnalyticsAPI)(color, targetCellPosition)(state, dispatch);
+      setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(state, dispatch);
 
       _this.toggleOpen();
     });

package/dist/esm/plugins/tasks-and-decisions/commands.js

@@ -68,18 +68,6 @@ export var getListTypes = function getListTypes(listType, schema) {
     item: decisionItem
   };
 };
-/*
- * @deprecated - [ED-13182] insertTaskDecision has been depreciated in favor of insertTaskDecisionCommand
- */
-
-export var insertTaskDecision = function insertTaskDecision(view, listType) {
-  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.TOOLBAR;
-  var listLocalId = arguments.length > 3 ? arguments[3] : undefined;
-  var itemLocalId = arguments.length > 4 ? arguments[4] : undefined;
-  // eslint-disable-next-line no-console
-  console.warn('insertTaskDecision has been depreciated in favor of insertTaskDecisionCommand');
-  return insertTaskDecisionCommand(listType, inputMethod, undefined, listLocalId, itemLocalId);
-};
 export var insertTaskDecisionAction = function insertTaskDecisionAction(state, listType) {
   var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.TOOLBAR;
   var addItem = arguments.length > 3 ? arguments[3] : undefined;

package/dist/esm/plugins/type-ahead/constants.js

@@ -1,6 +1,7 @@
 export var TYPE_AHEAD_DECORATION_KEY = 'typeahead_decoration_key';
 export var TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = 'typeaheadDecoration';
 export var TYPE_AHEAD_POPUP_CONTENT_CLASS = 'fabric-editor-typeahead';
+export var TYPE_AHEAD_DECORATION_ELEMENT_ID = 'typeahaed_decoration_element_id';
 export var NavigationDirection;
 
 (function (NavigationDirection) {

package/dist/esm/plugins/type-ahead/messages.js

@@ -3,6 +3,21 @@ export var typeAheadListMessages = defineMessages({
   typeAheadResultLabel: {
     id: 'fabric.editor.typeAheadResultLabel',
     defaultMessage: 'TypeAhead results',
-    description: 'the result of a typehead, similar to autocomplete results+'
+    description: 'the result of a typeahead, similar to autocomplete results+'
+  },
+  inputQueryAssistiveLabel: {
+    id: 'fabric.editor.inputQueryAssistiveTxt',
+    defaultMessage: 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
+    description: 'Assitive text to the user when using typeahead shortcut'
+  },
+  searchResultsLabel: {
+    id: 'fabric.editor.searchResults',
+    defaultMessage: '{itemsLength, plural, one {# search result} other {# search results}} available',
+    description: 'Assitive text to the user when using typeahead shortcut and it preceeds with a number - Ex: 10 search results available'
+  },
+  noSearchResultsLabel: {
+    id: 'fabric.editor.noSearchResults',
+    defaultMessage: 'No search results',
+    description: 'Assitive text to the user when using typeahead shortcut'
   }
 });

package/dist/esm/plugins/type-ahead/pm-plugins/main.js

@@ -54,7 +54,7 @@ export function createPlugin(_ref) {
           decorationSet: DecorationSet.empty,
           decorationElement: null,
           items: [],
-          selectedIndex: 0,
+          selectedIndex: -1,
           stats: null,
           inputMethod: null
         };

package/dist/esm/plugins/type-ahead/pm-plugins/reducer.js

@@ -73,7 +73,7 @@ export var createReducer = function createReducer(_ref) {
       triggerHandler: triggerHandler,
       decorationElement: decorationElement,
       inputMethod: inputMethod,
-      selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : 0,
+      selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1,
       items: [],
       query: reopenQuery || ''
     });
@@ -138,7 +138,7 @@ export var createReducer = function createReducer(_ref) {
       var selectedIndex = currentPluginState.selectedIndex;
       return _objectSpread(_objectSpread({}, currentPluginState), {}, {
         items: items,
-        selectedIndex: Math.max(selectedIndex >= items.length ? items.length - 1 : selectedIndex, 0)
+        selectedIndex: Math.max(selectedIndex >= items.length ? items.length - 1 : selectedIndex, -1)
       });
     } else if (shouldUpdateSelectedIndex) {
       return _objectSpread(_objectSpread({}, currentPluginState), {}, {

package/dist/esm/plugins/type-ahead/ui/AssistiveText.js

@@ -0,0 +1,129 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+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; } }
+
+/** @jsx jsx */
+import debounce from 'lodash/debounce';
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+var statusDebounceMillis = 1400;
+var assitiveTextStyles = css({
+  border: 0,
+  clip: 'rect(0 0 0 0)',
+  height: '1px',
+  marginbottom: '-1px',
+  marginright: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  whitespace: 'nowrap',
+  width: '1px'
+});
+
+var AssistveTextComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(AssistveTextComponent, _React$Component);
+
+  var _super = _createSuper(AssistveTextComponent);
+
+  function AssistveTextComponent() {
+    var _this;
+
+    _classCallCheck(this, AssistveTextComponent);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      bump: false,
+      //when the same text needs to be read again, Hence it needs to be toggled between __status--A and __status--B
+      debounced: false,
+      silenced: false
+    });
+
+    return _this;
+  }
+
+  _createClass(AssistveTextComponent, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      var _this2 = this;
+
+      this.debounceStatusUpdate = debounce(function () {
+        if (!_this2.state.debounced) {
+          var shouldSilence = !_this2.props.isInFocus;
+
+          _this2.setState(function (_ref) {
+            var bump = _ref.bump;
+            return {
+              bump: !bump,
+              debounced: true,
+              silenced: shouldSilence
+            };
+          });
+        }
+      }, statusDebounceMillis);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {}
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps() {
+      this.setState(function (_ref2) {
+        var bump = _ref2.bump;
+        return {
+          bump: !bump,
+          debounced: false
+        };
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          assistiveText = _this$props.assistiveText,
+          id = _this$props.id;
+      var _this$state = this.state,
+          bump = _this$state.bump,
+          debounced = _this$state.debounced,
+          silenced = _this$state.silenced;
+      this.debounceStatusUpdate();
+      return jsx("div", {
+        css: assitiveTextStyles
+      }, jsx("div", {
+        id: id + '__status--A',
+        role: "status",
+        "aria-atomic": "true",
+        "aria-live": "polite"
+      }, "".concat(!silenced && debounced && bump ? assistiveText : '')), jsx("div", {
+        id: id + '__status--B',
+        role: "status",
+        "aria-atomic": "true",
+        "aria-live": "polite"
+      }, "".concat(!silenced && debounced && !bump ? assistiveText : '')));
+    }
+  }]);
+
+  return AssistveTextComponent;
+}(React.Component);
+
+_defineProperty(AssistveTextComponent, "defaultProps", {
+  statusDebounceMillis: 1400,
+  debounce: true,
+  assistiveText: '',
+  isInFocus: false,
+  id: ''
+});
+
+export var AssistiveText = AssistveTextComponent;

package/dist/esm/plugins/type-ahead/ui/InputQuery.js

@@ -1,14 +1,20 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject;
 
 /** @jsx jsx */
-import React, { useRef, useCallback, Fragment, useLayoutEffect } from 'react';
+import React, { useRef, useCallback, Fragment, useLayoutEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { getPluginState } from '../utils';
 import { CloseSelectionOptions, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
+import { AssistiveText } from './AssistiveText';
+import { typeAheadListMessages } from '../messages';
+import { useIntl } from 'react-intl-next';
 var querySpan = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n"])));
 
 var isNavigationKey = function isNavigationKey(event) {
@@ -43,7 +49,9 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       forceFocus = _ref.forceFocus,
       reopenQuery = _ref.reopenQuery,
       onQueryFocus = _ref.onQueryFocus,
-      onUndoRedo = _ref.onUndoRedo;
+      onUndoRedo = _ref.onUndoRedo,
+      editorView = _ref.editorView,
+      items = _ref.items;
   var ref = useRef(document.createElement('span'));
   var cleanedInputContent = useCallback(function () {
     var _ref$current;
@@ -55,6 +63,12 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isInFocus = _useState2[0],
+      setInFocus = _useState2[1];
+
   var checkKeyEvent = useCallback(function (event) {
     var _ref$current2;
 
@@ -64,6 +78,11 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var text = cleanedInputContent();
     var stopDefault = false;
 
+    var _getPluginState = getPluginState(editorView.state),
+        selectedIndex = _getPluginState.selectedIndex;
+
+    setInFocus(true);
+
     switch (key) {
       case ' ':
         // space key
@@ -107,23 +126,29 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         // ED-14758 - Under the W3C specification, any keycode sent under IME would return a keycode 229
         // event.isComposing can't be used alone as this also included a virtual keyboard under a keyboardless device, therefore, it seems the best practice would be intercepting the event as below.
         // Some suggested the other workaround maybe listen on`keypress` instead of `keydown`
-        if (event.isComposing && (event.which === 229 || event.keyCode === 229)) {
-          break;
+        if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
+          if (selectedIndex === -1) {
+            selectNextItem();
+          }
+
+          onItemSelect(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER);
         }
 
-        onItemSelect(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER);
         break;
 
       case 'Tab':
+        if (selectedIndex === -1) {
+          selectNextItem();
+        }
+
         onItemSelect(SelectItemMode.TAB);
         break;
 
       case 'ArrowDown':
-        selectNextItem();
-        break;
+        if (selectedIndex === -1) {
+          selectNextItem();
+        }
 
-      case 'ArrowUp':
-        selectPreviousItem();
         break;
     }
 
@@ -138,7 +163,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, cancel, selectPreviousItem, cleanedInputContent]);
+  }, [onUndoRedo, onItemSelect, selectNextItem, cancel, cleanedInputContent, editorView.state]);
   var onClick = useCallback(function (event) {
     var _ref$current3;
 
@@ -229,6 +254,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var beforeinput = function beforeinput(e) {
       var _target$textContent;
 
+      setInFocus(false);
       var target = e.target;
 
       if (e.isComposing || !(target instanceof HTMLElement)) {
@@ -300,7 +326,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
   useLayoutEffect(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
 
@@ -323,9 +349,12 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         }
 
         ref.current.focus();
+        setInFocus(true);
       });
     }
   }, [forceFocus, reopenQuery]);
+  var assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
+  var intl = useIntl();
   /**
     When we migrated to emotion from styled component, we started getting this error.
     jsx-a11y/interactive-supports-focus
@@ -338,9 +367,24 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
-    role: "textbox",
+    role: "combobox",
+    "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,
+    "aria-autocomplete": "list",
+    "aria-expanded": items.length !== 0,
+    "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
     "data-query-prefix": triggerQueryPrefix
+  }), jsx("span", {
+    id: assistiveHintID,
+    style: {
+      display: 'none'
+    }
+  }, intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
+    assistiveText: items.length === 0 ? intl.formatMessage(typeAheadListMessages.noSearchResultsLabel, {
+      itemsLength: items.length
+    }) : '',
+    isInFocus: items.length === 0 || isInFocus,
+    id: TYPE_AHEAD_DECORATION_ELEMENT_ID
   }));
 });
 InputQuery.displayName = 'InputQuery';