@atlaskit/editor-core 172.3.2 → 173.0.0

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

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AssistiveText = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+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 _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var statusDebounceMillis = 1400;
+var assitiveTextStyles = (0, _react2.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) {
+  (0, _inherits2.default)(AssistveTextComponent, _React$Component);
+
+  var _super = _createSuper(AssistveTextComponent);
+
+  function AssistveTextComponent() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+  }
+
+  (0, _createClass2.default)(AssistveTextComponent, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      var _this2 = this;
+
+      this.debounceStatusUpdate = (0, _debounce.default)(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 (0, _react2.jsx)("div", {
+        css: assitiveTextStyles
+      }, (0, _react2.jsx)("div", {
+        id: id + '__status--A',
+        role: "status",
+        "aria-atomic": "true",
+        "aria-live": "polite"
+      }, "".concat(!silenced && debounced && bump ? assistiveText : '')), (0, _react2.jsx)("div", {
+        id: id + '__status--B',
+        role: "status",
+        "aria-atomic": "true",
+        "aria-live": "polite"
+      }, "".concat(!silenced && debounced && !bump ? assistiveText : '')));
+    }
+  }]);
+  return AssistveTextComponent;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(AssistveTextComponent, "defaultProps", {
+  statusDebounceMillis: 1400,
+  debounce: true,
+  assistiveText: '',
+  isInFocus: false,
+  id: ''
+});
+var AssistiveText = AssistveTextComponent;
+exports.AssistiveText = AssistiveText;

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InputQuery = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -19,10 +21,18 @@ var _w3cKeyname = require("w3c-keyname");
 
 var _utils = require("@atlaskit/editor-common/utils");
 
+var _utils2 = require("../utils");
+
 var _constants = require("../constants");
 
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 
+var _AssistiveText = require("./AssistiveText");
+
+var _messages = require("../messages");
+
+var _reactIntlNext = require("react-intl-next");
+
 var _templateObject;
 
 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); }
@@ -63,7 +73,9 @@ var InputQuery = /*#__PURE__*/_react.default.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 = (0, _react.useRef)(document.createElement('span'));
   var cleanedInputContent = (0, _react.useCallback)(function () {
     var _ref$current;
@@ -75,6 +87,12 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     var text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isInFocus = _useState2[0],
+      setInFocus = _useState2[1];
+
   var checkKeyEvent = (0, _react.useCallback)(function (event) {
     var _ref$current2;
 
@@ -84,6 +102,11 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     var text = cleanedInputContent();
     var stopDefault = false;
 
+    var _getPluginState = (0, _utils2.getPluginState)(editorView.state),
+        selectedIndex = _getPluginState.selectedIndex;
+
+    setInFocus(true);
+
     switch (key) {
       case ' ':
         // space key
@@ -127,23 +150,29 @@ var InputQuery = /*#__PURE__*/_react.default.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 ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER);
         }
 
-        onItemSelect(event.shiftKey ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER);
         break;
 
       case 'Tab':
+        if (selectedIndex === -1) {
+          selectNextItem();
+        }
+
         onItemSelect(_typeAhead.SelectItemMode.TAB);
         break;
 
       case 'ArrowDown':
-        selectNextItem();
-        break;
+        if (selectedIndex === -1) {
+          selectNextItem();
+        }
 
-      case 'ArrowUp':
-        selectPreviousItem();
         break;
     }
 
@@ -158,7 +187,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, cancel, selectPreviousItem, cleanedInputContent]);
+  }, [onUndoRedo, onItemSelect, selectNextItem, cancel, cleanedInputContent, editorView.state]);
   var onClick = (0, _react.useCallback)(function (event) {
     var _ref$current3;
 
@@ -249,6 +278,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     var beforeinput = function beforeinput(e) {
       var _target$textContent;
 
+      setInFocus(false);
       var target = e.target;
 
       if (e.isComposing || !(target instanceof HTMLElement)) {
@@ -320,7 +350,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
   (0, _react.useLayoutEffect)(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
 
@@ -343,9 +373,12 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         }
 
         ref.current.focus();
+        setInFocus(true);
       });
     }
   }, [forceFocus, reopenQuery]);
+  var assistiveHintID = _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
+  var intl = (0, _reactIntlNext.useIntl)();
   /**
     When we migrated to emotion from styled component, we started getting this error.
     jsx-a11y/interactive-supports-focus
@@ -358,9 +391,24 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
-    role: "textbox",
+    role: "combobox",
+    "aria-controls": _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID,
+    "aria-autocomplete": "list",
+    "aria-expanded": items.length !== 0,
+    "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
     "data-query-prefix": triggerQueryPrefix
+  }), (0, _react2.jsx)("span", {
+    id: assistiveHintID,
+    style: {
+      display: 'none'
+    }
+  }, intl.formatMessage(_messages.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_AssistiveText.AssistiveText, {
+    assistiveText: items.length === 0 ? intl.formatMessage(_messages.typeAheadListMessages.noSearchResultsLabel, {
+      itemsLength: items.length
+    }) : '',
+    isInFocus: items.length === 0 || isInFocus,
+    id: _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID
   }));
 });
 

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

@@ -19,6 +19,8 @@ var _react2 = require("@emotion/react");
 
 var _menu = require("@atlaskit/menu");
 
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+
 var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
 
 var _List = require("react-virtualized/dist/commonjs/List");
@@ -29,6 +31,14 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../messages");
 
+var _utils = require("../utils");
+
+var _updateSelectedIndex = require("../commands/update-selected-index");
+
+var _AssistiveText = require("./AssistiveText");
+
+var _constants = require("../constants");
+
 var _templateObject;
 
 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); }
@@ -38,14 +48,31 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var LIST_ITEM_ESTIMATED_HEIGHT = _TypeAheadListItem.ICON_HEIGHT + _TypeAheadListItem.ITEM_PADDING * 2;
 var LIST_WIDTH = 320;
 
-var TypeAheadListComponent = /*#__PURE__*/_react.default.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.default.memo(function (_ref) {
+  var numberOfResults = _ref.numberOfResults;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react2.jsx)(_AssistiveText.AssistiveText, {
+    assistiveText: intl.formatMessage(_messages.typeAheadListMessages.searchResultsLabel, {
+      itemsLength: numberOfResults
+    }) // when the popup is open its always in focus
+    ,
+    isInFocus: true,
+    id: _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID + '__popup'
+  });
+});
+
+var TypeAheadListComponent = /*#__PURE__*/_react.default.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 = (0, _react.useRef)();
+  var listContainerRef = (0, _react.useRef)(null);
   var lastVisibleIndexes = (0, _react.useRef)({
     overscanStartIndex: 0,
     overscanStopIndex: 0,
@@ -72,12 +99,38 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
   }, []);
   var actions = (0, _react.useMemo)(function () {
     return {
-      onItemClick: onItemClick,
-      onItemHover: onItemHover
+      onItemClick: onItemClick
     };
-  }, [onItemClick, onItemHover]);
-  var onScroll = (0, _react.useCallback)(function (_ref2) {
-    var scrollUpdateWasRequested = _ref2.scrollUpdateWasRequested;
+  }, [onItemClick]);
+
+  var isNavigationKey = function isNavigationKey(event) {
+    return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
+  };
+
+  var focusTargetElement = (0, _react.useCallback)(function () {
+    var _decorationElement$qu;
+
+    //To reset the selected index
+    (0, _updateSelectedIndex.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 = (0, _react.useMemo)(function () {
+    return (0, _utils.moveSelectedIndex)({
+      editorView: editorView,
+      direction: 'next'
+    });
+  }, [editorView]);
+  var selectPreviousItem = (0, _react.useMemo)(function () {
+    return (0, _utils.moveSelectedIndex)({
+      editorView: editorView,
+      direction: 'previous'
+    });
+  }, [editorView]);
+  var lastVisibleStartIndex = lastVisibleIndexes.current.startIndex;
+  var lastVisibleStopIndex = lastVisibleIndexes.current.stopIndex;
+  var onScroll = (0, _react.useCallback)(function (_ref3) {
+    var scrollUpdateWasRequested = _ref3.scrollUpdateWasRequested;
 
     if (!scrollUpdateWasRequested) {
       return;
@@ -95,27 +148,29 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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]);
   (0, _react.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]);
   (0, _react.useLayoutEffect)(function () {
     setCache(new _CellMeasurer.CellMeasurerCache({
       fixedWidth: true,
@@ -130,12 +185,76 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
     }, 0), fitHeight);
     setHeight(height);
   }, [items, cache, fitHeight]);
+  (0, _react.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();
+            }
+
+            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(_typeAhead.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 ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER, selectedIndex);
+              event.preventDefault();
+            }
 
-  var renderRow = function renderRow(_ref3) {
-    var index = _ref3.index,
-        key = _ref3.key,
-        style = _ref3.style,
-        parent = _ref3.parent;
+            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 (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
       key: key,
       cache: cache,
@@ -150,10 +269,10 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
     }, (0, _react2.jsx)(_TypeAheadListItem.TypeAheadListItem, {
       key: items[index].title,
       item: items[index],
+      itemsLength: items.length,
       itemIndex: index,
       selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick,
-      onItemHover: actions.onItemHover
+      onItemClick: actions.onItemClick
     }))));
   };
 
@@ -161,11 +280,13 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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')) || _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID;
   return (0, _react2.jsx)(_menu.MenuGroup, {
-    role: "listbox",
-    "aria-live": "polite",
     "aria-label": intl.formatMessage(_messages.typeAheadListMessages.typeAheadResultLabel),
     "aria-relevant": "additions removals"
+  }, (0, _react2.jsx)("div", {
+    id: menuGroupId,
+    ref: listContainerRef
   }, (0, _react2.jsx)(_List.List, {
     rowRenderer: renderRow,
     ref: listRef,
@@ -176,8 +297,12 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
     onScroll: onScroll,
     height: height,
     overscanRowCount: 3,
-    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n              button {\n                padding: 12px 12px 11px;\n                span:last-child span:last-child {\n                  white-space: normal;\n                }\n              }\n            "])))
+  }), (0, _react2.jsx)(TypeaheadAssistiveTextPureComponent, {
+    numberOfResults: items.length.toString()
+  })));
 });
 
 var TypeAheadList = (0, _reactIntlNext.injectIntl)(TypeAheadListComponent);