@atlaskit/editor-plugin-table 7.9.0 → 7.10.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/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/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/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/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/nodeviews/TableComponent.js

@@ -17,6 +17,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';
@@ -37,7 +38,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';
@@ -515,6 +516,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 = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
+      var isNoOfRowsChanged = 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(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();
@@ -524,8 +534,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 = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
         if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || isNoOfColumnsChanged) {
           var _view = this.props.view;
           var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || isNoOfColumnsChanged && isResizing;
@@ -786,4 +794,4 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   return TableComponent;
 }(React.Component);
 _defineProperty(TableComponent, "displayName", 'TableComponent');
-export default TableComponent;
+export default injectIntl(TableComponent);

package/dist/esm/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/esm/utils/nodes.js

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

package/dist/esm/utils/table.js

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 var getMergedCellsPositions = function getMergedCellsPositions(tr) {
@@ -25,4 +26,36 @@ export var colsToRect = function colsToRect(cols, noOfRows) {
     top: 0,
     bottom: noOfRows
   };
+};
+export var getAssistiveMessage = function getAssistiveMessage(prevTableNode, currentTableNode, intl) {
+  var formatMessage = intl.formatMessage;
+  var prevTableMap = TableMap.get(prevTableNode);
+  var currentTableMap = TableMap.get(currentTableNode);
+  if (currentTableMap.width !== prevTableMap.width) {
+    var 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) {
+    var _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/types/commands/column-resize.d.ts

@@ -1,26 +1,27 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const initiateKeyboardColumnResizing: ({ ariaNotify, getIntl, }: {
-    ariaNotify?: ((message: string) => void) | undefined;
+    ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
 }) => Command;
 export declare const activateNextResizeArea: ({ direction, ariaNotify, getIntl, }: {
     direction: Direction;
-    ariaNotify?: ((message: string) => void) | undefined;
+    ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
 }) => Command;
 export declare const changeColumnWidthByStep: ({ stepSize, getEditorContainerWidth, isTableScalingEnabled, ariaNotify, getIntl, }: {
     stepSize: number;
     getEditorContainerWidth: GetEditorContainerWidth;
     isTableScalingEnabled: boolean;
-    ariaNotify?: ((message: string) => void) | undefined;
+    ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
     originalTr?: Transaction | undefined;
 }) => Command;
 export declare const stopKeyboardColumnResizing: ({ ariaNotify, getIntl, originalTr, }: {
-    ariaNotify?: ((message: string) => void) | undefined;
+    ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
     originalTr?: Transaction | undefined;
 }) => Command;