@atlaskit/editor-plugin-table 7.8.1 → 7.10.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 7.10.0
+
+### Minor Changes
+
+- [#85498](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85498) [`ae3b8e85ce49`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ae3b8e85ce49) - [ux] [ECA11Y-17] Added screen reader announcement for insertion and removal of table columns and rows
+
+## 7.9.0
+
+### Minor Changes
+
+- [#91653](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91653) [`57a3511f76c1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57a3511f76c1) - ECA11Y-203: Added cursor back to the cell, after changing cell background
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.8.1
 
 ### Patch Changes

package/dist/cjs/commands/column-resize.js

@@ -78,7 +78,9 @@ var initiateKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = fu
     var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
     var cell = (0, _utils.findCellClosestToPos)(selection.$from);
     if (ariaNotify && getIntl) {
-      ariaNotify(getIntl().formatMessage(_messages.tableMessages.startedColumnResize));
+      ariaNotify(getIntl().formatMessage(_messages.tableMessages.startedColumnResize), {
+        priority: 'important'
+      });
     }
     if (selectionRect && cell && view) {
       return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
@@ -122,12 +124,16 @@ var activateNextResizeArea = exports.activateNextResizeArea = function activateN
       if (direction === 1) {
         ariaNotify(getIntl().formatMessage(_messages.tableMessages.focusedOtherResize, {
           direction: 'right'
-        }));
+        }), {
+          priority: 'important'
+        });
       }
       if (direction === -1) {
         ariaNotify(getIntl().formatMessage(_messages.tableMessages.focusedOtherResize, {
           direction: 'left'
-        }));
+        }), {
+          priority: 'important'
+        });
       }
     }
     if ($nextCell) {
@@ -223,10 +229,14 @@ var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeC
       }));
       if (newResizeState.cols.length === colIndex + 1) {
         if (newResizeState.overflow === true) {
-          ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeLast));
+          ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeLast), {
+            priority: 'important'
+          });
         }
         if (newResizeState.overflow === false) {
-          ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeOverflow));
+          ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeOverflow), {
+            priority: 'important'
+          });
         }
       }
     }
@@ -262,7 +272,9 @@ var stopKeyboardColumnResizing = exports.stopKeyboardColumnResizing = function s
       return customTr.setMeta('scrollIntoView', false);
     })(state, fakeDispatch);
     if (ariaNotify && getIntl) {
-      ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeStop));
+      ariaNotify(getIntl().formatMessage(_messages.tableMessages.columnResizeStop), {
+        priority: 'important'
+      });
     }
     if (dispatch) {
       dispatch(customTr);

package/dist/cjs/commands/misc.js

@@ -301,7 +301,7 @@ var moveCursorBackward = exports.moveCursorBackward = function moveCursorBackwar
   }
   return true;
 };
-var setMultipleCellAttrs = exports.setMultipleCellAttrs = function setMultipleCellAttrs(attrs, targetCellPosition) {
+var setMultipleCellAttrs = exports.setMultipleCellAttrs = function setMultipleCellAttrs(attrs, targetCellPosition, editorView) {
   return function (state, dispatch) {
     var cursorPos;
     var tr = state.tr;
@@ -319,6 +319,10 @@ var setMultipleCellAttrs = exports.setMultipleCellAttrs = function setMultipleCe
     }
     if (tr.docChanged && cursorPos !== undefined) {
       if (dispatch) {
+        if (cursorPos !== undefined) {
+          editorView === null || editorView === void 0 || editorView.focus();
+          tr.setSelection(new _state.TextSelection(tr.doc.resolve(cursorPos)));
+        }
         dispatch(tr);
       }
       return true;

package/dist/cjs/commands-with-analytics.js

@@ -122,7 +122,7 @@ var splitCellWithAnalytics = exports.splitCellWithAnalytics = function splitCell
   };
 };
 var setColorWithAnalytics = exports.setColorWithAnalytics = function setColorWithAnalytics(editorAnalyticsAPI) {
-  return function (inputMethod, cellColor, targetCellPosition) {
+  return function (inputMethod, cellColor, targetCellPosition, editorView) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref4) {
       var selection = _ref4.selection;
       var _getSelectedCellInfo4 = (0, _utils2.getSelectedCellInfo)(selection),
@@ -148,7 +148,7 @@ var setColorWithAnalytics = exports.setColorWithAnalytics = function setColorWit
       };
     })(editorAnalyticsAPI)((0, _misc.setMultipleCellAttrs)({
       background: cellColor
-    }, targetCellPosition));
+    }, targetCellPosition, editorView));
   };
 };
 var addRowAroundSelection = exports.addRowAroundSelection = function addRowAroundSelection(editorAnalyticsAPI) {

package/dist/cjs/nodeviews/TableComponent.js

@@ -17,6 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -522,6 +523,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.overflowShadowsObserver.observeShadowSentinels((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky);
       }
       var currentTable = getNode();
+      var previousTable = this.node;
+      var isNoOfColumnsChanged = (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable);
+      var isNoOfRowsChanged = (0, _utils5.tablesHaveDifferentNoOfRows)(currentTable, previousTable);
+      if (isNoOfColumnsChanged || isNoOfRowsChanged) {
+        var _this$props$pluginInj;
+        (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.actions.ariaNotify((0, _utils5.getAssistiveMessage)(previousTable, currentTable, this.props.intl), {
+          priority: 'important'
+        });
+      }
       if (currentTable.attrs.__autoSize) {
         // Wait for next tick to handle auto sizing, gives the browser time to do layout calc etc.
         this.handleAutoSizeDebounced();
@@ -531,8 +541,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       else if (allowColumnResizing && this.table && !isMediaFullscreen) {
         // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
         // re-draw colgroup.
-        var previousTable = this.node;
-        var isNoOfColumnsChanged = (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable);
         if ((0, _utils5.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || isNoOfColumnsChanged) {
           var _view = this.props.view;
           var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || isNoOfColumnsChanged && isResizing;
@@ -793,4 +801,4 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   return TableComponent;
 }(_react.default.Component);
 (0, _defineProperty3.default)(TableComponent, "displayName", 'TableComponent');
-var _default = exports.default = TableComponent;
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(TableComponent);

package/dist/cjs/toolbar.js

@@ -383,7 +383,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled);
         var columnSettingsItems;
         columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options, _isTableScalingEnabled) : [];
-        var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
+        var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
 
         // Check if we need to show confirm dialog for delete button
         var confirmDialog;
@@ -562,7 +562,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
   }
   return items;
 };
-var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI) {
+var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI, getEditorView) {
   var _node$attrs;
   var formatMessage = _ref5.formatMessage;
   var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
@@ -588,8 +588,9 @@ var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalytics
     selectType: 'color',
     defaultValue: defaultPalette,
     options: _uiColor.cellBackgroundColorPalette,
+    returnEscToButton: true,
     onChange: function onChange(option) {
-      return (0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition);
+      return (0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition, getEditorView());
     }
   }, separator(menu.hidden)];
 };

package/dist/cjs/utils/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "findNearestCellIndexToPoint", {
     return _dom.findNearestCellIndexToPoint;
   }
 });
+Object.defineProperty(exports, "getAssistiveMessage", {
+  enumerable: true,
+  get: function get() {
+    return _table.getAssistiveMessage;
+  }
+});
 Object.defineProperty(exports, "getColumnClassNames", {
   enumerable: true,
   get: function get() {
@@ -399,6 +405,12 @@ Object.defineProperty(exports, "tablesHaveDifferentNoOfColumns", {
     return _nodes.tablesHaveDifferentNoOfColumns;
   }
 });
+Object.defineProperty(exports, "tablesHaveDifferentNoOfRows", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.tablesHaveDifferentNoOfRows;
+  }
+});
 Object.defineProperty(exports, "transformSliceToCorrectEmptyTableCells", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/nodes.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tablesHaveDifferentNoOfColumns = exports.tablesHaveDifferentColumnWidths = exports.supportedHeaderRow = exports.isTableNested = exports.isIsolating = exports.getTableWidth = exports.containsHeaderRow = exports.containsHeaderColumn = exports.checkIfNumberColumnEnabled = exports.checkIfHeaderRowEnabled = exports.checkIfHeaderColumnEnabled = exports.anyChildCellMergedAcrossRow = void 0;
+exports.tablesHaveDifferentNoOfRows = exports.tablesHaveDifferentNoOfColumns = exports.tablesHaveDifferentColumnWidths = exports.supportedHeaderRow = exports.isTableNested = exports.isIsolating = exports.getTableWidth = exports.containsHeaderRow = exports.containsHeaderColumn = exports.checkIfNumberColumnEnabled = exports.checkIfHeaderRowEnabled = exports.checkIfHeaderColumnEnabled = exports.anyChildCellMergedAcrossRow = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
@@ -75,6 +75,11 @@ var tablesHaveDifferentNoOfColumns = exports.tablesHaveDifferentNoOfColumns = fu
   var currentMap = _tableMap.TableMap.get(currentTable);
   return prevMap.width !== currentMap.width;
 };
+var tablesHaveDifferentNoOfRows = exports.tablesHaveDifferentNoOfRows = function tablesHaveDifferentNoOfRows(currentTable, previousTable) {
+  var prevMap = _tableMap.TableMap.get(previousTable);
+  var currentMap = _tableMap.TableMap.get(currentTable);
+  return prevMap.height !== currentMap.height;
+};
 function filterNearSelection(selection, findNode, predicate, defaultValue) {
   var found = findNode(selection);
   if (!found) {

package/dist/cjs/utils/table.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMergedCellsPositions = exports.colsToRect = void 0;
+exports.getMergedCellsPositions = exports.getAssistiveMessage = exports.colsToRect = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _messages = require("@atlaskit/editor-common/messages");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
 var getMergedCellsPositions = exports.getMergedCellsPositions = function getMergedCellsPositions(tr) {
@@ -32,4 +33,36 @@ var colsToRect = exports.colsToRect = function colsToRect(cols, noOfRows) {
     top: 0,
     bottom: noOfRows
   };
+};
+var getAssistiveMessage = exports.getAssistiveMessage = function getAssistiveMessage(prevTableNode, currentTableNode, intl) {
+  var formatMessage = intl.formatMessage;
+  var prevTableMap = _tableMap.TableMap.get(prevTableNode);
+  var currentTableMap = _tableMap.TableMap.get(currentTableNode);
+  if (currentTableMap.width !== prevTableMap.width) {
+    var diff = Math.abs(currentTableMap.width - prevTableMap.width);
+    if (currentTableMap.width > prevTableMap.width) {
+      return formatMessage(_messages.tableMessages.columnsAreInserted, {
+        count: diff
+      });
+    }
+    if (currentTableMap.width < prevTableMap.width) {
+      return formatMessage(_messages.tableMessages.columnsAreRemoved, {
+        count: diff
+      });
+    }
+  }
+  if (currentTableMap.height !== prevTableMap.height) {
+    var _diff = Math.abs(currentTableMap.height - prevTableMap.height);
+    if (currentTableMap.height > prevTableMap.height) {
+      return formatMessage(_messages.tableMessages.rowsAreInserted, {
+        count: _diff
+      });
+    }
+    if (currentTableMap.height < prevTableMap.height) {
+      return formatMessage(_messages.tableMessages.rowsAreRemoved, {
+        count: _diff
+      });
+    }
+  }
+  return '';
 };

package/dist/es2019/commands/column-resize.js

@@ -71,7 +71,9 @@ export const initiateKeyboardColumnResizing = ({
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const cell = findCellClosestToPos(selection.$from);
   if (ariaNotify && getIntl) {
-    ariaNotify(getIntl().formatMessage(messages.startedColumnResize));
+    ariaNotify(getIntl().formatMessage(messages.startedColumnResize), {
+      priority: 'important'
+    });
   }
   if (selectionRect && cell && view) {
     return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
@@ -117,12 +119,16 @@ export const activateNextResizeArea = ({
     if (direction === 1) {
       ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
         direction: 'right'
-      }));
+      }), {
+        priority: 'important'
+      });
     }
     if (direction === -1) {
       ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
         direction: 'left'
-      }));
+      }), {
+        priority: 'important'
+      });
     }
   }
   if ($nextCell) {
@@ -218,10 +224,14 @@ export const changeColumnWidthByStep = ({
     }));
     if (newResizeState.cols.length === colIndex + 1) {
       if (newResizeState.overflow === true) {
-        ariaNotify(getIntl().formatMessage(messages.columnResizeLast));
+        ariaNotify(getIntl().formatMessage(messages.columnResizeLast), {
+          priority: 'important'
+        });
       }
       if (newResizeState.overflow === false) {
-        ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow));
+        ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow), {
+          priority: 'important'
+        });
       }
     }
   }
@@ -254,7 +264,9 @@ export const stopKeyboardColumnResizing = ({
     type: 'STOP_RESIZING'
   }, () => customTr.setMeta('scrollIntoView', false))(state, fakeDispatch);
   if (ariaNotify && getIntl) {
-    ariaNotify(getIntl().formatMessage(messages.columnResizeStop));
+    ariaNotify(getIntl().formatMessage(messages.columnResizeStop), {
+      priority: 'important'
+    });
   }
   if (dispatch) {
     dispatch(customTr);

package/dist/es2019/commands/misc.js

@@ -308,7 +308,7 @@ export const moveCursorBackward = (state, dispatch) => {
   }
   return true;
 };
-export const setMultipleCellAttrs = (attrs, targetCellPosition) => (state, dispatch) => {
+export const setMultipleCellAttrs = (attrs, targetCellPosition, editorView) => (state, dispatch) => {
   let cursorPos;
   let {
     tr
@@ -327,6 +327,10 @@ export const setMultipleCellAttrs = (attrs, targetCellPosition) => (state, dispa
   }
   if (tr.docChanged && cursorPos !== undefined) {
     if (dispatch) {
+      if (cursorPos !== undefined) {
+        editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+        tr.setSelection(new TextSelection(tr.doc.resolve(cursorPos)));
+      }
       dispatch(tr);
     }
     return true;

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

@@ -106,7 +106,7 @@ export const splitCellWithAnalytics = editorAnalyticsAPI => inputMethod => withE
   }
   return;
 })(editorAnalyticsAPI)(splitCell);
-export const setColorWithAnalytics = editorAnalyticsAPI => (inputMethod, cellColor, targetCellPosition) => withEditorAnalyticsAPI(({
+export const setColorWithAnalytics = editorAnalyticsAPI => (inputMethod, cellColor, targetCellPosition, editorView) => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -133,7 +133,7 @@ export const setColorWithAnalytics = editorAnalyticsAPI => (inputMethod, cellCol
   };
 })(editorAnalyticsAPI)(setMultipleCellAttrs({
   background: cellColor
-}, targetCellPosition));
+}, targetCellPosition, editorView));
 export const addRowAroundSelection = editorAnalyticsAPI => side => (state, dispatch) => {
   const {
     selection

package/dist/es2019/nodeviews/TableComponent.js

@@ -3,6 +3,7 @@ import React from 'react';
 import classnames from 'classnames';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
+import { injectIntl } from 'react-intl-next';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
@@ -23,7 +24,7 @@ import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
-import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
+import { containsHeaderRow, getAssistiveMessage, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../utils';
 import { ExternalDropTargets } from './ExternalDropTargets';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
@@ -506,6 +507,15 @@ class TableComponent extends React.Component {
       this.overflowShadowsObserver.observeShadowSentinels((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky);
     }
     const currentTable = getNode();
+    const previousTable = this.node;
+    const isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
+    const isNoOfRowsChanged = tablesHaveDifferentNoOfRows(currentTable, previousTable);
+    if (isNoOfColumnsChanged || isNoOfRowsChanged) {
+      var _this$props$pluginInj, _this$props$pluginInj2;
+      (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj2 === void 0 ? void 0 : _this$props$pluginInj2.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
+        priority: 'important'
+      });
+    }
     if (currentTable.attrs.__autoSize) {
       // Wait for next tick to handle auto sizing, gives the browser time to do layout calc etc.
       this.handleAutoSizeDebounced();
@@ -515,8 +525,6 @@ class TableComponent extends React.Component {
     else if (allowColumnResizing && this.table && !isMediaFullscreen) {
       // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
       // re-draw colgroup.
-      const previousTable = this.node;
-      const isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
       if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || isNoOfColumnsChanged) {
         const {
           view
@@ -780,4 +788,4 @@ class TableComponent extends React.Component {
   }
 }
 _defineProperty(TableComponent, "displayName", 'TableComponent');
-export default TableComponent;
+export default injectIntl(TableComponent);

package/dist/es2019/toolbar.js

@@ -372,7 +372,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
     let columnSettingsItems;
     columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options, isTableScalingEnabled) : [];
-    const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
+    const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
 
     // Check if we need to show confirm dialog for delete button
     let confirmDialog;
@@ -538,7 +538,7 @@ const getColumnSettingItems = (editorState, editorView, {
 };
 const getColorPicker = (state, menu, {
   formatMessage
-}, editorAnalyticsAPI) => {
+}, editorAnalyticsAPI, getEditorView) => {
   var _node$attrs;
   const {
     targetCellPosition,
@@ -562,7 +562,8 @@ const getColorPicker = (state, menu, {
     selectType: 'color',
     defaultValue: defaultPalette,
     options: cellBackgroundColorPalette,
-    onChange: option => setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition)
+    returnEscToButton: true,
+    onChange: option => setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition, getEditorView())
   }, separator(menu.hidden)];
 };
 const clickWithCheckboxHandler = (isChecked, node, editorAnalyticsAPI) => (state, dispatch) => {

package/dist/es2019/utils/index.js

@@ -1,12 +1,12 @@
 export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, isSelectionUpdated } from './selection';
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
-export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
+export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint } from './dom';
 export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
-export { getMergedCellsPositions } from './table';
+export { getMergedCellsPositions, getAssistiveMessage } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
 export { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsInBetween, hasMergedCellsInSelection, findDuplicatePosition, checkEdgeHasMergedCells } from './merged-cells';
 export { createTableWithWidth } from './create';

package/dist/es2019/utils/nodes.js

@@ -57,6 +57,11 @@ export const tablesHaveDifferentNoOfColumns = (currentTable, previousTable) => {
   const currentMap = TableMap.get(currentTable);
   return prevMap.width !== currentMap.width;
 };
+export const tablesHaveDifferentNoOfRows = (currentTable, previousTable) => {
+  const prevMap = TableMap.get(previousTable);
+  const currentMap = TableMap.get(currentTable);
+  return prevMap.height !== currentMap.height;
+};
 function filterNearSelection(selection, findNode, predicate, defaultValue) {
   const found = findNode(selection);
   if (!found) {

package/dist/es2019/utils/table.js

@@ -1,3 +1,4 @@
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 export const getMergedCellsPositions = tr => {
@@ -22,4 +23,38 @@ export const colsToRect = (cols, noOfRows) => ({
   right: Math.max(...cols) + 1,
   top: 0,
   bottom: noOfRows
-});
+});
+export const getAssistiveMessage = (prevTableNode, currentTableNode, intl) => {
+  const {
+    formatMessage
+  } = intl;
+  const prevTableMap = TableMap.get(prevTableNode);
+  const currentTableMap = TableMap.get(currentTableNode);
+  if (currentTableMap.width !== prevTableMap.width) {
+    const diff = Math.abs(currentTableMap.width - prevTableMap.width);
+    if (currentTableMap.width > prevTableMap.width) {
+      return formatMessage(messages.columnsAreInserted, {
+        count: diff
+      });
+    }
+    if (currentTableMap.width < prevTableMap.width) {
+      return formatMessage(messages.columnsAreRemoved, {
+        count: diff
+      });
+    }
+  }
+  if (currentTableMap.height !== prevTableMap.height) {
+    const diff = Math.abs(currentTableMap.height - prevTableMap.height);
+    if (currentTableMap.height > prevTableMap.height) {
+      return formatMessage(messages.rowsAreInserted, {
+        count: diff
+      });
+    }
+    if (currentTableMap.height < prevTableMap.height) {
+      return formatMessage(messages.rowsAreRemoved, {
+        count: diff
+      });
+    }
+  }
+  return '';
+};

package/dist/esm/commands/column-resize.js

@@ -72,7 +72,9 @@ export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResiz
     var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
     var cell = findCellClosestToPos(selection.$from);
     if (ariaNotify && getIntl) {
-      ariaNotify(getIntl().formatMessage(messages.startedColumnResize));
+      ariaNotify(getIntl().formatMessage(messages.startedColumnResize), {
+        priority: 'important'
+      });
     }
     if (selectionRect && cell && view) {
       return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
@@ -116,12 +118,16 @@ export var activateNextResizeArea = function activateNextResizeArea(_ref2) {
       if (direction === 1) {
         ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
           direction: 'right'
-        }));
+        }), {
+          priority: 'important'
+        });
       }
       if (direction === -1) {
         ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
           direction: 'left'
-        }));
+        }), {
+          priority: 'important'
+        });
       }
     }
     if ($nextCell) {
@@ -217,10 +223,14 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
       }));
       if (newResizeState.cols.length === colIndex + 1) {
         if (newResizeState.overflow === true) {
-          ariaNotify(getIntl().formatMessage(messages.columnResizeLast));
+          ariaNotify(getIntl().formatMessage(messages.columnResizeLast), {
+            priority: 'important'
+          });
         }
         if (newResizeState.overflow === false) {
-          ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow));
+          ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow), {
+            priority: 'important'
+          });
         }
       }
     }
@@ -256,7 +266,9 @@ export var stopKeyboardColumnResizing = function stopKeyboardColumnResizing(_ref
       return customTr.setMeta('scrollIntoView', false);
     })(state, fakeDispatch);
     if (ariaNotify && getIntl) {
-      ariaNotify(getIntl().formatMessage(messages.columnResizeStop));
+      ariaNotify(getIntl().formatMessage(messages.columnResizeStop), {
+        priority: 'important'
+      });
     }
     if (dispatch) {
       dispatch(customTr);

package/dist/esm/commands/misc.js

@@ -294,7 +294,7 @@ export var moveCursorBackward = function moveCursorBackward(state, dispatch) {
   }
   return true;
 };
-export var setMultipleCellAttrs = function setMultipleCellAttrs(attrs, targetCellPosition) {
+export var setMultipleCellAttrs = function setMultipleCellAttrs(attrs, targetCellPosition, editorView) {
   return function (state, dispatch) {
     var cursorPos;
     var tr = state.tr;
@@ -312,6 +312,10 @@ export var setMultipleCellAttrs = function setMultipleCellAttrs(attrs, targetCel
     }
     if (tr.docChanged && cursorPos !== undefined) {
       if (dispatch) {
+        if (cursorPos !== undefined) {
+          editorView === null || editorView === void 0 || editorView.focus();
+          tr.setSelection(new TextSelection(tr.doc.resolve(cursorPos)));
+        }
         dispatch(tr);
       }
       return true;

package/dist/esm/commands-with-analytics.js

@@ -115,7 +115,7 @@ export var splitCellWithAnalytics = function splitCellWithAnalytics(editorAnalyt
   };
 };
 export var setColorWithAnalytics = function setColorWithAnalytics(editorAnalyticsAPI) {
-  return function (inputMethod, cellColor, targetCellPosition) {
+  return function (inputMethod, cellColor, targetCellPosition, editorView) {
     return withEditorAnalyticsAPI(function (_ref4) {
       var selection = _ref4.selection;
       var _getSelectedCellInfo4 = getSelectedCellInfo(selection),
@@ -141,7 +141,7 @@ export var setColorWithAnalytics = function setColorWithAnalytics(editorAnalytic
       };
     })(editorAnalyticsAPI)(setMultipleCellAttrs({
       background: cellColor
-    }, targetCellPosition));
+    }, targetCellPosition, editorView));
   };
 };
 export var addRowAroundSelection = function addRowAroundSelection(editorAnalyticsAPI) {