@atlaskit/editor-core 172.3.2 → 173.0.1

package/dist/es2019/plugins/table/commands-with-analytics.js

@@ -44,7 +44,7 @@ export const emptyMultipleCellsWithAnalytics = editorAnalyticsAPI => (inputMetho
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(clearMultipleCells(targetCellPosition));
-export const mergeCellsWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(({
+export const mergeCellsWithAnalytics = editorAnalyticsAPI => inputMethod => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -59,6 +59,7 @@ export const mergeCellsWithAnalytics = editorAnalyticsAPI => withEditorAnalytics
     actionSubject: ACTION_SUBJECT.TABLE,
     actionSubjectId: null,
     attributes: {
+      inputMethod,
       horizontalCells,
       verticalCells,
       totalCells,
@@ -74,7 +75,7 @@ export const mergeCellsWithAnalytics = editorAnalyticsAPI => withEditorAnalytics
 
   return true;
 });
-export const splitCellWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(({
+export const splitCellWithAnalytics = editorAnalyticsAPI => inputMethod => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -93,6 +94,7 @@ export const splitCellWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsA
       actionSubject: ACTION_SUBJECT.TABLE,
       actionSubjectId: null,
       attributes: {
+        inputMethod,
         horizontalCells,
         verticalCells,
         totalCells: horizontalCells * verticalCells,
@@ -105,7 +107,7 @@ export const splitCellWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsA
 
   return;
 })(editorAnalyticsAPI)(splitCell);
-export const setColorWithAnalytics = editorAnalyticsAPI => (cellColor, targetCellPosition) => withEditorAnalyticsAPI(({
+export const setColorWithAnalytics = editorAnalyticsAPI => (inputMethod, cellColor, targetCellPosition) => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -120,6 +122,7 @@ export const setColorWithAnalytics = editorAnalyticsAPI => (cellColor, targetCel
     actionSubject: ACTION_SUBJECT.TABLE,
     actionSubjectId: null,
     attributes: {
+      inputMethod,
       cellColor: (tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
       horizontalCells,
       verticalCells,

package/dist/es2019/plugins/table/index.js

@@ -5,7 +5,7 @@ import { createTable } from '@atlaskit/editor-tables/utils';
 import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { toggleTable, tooltip } from '../../keymaps';
 import WithPluginState from '../../ui/WithPluginState';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { pluginConfig } from './create-plugin-config';
@@ -108,7 +108,25 @@ const tablesPlugin = options => ({
       plugin: () => tableSelectionKeymapPlugin(options === null || options === void 0 ? void 0 : options.editorSelectionAPI)
     }, {
       name: 'tableEditing',
-      plugin: () => tableEditing()
+      plugin: () => tableEditing({
+        reportFixedTable: ({
+          state,
+          tr,
+          reason
+        }) => {
+          var _options$editorAnalyt;
+
+          options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+            action: TABLE_ACTION.FIXED,
+            actionSubject: ACTION_SUBJECT.TABLE,
+            actionSubjectId: null,
+            attributes: {
+              reason
+            },
+            eventType: EVENT_TYPE.TRACK
+          })(tr);
+        }
+      })
     }, {
       name: 'tableStickyHeaders',
       plugin: ({
@@ -282,12 +300,12 @@ const tablesPlugin = options => ({
       icon: () => /*#__PURE__*/React.createElement(IconTable, null),
 
       action(insert, state) {
-        var _options$editorAnalyt;
+        var _options$editorAnalyt2;
 
         const tr = insert(createTable({
           schema: state.schema
         }));
-        options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+        options === null || options === void 0 ? void 0 : (_options$editorAnalyt2 = options.editorAnalyticsAPI) === null || _options$editorAnalyt2 === void 0 ? void 0 : _options$editorAnalyt2.attachAnalyticsEvent({
           action: ACTION.INSERTED,
           actionSubject: ACTION_SUBJECT.DOCUMENT,
           actionSubjectId: ACTION_SUBJECT_ID.TABLE,

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

@@ -1,11 +1,14 @@
+/** @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';
@@ -16,6 +19,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 const messages = defineMessages({
   tableOptions: {
@@ -95,6 +104,7 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
   } = initialSelectionRect;
   const numberOfColumns = right - left;
   const numberOfRows = bottom - top;
+  const pluginState = getPluginState(editorState);
   const options = [{
     id: 'editor.table.insertColumn',
     title: formatMessage(tableMessages.insertColumn),
@@ -109,7 +119,10 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
       return true;
     },
     selected: false,
-    disabled: false
+    disabled: false,
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(addColumnAfter))
   }, {
     id: 'editor.table.insertRow',
     title: formatMessage(tableMessages.insertRow),
@@ -127,7 +140,10 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
       return true;
     },
     selected: false,
-    disabled: false
+    disabled: false,
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(addRowAfter))
   }, {
     id: 'editor.table.removeColumns',
     title: formatMessage(tableMessages.removeColumns, {
@@ -163,16 +179,63 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
   }, {
     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) {
+    const distributeColumnWidths = (state, dispatch, view) => {
+      const 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) {
+    const hasMergedCellsInTable = getMergedCellsPositions(editorState.tr).length > 0;
+    options.push({
+      id: 'editor.table.sortColumnAsc',
+      title: formatMessage(ContextualMenuMessages.sortColumnASC),
+      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: (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)
@@ -185,14 +248,19 @@ export const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
       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,
+    // Increased dropdown item width to prevent labels from being truncated
+    dropdownWidth: 230,
+    showSelected: false
   };
 };
 
@@ -209,7 +277,11 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI) =>
   if (tableObject && pluginState.editorHasFocus) {
     const nodeType = state.schema.nodes.table;
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-    const cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI); // Check if we need to show confirm dialog for delete button
+    const {
+      tableCellOptionsInFloatingToolbar
+    } = getFeatureFlags(state) || {};
+    const cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
+    const colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
 
     let confirmDialog;
     const localId = tableObject.node.attrs.localId;
@@ -242,7 +314,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI) =>
       getDomRef,
       nodeType,
       offset: [0, 3],
-      items: [menu, separator(menu.hidden), ...cellItems, {
+      items: [menu, separator(menu.hidden), ...cellItems, ...colorPicker, {
         type: 'extensions-placeholder',
         separator: 'end'
       }, ...(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, nodeType, hoverTable(false, true), clearHoverSelection()), {
@@ -274,8 +346,8 @@ const separator = hidden => {
 
 const getCellItems = (pluginConfig, state, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI) => {
-  if (pluginConfig.allowCellOptionsInFloatingToolbar) {
+}, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) => {
+  if (pluginConfig.allowCellOptionsInFloatingToolbar || tableCellOptionsInFloatingToolbar) {
     const initialSelectionRect = getClosestSelectionRect(state);
 
     if (initialSelectionRect) {
@@ -287,4 +359,36 @@ const getCellItems = (pluginConfig, state, {
   }
 
   return [];
+};
+
+const getColorPicker = (state, menu, {
+  formatMessage
+}, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) => {
+  var _node$attrs;
+
+  const {
+    targetCellPosition,
+    pluginConfig
+  } = getPluginState(state);
+
+  if (!pluginConfig.allowBackgroundColor || !tableCellOptionsInFloatingToolbar) {
+    return [];
+  }
+
+  const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
+  const currentBackground = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
+  const defaultPalette = cellBackgroundColorPalette.find(item => 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: option => setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition)
+  }, separator(menu.hidden)];
 };

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

@@ -281,12 +281,12 @@ export class ContextualMenu extends 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();
           break;
 
@@ -435,7 +435,7 @@ export class ContextualMenu extends Component {
         state,
         dispatch
       } = editorView;
-      setColorWithAnalytics(editorAnalyticsAPI)(color, targetCellPosition)(state, dispatch);
+      setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(state, dispatch);
       this.toggleOpen();
     });
   }

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

@@ -72,15 +72,6 @@ export const getListTypes = (listType, schema) => {
     item: decisionItem
   };
 };
-/*
- * @deprecated - [ED-13182] insertTaskDecision has been depreciated in favor of insertTaskDecisionCommand
- */
-
-export const insertTaskDecision = (view, listType, inputMethod = INPUT_METHOD.TOOLBAR, listLocalId, itemLocalId) => {
-  // eslint-disable-next-line no-console
-  console.warn('insertTaskDecision has been depreciated in favor of insertTaskDecisionCommand');
-  return insertTaskDecisionCommand(listType, inputMethod, undefined, listLocalId, itemLocalId);
-};
 export const insertTaskDecisionAction = (state, listType, inputMethod = INPUT_METHOD.TOOLBAR, addItem, listLocalId, itemLocalId) => {
   const {
     schema

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

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

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

@@ -3,6 +3,21 @@ export const 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/es2019/plugins/type-ahead/pm-plugins/main.js

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

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

@@ -64,7 +64,7 @@ export const createReducer = ({
       triggerHandler,
       decorationElement,
       inputMethod,
-      selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : 0,
+      selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1,
       items: [],
       query: reopenQuery || ''
     };
@@ -133,7 +133,7 @@ export const createReducer = ({
       } = currentPluginState;
       return { ...currentPluginState,
         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 { ...currentPluginState,

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

@@ -0,0 +1,95 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import debounce from 'lodash/debounce';
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+const statusDebounceMillis = 1400;
+const 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'
+});
+
+class AssistveTextComponent extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(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
+    });
+  }
+
+  componentWillMount() {
+    this.debounceStatusUpdate = debounce(() => {
+      if (!this.state.debounced) {
+        const shouldSilence = !this.props.isInFocus;
+        this.setState(({
+          bump
+        }) => ({
+          bump: !bump,
+          debounced: true,
+          silenced: shouldSilence
+        }));
+      }
+    }, statusDebounceMillis);
+  }
+
+  componentWillUnmount() {}
+
+  componentWillReceiveProps() {
+    this.setState(({
+      bump
+    }) => ({
+      bump: !bump,
+      debounced: false
+    }));
+  }
+
+  render() {
+    const {
+      assistiveText,
+      id
+    } = this.props;
+    const {
+      bump,
+      debounced,
+      silenced
+    } = this.state;
+    this.debounceStatusUpdate();
+    return jsx("div", {
+      css: assitiveTextStyles
+    }, jsx("div", {
+      id: id + '__status--A',
+      role: "status",
+      "aria-atomic": "true",
+      "aria-live": "polite"
+    }, `${!silenced && debounced && bump ? assistiveText : ''}`), jsx("div", {
+      id: id + '__status--B',
+      role: "status",
+      "aria-atomic": "true",
+      "aria-live": "polite"
+    }, `${!silenced && debounced && !bump ? assistiveText : ''}`));
+  }
+
+}
+
+_defineProperty(AssistveTextComponent, "defaultProps", {
+  statusDebounceMillis: 1400,
+  debounce: true,
+  assistiveText: '',
+  isInFocus: false,
+  id: ''
+});
+
+export const AssistiveText = AssistveTextComponent;

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

@@ -1,10 +1,15 @@
 /** @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';
 const querySpan = css`
   outline: none;
 `;
@@ -41,7 +46,9 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   forceFocus,
   reopenQuery,
   onQueryFocus,
-  onUndoRedo
+  onUndoRedo,
+  editorView,
+  items
 }) => {
   const ref = useRef(document.createElement('span'));
   const cleanedInputContent = useCallback(() => {
@@ -54,6 +61,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     const text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
+  const [isInFocus, setInFocus] = useState(false);
   const checkKeyEvent = useCallback(event => {
     var _ref$current2;
 
@@ -62,6 +70,10 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     const raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
     const text = cleanedInputContent();
     let stopDefault = false;
+    const {
+      selectedIndex
+    } = getPluginState(editorView.state);
+    setInFocus(true);
 
     switch (key) {
       case ' ':
@@ -106,23 +118,29 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         // 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;
     }
 
@@ -137,7 +155,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, cancel, selectPreviousItem, cleanedInputContent]);
+  }, [onUndoRedo, onItemSelect, selectNextItem, cancel, cleanedInputContent, editorView.state]);
   const onClick = useCallback(event => {
     var _ref$current3;
 
@@ -232,6 +250,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     const beforeinput = e => {
       var _target$textContent;
 
+      setInFocus(false);
       const {
         target
       } = e;
@@ -307,7 +326,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
   useLayoutEffect(() => {
     const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
 
@@ -330,9 +349,12 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         }
 
         ref.current.focus();
+        setInFocus(true);
       });
     }
   }, [forceFocus, reopenQuery]);
+  const assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
+  const intl = useIntl();
   /**
     When we migrated to emotion from styled component, we started getting this error.
     jsx-a11y/interactive-supports-focus
@@ -345,9 +367,24 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     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';