@atlaskit/editor-plugin-table 7.6.3 → 7.6.5

package/dist/types/commands-with-analytics.d.ts

@@ -1,3 +1,4 @@
+import type { IntlShape } from 'react-intl-next/src/types';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
@@ -11,7 +12,7 @@ export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalytic
 export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, targetCellPosition?: number) => Command;
 export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
 export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
-export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, inputMethod: INPUT_METHOD.SHORTCUT) => Command;
+export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, inputMethod: INPUT_METHOD.SHORTCUT, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => Command;
 export declare const insertColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
 export declare const deleteRowsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect, isHeaderRowRequired: boolean) => Command;
 export declare const deleteColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect) => Command;

package/dist/types/nodeviews/TableResizer.d.ts

@@ -4,6 +4,7 @@ import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../types';
 interface TableResizerProps {
     width: number;
     maxWidth: number;
@@ -16,6 +17,7 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
     displayGapCursor: (toggle: boolean) => boolean;
+    pluginInjectionApi?: PluginInjectionAPI;
     isTableScalingEnabled?: boolean;
     isWholeTableInDanger?: boolean;
 }
@@ -23,5 +25,5 @@ export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isWholeTableInDanger, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types/pm-plugins/keymap.d.ts

@@ -1,5 +1,7 @@
+import type { IntlShape } from 'react-intl-next/src/types';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean): SafePlugin;
+import type { PluginInjectionAPIWithA11y } from '../types';
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
 export default keymapPlugin;

package/dist/types/types.d.ts

@@ -26,7 +26,14 @@ export interface InsertRowOptions {
     moveCursorToInsertedRow: boolean;
 }
 export type PluginInjectionAPI = ExtractInjectionAPI<TablePlugin>;
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode'> & {
+export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
+    accessibilityUtils?: {
+        actions: {
+            ariaNotify: (message: string) => void | undefined;
+        };
+    };
+};
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
     isResizing: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;
@@ -60,6 +67,9 @@ export interface CellHoverMeta {
     colIndex?: number;
     rowIndex?: number;
 }
+export interface WidthToWidest {
+    [tableLocalId: string]: boolean;
+}
 export interface TablePluginState {
     editorHasFocus?: boolean;
     hoveredColumns: number[];
@@ -89,7 +99,7 @@ export interface TablePluginState {
     isKeyboardResize?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
-    widthToWidest?: boolean;
+    widthToWidest?: WidthToWidest;
     getIntl: () => IntlShape;
     isBreakoutEnabled?: boolean;
     wasFullWidthModeEnabled?: boolean;
@@ -178,7 +188,7 @@ export type TablePluginAction = {
 } | {
     type: 'UPDATE_TABLE_WIDTH_TO_WIDEST';
     data: {
-        widthToWidest: boolean | undefined;
+        widthToWidest: WidthToWidest | undefined;
     };
 } | {
     type: 'REMOVE_RESIZE_HANDLE_DECORATIONS';

package/dist/types-ts4.5/commands/column-resize.d.ts

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

package/dist/types-ts4.5/commands/go-to-next-cell.d.ts

@@ -1,4 +1,5 @@
+import type { IntlShape } from 'react-intl-next/src/types';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
 import type { Direction } from '@atlaskit/editor-tables/types';
-export declare const goToNextCell: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (direction: Direction) => Command;
+export declare const goToNextCell: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => (direction: Direction) => Command;

package/dist/types-ts4.5/commands/misc.d.ts

@@ -3,6 +3,7 @@ import type { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror
 import type { EditorState, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { WidthToWidest } from '../types';
 export declare const setEditorFocus: (editorHasFocus: boolean) => Command;
 export declare const setTableRef: (ref?: HTMLTableElement) => Command;
 export declare const setCellAttr: (name: string, value: any) => Command;
@@ -33,4 +34,4 @@ export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTML
     containerWidth: number;
 }) => boolean;
 export declare const addBoldInEmptyHeaderCells: (tableCellHeader: ContentNodeWithPos) => Command;
-export declare const updateWidthToWidest: (widthToWidest: boolean) => Command;
+export declare const updateWidthToWidest: (widthToWidest: WidthToWidest) => Command;

package/dist/types-ts4.5/commands-with-analytics.d.ts

@@ -1,3 +1,4 @@
+import type { IntlShape } from 'react-intl-next/src/types';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
@@ -11,7 +12,7 @@ export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalytic
 export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, targetCellPosition?: number) => Command;
 export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
 export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
-export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, inputMethod: INPUT_METHOD.SHORTCUT) => Command;
+export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, inputMethod: INPUT_METHOD.SHORTCUT, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => Command;
 export declare const insertColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, position: number) => Command;
 export declare const deleteRowsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect, isHeaderRowRequired: boolean) => Command;
 export declare const deleteColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT | INPUT_METHOD.TABLE_CONTEXT_MENU, rect: Rect) => Command;

package/dist/types-ts4.5/nodeviews/TableResizer.d.ts

@@ -4,6 +4,7 @@ import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../types';
 interface TableResizerProps {
     width: number;
     maxWidth: number;
@@ -16,6 +17,7 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
     displayGapCursor: (toggle: boolean) => boolean;
+    pluginInjectionApi?: PluginInjectionAPI;
     isTableScalingEnabled?: boolean;
     isWholeTableInDanger?: boolean;
 }
@@ -23,5 +25,5 @@ export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isWholeTableInDanger, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -1,5 +1,7 @@
+import type { IntlShape } from 'react-intl-next/src/types';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean): SafePlugin;
+import type { PluginInjectionAPIWithA11y } from '../types';
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
 export default keymapPlugin;

package/dist/types-ts4.5/types.d.ts

@@ -26,7 +26,14 @@ export interface InsertRowOptions {
     moveCursorToInsertedRow: boolean;
 }
 export type PluginInjectionAPI = ExtractInjectionAPI<TablePlugin>;
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode'> & {
+export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
+    accessibilityUtils?: {
+        actions: {
+            ariaNotify: (message: string) => void | undefined;
+        };
+    };
+};
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
     isResizing: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;
@@ -60,6 +67,9 @@ export interface CellHoverMeta {
     colIndex?: number;
     rowIndex?: number;
 }
+export interface WidthToWidest {
+    [tableLocalId: string]: boolean;
+}
 export interface TablePluginState {
     editorHasFocus?: boolean;
     hoveredColumns: number[];
@@ -89,7 +99,7 @@ export interface TablePluginState {
     isKeyboardResize?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
-    widthToWidest?: boolean;
+    widthToWidest?: WidthToWidest;
     getIntl: () => IntlShape;
     isBreakoutEnabled?: boolean;
     wasFullWidthModeEnabled?: boolean;
@@ -178,7 +188,7 @@ export type TablePluginAction = {
 } | {
     type: 'UPDATE_TABLE_WIDTH_TO_WIDEST';
     data: {
-        widthToWidest: boolean | undefined;
+        widthToWidest: WidthToWidest | undefined;
     };
 } | {
     type: 'REMOVE_RESIZE_HANDLE_DECORATIONS';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.6.3",
+  "version": "7.6.5",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.7.0",
     "@atlaskit/custom-steps": "^0.0.16",
-    "@atlaskit/editor-common": "^78.21.0",
+    "@atlaskit/editor-common": "^78.22.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
@@ -46,7 +46,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-    "@atlaskit/primitives": "^5.1.0",
+    "@atlaskit/primitives": "^5.2.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/toggle": "^13.0.0",
     "@atlaskit/tokens": "^1.42.0",
@@ -128,9 +128,6 @@
     "platform.editor.a11y-table-resizing_uapcv": {
       "type": "boolean"
     },
-    "platform.editor.table.new-cell-context-menu-styling": {
-      "type": "boolean"
-    },
     "platform.editor.a11y.table-selection_9uv33": {
       "type": "boolean"
     },

package/src/commands/column-resize.ts

@@ -1,3 +1,6 @@
+import type { IntlShape } from 'react-intl-next/src/types';
+
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type {
   Command,
@@ -121,36 +124,54 @@ const updateResizeHandleAndStatePosition =
     return false;
   };
 
-export const initiateKeyboardColumnResizing: Command = (
-  state,
-  dispatch,
-  view,
-) => {
-  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+export const initiateKeyboardColumnResizing =
+  ({
+    ariaNotify,
+    getIntl,
+  }: {
+    ariaNotify?: (message: string) => void;
+    getIntl?: () => IntlShape;
+  }): Command =>
+  (state, dispatch, view) => {
+    if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+
+    const { selection } = state;
+    const selectionRect = isSelectionType(selection, 'cell')
+      ? getSelectionRect(selection)!
+      : findCellRectClosestToPos(selection.$from);
+    const cell = findCellClosestToPos(selection.$from);
+
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(messages.startedColumnResize));
+    }
+
+    if (selectionRect && cell && view) {
+      return updateResizeHandleAndStatePosition(
+        selectionRect.top,
+        selectionRect.right,
+        cell.pos,
+      )(state, dispatch);
+    }
     return false;
-  }
-  const { selection } = state;
-  const selectionRect = isSelectionType(selection, 'cell')
-    ? getSelectionRect(selection)!
-    : findCellRectClosestToPos(selection.$from);
-  const cell = findCellClosestToPos(selection.$from);
-
-  if (selectionRect && cell && view) {
-    return updateResizeHandleAndStatePosition(
-      selectionRect.top,
-      selectionRect.right,
-      cell.pos,
-    )(state, dispatch);
-  }
-  return false;
-};
+  };
 
 export const activateNextResizeArea =
-  (direction: Direction): Command =>
+  ({
+    direction,
+    ariaNotify,
+    getIntl,
+  }: {
+    direction: Direction;
+    ariaNotify?: (message: string) => void;
+    getIntl?: () => IntlShape;
+  }): Command =>
   (state, dispatch, view) => {
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
+
     const { resizeHandlePos } = getTableResizingPluginState(state) || {};
     // If No resizing has initiated, skip to regular handler
     if (!resizeHandlePos) {
@@ -182,6 +203,23 @@ export const activateNextResizeArea =
     );
 
     const $nextCell = nextCell($currentCell, 'horiz', direction);
+    if (ariaNotify && getIntl) {
+      let columnDirection = '';
+
+      if (direction === 1) {
+        columnDirection = getIntl().formatMessage(messages.columnRightResize);
+      }
+
+      if (direction === -1) {
+        columnDirection = getIntl().formatMessage(messages.columnLeftResize);
+      }
+
+      ariaNotify(
+        getIntl().formatMessage(messages.focusedOtherResize, {
+          direction: columnDirection,
+        }),
+      );
+    }
 
     if ($nextCell) {
       // we are somewhere in between the side columns of the table
@@ -221,15 +259,25 @@ export const activateNextResizeArea =
         )(state, dispatch);
       }
     }
+
     return false;
   };
 
 export const changeColumnWidthByStep =
-  (
-    stepSize: number,
-    getEditorContainerWidth: GetEditorContainerWidth,
-    isTableScalingEnabled = false,
-  ): Command =>
+  ({
+    stepSize,
+    getEditorContainerWidth,
+    isTableScalingEnabled,
+    ariaNotify,
+    getIntl,
+  }: {
+    stepSize: number;
+    getEditorContainerWidth: GetEditorContainerWidth;
+    isTableScalingEnabled: boolean;
+    ariaNotify?: (message: string) => void;
+    getIntl?: () => IntlShape;
+    originalTr?: Transaction;
+  }): Command =>
   (state, dispatch, view) => {
     let customTr = state.tr;
     const fakeDispatch = (tr: Transaction) => {
@@ -323,11 +371,36 @@ export const changeColumnWidthByStep =
       dispatch(customTr);
     }
 
+    if (ariaNotify && getIntl) {
+      ariaNotify(
+        getIntl().formatMessage(messages.changedColumnWidth, {
+          width: Math.floor(newResizeState.cols[colIndex].width),
+        }),
+      );
+
+      if (newResizeState.cols.length === colIndex + 1) {
+        if (newResizeState.overflow === true) {
+          ariaNotify(getIntl().formatMessage(messages.columnResizeLast));
+        }
+        if (newResizeState.overflow === false) {
+          ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow));
+        }
+      }
+    }
+
     return true;
   };
 
 export const stopKeyboardColumnResizing =
-  (originalTr?: Transaction): Command =>
+  ({
+    ariaNotify,
+    getIntl,
+    originalTr,
+  }: {
+    ariaNotify?: (message: string) => void;
+    getIntl?: () => IntlShape;
+    originalTr?: Transaction;
+  }): Command =>
   (state, dispatch) => {
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
@@ -364,6 +437,9 @@ export const stopKeyboardColumnResizing =
       },
       () => customTr.setMeta('scrollIntoView', false),
     )(state, fakeDispatch);
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(messages.columnResizeStop));
+    }
 
     if (dispatch) {
       dispatch(customTr);

package/src/commands/go-to-next-cell.ts

@@ -1,4 +1,5 @@
 // #region Constants
+import type { IntlShape } from 'react-intl-next/src/types';
 
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
@@ -21,7 +22,11 @@ const TAB_FORWARD_DIRECTION = 1;
 const TAB_BACKWARD_DIRECTION = -1;
 
 export const goToNextCell =
-  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+    ariaNotify?: (message: string) => void,
+    getIntl?: () => IntlShape,
+  ) =>
   (direction: Direction): Command =>
   (state, dispatch, view) => {
     const table = findTable(state.selection);
@@ -32,7 +37,10 @@ export const goToNextCell =
     if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       const isColumnResizing = getPluginState(state)?.isKeyboardResize;
       if (isColumnResizing) {
-        stopKeyboardColumnResizing()(state, dispatch, view);
+        stopKeyboardColumnResizing({
+          ariaNotify: ariaNotify,
+          getIntl: getIntl,
+        })(state, dispatch, view);
         return true;
       }
     }

package/src/commands/misc.ts

@@ -1,3 +1,5 @@
+import isEqual from 'lodash/isEqual';
+
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import type { Command } from '@atlaskit/editor-common/types';
 import {
@@ -45,6 +47,7 @@ import {
 } from '../pm-plugins/decorations/utils';
 import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import { fixAutoSizedTable } from '../transforms';
+import type { WidthToWidest } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import {
   createColumnControlsDecoration,
@@ -779,18 +782,18 @@ export const addBoldInEmptyHeaderCells =
     return false;
   };
 
-export const updateWidthToWidest = (widthToWidest: boolean) =>
+export const updateWidthToWidest = (widthToWidest: WidthToWidest) =>
   createCommand((state) => {
     let { widthToWidest: prevWidthToWidest } = getPluginState(state);
 
-    if (prevWidthToWidest === widthToWidest) {
+    if (isEqual(widthToWidest, prevWidthToWidest)) {
       return false;
     }
 
     return {
       type: 'UPDATE_TABLE_WIDTH_TO_WIDEST',
       data: {
-        widthToWidest,
+        widthToWidest: { ...prevWidthToWidest, ...widthToWidest },
       },
     };
   });

package/src/commands-with-analytics.ts

@@ -1,3 +1,5 @@
+import type { IntlShape } from 'react-intl-next/src/types';
+
 import type { TableLayout } from '@atlaskit/adf-schema';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
@@ -259,6 +261,8 @@ export const changeColumnWidthByStepWithAnalytics =
     getEditorContainerWidth: GetEditorContainerWidth,
     isTableScalingEnabled: boolean,
     inputMethod: INPUT_METHOD.SHORTCUT,
+    ariaNotify?: (message: string) => void,
+    getIntl?: () => IntlShape,
   ) =>
     withEditorAnalyticsAPI((state) => {
       const { table, totalRowCount, totalColumnCount } = getSelectedTableInfo(
@@ -283,11 +287,13 @@ export const changeColumnWidthByStepWithAnalytics =
         },
       };
     })(editorAnalyticsAPI)(
-      changeColumnWidthByStep(
-        stepSize,
-        getEditorContainerWidth,
-        isTableScalingEnabled,
-      ),
+      changeColumnWidthByStep({
+        stepSize: stepSize,
+        getEditorContainerWidth: getEditorContainerWidth,
+        isTableScalingEnabled: isTableScalingEnabled,
+        ariaNotify: ariaNotify,
+        getIntl: getIntl,
+      }),
     );
 
 export const insertColumnWithAnalytics =

package/src/nodeviews/ExternalDropTargets.tsx

@@ -56,6 +56,7 @@ export const ExternalDropTargets = ({
         width: getTableWrapperWidth(),
         overflow: 'hidden',
         position: 'absolute',
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         top: `-${dropTargetExtendedWidth - tableMarginTop}px`,
         pointerEvents: 'auto',
         zIndex: `${dropTargetsZIndex}`,
@@ -66,6 +67,7 @@ export const ExternalDropTargets = ({
         style={{
           display: 'flex',
           // move drop targets based on table wrapper scroll
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginLeft: `-${getScrollOffset()}px`,
         }}
       >