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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @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
 
 ### Minor Changes

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;
@@ -408,7 +410,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
             if (!nodeElement) {
               return false;
             }
-            var nodeTarget = state.doc.nodeAt(view.posAtDOM(nodeElement, 0) - 1);
+            var domPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
+            var nodeTarget = state.doc.nodeAt(domPos);
             isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
           }
           if (isSameNode) {
@@ -453,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

@@ -68,6 +68,7 @@ var selectedStyles = (0, _react2.css)({
   color: "var(--ds-icon-selected, #0C66E4)"
 });
 var DragHandleInternal = function DragHandleInternal(_ref) {
+  var _api$core2, _api$analytics2, _api$core5, _api$core7;
   var view = _ref.view,
     api = _ref.api,
     getPos = _ref.getPos,
@@ -110,14 +111,15 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
       var _api$analytics;
       var tr = _ref2.tr;
-      if (start === undefined) {
+      var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+      if (startPos === undefined) {
         return tr;
       }
-      tr = (0, _utils.selectNode)(tr, start, nodeType);
+      tr = (0, _utils.selectNode)(tr, startPos, nodeType);
       tr.setMeta(_main.key, {
-        pos: start
+        pos: startPos
       });
-      var resolvedMovingNode = tr.doc.resolve(start);
+      var resolvedMovingNode = tr.doc.resolve(startPos);
       var maybeNode = resolvedMovingNode.nodeAfter;
       (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-long-node-scroll') && tr.setMeta('scrollIntoView', false);
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
@@ -133,14 +135,14 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       return tr;
     });
     view.focus();
-  }, [start, api, view, dragHandleSelected, setDragHandleSelected, nodeType]);
+  }, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, start, nodeType]);
 
   // handleMouseDown required along with onClick to ensure the correct selection
   // is set immediately when the drag handle is clicked. Otherwise browser native
   // drag and drop can take over and cause unpredictable behaviour.
   var handleMouseDown = (0, _react.useCallback)(function () {
-    var _api$core2;
-    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
+    var _api$core3;
+    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
       if (start === undefined) {
         return tr;
@@ -158,44 +160,47 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
   // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
   // but ensures the preview is generated correctly.
   var handleMouseDownWrapperRemoved = (0, _react.useCallback)(function () {
-    var _api$core3;
-    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
+    var _api$core4;
+    api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref4) {
       var tr = _ref4.tr;
-      if (start === undefined) {
+      var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+      if (startPos === undefined) {
         return tr;
       }
-      var node = tr.doc.nodeAt(start);
+      var node = tr.doc.nodeAt(startPos);
       if (!node) {
         return tr;
       }
-      var $startPos = tr.doc.resolve(start + node.nodeSize);
+      var $startPos = tr.doc.resolve(startPos + node.nodeSize);
       var selection = new _state.TextSelection($startPos);
       tr.setSelection(selection);
       tr.setMeta(_main.key, {
-        pos: start
+        pos: startPos
       });
       return tr;
     });
-  }, [start, api]);
+  }, [api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions, getPos, start]);
   var handleKeyDown = (0, _react.useCallback)(function (e) {
     if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
       // allow user to use spacebar to select the node
+
       if (!e.repeat && e.key === ' ') {
-        var _api$core4;
-        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref5) {
+        var _api$core6;
+        var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
+        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref5) {
           var tr = _ref5.tr;
-          if (start === undefined) {
+          if (startPos === undefined) {
             return tr;
           }
-          var node = tr.doc.nodeAt(start);
+          var node = tr.doc.nodeAt(startPos);
           if (!node) {
             return tr;
           }
-          var $startPos = tr.doc.resolve(start + node.nodeSize);
+          var $startPos = tr.doc.resolve(startPos + node.nodeSize);
           var selection = new _state.TextSelection($startPos);
           tr.setSelection(selection);
           tr.setMeta(_main.key, {
-            pos: start
+            pos: startPos
           });
           return tr;
         });
@@ -207,7 +212,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         view.focus();
       }
     }
-  }, [start, api, view]);
+  }, [getPos, start, api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions, view]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -236,12 +241,12 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core5;
+        var _api$core8;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref8) {
-          var _api$blockControls, _api$analytics2;
+        api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref8) {
+          var _api$blockControls, _api$analytics3;
           var tr = _ref8.tr;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
             tr: tr
@@ -249,7 +254,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
           tr.setMeta('scrollIntoView', false);
-          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
+          api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.attachAnalyticsEvent({
             eventType: _analytics.EVENT_TYPE.UI,
             action: _analytics.ACTION.DRAGGED,
             actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
@@ -362,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);
             }
@@ -398,7 +401,8 @@ export const createPlugin = (api, getIntl) => {
             if (!nodeElement) {
               return false;
             }
-            const nodeTarget = state.doc.nodeAt(view.posAtDOM(nodeElement, 0) - 1);
+            const domPos = fg('platform_editor_element_drag_and_drop_ed_24304') ? Math.max(view.posAtDOM(nodeElement, 0) - 1, 0) : view.posAtDOM(nodeElement, 0) - 1;
+            const nodeTarget = state.doc.nodeAt(domPos);
             isSameNode = !!(nodeTarget && draggable !== null && draggable !== void 0 && draggable.eq(nodeTarget));
           }
           if (isSameNode) {
@@ -446,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;
             }