@atlaskit/editor-core 172.3.2 → 173.0.0

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';

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

@@ -7,21 +7,42 @@ var _templateObject;
 import React, { useMemo, useRef, useCallback, useLayoutEffect, useState } from 'react';
 import { jsx, css } from '@emotion/react';
 import { MenuGroup } from '@atlaskit/menu';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { List } from 'react-virtualized/dist/commonjs/List';
 import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
-import { injectIntl } from 'react-intl-next';
+import { injectIntl, useIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
+import { moveSelectedIndex } from '../utils';
+import { updateSelectedIndex } from '../commands/update-selected-index';
+import { AssistiveText } from './AssistiveText';
+import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
 var LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
 var LIST_WIDTH = 320;
-var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
-  var items = _ref.items,
-      selectedIndex = _ref.selectedIndex,
-      onItemHover = _ref.onItemHover,
-      onItemClick = _ref.onItemClick,
-      intl = _ref.intl,
-      fitHeight = _ref.fitHeight;
+var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(function (_ref) {
+  var numberOfResults = _ref.numberOfResults;
+  var intl = useIntl();
+  return jsx(AssistiveText, {
+    assistiveText: intl.formatMessage(typeAheadListMessages.searchResultsLabel, {
+      itemsLength: numberOfResults
+    }) // when the popup is open its always in focus
+    ,
+    isInFocus: true,
+    id: TYPE_AHEAD_DECORATION_ELEMENT_ID + '__popup'
+  });
+});
+var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
+  var _decorationElement$qu2;
+
+  var items = _ref2.items,
+      selectedIndex = _ref2.selectedIndex,
+      editorView = _ref2.editorView,
+      onItemClick = _ref2.onItemClick,
+      intl = _ref2.intl,
+      fitHeight = _ref2.fitHeight,
+      decorationElement = _ref2.decorationElement;
   var listRef = useRef();
+  var listContainerRef = useRef(null);
   var lastVisibleIndexes = useRef({
     overscanStartIndex: 0,
     overscanStopIndex: 0,
@@ -48,12 +69,38 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
   }, []);
   var actions = useMemo(function () {
     return {
-      onItemClick: onItemClick,
-      onItemHover: onItemHover
+      onItemClick: onItemClick
     };
-  }, [onItemClick, onItemHover]);
-  var onScroll = useCallback(function (_ref2) {
-    var scrollUpdateWasRequested = _ref2.scrollUpdateWasRequested;
+  }, [onItemClick]);
+
+  var isNavigationKey = function isNavigationKey(event) {
+    return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
+  };
+
+  var focusTargetElement = useCallback(function () {
+    var _decorationElement$qu;
+
+    //To reset the selected index
+    updateSelectedIndex(-1)(editorView.state, editorView.dispatch);
+    listRef.current.scrollToRow(0);
+    decorationElement === null || decorationElement === void 0 ? void 0 : (_decorationElement$qu = decorationElement.querySelector("[role='combobox']")) === null || _decorationElement$qu === void 0 ? void 0 : _decorationElement$qu.focus();
+  }, [editorView, listRef, decorationElement]);
+  var selectNextItem = useMemo(function () {
+    return moveSelectedIndex({
+      editorView: editorView,
+      direction: 'next'
+    });
+  }, [editorView]);
+  var selectPreviousItem = useMemo(function () {
+    return moveSelectedIndex({
+      editorView: editorView,
+      direction: 'previous'
+    });
+  }, [editorView]);
+  var lastVisibleStartIndex = lastVisibleIndexes.current.startIndex;
+  var lastVisibleStopIndex = lastVisibleIndexes.current.stopIndex;
+  var onScroll = useCallback(function (_ref3) {
+    var scrollUpdateWasRequested = _ref3.scrollUpdateWasRequested;
 
     if (!scrollUpdateWasRequested) {
       return;
@@ -71,27 +118,29 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
 
     requestAnimationFrame(function () {
       requestAnimationFrame(function () {
-        var indexes = lastVisibleIndexes.current;
-        var isSelectedItemVisible = selectedIndex >= indexes.startIndex && selectedIndex <= indexes.stopIndex;
+        var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex; //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
 
-        if (!isSelectedItemVisible) {
+        if (!isSelectedItemVisible && selectedIndex !== -1) {
           listRef.current.scrollToRow(selectedIndex);
+        } else if (selectedIndex === -1) {
+          listRef.current.scrollToRow(0);
         }
       });
     });
-  }, [selectedIndex, lastVisibleIndexes]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
   useLayoutEffect(function () {
     if (!listRef.current) {
       return;
     }
 
-    var indexes = lastVisibleIndexes.current;
-    var isSelectedItemVisible = selectedIndex >= indexes.startIndex && selectedIndex <= indexes.stopIndex;
+    var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex; //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
 
-    if (!isSelectedItemVisible) {
+    if (!isSelectedItemVisible && selectedIndex !== -1) {
       listRef.current.scrollToRow(selectedIndex);
+    } else if (selectedIndex === -1) {
+      listRef.current.scrollToRow(0);
     }
-  }, [selectedIndex, lastVisibleIndexes]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
   useLayoutEffect(function () {
     setCache(new CellMeasurerCache({
       fixedWidth: true,
@@ -106,12 +155,76 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
     }, 0), fitHeight);
     setHeight(height);
   }, [items, cache, fitHeight]);
+  useLayoutEffect(function () {
+    if (!listContainerRef.current) {
+      return;
+    }
+
+    var element = listContainerRef.current;
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+
+    var handleKeyDown = function handleKeyDown(event) {
+      if (isNavigationKey(event)) {
+        switch (event.key) {
+          case 'ArrowDown':
+            if (selectedIndex === items.length - 1) {
+              event.stopPropagation();
+            } else {
+              selectNextItem();
+            }
 
-  var renderRow = function renderRow(_ref3) {
-    var index = _ref3.index,
-        key = _ref3.key,
-        style = _ref3.style,
-        parent = _ref3.parent;
+            event.preventDefault();
+            break;
+
+          case 'ArrowUp':
+            if (selectedIndex === 0) {
+              //To set focus on target element when up arrow is pressed on first option of list
+              focusTargetElement();
+            } else {
+              selectPreviousItem();
+            }
+
+            event.preventDefault();
+            break;
+
+          case 'Tab':
+            //Tab key quick inserts the selected item.
+            onItemClick(SelectItemMode.TAB, selectedIndex);
+            event.preventDefault();
+            break;
+
+          case 'Enter':
+            //Enter key quick inserts the selected item.
+            if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
+              onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex);
+              event.preventDefault();
+            }
+
+            break;
+
+          default:
+            event.preventDefault();
+        }
+      } else {
+        //All the remaining keys sets focus on the typeahead query(inputQuery.tsx))
+        focusTargetElement();
+      }
+    };
+
+    element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
+    return function () {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, items.length]);
+
+  var renderRow = function renderRow(_ref4) {
+    var index = _ref4.index,
+        key = _ref4.key,
+        style = _ref4.style,
+        parent = _ref4.parent;
     return jsx(CellMeasurer, {
       key: key,
       cache: cache,
@@ -126,10 +239,10 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
     }, jsx(TypeAheadListItem, {
       key: items[index].title,
       item: items[index],
+      itemsLength: items.length,
       itemIndex: index,
       selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick,
-      onItemHover: actions.onItemHover
+      onItemClick: actions.onItemClick
     }))));
   };
 
@@ -137,11 +250,13 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
     return null;
   }
 
+  var menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector("[role='combobox']")) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || TYPE_AHEAD_DECORATION_ELEMENT_ID;
   return jsx(MenuGroup, {
-    role: "listbox",
-    "aria-live": "polite",
     "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
     "aria-relevant": "additions removals"
+  }, jsx("div", {
+    id: menuGroupId,
+    ref: listContainerRef
   }, jsx(List, {
     rowRenderer: renderRow,
     ref: listRef,
@@ -152,8 +267,12 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
     onScroll: onScroll,
     height: height,
     overscanRowCount: 3,
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            button {\n              padding: 12px 12px 11px;\n              span:last-child span:last-child {\n                white-space: normal;\n              }\n            }\n          "])))
-  }));
+    containerRole: "presentation",
+    role: "listbox",
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n              button {\n                padding: 12px 12px 11px;\n                span:last-child span:last-child {\n                  white-space: normal;\n                }\n              }\n            "])))
+  }), jsx(TypeaheadAssistiveTextPureComponent, {
+    numberOfResults: items.length.toString()
+  })));
 });
 export var TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';