@atlaskit/editor-plugin-table 7.9.0 → 7.10.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 7.10.1
+
+### Patch Changes
+
+- [#92552](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92552) [`7cd874b858c8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7cd874b858c8) - Check target elements are actually HTMLElement rather than typecasting.
+
+## 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

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) {
@@ -176,7 +182,13 @@ var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeC
     var map = _editorTables.TableMap.get(originalTable);
     var domAtPos = view.domAtPos.bind(view);
     var colIndex = map.colCount($cell.pos - tableStartPosition) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
-    var dom = domAtPos(tableStartPosition).node;
+    var dom = null;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.explicit-html-element-check')) {
+      var domAtPosition = domAtPos(tableStartPosition);
+      dom = domAtPosition.node instanceof HTMLTableElement ? domAtPosition.node : null;
+    } else {
+      dom = domAtPos(tableStartPosition).node;
+    }
     if (dom && dom.nodeName !== 'TABLE') {
       dom = dom.closest('table');
     }
@@ -223,10 +235,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 +278,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/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/nodeviews/TableRow.js

@@ -403,7 +403,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
       this.focused = isCurrentTableSelected;
       var wrapper = tree.wrapper;
       var tableContainer = wrapper.parentElement;
-      var tableContentWrapper = tableContainer.parentElement;
+      var tableContentWrapper = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.parentElement;
       var layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
       if (isCurrentTableSelected) {
         this.colControlsOffset = _consts.tableControlsSpacing;

package/dist/cjs/pm-plugins/table-resizing/utils/colgroup.js

@@ -63,13 +63,13 @@ var generateColgroup = exports.generateColgroup = function generateColgroup(tabl
 var insertColgroupFromNode = exports.insertColgroupFromNode = function insertColgroupFromNode(tableRef, table) {
   var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var shouldRemove = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  var colgroup = tableRef.querySelector('colgroup');
+  var colgroup = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelector('colgroup');
   if (colgroup && shouldRemove) {
-    tableRef.removeChild(colgroup);
+    tableRef === null || tableRef === void 0 || tableRef.removeChild(colgroup);
   }
-  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef : undefined);
+  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined);
   if (shouldRemove) {
-    tableRef.insertBefore(colgroup, tableRef.firstChild);
+    tableRef === null || tableRef === void 0 || tableRef.insertBefore(colgroup, tableRef === null || tableRef === void 0 ? void 0 : tableRef.firstChild);
   }
   return colgroup.children;
 };

package/dist/cjs/pm-plugins/table-resizing/utils/misc.js

@@ -103,7 +103,7 @@ var getTableContainerElementWidth = exports.getTableContainerElementWidth = func
 var getTableScalingPercent = exports.getTableScalingPercent = function getTableScalingPercent(table, tableRef) {
   var _tableRef$parentEleme;
   var tableWidth = getTableContainerElementWidth(table);
-  var renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
+  var renderWidth = (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
   // minus 1 here to avoid any 1px scroll in Firefox
   var scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - _consts.MAX_SCALING_PERCENT);

package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js

@@ -22,7 +22,7 @@ var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, col
     var _tableRef$closest;
     // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
     var tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    var tableContainerWidth = (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+    var tableContainerWidth = tableRef === null || tableRef === void 0 || (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
     var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
     resizeAmount = amount * 2;
     if (isOverflowed) {
@@ -53,11 +53,13 @@ var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, col
 };
 var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
   var currentWidth = (0, _misc.getTableContainerElementWidth)(tableNode);
-  var resizingContainer = tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
+  var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
   if (resizingContainer && resizingItem) {
     var newWidth = "".concat(currentWidth + resizeAmount, "px");
-    tableRef.style.width = newWidth;
+    if (tableRef) {
+      tableRef.style.width = newWidth;
+    }
     resizingContainer.style.width = newWidth;
     resizingItem.style.width = newWidth;
   }

package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils2 = require("../../../utils");
 var _colgroup = require("./colgroup");
 var _columnState = require("./column-state");
@@ -92,8 +93,8 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
 
 // updates Colgroup DOM node with new widths
 var updateColgroup = exports.updateColgroup = function updateColgroup(state, tableRef, tableNode, isTableScalingEnabled) {
-  var cols = tableRef.querySelectorAll('col');
-  var columnsCount = cols.length;
+  var cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
+  var columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
   /**
      updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
      We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
@@ -105,11 +106,11 @@ var updateColgroup = exports.updateColgroup = function updateColgroup(state, tab
       return column && !!column.width;
     }) // if width is 0, we dont want to apply that.
     .forEach(function (column, i) {
-      var fixedColWidth = (0, _colgroup.getColWidthFix)(column.width, columnsCount);
+      var fixedColWidth = (0, _colgroup.getColWidthFix)(column.width, columnsCount !== null && columnsCount !== void 0 ? columnsCount : 0);
       var scaledWidth = fixedColWidth * scalePercent;
       var finalWidth = Math.max(scaledWidth, _styles.tableCellMinWidth);
       // we aren't handling the remaining pixels here when the 48px min width is reached
-      if (cols[i]) {
+      if (cols !== null && cols !== void 0 && cols[i]) {
         cols[i].style.width = "".concat(finalWidth, "px");
       }
     });
@@ -118,8 +119,8 @@ var updateColgroup = exports.updateColgroup = function updateColgroup(state, tab
       return column && !!column.width;
     }) // if width is 0, we dont want to apply that.
     .forEach(function (column, i) {
-      if (cols[i]) {
-        cols[i].style.width = "".concat((0, _colgroup.getColWidthFix)(column.width, columnsCount), "px");
+      if (cols !== null && cols !== void 0 && cols[i]) {
+        cols[i].style.width = "".concat((0, _colgroup.getColWidthFix)(column.width, columnsCount !== null && columnsCount !== void 0 ? columnsCount : 0), "px");
       }
     });
   }
@@ -319,7 +320,8 @@ var getNewResizeStateFromSelectedColumns = exports.getNewResizeStateFromSelected
     return;
   }
   var maybeTable = domAtPos(table.start).node;
-  var tableRef = maybeTable.closest('table');
+  var maybeTableElement = maybeTable instanceof HTMLElement ? maybeTable : null;
+  var tableRef = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.explicit-html-element-check') ? maybeTableElement === null || maybeTableElement === void 0 ? void 0 : maybeTableElement.closest('table') : maybeTable === null || maybeTable === void 0 ? void 0 : maybeTable.closest('table');
   if (!tableRef) {
     return;
   }

package/dist/cjs/transforms/column-width.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _styles = require("@atlaskit/editor-common/styles");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
@@ -105,7 +106,8 @@ var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
       var newTable = tr.doc.nodeAt(table.pos);
       var domAtPos = view.domAtPos.bind(view);
       var maybeTable = domAtPos(table.start).node;
-      var tableRef = maybeTable.closest('table');
+      var maybeTableElement = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.explicit-html-element-check') ? maybeTable instanceof HTMLElement ? maybeTable : null : maybeTable;
+      var tableRef = maybeTableElement === null || maybeTableElement === void 0 ? void 0 : maybeTableElement.closest('table');
       if (!tableRef || !newTable) {
         return tr;
       }

package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _commands = require("../../../commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
@@ -100,14 +101,26 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     }
   }, [editorView, tableActive]);
   var handleMouseMove = (0, _react.useCallback)(function (e) {
-    var isParentDragControls = e.nativeEvent.target.closest(".".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS));
-    var rowIndex = e.nativeEvent.target.getAttribute('data-start-index');
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.explicit-html-element-check')) {
+      var target = e.nativeEvent.target instanceof Element ? e.nativeEvent.target : null;
+      var isParentDragControls = target === null || target === void 0 ? void 0 : target.closest(".".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS));
+      var _rowIndex = target === null || target === void 0 ? void 0 : target.getAttribute('data-start-index');
 
-    // avoid updating if event target is not related
-    if (!isParentDragControls || !rowIndex) {
-      return;
+      // avoid updating if event target is not related
+      if (!isParentDragControls || !_rowIndex) {
+        return;
+      }
+      updateCellHoverLocation(Number(_rowIndex));
+    } else {
+      var _isParentDragControls = e.nativeEvent.target.closest(".".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS));
+      var _rowIndex2 = e.nativeEvent.target.getAttribute('data-start-index');
+
+      // avoid updating if event target is not related
+      if (!_isParentDragControls || !_rowIndex2) {
+        return;
+      }
+      updateCellHoverLocation(Number(_rowIndex2));
     }
-    updateCellHoverLocation(Number(rowIndex));
   }, [updateCellHoverLocation]);
   var rowIndexes = (0, _react.useMemo)(function () {
     return [rowIndex];

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) {
@@ -171,7 +177,13 @@ export const changeColumnWidthByStep = ({
   const map = TableMap.get(originalTable);
   const domAtPos = view.domAtPos.bind(view);
   const colIndex = map.colCount($cell.pos - tableStartPosition) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
-  let dom = domAtPos(tableStartPosition).node;
+  let dom = null;
+  if (getBooleanFF('platform.editor.explicit-html-element-check')) {
+    const domAtPosition = domAtPos(tableStartPosition);
+    dom = domAtPosition.node instanceof HTMLTableElement ? domAtPosition.node : null;
+  } else {
+    dom = domAtPos(tableStartPosition).node;
+  }
   if (dom && dom.nodeName !== 'TABLE') {
     dom = dom.closest('table');
   }
@@ -218,10 +230,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 +270,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/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/nodeviews/TableRow.js

@@ -369,7 +369,7 @@ export default class TableRow extends TableNodeView {
       wrapper
     } = tree;
     const tableContainer = wrapper.parentElement;
-    const tableContentWrapper = tableContainer.parentElement;
+    const tableContentWrapper = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.parentElement;
     const layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
     if (isCurrentTableSelected) {
       this.colControlsOffset = tableControlsSpacing;

package/dist/es2019/pm-plugins/table-resizing/utils/colgroup.js

@@ -49,13 +49,13 @@ export const generateColgroup = (table, tableRef) => {
   return cols;
 };
 export const insertColgroupFromNode = (tableRef, table, isTableScalingEnabled = false, shouldRemove = true) => {
-  let colgroup = tableRef.querySelector('colgroup');
+  let colgroup = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelector('colgroup');
   if (colgroup && shouldRemove) {
-    tableRef.removeChild(colgroup);
+    tableRef === null || tableRef === void 0 ? void 0 : tableRef.removeChild(colgroup);
   }
-  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef : undefined);
+  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined);
   if (shouldRemove) {
-    tableRef.insertBefore(colgroup, tableRef.firstChild);
+    tableRef === null || tableRef === void 0 ? void 0 : tableRef.insertBefore(colgroup, tableRef === null || tableRef === void 0 ? void 0 : tableRef.firstChild);
   }
   return colgroup.children;
 };

package/dist/es2019/pm-plugins/table-resizing/utils/misc.js

@@ -93,7 +93,7 @@ export const getTableContainerElementWidth = table => {
 export const getTableScalingPercent = (table, tableRef) => {
   var _tableRef$parentEleme;
   const tableWidth = getTableContainerElementWidth(table);
-  let renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
+  let renderWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
   // minus 1 here to avoid any 1px scroll in Firefox
   let scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);

package/dist/es2019/pm-plugins/table-resizing/utils/resize-column.js

@@ -13,7 +13,7 @@ export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode,
     var _tableRef$closest;
     // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
     const tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    const tableContainerWidth = (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+    const tableContainerWidth = tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
     const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
     resizeAmount = amount * 2;
     if (isOverflowed) {
@@ -45,11 +45,13 @@ export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode,
 };
 const updateTable = (resizeAmount, tableRef, tableNode) => {
   const currentWidth = getTableContainerElementWidth(tableNode);
-  const resizingContainer = tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
+  const resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
   const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
   if (resizingContainer && resizingItem) {
     const newWidth = `${currentWidth + resizeAmount}px`;
-    tableRef.style.width = newWidth;
+    if (tableRef) {
+      tableRef.style.width = newWidth;
+    }
     resizingContainer.style.width = newWidth;
     resizingItem.style.width = newWidth;
   }