@atlaskit/editor-plugin-block-controls 1.10.1 → 1.10.2

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 1.10.2
+
+### Patch Changes
+
+- [`63d659eb3e73d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/63d659eb3e73d) -
+  ED-24315 improve a11y for block controls
+
 ## 1.10.1
 
 ### Patch Changes
 
+- [#125984](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125984)
+  [`167a210dfd672`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/167a210dfd672) -
+  [ux] Update shortcuts for element dnd
 - [#125542](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125542)
   [`06bc2f65f892e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/06bc2f65f892e) -
   ED-24304 resolve range error issue
+- Updated dependencies
 
 ## 1.10.0
 

package/dist/cjs/commands/move-node.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.moveNodeViaShortcut = exports.moveNode = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
 var _selection = require("@atlaskit/editor-common/selection");
 var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-tables/utils");
@@ -53,7 +54,7 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
   }
   return currentNodePos;
 };
-var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction) {
+var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
   return function (state) {
     var currentNodePos = getCurrentNodePos(state);
     if (currentNodePos > -1) {
@@ -79,7 +80,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         var _api$core;
         api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
           var tr = _ref2.tr;
-          moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT)({
+          moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT, formatMessage)({
             tr: tr
           });
           tr.scrollIntoView();
@@ -104,6 +105,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
 var moveNode = exports.moveNode = function moveNode(api) {
   return function (start, to) {
     var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.DRAG_AND_DROP;
+    var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
     return function (_ref4) {
       var _node$nodeSize, _api$analytics;
       var tr = _ref4.tr;
@@ -145,6 +147,13 @@ var moveNode = exports.moveNode = function moveNode(api) {
           inputMethod: inputMethod
         })
       })(tr);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
+        var _api$accessibilityUti;
+        var movedMessage = to > start ? _messages.blockControlsMessages.movedDown : _messages.blockControlsMessages.movedup;
+        api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(formatMessage ? formatMessage(movedMessage) : movedMessage.defaultMessage, {
+          priority: 'important'
+        });
+      }
       return tr;
     };
   };

package/dist/cjs/pm-plugins/decorations.js

@@ -17,7 +17,7 @@ var _dropTarget = require("../ui/drop-target");
 var _mouseMoveWrapper = require("../ui/mouse-move-wrapper");
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
 var NESTED_DEPTH = (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? 100 : 0;
-var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
+var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage) {
   var decs = [];
   unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
@@ -48,6 +48,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     var dropTargetDec = /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
       api: api,
       id: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? pos : index,
+      formatMessage: formatMessage,
       prevNode: prevNode,
       nextNode: node
     });
@@ -90,7 +91,8 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     element.setAttribute('data-blocks-drop-target-container', 'true');
     _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, {
       api: api,
-      id: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length
+      id: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length,
+      formatMessage: formatMessage
     }), element);
     return element;
   }, {

package/dist/cjs/pm-plugins/keymap.js

@@ -10,7 +10,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _moveNode = require("../commands/move-node");
 var _showDragHandle = require("../commands/show-drag-handle");
 var _consts = require("../consts");
-function keymapList(api) {
+function keymapList(api, formatMessage) {
   var keymapList = {};
   if (api && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.showElementDragHandle.common, function (state, dispatch, view) {
@@ -18,11 +18,11 @@ function keymapList(api) {
       //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
       return true;
     }, keymapList);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP), keymapList);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN), keymapList);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP, formatMessage), keymapList);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN, formatMessage), keymapList);
   }
   return keymapList;
 }
-var boundKeydownHandler = exports.boundKeydownHandler = function boundKeydownHandler(api) {
-  return (0, _keymap.keydownHandler)(keymapList(api));
+var boundKeydownHandler = exports.boundKeydownHandler = function boundKeydownHandler(api, formatMessage) {
+  return (0, _keymap.keydownHandler)(keymapList(api, formatMessage));
 };

package/dist/cjs/pm-plugins/main.js

@@ -184,6 +184,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
         // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
         var maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
         var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+        var _getIntl = getIntl(),
+          formatMessage = _getIntl.formatMessage;
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
@@ -273,7 +275,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             // Add drop targets when node is being dragged
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             if (shouldUpdateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
-              var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api),
+              var _dropTargetDecoration = (0, _decorations.dropTargetDecorations)(oldState, newState, api, formatMessage),
                 _decs2 = _dropTargetDecoration.decs,
                 updatedDecorationState = _dropTargetDecoration.decorationState;
               decorationState = updatedDecorationState;
@@ -298,7 +300,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             var shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
             if (shouldShowDragTarget || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
-              var _dropTargetDecoration2 = (0, _decorations.dropTargetDecorations)(oldState, newState, api),
+              var _dropTargetDecoration2 = (0, _decorations.dropTargetDecorations)(oldState, newState, api, formatMessage),
                 _decs3 = _dropTargetDecoration2.decs,
                 _updatedDecorationState = _dropTargetDecoration2.decorationState;
               decorationState = _updatedDecorationState;
@@ -454,11 +456,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
               return true;
             }
           }
-
-          //NOTE: altKey === 'option' on MacOS
-          if (event.altKey && event.shiftKey && event.ctrlKey && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
+          if (event.shiftKey && event.ctrlKey && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
+            var _getIntl2 = getIntl(),
+              formatMessage = _getIntl2.formatMessage;
             //prevent holding down key combo from firing repeatedly
-            if (!event.repeat && (0, _keymap.boundKeydownHandler)(api)(view, event)) {
+            if (!event.repeat && (0, _keymap.boundKeydownHandler)(api, formatMessage)(view, event)) {
               event.preventDefault();
               return true;
             }

package/dist/cjs/ui/drag-handle.js

@@ -367,27 +367,39 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     description: formatMessage(_messages.blockControlsMessages.moveDown),
     keymap: _keymaps.dragToMoveDown
   }];
+  var message = helpDescriptors.map(function (descriptor) {
+    return descriptor.keymap ? [descriptor.description, (0, _keymaps.getAriaKeyshortcuts)(descriptor.keymap)] : [descriptor.description];
+  }).join('. ');
   var renderButton = function renderButton() {
-    return (0, _react2.jsx)("button", {
-      type: "button",
-      css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
-      ref: buttonRef
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
-      style: (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
-      onClick: handleOnClick,
-      onMouseDown: (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
-      onKeyDown: handleKeyDown,
-      "data-testid": "block-ctrl-drag-handle"
-    }, (0, _react2.jsx)(_dragHandler.default, {
-      label: "",
-      size: "medium"
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/design-system/no-html-button
+      (0, _react2.jsx)("button", {
+        type: "button",
+        css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
+        ref: buttonRef
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
+        onClick: handleOnClick,
+        onMouseDown: (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+        onKeyDown: handleKeyDown,
+        "data-testid": "block-ctrl-drag-handle"
+      }, (0, _react2.jsx)(_dragHandler.default, {
+        label: "",
+        size: "medium"
+      }))
+    );
   };
   return (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873') ? (0, _react2.jsx)(_tooltip.default, {
     content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
-    })
+    }),
+    onShow: function onShow() {
+      var _api$accessibilityUti;
+      api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(message, {
+        priority: 'important'
+      });
+    }
   }, renderButton()) : renderButton();
 };
 var DragHandle = exports.DragHandle = (0, _reactIntlNext.injectIntl)(DragHandleInternal);

package/dist/cjs/ui/drop-target.js

@@ -79,7 +79,8 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
     id = _ref3.id,
     prevNode = _ref3.prevNode,
-    nextNode = _ref3.nextNode;
+    nextNode = _ref3.nextNode,
+    formatMessage = _ref3.formatMessage;
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -119,11 +120,11 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
         if (activeNode && pos !== undefined) {
           var _api$core, _api$blockControls2;
           var start = activeNode.pos;
-          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos));
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos, undefined, formatMessage));
         }
       }
     });
-  }, [id, api]);
+  }, [id, api, formatMessage]);
   var topTargetMarginStyle = (0, _react.useMemo)(function () {
     return getDropTargetPositionStyle(prevNode, nextNode);
   }, [prevNode, nextNode]);

package/dist/es2019/commands/move-node.js

@@ -1,4 +1,5 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
@@ -46,7 +47,7 @@ const getCurrentNodePos = state => {
   }
   return currentNodePos;
 };
-export const moveNodeViaShortcut = (api, direction) => {
+export const moveNodeViaShortcut = (api, direction, formatMessage) => {
   return state => {
     const currentNodePos = getCurrentNodePos(state);
     if (currentNodePos > -1) {
@@ -73,7 +74,7 @@ export const moveNodeViaShortcut = (api, direction) => {
         api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
           tr
         }) => {
-          moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT)({
+          moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
             tr
           });
           tr.scrollIntoView();
@@ -96,7 +97,7 @@ export const moveNodeViaShortcut = (api, direction) => {
     return false;
   };
 };
-export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_DROP) => ({
+export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_DROP, formatMessage) => ({
   tr
 }) => {
   var _node$nodeSize, _api$analytics;
@@ -139,5 +140,12 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
       })
     }
   })(tr);
+  if (fg('platform_editor_element_drag_and_drop_ed_23873')) {
+    var _api$accessibilityUti;
+    const movedMessage = to > start ? blockControlsMessages.movedDown : blockControlsMessages.movedup;
+    api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify(formatMessage ? formatMessage(movedMessage) : movedMessage.defaultMessage, {
+      priority: 'important'
+    });
+  }
   return tr;
 };

package/dist/es2019/pm-plugins/decorations.js

@@ -9,7 +9,7 @@ import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
 const NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
-export const dropTargetDecorations = (oldState, newState, api) => {
+export const dropTargetDecorations = (oldState, newState, api, formatMessage) => {
   const decs = [];
   unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
@@ -40,6 +40,7 @@ export const dropTargetDecorations = (oldState, newState, api) => {
     const dropTargetDec = /*#__PURE__*/createElement(DropTarget, {
       api,
       id: fg('platform_editor_elements_dnd_nested') ? pos : index,
+      formatMessage,
       prevNode,
       nextNode: node
     });
@@ -82,7 +83,8 @@ export const dropTargetDecorations = (oldState, newState, api) => {
     element.setAttribute('data-blocks-drop-target-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
       api,
-      id: fg('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length
+      id: fg('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length,
+      formatMessage
     }), element);
     return element;
   }, {

package/dist/es2019/pm-plugins/keymap.js

@@ -4,7 +4,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { moveNodeViaShortcut } from '../commands/move-node';
 import { showDragHandleAtSelection } from '../commands/show-drag-handle';
 import { DIRECTION } from '../consts';
-function keymapList(api) {
+function keymapList(api, formatMessage) {
   let keymapList = {};
   if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
     bindKeymapWithCommand(showElementDragHandle.common, (state, dispatch, view) => {
@@ -12,9 +12,9 @@ function keymapList(api) {
       //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
       return true;
     }, keymapList);
-    bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP), keymapList);
-    bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN), keymapList);
+    bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP, formatMessage), keymapList);
+    bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN, formatMessage), keymapList);
   }
   return keymapList;
 }
-export const boundKeydownHandler = api => keydownHandler(keymapList(api));
+export const boundKeydownHandler = (api, formatMessage) => keydownHandler(keymapList(api, formatMessage));

package/dist/es2019/pm-plugins/main.js

@@ -174,6 +174,9 @@ export const createPlugin = (api, getIntl) => {
         // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
         const maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? void 0 : (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
         const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+        const {
+          formatMessage
+        } = getIntl();
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
@@ -262,7 +265,7 @@ export const createPlugin = (api, getIntl) => {
               const {
                 decs,
                 decorationState: updatedDecorationState
-              } = dropTargetDecorations(oldState, newState, api);
+              } = dropTargetDecorations(oldState, newState, api, formatMessage);
               decorationState = updatedDecorationState;
               decorations = decorations.add(newState.doc, decs);
             }
@@ -289,7 +292,7 @@ export const createPlugin = (api, getIntl) => {
               const {
                 decs,
                 decorationState: updatedDecorationState
-              } = dropTargetDecorations(oldState, newState, api);
+              } = dropTargetDecorations(oldState, newState, api, formatMessage);
               decorationState = updatedDecorationState;
               decorations = decorations.add(newState.doc, decs);
             }
@@ -447,11 +450,12 @@ export const createPlugin = (api, getIntl) => {
               return true;
             }
           }
-
-          //NOTE: altKey === 'option' on MacOS
-          if (event.altKey && event.shiftKey && event.ctrlKey && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+          if (event.shiftKey && event.ctrlKey && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+            const {
+              formatMessage
+            } = getIntl();
             //prevent holding down key combo from firing repeatedly
-            if (!event.repeat && boundKeydownHandler(api)(view, event)) {
+            if (!event.repeat && boundKeydownHandler(api, formatMessage)(view, event)) {
               event.preventDefault();
               return true;
             }

package/dist/es2019/ui/drag-handle.js

@@ -9,7 +9,7 @@ import { bind } from 'bind-event-listener';
 import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { dragToMoveDown, dragToMoveUp, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
+import { dragToMoveDown, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
@@ -353,7 +353,12 @@ const DragHandleInternal = ({
     description: formatMessage(blockControlsMessages.moveDown),
     keymap: dragToMoveDown
   }];
-  const renderButton = () => jsx("button", {
+  const message = helpDescriptors.map(descriptor => {
+    return descriptor.keymap ? [descriptor.description, getAriaKeyshortcuts(descriptor.keymap)] : [descriptor.description];
+  }).join('. ');
+  const renderButton = () =>
+  // eslint-disable-next-line @atlaskit/design-system/no-html-button
+  jsx("button", {
     type: "button",
     css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
     ref: buttonRef
@@ -371,7 +376,13 @@ const DragHandleInternal = ({
   return fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
-    })
+    }),
+    onShow: () => {
+      var _api$accessibilityUti;
+      api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify(message, {
+        priority: 'important'
+      });
+    }
   }, renderButton()) : renderButton();
 };
 export const DragHandle = injectIntl(DragHandleInternal);

package/dist/es2019/ui/drop-target.js

@@ -65,7 +65,8 @@ export const DropTarget = ({
   api,
   id,
   prevNode,
-  nextNode
+  nextNode,
+  formatMessage
 }) => {
   const ref = useRef(null);
   const [isDraggedOver, setIsDraggedOver] = useState(false);
@@ -104,11 +105,11 @@ export const DropTarget = ({
           const {
             pos: start
           } = activeNode;
-          api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveNode(start, pos));
+          api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveNode(start, pos, undefined, formatMessage));
         }
       }
     });
-  }, [id, api]);
+  }, [id, api, formatMessage]);
   const topTargetMarginStyle = useMemo(() => {
     return getDropTargetPositionStyle(prevNode, nextNode);
   }, [prevNode, nextNode]);

package/dist/esm/commands/move-node.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
@@ -46,7 +47,7 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
   }
   return currentNodePos;
 };
-export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction) {
+export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
   return function (state) {
     var currentNodePos = getCurrentNodePos(state);
     if (currentNodePos > -1) {
@@ -72,7 +73,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction) {
         var _api$core;
         api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
           var tr = _ref2.tr;
-          moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT)({
+          moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
             tr: tr
           });
           tr.scrollIntoView();
@@ -97,6 +98,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction) {
 export var moveNode = function moveNode(api) {
   return function (start, to) {
     var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.DRAG_AND_DROP;
+    var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
     return function (_ref4) {
       var _node$nodeSize, _api$analytics;
       var tr = _ref4.tr;
@@ -138,6 +140,13 @@ export var moveNode = function moveNode(api) {
           inputMethod: inputMethod
         })
       })(tr);
+      if (fg('platform_editor_element_drag_and_drop_ed_23873')) {
+        var _api$accessibilityUti;
+        var movedMessage = to > start ? blockControlsMessages.movedDown : blockControlsMessages.movedup;
+        api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(formatMessage ? formatMessage(movedMessage) : movedMessage.defaultMessage, {
+          priority: 'important'
+        });
+      }
       return tr;
     };
   };

package/dist/esm/pm-plugins/decorations.js

@@ -10,7 +10,7 @@ import { DropTarget } from '../ui/drop-target';
 import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
 var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
 var NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
-export var dropTargetDecorations = function dropTargetDecorations(oldState, newState, api) {
+export var dropTargetDecorations = function dropTargetDecorations(oldState, newState, api, formatMessage) {
   var decs = [];
   unmountDecorations('data-blocks-drop-target-container');
   // Decoration state is used to keep track of the position of the drop targets
@@ -41,6 +41,7 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
     var dropTargetDec = /*#__PURE__*/createElement(DropTarget, {
       api: api,
       id: fg('platform_editor_elements_dnd_nested') ? pos : index,
+      formatMessage: formatMessage,
       prevNode: prevNode,
       nextNode: node
     });
@@ -83,7 +84,8 @@ export var dropTargetDecorations = function dropTargetDecorations(oldState, newS
     element.setAttribute('data-blocks-drop-target-container', 'true');
     ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
       api: api,
-      id: fg('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length
+      id: fg('platform_editor_elements_dnd_nested') ? lastPos : decorationState.length,
+      formatMessage: formatMessage
     }), element);
     return element;
   }, {

package/dist/esm/pm-plugins/keymap.js

@@ -4,7 +4,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { moveNodeViaShortcut } from '../commands/move-node';
 import { showDragHandleAtSelection } from '../commands/show-drag-handle';
 import { DIRECTION } from '../consts';
-function keymapList(api) {
+function keymapList(api, formatMessage) {
   var keymapList = {};
   if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
     bindKeymapWithCommand(showElementDragHandle.common, function (state, dispatch, view) {
@@ -12,11 +12,11 @@ function keymapList(api) {
       //we always want to handle this shortcut to prevent default browser special char insert when option + alphabetical key is used
       return true;
     }, keymapList);
-    bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP), keymapList);
-    bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN), keymapList);
+    bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP, formatMessage), keymapList);
+    bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN, formatMessage), keymapList);
   }
   return keymapList;
 }
-export var boundKeydownHandler = function boundKeydownHandler(api) {
-  return keydownHandler(keymapList(api));
+export var boundKeydownHandler = function boundKeydownHandler(api, formatMessage) {
+  return keydownHandler(keymapList(api, formatMessage));
 };

package/dist/esm/pm-plugins/main.js

@@ -177,6 +177,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
         // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
         var maybeNodeWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
         var redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || nodeCountChanged || maybeNodeWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+        var _getIntl = getIntl(),
+          formatMessage = _getIntl.formatMessage;
 
         // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
         if (redrawDecorations && !isResizerResizing && api) {
@@ -266,7 +268,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
             // Add drop targets when node is being dragged
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             if (shouldUpdateDropTargets || isBlocksDragTargetDebug()) {
-              var _dropTargetDecoration = dropTargetDecorations(oldState, newState, api),
+              var _dropTargetDecoration = dropTargetDecorations(oldState, newState, api, formatMessage),
                 _decs2 = _dropTargetDecoration.decs,
                 updatedDecorationState = _dropTargetDecoration.decorationState;
               decorationState = updatedDecorationState;
@@ -291,7 +293,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
             // if the transaction is only for analytics and user is dragging, continue to draw drop targets
             var shouldShowDragTarget = (meta === null || meta === void 0 ? void 0 : meta.isDragging) && (!tr.docChanged || tr.docChanged && isAnalyticTr);
             if (shouldShowDragTarget || isBlocksDragTargetDebug()) {
-              var _dropTargetDecoration2 = dropTargetDecorations(oldState, newState, api),
+              var _dropTargetDecoration2 = dropTargetDecorations(oldState, newState, api, formatMessage),
                 _decs3 = _dropTargetDecoration2.decs,
                 _updatedDecorationState = _dropTargetDecoration2.decorationState;
               decorationState = _updatedDecorationState;
@@ -447,11 +449,11 @@ export var createPlugin = function createPlugin(api, getIntl) {
               return true;
             }
           }
-
-          //NOTE: altKey === 'option' on MacOS
-          if (event.altKey && event.shiftKey && event.ctrlKey && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+          if (event.shiftKey && event.ctrlKey && fg('platform_editor_element_drag_and_drop_ed_23873')) {
+            var _getIntl2 = getIntl(),
+              formatMessage = _getIntl2.formatMessage;
             //prevent holding down key combo from firing repeatedly
-            if (!event.repeat && boundKeydownHandler(api)(view, event)) {
+            if (!event.repeat && boundKeydownHandler(api, formatMessage)(view, event)) {
               event.preventDefault();
               return true;
             }

package/dist/esm/ui/drag-handle.js

@@ -10,7 +10,7 @@ import { bind } from 'bind-event-listener';
 import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { dragToMoveDown, dragToMoveUp, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
+import { dragToMoveDown, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
@@ -358,27 +358,39 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     description: formatMessage(blockControlsMessages.moveDown),
     keymap: dragToMoveDown
   }];
+  var message = helpDescriptors.map(function (descriptor) {
+    return descriptor.keymap ? [descriptor.description, getAriaKeyshortcuts(descriptor.keymap)] : [descriptor.description];
+  }).join('. ');
   var renderButton = function renderButton() {
-    return jsx("button", {
-      type: "button",
-      css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
-      ref: buttonRef
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
-      style: fg('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
-      onClick: handleOnClick,
-      onMouseDown: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
-      onKeyDown: handleKeyDown,
-      "data-testid": "block-ctrl-drag-handle"
-    }, jsx(DragHandlerIcon, {
-      label: "",
-      size: "medium"
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/design-system/no-html-button
+      jsx("button", {
+        type: "button",
+        css: [dragHandleButtonStyles, dragHandleSelected && selectedStyles],
+        ref: buttonRef
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: fg('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
+        onClick: handleOnClick,
+        onMouseDown: fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
+        onKeyDown: handleKeyDown,
+        "data-testid": "block-ctrl-drag-handle"
+      }, jsx(DragHandlerIcon, {
+        label: "",
+        size: "medium"
+      }))
+    );
   };
   return fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
-    })
+    }),
+    onShow: function onShow() {
+      var _api$accessibilityUti;
+      api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(message, {
+        priority: 'important'
+      });
+    }
   }, renderButton()) : renderButton();
 };
 export var DragHandle = injectIntl(DragHandleInternal);

package/dist/esm/ui/drop-target.js

@@ -71,7 +71,8 @@ export var DropTarget = function DropTarget(_ref3) {
   var api = _ref3.api,
     id = _ref3.id,
     prevNode = _ref3.prevNode,
-    nextNode = _ref3.nextNode;
+    nextNode = _ref3.nextNode,
+    formatMessage = _ref3.formatMessage;
   var ref = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -111,11 +112,11 @@ export var DropTarget = function DropTarget(_ref3) {
         if (activeNode && pos !== undefined) {
           var _api$core, _api$blockControls2;
           var start = activeNode.pos;
-          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos));
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos, undefined, formatMessage));
         }
       }
     });
-  }, [id, api]);
+  }, [id, api, formatMessage]);
   var topTargetMarginStyle = useMemo(function () {
     return getDropTargetPositionStyle(prevNode, nextNode);
   }, [prevNode, nextNode]);

package/dist/types/commands/move-node.d.ts

@@ -1,5 +1,6 @@
+import { type IntlShape } from 'react-intl-next';
 import type { Command, EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { DIRECTION } from '../consts';
 import type { BlockControlsPlugin, MoveNodeMethod } from '../types';
-export declare const moveNodeViaShortcut: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, direction: DIRECTION) => Command;
-export declare const moveNode: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;
+export declare const moveNodeViaShortcut: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, direction: DIRECTION, formatMessage?: IntlShape['formatMessage']) => Command;
+export declare const moveNode: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;

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

@@ -3,7 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../types';
-export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => {
+export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage']) => {
     decs: Decoration[];
     decorationState: {
         id: number;

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

@@ -1,3 +1,4 @@
+import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '../types';
-export declare const boundKeydownHandler: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (view: import("prosemirror-view").EditorView, event: KeyboardEvent) => boolean;
+export declare const boundKeydownHandler: (api?: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage?: IntlShape['formatMessage']) => (view: import("prosemirror-view").EditorView, event: KeyboardEvent) => boolean;

package/dist/types/types.d.ts

@@ -1,5 +1,7 @@
+import { type IntlShape } from 'react-intl-next';
 import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -45,11 +47,12 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         OptionalPlugin<EditorDisabledPlugin>,
         OptionalPlugin<WidthPlugin>,
         OptionalPlugin<FeatureFlagsPlugin>,
-        OptionalPlugin<AnalyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<AccessibilityUtilsPlugin>
     ];
     sharedState: BlockControlsSharedState;
     commands: {
-        moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;
+        moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
         setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
     };

package/dist/types/ui/drop-target.d.ts

@@ -1,10 +1,16 @@
+/// <reference types="react" />
 import { jsx } from '@emotion/react';
+import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
-export declare const DropTarget: ({ api, id, prevNode, nextNode, }: {
+export declare const DropTarget: ({ api, id, prevNode, nextNode, formatMessage, }: {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     id: number;
     prevNode?: PMNode | undefined;
     nextNode?: PMNode | undefined;
+    formatMessage?: {
+        (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, import("intl-messageformat").PrimitiveType | import("intl-messageformat").FormatXMLElementFn<string, string>> | undefined, opts?: import("intl-messageformat").Options | undefined): string;
+        (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | import("react").ReactPortal | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
+    } | undefined;
 }) => jsx.JSX.Element;

package/dist/types-ts4.5/commands/move-node.d.ts

@@ -1,5 +1,6 @@
+import { type IntlShape } from 'react-intl-next';
 import type { Command, EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { DIRECTION } from '../consts';
 import type { BlockControlsPlugin, MoveNodeMethod } from '../types';
-export declare const moveNodeViaShortcut: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, direction: DIRECTION) => Command;
-export declare const moveNode: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;
+export declare const moveNodeViaShortcut: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, direction: DIRECTION, formatMessage?: IntlShape['formatMessage']) => Command;
+export declare const moveNode: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;

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

@@ -3,7 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { BlockControlsPlugin, HandleOptions } from '../types';
-export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>) => {
+export declare const dropTargetDecorations: (oldState: EditorState, newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage']) => {
     decs: Decoration[];
     decorationState: {
         id: number;

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

@@ -1,3 +1,4 @@
+import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '../types';
-export declare const boundKeydownHandler: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (view: import("prosemirror-view").EditorView, event: KeyboardEvent) => boolean;
+export declare const boundKeydownHandler: (api?: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage?: IntlShape['formatMessage']) => (view: import("prosemirror-view").EditorView, event: KeyboardEvent) => boolean;

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

@@ -1,5 +1,7 @@
+import { type IntlShape } from 'react-intl-next';
 import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -45,11 +47,12 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         OptionalPlugin<EditorDisabledPlugin>,
         OptionalPlugin<WidthPlugin>,
         OptionalPlugin<FeatureFlagsPlugin>,
-        OptionalPlugin<AnalyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<AccessibilityUtilsPlugin>
     ];
     sharedState: BlockControlsSharedState;
     commands: {
-        moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod) => EditorCommand;
+        moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
         setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => EditorCommand;
     };

package/dist/types-ts4.5/ui/drop-target.d.ts

@@ -1,10 +1,16 @@
+/// <reference types="react" />
 import { jsx } from '@emotion/react';
+import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { BlockControlsPlugin } from '../types';
-export declare const DropTarget: ({ api, id, prevNode, nextNode, }: {
+export declare const DropTarget: ({ api, id, prevNode, nextNode, formatMessage, }: {
     api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
     id: number;
     prevNode?: PMNode | undefined;
     nextNode?: PMNode | undefined;
+    formatMessage?: {
+        (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, import("intl-messageformat").PrimitiveType | import("intl-messageformat").FormatXMLElementFn<string, string>> | undefined, opts?: import("intl-messageformat").Options | undefined): string;
+        (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | import("react").ReactPortal | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
+    } | undefined;
 }) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "1.10.1",
+	"version": "1.10.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.3.0",
-		"@atlaskit/editor-common": "^87.2.0",
+		"@atlaskit/editor-common": "^87.3.0",
+		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
@@ -40,7 +41,7 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.8.0",
+		"@atlaskit/icon": "^22.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",