@atlaskit/editor-plugin-table 7.19.11 → 7.20.0

package/src/nodeviews/table.tsx

@@ -5,7 +5,6 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
-import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type {
 	GetEditorContainerWidth,
@@ -20,7 +19,7 @@ import type { EditorState, PluginKey } from '@atlaskit/editor-prosemirror/state'
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
@@ -102,10 +101,6 @@ export default class TableView extends ReactNodeView<Props> {
 			props.portalProviderAPI,
 			props.eventDispatcher,
 			props,
-			undefined,
-			undefined,
-			undefined,
-			props.hasIntlContext,
 		);
 		this.getPos = props.getPos;
 		this.eventDispatcher = props.eventDispatcher;
@@ -183,7 +178,7 @@ export default class TableView extends ReactNodeView<Props> {
 	};
 
 	render(props: Props, forwardRef: ForwardRef) {
-		if (getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+		if (fg('platform.editor.table.use-shared-state-hook')) {
 			return (
 				<TableComponentWithSharedState
 					forwardRef={forwardRef}
@@ -358,7 +353,7 @@ export const createTableView = (
 	node: PmNode,
 	view: EditorView,
 	getPos: getPosHandler,
-	portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI,
+	portalProviderAPI: PortalProviderAPI,
 	eventDispatcher: EventDispatcher,
 	getEditorContainerWidth: GetEditorContainerWidth,
 	getEditorFeatureFlags: GetEditorFeatureFlags,
@@ -375,7 +370,6 @@ export const createTableView = (
 		isTableScalingEnabled, // same as options.isTableScalingEnabled
 	} = getPluginState(view.state);
 	const { allowColumnResizing, allowControls } = getPluginConfig(pluginConfig);
-	const hasIntlContext = true;
 
 	return new TableView({
 		node,
@@ -396,7 +390,6 @@ export const createTableView = (
 		getEditorContainerWidth,
 		getEditorFeatureFlags,
 		dispatchAnalyticsEvent,
-		hasIntlContext,
 		pluginInjectionApi,
 	}).init();
 };

package/src/nodeviews/types.ts

@@ -1,7 +1,6 @@
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
-import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -23,13 +22,12 @@ export interface Props {
 	allowColumnResizing?: boolean;
 	allowControls?: boolean;
 	cellMinWidth?: number;
-	portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI;
+	portalProviderAPI: PortalProviderAPI;
 	eventDispatcher: EventDispatcher;
 	getPos: () => number | undefined;
 	options?: TableOptions;
 	getEditorContainerWidth: GetEditorContainerWidth;
 	getEditorFeatureFlags: GetEditorFeatureFlags;
 	dispatchAnalyticsEvent: DispatchAnalyticsEvent;
-	hasIntlContext: boolean;
 	pluginInjectionApi?: PluginInjectionAPI;
 }

package/src/plugin.tsx

@@ -38,7 +38,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { insertTableWithSize } from './commands/insert';
 import { pluginConfig } from './create-plugin-config';
@@ -155,13 +155,14 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 		);
 	};
 	const editorAnalyticsAPI = api?.analytics?.actions;
+	const ariaNotifyPlugin = api?.accessibilityUtils?.actions.ariaNotify;
 
 	const isTableFixedColumnWidthsOptionEnabled =
 		options?.getEditorFeatureFlags?.().tableWithFixedColumnWidthsOption || false;
 	const shouldUseIncreasedScalingPercent =
 		options?.isTableScalingEnabled &&
 		isTableFixedColumnWidthsOptionEnabled &&
-		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+		fg('platform.editor.table.use-increased-scaling-percent');
 
 	const isCellBackgroundDuplicated =
 		options?.getEditorFeatureFlags?.().tableDuplicateCellColouring || false;
@@ -353,7 +354,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				},
 				{
 					name: 'tableSelectionKeymap',
-					plugin: () => tableSelectionKeymapPlugin(api?.selection),
+					plugin: ({ getIntl }) => tableSelectionKeymapPlugin(api, getIntl),
 				},
 				{
 					name: 'tableEditing',
@@ -399,8 +400,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				{
 					name: 'tableViewModeSort',
 					plugin: () => {
-						return getBooleanFF('platform.editor.table.live-pages-sorting_4malx') &&
-							api?.editorViewMode
+						return api?.editorViewMode && fg('platform.editor.table.live-pages-sorting_4malx')
 							? createViewModeSortPlugin(api.editorViewMode)
 							: undefined;
 					},
@@ -530,8 +530,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 								<>
 									{targetCellPosition &&
 										(tableRef ||
-											(getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') &&
-												isCellMenuOpenByKeyboard)) &&
+											(isCellMenuOpenByKeyboard &&
+												fg('platform.editor.a11y-table-context-menu_y4c9c'))) &&
 										!isResizing &&
 										options &&
 										options.allowContextualMenu && (
@@ -607,6 +607,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 											getEditorFeatureFlags={
 												options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags
 											}
+											ariaNotifyPlugin={ariaNotifyPlugin}
 										/>
 									)}
 									{allowControls && !isDragAndDropEnabled && !isResizing && (

package/src/pm-plugins/drag-and-drop/commands-with-analytics.ts

@@ -1,3 +1,5 @@
+import { type IntlShape } from 'react-intl-next/src/types';
+
 import {
 	ACTION_SUBJECT,
 	EVENT_TYPE,
@@ -6,7 +8,9 @@ import {
 	TABLE_STATUS,
 } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import type { Command } from '@atlaskit/editor-common/types';
+import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
@@ -52,7 +56,11 @@ export const clearDropTargetWithAnalytics =
 	};
 
 export const moveSourceWithAnalytics =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+	(
+		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+		ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void,
+		getIntl?: () => IntlShape,
+	) =>
 	(
 		inputMethod:
 			| INPUT_METHOD.TABLE_CONTEXT_MENU
@@ -88,13 +96,45 @@ export const moveSourceWithAnalytics =
 		})(editorAnalyticsAPI)((state, dispatch) => {
 			if (dispatch) {
 				moveSource(sourceType, sourceIndexes, targetIndex, tr)(state, dispatch);
+				// Only considering single row/column movement for screen reader as only single row/column selection is supported via keyboard atm.
+				if (
+					(inputMethod === INPUT_METHOD.TABLE_CONTEXT_MENU || INPUT_METHOD.SHORTCUT) &&
+					sourceIndexes.length === 1 &&
+					ariaNotify &&
+					getIntl
+				) {
+					const direction = sourceIndexes[0] > targetIndex ? -1 : 1; // -1 for left/up , 1 for right/down
+					const { totalRowCount, totalColumnCount } = getSelectedTableInfo(state.selection);
+					ariaNotify(
+						getIntl().formatMessage(
+							sourceType === 'table-row'
+								? direction > 0
+									? messages.rowMovedDown
+									: messages.rowMovedUp
+								: direction > 0
+									? messages.columnMovedRight
+									: messages.columnMovedLeft,
+							{
+								index: targetIndex + 1,
+								total: sourceType === 'table-row' ? totalRowCount : totalColumnCount,
+							},
+						),
+						{
+							priority: 'important',
+						},
+					);
+				}
 			}
 			return true;
 		});
 	};
 
 export const moveSourceWithAnalyticsViaShortcut =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+	(
+		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+		ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void,
+		getIntl?: () => IntlShape,
+	) =>
 	(sourceType: DraggableType, direction: DraggableData['direction']): Command =>
 	(state, dispatch) => {
 		const { selection } = state;
@@ -130,7 +170,7 @@ export const moveSourceWithAnalyticsViaShortcut =
 
 		const targetIndex = getTargetIndex(selectedIndexes, direction);
 
-		return moveSourceWithAnalytics(editorAnalyticsAPI)(
+		return moveSourceWithAnalytics(editorAnalyticsAPI, ariaNotify, getIntl)(
 			INPUT_METHOD.SHORTCUT,
 			sourceType,
 			selectedIndexes,

package/src/pm-plugins/keymap.ts

@@ -34,7 +34,7 @@ import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { goToNextCell, moveCursorBackward, setFocusToCellMenu } from '../commands';
 import {
@@ -139,7 +139,7 @@ export function keymapPlugin(
 		list,
 	);
 
-	if (getBooleanFF('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
+	if (fg('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
 		bindKeymapWithCommand(
 			addRowBeforeVO.common!,
 			addRowAroundSelection(editorAnalyticsAPI)('TOP'),
@@ -186,25 +186,41 @@ export function keymapPlugin(
 
 		bindKeymapWithCommand(
 			moveRowDown.common!,
-			moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)('table-row', 1),
+			moveSourceWithAnalyticsViaShortcut(
+				editorAnalyticsAPI,
+				ariaNotifyPlugin,
+				getIntl,
+			)('table-row', 1),
 			list,
 		);
 
 		bindKeymapWithCommand(
 			moveRowUp.common!,
-			moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)('table-row', -1),
+			moveSourceWithAnalyticsViaShortcut(
+				editorAnalyticsAPI,
+				ariaNotifyPlugin,
+				getIntl,
+			)('table-row', -1),
 			list,
 		);
 
 		bindKeymapWithCommand(
 			moveColumnLeft.common!,
-			moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)('table-column', -1),
+			moveSourceWithAnalyticsViaShortcut(
+				editorAnalyticsAPI,
+				ariaNotifyPlugin,
+				getIntl,
+			)('table-column', -1),
 			list,
 		);
 
 		bindKeymapWithCommand(
 			moveColumnRight.common!,
-			moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)('table-column', 1),
+			moveSourceWithAnalyticsViaShortcut(
+				editorAnalyticsAPI,
+				ariaNotifyPlugin,
+				getIntl,
+			)('table-column', 1),
 			list,
 		);
 
@@ -297,7 +313,7 @@ export function keymapPlugin(
 		list,
 	);
 
-	if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+	if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
 		bindKeymapWithCommand(focusToContextMenuTrigger.common!, setFocusToCellMenu(), list);
 	}
 

package/src/pm-plugins/main.ts

@@ -10,7 +10,6 @@ import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/edito
 import { insideTable } from '@atlaskit/editor-common/core-utils';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
-import type { LegacyPortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import {
 	transformSliceToRemoveOpenBodiedExtension,
@@ -26,7 +25,7 @@ import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-p
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
 import { stopKeyboardColumnResizing } from '../commands/column-resize';
@@ -79,7 +78,7 @@ import { pluginKey } from './plugin-key';
 export const createPlugin = (
 	dispatchAnalyticsEvent: DispatchAnalyticsEvent,
 	dispatch: Dispatch,
-	portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI,
+	portalProviderAPI: PortalProviderAPI,
 	eventDispatcher: EventDispatcher,
 	pluginConfig: PluginConfig,
 	getEditorContainerWidth: GetEditorContainerWidth,
@@ -292,7 +291,7 @@ export const createPlugin = (
 				}
 
 				//  If a partial paste of nested expand, paste only nested-expand's content */
-				if (getBooleanFF('platform.editor.transform-slice-for-nested-expand')) {
+				if (fg('platform.editor.transform-slice-for-nested-expand')) {
 					slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
 				}
 

package/src/pm-plugins/table-selection-keymap.ts

@@ -1,3 +1,5 @@
+import { type IntlShape } from 'react-intl-next/src/types';
+
 import {
 	bindKeymapArrayWithCommand,
 	bindKeymapWithCommand,
@@ -9,7 +11,6 @@ import {
 	shiftArrowUp,
 } from '@atlaskit/editor-common/keymaps';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 
 import {
@@ -20,20 +21,31 @@ import {
 	selectRows,
 	shiftArrowUpFromTable,
 } from '../commands/selection';
-import type tablePlugin from '../plugin';
+import { type PluginInjectionAPI } from '../types';
 
 export function tableSelectionKeymapPlugin(
-	editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined,
+	pluginInjectionApi?: PluginInjectionAPI,
+	getIntl?: () => IntlShape,
 ): SafePlugin {
 	const list = {};
+	const editorSelectionAPI = pluginInjectionApi?.selection;
+	const ariaNotifyPlugin = pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify;
 
 	bindKeymapWithCommand(moveRight.common!, arrowRightFromTable(editorSelectionAPI)(), list);
 
 	bindKeymapWithCommand(moveLeft.common!, arrowLeftFromTable(editorSelectionAPI)(), list);
 
-	bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
-
-	bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
+	bindKeymapArrayWithCommand(
+		selectColumn,
+		selectColumns(editorSelectionAPI, ariaNotifyPlugin, getIntl)(true),
+		list,
+	);
+
+	bindKeymapArrayWithCommand(
+		selectRow,
+		selectRows(editorSelectionAPI, ariaNotifyPlugin, getIntl)(true),
+		list,
+	);
 
 	bindKeymapWithCommand(shiftArrowUp.common!, shiftArrowUpFromTable(editorSelectionAPI)(), list);
 

package/src/toolbar.tsx

@@ -521,6 +521,7 @@ export const getToolbarConfig =
 							getDomRef,
 							editorView,
 							shouldUseIncreasedScalingPercent,
+							options?.fullWidthEnabled,
 						)
 					: [];
 
@@ -852,6 +853,7 @@ export const getAlignmentOptionsConfig = (
 	getDomRef: (editorView: EditorView) => HTMLElement | undefined,
 	editorView: EditorView | null,
 	shouldUseIncreasedScalingPercent: boolean,
+	isFullWidthEditor?: boolean,
 ): Array<FloatingToolbarDropdown<Command>> => {
 	const tableObject = findTable(editorState.selection);
 
@@ -900,6 +902,7 @@ export const getAlignmentOptionsConfig = (
 				getDomRef,
 				editorView,
 				shouldUseIncreasedScalingPercent,
+				isFullWidthEditor,
 			) && {
 				disabled: value !== 'center',
 			}),
@@ -942,6 +945,7 @@ export const isLayoutOptionDisabled = (
 	getDomRef: (editorView: EditorView) => HTMLElement | undefined,
 	editorView: EditorView | null,
 	shouldUseIncreasedScalingPercent: boolean,
+	isFullWidthEditor: boolean | undefined,
 ) => {
 	const { lineLength } = getEditorContainerWidth();
 	let tableContainerWidth = getTableContainerWidth(selectedNode);
@@ -958,7 +962,9 @@ export const isLayoutOptionDisabled = (
 		tableContainerWidth = tableContainerWidth * scalePercent;
 	}
 
-	if (selectedNode && lineLength && tableContainerWidth > lineLength) {
+	// If fixed-width editor, we disable 'left-alignment' when table width is 760px.
+	// tableContainerWidth +1 here because tableContainerWidth is 759 in fixed-width editor
+	if (selectedNode && !isFullWidthEditor && lineLength && tableContainerWidth + 1 >= lineLength) {
 		return true;
 	}
 

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -27,6 +27,7 @@ import {
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -93,6 +94,10 @@ type DragMenuProps = {
 	shouldUseIncreasedScalingPercent?: boolean;
 	isTableFixedColumnWidthsOptionEnabled?: boolean;
 	tableSortColumnReorder?: boolean;
+	ariaNotifyPlugin?: (
+		message: string,
+		ariaLiveElementAttributes?: AriaLiveElementAttributes,
+	) => void;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -275,6 +280,7 @@ export const DragMenu = React.memo(
 		shouldUseIncreasedScalingPercent,
 		isTableFixedColumnWidthsOptionEnabled,
 		tableSortColumnReorder,
+		ariaNotifyPlugin,
 	}: DragMenuProps & WrappedComponentProps) => {
 		const { state, dispatch } = editorView;
 		const { selection } = state;
@@ -305,6 +311,7 @@ export const DragMenu = React.memo(
 			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
 			tableSortColumnReorder,
+			ariaNotifyPlugin,
 		);
 
 		const { menuItems, menuCallback } = convertToDropdownItems(

package/src/ui/FloatingDragMenu/index.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
+import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
@@ -10,7 +11,7 @@ import {
 	akEditorFloatingOverlapPanelZIndex,
 } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { PluginConfig, TableDirection } from '../../types';
@@ -35,6 +36,10 @@ export interface Props {
 	pluginConfig?: PluginConfig;
 	isTableScalingEnabled?: boolean;
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
+	ariaNotifyPlugin?: (
+		message: string,
+		ariaLiveElementAttributes?: AriaLiveElementAttributes,
+	) => void;
 }
 
 const FloatingDragMenu = ({
@@ -53,6 +58,7 @@ const FloatingDragMenu = ({
 	pluginConfig,
 	isTableScalingEnabled,
 	getEditorFeatureFlags,
+	ariaNotifyPlugin,
 }: Props) => {
 	if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
 		return null;
@@ -79,7 +85,7 @@ const FloatingDragMenu = ({
 	const shouldUseIncreasedScalingPercent =
 		isTableScalingEnabled &&
 		tableWithFixedColumnWidthsOption &&
-		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+		fg('platform.editor.table.use-increased-scaling-percent');
 
 	return (
 		<Popup
@@ -120,6 +126,7 @@ const FloatingDragMenu = ({
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
 				isTableFixedColumnWidthsOptionEnabled={tableWithFixedColumnWidthsOption}
 				tableSortColumnReorder={tableSortColumnReorder}
+				ariaNotifyPlugin={ariaNotifyPlugin}
 			/>
 		</Popup>
 	);

package/src/ui/TableFloatingControls/index.tsx

@@ -7,13 +7,15 @@ import { browser } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import type { TablePlugin } from '../../plugin';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import type { CellHoverMeta } from '../../types';
+import { isTableNested } from '../../utils/nodes';
 
 import {
 	CornerControls,
@@ -127,6 +129,12 @@ export const TableFloatingControls = ({
 		? ClassName.DRAG_ROW_CONTROLS_WRAPPER
 		: ClassName.ROW_CONTROLS_WRAPPER;
 
+	const tablePos = findTable(editorView.state.selection)?.pos;
+	const isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos!);
+	const shouldShowCornerControls = fg('platform_editor_element_drag_and_drop_ed_24041')
+		? !featureFlagsState?.elementDragAndDrop || isNested
+		: !featureFlagsState?.elementDragAndDrop;
+
 	return (
 		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 		<div className={wrapperClassName}>
@@ -152,8 +160,8 @@ export const TableFloatingControls = ({
 					<>
 						{isDragAndDropEnabled ? (
 							<>
-								{!featureFlagsState?.elementDragAndDrop &&
-									(getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+								{shouldShowCornerControls &&
+									(fg('platform.editor.table.use-shared-state-hook') ? (
 										<DragCornerControlsWithSelection
 											editorView={editorView}
 											tableRef={tableRef}
@@ -185,7 +193,7 @@ export const TableFloatingControls = ({
 									updateCellHoverLocation={updateCellHoverLocation}
 								/>
 							</>
-						) : getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+						) : fg('platform.editor.table.use-shared-state-hook') ? (
 							<FloatingControlsWithSelection
 								editorView={editorView}
 								tableRef={tableRef}

package/src/utils/drag-menu.ts

@@ -22,6 +22,7 @@ import type {
 	GetEditorContainerWidth,
 	IconProps,
 } from '@atlaskit/editor-common/types';
+import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
@@ -45,6 +46,7 @@ import {
 	sortColumnWithAnalytics,
 } from '../commands-with-analytics';
 import { moveSourceWithAnalytics } from '../pm-plugins/drag-and-drop/commands-with-analytics';
+import { getPluginState as getTablePluginState } from '../pm-plugins/plugin-factory';
 import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getClosestSelectionRect } from '../toolbar';
 import type { DraggableData, DraggableType, TableDirection } from '../types';
@@ -148,8 +150,13 @@ export const getDragMenuConfig = (
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
 	tableSortColumnReorder = false,
+	ariaNotifyPlugin?: (
+		message: string,
+		ariaLiveElementAttributes?: AriaLiveElementAttributes,
+	) => void,
 ): DragMenuConfig[] => {
 	const { selection } = editorView.state;
+	const { getIntl } = getTablePluginState(editorView.state);
 	const addOptions =
 		direction === 'row'
 			? [
@@ -358,7 +365,7 @@ export const getDragMenuConfig = (
 			onClick: (state: EditorState, dispatch?: CommandDispatch) => {
 				if (canMove) {
 					requestAnimationFrame(() => {
-						moveSourceWithAnalytics(editorAnalyticsAPI)(
+						moveSourceWithAnalytics(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(
 							INPUT_METHOD.TABLE_CONTEXT_MENU,
 							`table-${direction}`,
 							getOriginIndexes(selectionRect!),