npm - @atlaskit/editor-plugin-expand - Versions diffs - 20.0.2 → 20.0.3 - Mend

@atlaskit/editor-plugin-expand 20.0.2 → 20.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/CHANGELOG.md +19 -0
package/dist/cjs/legacyExpand/nodeviews/index.js +50 -21
package/dist/cjs/singlePlayerExpand/node-views/index.js +33 -17
package/dist/cjs/singlePlayerExpand/ui/NodeView.js +18 -6
package/dist/es2019/legacyExpand/nodeviews/index.js +86 -54
package/dist/es2019/singlePlayerExpand/node-views/index.js +32 -16
package/dist/es2019/singlePlayerExpand/ui/NodeView.js +19 -5
package/dist/esm/legacyExpand/nodeviews/index.js +49 -21
package/dist/esm/singlePlayerExpand/node-views/index.js +34 -18
package/dist/esm/singlePlayerExpand/ui/NodeView.js +17 -5
package/dist/types/legacyExpand/nodeviews/index.d.ts +1 -0
package/dist/types/singlePlayerExpand/ui/NodeView.d.ts +1 -0
package/package.json +5 -5

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-expand
+## 20.0.3
+### Patch Changes
+- [`ad905e52e6f1b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ad905e52e6f1b) -
+  CONFCLOUD-84260: Include the expand title in body accessible names, localize the macro role
+  description, and keep them updated behind `platform_editor_expand_content_a11y_2`.
+- [`fc26bfc51dd5c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fc26bfc51dd5c) -
+  Add sparse block-control surface anchors, intersection-driven candidates, and explicit visibility
+  invalidation for registry-backed block controls. Expose registration change subscriptions from the
+  UI control registry model, and refresh cached visibility from suggestion and collapse transaction
+  metadata. Under `platform_editor_block_control_migration`, use native node-anchor identity across
+  Editor and Block Controls, and route expand keyboard focus through the shared Block Controls
+  command. Preserve Show Diff visibility checks in both migration cohorts so block controls stay
+  hidden while a diff is displayed. Keep the block menu closed when a migrated layout-column handle
+  opens the layout menu, and close the layout menu when the selection moves away from its selected
+  columns.
+- Updated dependencies
 ## 20.0.2
 ### Patch Changes

package/dist/cjs/legacyExpand/nodeviews/index.js CHANGED Viewed

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ExpandNodeView = void 0;
 exports.default = _default;
+exports.getExpandBodyAriaLabel = getExpandBodyAriaLabel;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _uuid = require("uuid");
 var _w3cKeyname = require("w3c-keyname");
+var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -32,7 +34,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function buildExpandClassName(type, expanded) {
   return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), " ").concat(expanded ? _styles.expandClassNames.expanded : '');
 }
+function getExpandBodyAriaLabel(title, intl) {
+  var safeTitle = title.trim() || (intl === null || intl === void 0 ? void 0 : intl.formatMessage(_ui.expandMessages.expandBodyAriaLabelUntitled)) || _ui.expandMessages.expandBodyAriaLabelUntitled.defaultMessage;
+  return (intl === null || intl === void 0 ? void 0 : intl.formatMessage(_ui.expandMessages.expandBodyAriaLabel, {
+    title: safeTitle
+  })) || _ui.expandMessages.expandBodyAriaLabel.defaultMessage.replace('{title}', safeTitle);
+}
 var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
+  var _node$attrs$title, _intl$formatMessage;
   return ['div', _objectSpread({
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, __livePage ? !node.attrs.__expanded : node.attrs.__expanded),
@@ -64,14 +73,19 @@ var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditabl
     placeholder: intl && intl.formatMessage(_ui.expandMessages.expandPlaceholderText) || _ui.expandMessages.expandPlaceholderText.defaultMessage,
     type: 'text',
     readonly: titleReadOnly ? 'true' : undefined
-  }]]], ['div', {
+  }]]], [(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_content_a11y_2') ? 'section' : 'div', _objectSpread(_objectSpread({
     // prettier-ignore
     class: "".concat(_styles.expandClassNames.content, " ").concat((__livePage ? !node.attrs.__expanded : node.attrs.__expanded) ? '' : _styles.expandClassNames.contentCollapsed),
-    contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined,
+    contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
+  }, !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_content_a11y_2') && {
     role: 'textbox',
     'aria-multiline': 'true',
-    'aria-label': intl && intl.formatMessage(_ui.expandMessages.expandBodyAriaLabel) || _ui.expandMessages.expandBodyAriaLabel.defaultMessage
-  }, 0]];
+    'aria-label': intl && intl.formatMessage(_ui.expandMessages.expandBodyAriaLabelOriginal) || _ui.expandMessages.expandBodyAriaLabelOriginal.defaultMessage
+  }), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_content_a11y_2') && {
+    'aria-label': getExpandBodyAriaLabel((_node$attrs$title = node.attrs.title) !== null && _node$attrs$title !== void 0 ? _node$attrs$title : '', intl),
+    'aria-description': (intl === null || intl === void 0 ? void 0 : intl.formatMessage(_ui.expandMessages.expandBodyAriaDescription)) || _ui.expandMessages.expandBodyAriaDescription.defaultMessage,
+    'aria-roledescription': (_intl$formatMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(_ui.expandMessages.expandBodyRoleDescription)) !== null && _intl$formatMessage !== void 0 ? _intl$formatMessage : _ui.expandMessages.expandBodyRoleDescription.defaultMessage
+  }), 0]];
 };
 var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI) {
@@ -202,21 +216,30 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
             (_this$api3 = _this.api) === null || _this$api3 === void 0 || _this$api3.core.actions.execute(function (_ref) {
               var tr = _ref.tr;
               tr.setSelection(_state.NodeSelection.create(state.doc, pos));
-              // Show the drag handle on the selected expand node
+              if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
+                var _this$api4;
+                var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showControlAtPosition(pos, _surfaceKeys.BLOCK_CONTROLS_DRAG_HANDLE, {
+                  isFocused: true
+                });
+                if (command) {
+                  return command({
+                    tr: tr
+                  });
+                }
+                return null;
+              }
               var node = state.doc.nodeAt(pos);
               if (node) {
-                // Find the anchor name from the DOM
                 var dom = _this.view.nodeDOM(pos);
                 if (dom instanceof HTMLElement) {
                   var anchorName = dom.getAttribute('data-node-anchor');
-                  // Only proceed if we found a valid anchor name
                   if (anchorName) {
-                    var _this$api4;
-                    var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showDragHandleAt(pos, anchorName, node.type.name, {
+                    var _this$api5;
+                    var _command = (_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.blockControls) === null || _this$api5 === void 0 ? void 0 : _this$api5.commands.showDragHandleAt(pos, anchorName, node.type.name, {
                       isFocused: true
                     });
-                    if (command) {
-                      return command({
+                    if (_command) {
+                      return _command({
                         tr: tr
                       });
                     }
@@ -294,8 +317,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
       var state = _this.view.state;
       var expandNode = _this.node;
       if (expandNode && (0, _utils.isEmptyNode)(state.schema)(expandNode)) {
-        var _this$api5;
-        (0, _commands.deleteExpandAtPos)((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.analytics) === null || _this$api5 === void 0 ? void 0 : _this$api5.actions)(pos, expandNode)(state, _this.view.dispatch);
+        var _this$api6;
+        (0, _commands.deleteExpandAtPos)((_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions)(pos, expandNode)(state, _this.view.dispatch);
       }
     });
     (0, _defineProperty2.default)(this, "toggleExpand", function () {
@@ -304,12 +327,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (_this.allowInteractiveExpand) {
-        var _this$api6;
+        var _this$api7;
         var _this$view4 = _this.view,
           state = _this$view4.state,
           dispatch = _this$view4.dispatch;
         (0, _commands.toggleExpandExpanded)({
-          editorAnalyticsAPI: (_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions,
+          editorAnalyticsAPI: (_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.analytics) === null || _this$api7 === void 0 ? void 0 : _this$api7.actions,
           pos: pos,
           nodeType: _this.node.type,
           __livePage: _this.__livePage
@@ -461,13 +484,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input6.selectionStart,
         selectionEnd = _this$input6.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api7;
+        var _this$api8;
         event.preventDefault();
         var _this$view0 = _this.view,
           state = _this$view0.state,
           dispatch = _this$view0.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.selection) === null || _this$api7 === void 0 ? void 0 : _this$api7.sharedState.currentState()) || {};
+        var selectionSharedState = ((_this$api8 = _this.api) === null || _this$api8 === void 0 || (_this$api8 = _this$api8.selection) === null || _this$api8 === void 0 ? void 0 : _this$api8.sharedState.currentState()) || {};
         // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
         // This is a special case where we want to bypass node selection and jump straight to gap cursor
         if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -554,7 +577,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   return (0, _createClass2.default)(ExpandNodeView, [{
     key: "initHandlers",
     value: function initHandlers() {
-      var _this$api8,
+      var _this$api9,
         _this2 = this;
       if (this.dom) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -580,7 +603,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.icon.addEventListener('keydown', this.handleIconKeyDown);
       }
-      if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
+      if ((_this$api9 = this.api) !== null && _this$api9 !== void 0 && _this$api9.editorDisabled) {
         this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
           var editorDisabled = sharedState.nextSharedState.editorDisabled;
           if (_this2.input) {
@@ -650,13 +673,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "isLimitedModeEnabled",
     value: function isLimitedModeEnabled() {
-      var _this$api9;
+      var _this$api0;
       // Read from `this.view.state` via the exposed plugin key rather than the shared state's
       // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
       // API's editor state isn't wired up yet).
       //
       // Reads the plugin's derived `enabled`, so this covers every reason limited mode can be on.
-      return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedMode) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.sharedState.currentState()) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedModePluginKey) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.getState(this.view.state)) === null || _this$api9 === void 0 ? void 0 : _this$api9.enabled);
+      return Boolean((_this$api0 = this.api) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.limitedMode) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.sharedState.currentState()) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.limitedModePluginKey) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.getState(this.view.state)) === null || _this$api0 === void 0 ? void 0 : _this$api0.enabled);
     }
   }, {
     key: "stopEvent",
@@ -718,6 +741,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
             _this4.input.value = _this4.node.attrs.title;
           }
         });
+        if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_content_a11y_2')) {
+          if (this.node.attrs.title !== node.attrs.title && this.content) {
+            var _node$attrs$title2;
+            this.content.setAttribute('aria-label', getExpandBodyAriaLabel((_node$attrs$title2 = node.attrs.title) !== null && _node$attrs$title2 !== void 0 ? _node$attrs$title2 : '', this.intl));
+          }
+        }
         this.node = node;
         return true;
       }

package/dist/cjs/singlePlayerExpand/node-views/index.js CHANGED Viewed

@@ -12,6 +12,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _uuid = require("uuid");
 var _w3cKeyname = require("w3c-keyname");
+var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _expand = require("@atlaskit/editor-common/expand");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -34,7 +35,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     var _this = this,
       _expandedState$get,
       _api$editorDisabled,
-      _this$api8;
+      _this$api9;
     var allowInteractiveExpand = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
     var __livePage = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
     var cleanUpEditorDisabledOnChange = arguments.length > 10 ? arguments[10] : undefined;
@@ -160,21 +161,30 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
             (_this$api3 = _this.api) === null || _this$api3 === void 0 || _this$api3.core.actions.execute(function (_ref) {
               var tr = _ref.tr;
               tr.setSelection(_state.NodeSelection.create(state.doc, pos));
-              // Show the drag handle on the selected expand node
+              if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration')) {
+                var _this$api4;
+                var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showControlAtPosition(pos, _surfaceKeys.BLOCK_CONTROLS_DRAG_HANDLE, {
+                  isFocused: true
+                });
+                if (command) {
+                  return command({
+                    tr: tr
+                  });
+                }
+                return null;
+              }
               var node = state.doc.nodeAt(pos);
               if (node) {
-                // Find the anchor name from the DOM
                 var dom = _this.view.nodeDOM(pos);
                 if (dom instanceof HTMLElement) {
                   var anchorName = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? dom.getAttribute('data-node-anchor') : dom.getAttribute('data-drag-handler-anchor-name');
-                  // Only proceed if we found a valid anchor name
                   if (anchorName) {
-                    var _this$api4;
-                    var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showDragHandleAt(pos, anchorName, node.type.name, {
+                    var _this$api5;
+                    var _command = (_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.blockControls) === null || _this$api5 === void 0 ? void 0 : _this$api5.commands.showDragHandleAt(pos, anchorName, node.type.name, {
                       isFocused: true
                     });
-                    if (command) {
-                      return command({
+                    if (_command) {
+                      return _command({
                         tr: tr
                       });
                     }
@@ -247,8 +257,8 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (expandNode && (0, _utils.isEmptyNode)(state.schema)(expandNode)) {
-        var _this$api5;
-        (0, _commands.deleteExpand)((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.analytics) === null || _this$api5 === void 0 ? void 0 : _this$api5.actions)(state, _this.view.dispatch);
+        var _this$api6;
+        (0, _commands.deleteExpand)((_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions)(state, _this.view.dispatch);
       }
     });
     (0, _defineProperty2.default)(this, "toggleExpand", function () {
@@ -257,12 +267,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (_this.allowInteractiveExpand) {
-        var _this$api6;
+        var _this$api7;
         var _this$view3 = _this.view,
           state = _this$view3.state,
           dispatch = _this$view3.dispatch;
         (0, _commands.toggleExpandExpanded)({
-          editorAnalyticsAPI: (_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions,
+          editorAnalyticsAPI: (_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.analytics) === null || _this$api7 === void 0 ? void 0 : _this$api7.actions,
           pos: pos,
           node: _this.node
         })(state, dispatch);
@@ -416,13 +426,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input6.selectionStart,
         selectionEnd = _this$input6.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api7;
+        var _this$api8;
         event.preventDefault();
         var _this$view9 = _this.view,
           state = _this$view9.state,
           dispatch = _this$view9.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.selection) === null || _this$api7 === void 0 ? void 0 : _this$api7.sharedState.currentState()) || {};
+        var selectionSharedState = ((_this$api8 = _this.api) === null || _this$api8 === void 0 || (_this$api8 = _this$api8.selection) === null || _this$api8 === void 0 ? void 0 : _this$api8.sharedState.currentState()) || {};
         // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
         // This is a special case where we want to bypass node selection and jump straight to gap cursor
         if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -538,7 +548,7 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
     // Prevent ProseMirror from getting a focus event (causes weird selection issues).
     this.titleContainer.addEventListener('focus', this.handleFocus);
     this.icon.addEventListener('keydown', this.handleIconKeyDown);
-    if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
+    if ((_this$api9 = this.api) !== null && _this$api9 !== void 0 && _this$api9.editorDisabled) {
       if ((0, _isExperimentEnabled.isExperimentEnabled)('cc_editor_limited_mode_perf_improvements')) {
         if (this.content) {
           this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
@@ -610,6 +620,12 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
           }
         });
+        // Sync up the aria-label with the current expand title.
+        if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_content_a11y_2') && this.node.attrs.title !== node.attrs.title && this.content) {
+          var _node$attrs$title;
+          this.content.setAttribute('aria-label', (0, _NodeView.getExpandBodyAriaLabel)((_node$attrs$title = node.attrs.title) !== null && _node$attrs$title !== void 0 ? _node$attrs$title : '', this.intl));
+        }
         // This checks if the node has been replaced with a different version
         // and updates the state of the new node to match the old one
         // Eg. typing in a node changes it to a new node so it must be updated
@@ -666,13 +682,13 @@ var ExpandNodeView = exports.ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "isLimitedModeEnabled",
     value: function isLimitedModeEnabled() {
-      var _this$api9;
+      var _this$api0;
       // Read from `this.view.state` via the exposed plugin key rather than the shared state's
       // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
       // API's editor state isn't wired up yet).
       //
       // Reads the plugin's derived `enabled`, so this covers every reason limited mode can be on.
-      return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedMode) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.sharedState.currentState()) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedModePluginKey) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.getState(this.view.state)) === null || _this$api9 === void 0 ? void 0 : _this$api9.enabled);
+      return Boolean((_this$api0 = this.api) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.limitedMode) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.sharedState.currentState()) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.limitedModePluginKey) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.getState(this.view.state)) === null || _this$api0 === void 0 ? void 0 : _this$api0.enabled);
     }
   }, {
     key: "updateDisplayStyle",

package/dist/cjs/singlePlayerExpand/ui/NodeView.js CHANGED Viewed

@@ -4,19 +4,26 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toDOM = exports.buildExpandClassName = void 0;
+exports.toDOM = exports.getExpandBodyAriaLabel = exports.buildExpandClassName = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _expand = require("@atlaskit/editor-common/expand");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 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) { (0, _defineProperty2.default)(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; }
 var buildExpandClassName = exports.buildExpandClassName = function buildExpandClassName(type, expanded) {
   return "".concat(_styles.expandClassNames.prefix, " ").concat(_styles.expandClassNames.type(type), " ").concat(expanded ? _styles.expandClassNames.expanded : '');
 };
+var getExpandBodyAriaLabel = exports.getExpandBodyAriaLabel = function getExpandBodyAriaLabel(title, intl) {
+  var safeTitle = title.trim() || (intl === null || intl === void 0 ? void 0 : intl.formatMessage(_ui.expandMessages.expandBodyAriaLabelUntitled)) || _ui.expandMessages.expandBodyAriaLabelUntitled.defaultMessage;
+  return (intl === null || intl === void 0 ? void 0 : intl.formatMessage(_ui.expandMessages.expandBodyAriaLabel, {
+    title: safeTitle
+  })) || _ui.expandMessages.expandBodyAriaLabel.defaultMessage.replace('{title}', safeTitle);
+};
 var toDOM = exports.toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
-  var _expandedState$get;
+  var _expandedState$get, _node$attrs$title, _intl$formatMessage;
   return ['div', _objectSpread({
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, (_expandedState$get = _expand.expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false),
@@ -48,12 +55,17 @@ var toDOM = exports.toDOM = function toDOM(node, __livePage, intl, titleReadOnly
     placeholder: intl && typeof intl.formatMessage === 'function' && intl.formatMessage(_ui.expandMessages.expandPlaceholderText) || _ui.expandMessages.expandPlaceholderText.defaultMessage,
     type: 'text',
     readonly: titleReadOnly ? 'true' : undefined
-  }]]], ['div', {
+  }]]], [(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_content_a11y_2') ? 'section' : 'div', _objectSpread(_objectSpread({
     // prettier-ignore
     class: "".concat(_styles.expandClassNames.content, " ").concat(_expand.expandedState.get(node) ? '' : _styles.expandClassNames.contentCollapsed),
-    contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined,
+    contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
+  }, !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_content_a11y_2') && {
     role: 'textbox',
     'aria-multiline': 'true',
-    'aria-label': intl && intl.formatMessage(_ui.expandMessages.expandBodyAriaLabel) || _ui.expandMessages.expandBodyAriaLabel.defaultMessage
-  }, 0]];
+    'aria-label': intl && intl.formatMessage(_ui.expandMessages.expandBodyAriaLabelOriginal) || _ui.expandMessages.expandBodyAriaLabelOriginal.defaultMessage
+  }), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_expand_content_a11y_2') && {
+    'aria-label': getExpandBodyAriaLabel((_node$attrs$title = node.attrs.title) !== null && _node$attrs$title !== void 0 ? _node$attrs$title : '', intl),
+    'aria-description': (intl === null || intl === void 0 ? void 0 : intl.formatMessage(_ui.expandMessages.expandBodyAriaDescription)) || _ui.expandMessages.expandBodyAriaDescription.defaultMessage,
+    'aria-roledescription': (_intl$formatMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(_ui.expandMessages.expandBodyRoleDescription)) !== null && _intl$formatMessage !== void 0 ? _intl$formatMessage : _ui.expandMessages.expandBodyRoleDescription.defaultMessage
+  }), 0]];
 };

package/dist/es2019/legacyExpand/nodeviews/index.js CHANGED Viewed

@@ -3,6 +3,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuid } from 'uuid';
 import { keyName } from 'w3c-keyname';
+import { BLOCK_CONTROLS_DRAG_HANDLE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
@@ -21,46 +22,62 @@ import { ExpandIconButton } from '../ui/ExpandIconButton';
 function buildExpandClassName(type, expanded) {
   return `${expandClassNames.prefix} ${expandClassNames.type(type)} ${expanded ? expandClassNames.expanded : ''}`;
 }
-const toDOM = (node, __livePage, intl, titleReadOnly, contentEditable) => ['div', {
-  // prettier-ignore
-  'class': buildExpandClassName(node.type.name, __livePage ? !node.attrs.__expanded : node.attrs.__expanded),
-  'data-node-type': node.type.name,
-  'data-title': node.attrs.title,
-  ...(fg('platform_editor_adf_with_localid') && {
-    'data-local-id': node.attrs.localId
-  })
-}, ['div', {
-  // prettier-ignore
-  'class': expandClassNames.titleContainer,
-  contenteditable: 'false',
-  // Element gains access to focus events.
-  // This is needed to prevent PM gaining access
-  // on interacting with our controls.
-  tabindex: '-1'
-},
-// prettier-ignore
-['div', {
-  'class': expandClassNames.icon,
-  style: `display: flex; width: ${"var(--ds-space-300, 24px)"}; height: ${"var(--ds-space-300, 24px)"}`
-}], ['div', {
-  // prettier-ignore
-  'class': expandClassNames.inputContainer
-}, ['input', {
-  // prettier-ignore
-  'class': expandClassNames.titleInput,
-  'aria-label': intl && intl.formatMessage(expandMessages.expandArialabel) || expandMessages.expandArialabel.defaultMessage,
-  value: node.attrs.title,
-  placeholder: intl && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
-  type: 'text',
-  readonly: titleReadOnly ? 'true' : undefined
-}]]], ['div', {
+export function getExpandBodyAriaLabel(title, intl) {
+  const safeTitle = title.trim() || (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaLabelUntitled)) || expandMessages.expandBodyAriaLabelUntitled.defaultMessage;
+  return (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaLabel, {
+    title: safeTitle
+  })) || expandMessages.expandBodyAriaLabel.defaultMessage.replace('{title}', safeTitle);
+}
+const toDOM = (node, __livePage, intl, titleReadOnly, contentEditable) => {
+  var _node$attrs$title, _intl$formatMessage;
+  return ['div', {
+    // prettier-ignore
+    'class': buildExpandClassName(node.type.name, __livePage ? !node.attrs.__expanded : node.attrs.__expanded),
+    'data-node-type': node.type.name,
+    'data-title': node.attrs.title,
+    ...(fg('platform_editor_adf_with_localid') && {
+      'data-local-id': node.attrs.localId
+    })
+  }, ['div', {
+    // prettier-ignore
+    'class': expandClassNames.titleContainer,
+    contenteditable: 'false',
+    // Element gains access to focus events.
+    // This is needed to prevent PM gaining access
+    // on interacting with our controls.
+    tabindex: '-1'
+  },
   // prettier-ignore
-  class: `${expandClassNames.content} ${(__livePage ? !node.attrs.__expanded : node.attrs.__expanded) ? '' : expandClassNames.contentCollapsed}`,
-  contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined,
-  role: 'textbox',
-  'aria-multiline': 'true',
-  'aria-label': intl && intl.formatMessage(expandMessages.expandBodyAriaLabel) || expandMessages.expandBodyAriaLabel.defaultMessage
-}, 0]];
+  ['div', {
+    'class': expandClassNames.icon,
+    style: `display: flex; width: ${"var(--ds-space-300, 24px)"}; height: ${"var(--ds-space-300, 24px)"}`
+  }], ['div', {
+    // prettier-ignore
+    'class': expandClassNames.inputContainer
+  }, ['input', {
+    // prettier-ignore
+    'class': expandClassNames.titleInput,
+    'aria-label': intl && intl.formatMessage(expandMessages.expandArialabel) || expandMessages.expandArialabel.defaultMessage,
+    value: node.attrs.title,
+    placeholder: intl && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
+    type: 'text',
+    readonly: titleReadOnly ? 'true' : undefined
+  }]]], [isExperimentEnabled('platform_editor_expand_content_a11y_2') ? 'section' : 'div', {
+    // prettier-ignore
+    class: `${expandClassNames.content} ${(__livePage ? !node.attrs.__expanded : node.attrs.__expanded) ? '' : expandClassNames.contentCollapsed}`,
+    contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined,
+    ...(!isExperimentEnabled('platform_editor_expand_content_a11y_2') && {
+      role: 'textbox',
+      'aria-multiline': 'true',
+      'aria-label': intl && intl.formatMessage(expandMessages.expandBodyAriaLabelOriginal) || expandMessages.expandBodyAriaLabelOriginal.defaultMessage
+    }),
+    ...(isExperimentEnabled('platform_editor_expand_content_a11y_2') && {
+      'aria-label': getExpandBodyAriaLabel((_node$attrs$title = node.attrs.title) !== null && _node$attrs$title !== void 0 ? _node$attrs$title : '', intl),
+      'aria-description': (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaDescription)) || expandMessages.expandBodyAriaDescription.defaultMessage,
+      'aria-roledescription': (_intl$formatMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyRoleDescription)) !== null && _intl$formatMessage !== void 0 ? _intl$formatMessage : expandMessages.expandBodyRoleDescription.defaultMessage
+    })
+  }, 0]];
+};
 export class ExpandNodeView {
   constructor(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand = true, __livePage = false, cleanUpEditorDisabledOnChange) {
     var _api$editorDisabled, _api$editorDisabled$s;
@@ -191,17 +208,26 @@ export class ExpandNodeView {
               tr
             }) => {
               tr.setSelection(NodeSelection.create(state.doc, pos));
-              // Show the drag handle on the selected expand node
+              if (isExperimentEnabled('platform_editor_block_control_migration')) {
+                var _this$api4, _this$api4$blockContr;
+                const command = (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$blockContr = _this$api4.blockControls) === null || _this$api4$blockContr === void 0 ? void 0 : _this$api4$blockContr.commands.showControlAtPosition(pos, BLOCK_CONTROLS_DRAG_HANDLE, {
+                  isFocused: true
+                });
+                if (command) {
+                  return command({
+                    tr
+                  });
+                }
+                return null;
+              }
               const node = state.doc.nodeAt(pos);
               if (node) {
-                // Find the anchor name from the DOM
                 const dom = this.view.nodeDOM(pos);
                 if (dom instanceof HTMLElement) {
                   const anchorName = dom.getAttribute('data-node-anchor');
-                  // Only proceed if we found a valid anchor name
                   if (anchorName) {
-                    var _this$api4, _this$api4$blockContr;
-                    const command = (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$blockContr = _this$api4.blockControls) === null || _this$api4$blockContr === void 0 ? void 0 : _this$api4$blockContr.commands.showDragHandleAt(pos, anchorName, node.type.name, {
+                    var _this$api5, _this$api5$blockContr;
+                    const command = (_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$blockContr = _this$api5.blockControls) === null || _this$api5$blockContr === void 0 ? void 0 : _this$api5$blockContr.commands.showDragHandleAt(pos, anchorName, node.type.name, {
                       isFocused: true
                     });
                     if (command) {
@@ -286,8 +312,8 @@ export class ExpandNodeView {
       } = this.view;
       const expandNode = this.node;
       if (expandNode && isEmptyNode(state.schema)(expandNode)) {
-        var _this$api5, _this$api5$analytics;
-        deleteExpandAtPos((_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$analytics = _this$api5.analytics) === null || _this$api5$analytics === void 0 ? void 0 : _this$api5$analytics.actions)(pos, expandNode)(state, this.view.dispatch);
+        var _this$api6, _this$api6$analytics;
+        deleteExpandAtPos((_this$api6 = this.api) === null || _this$api6 === void 0 ? void 0 : (_this$api6$analytics = _this$api6.analytics) === null || _this$api6$analytics === void 0 ? void 0 : _this$api6$analytics.actions)(pos, expandNode)(state, this.view.dispatch);
       }
     });
     _defineProperty(this, "toggleExpand", () => {
@@ -296,13 +322,13 @@ export class ExpandNodeView {
         return;
       }
       if (this.allowInteractiveExpand) {
-        var _this$api6, _this$api6$analytics;
+        var _this$api7, _this$api7$analytics;
         const {
           state,
           dispatch
         } = this.view;
         toggleExpandExpanded({
-          editorAnalyticsAPI: (_this$api6 = this.api) === null || _this$api6 === void 0 ? void 0 : (_this$api6$analytics = _this$api6.analytics) === null || _this$api6$analytics === void 0 ? void 0 : _this$api6$analytics.actions,
+          editorAnalyticsAPI: (_this$api7 = this.api) === null || _this$api7 === void 0 ? void 0 : (_this$api7$analytics = _this$api7.analytics) === null || _this$api7$analytics === void 0 ? void 0 : _this$api7$analytics.actions,
           pos,
           nodeType: this.node.type,
           __livePage: this.__livePage
@@ -464,14 +490,14 @@ export class ExpandNodeView {
         selectionEnd
       } = this.input;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api7, _this$api7$selection;
+        var _this$api8, _this$api8$selection;
         event.preventDefault();
         const {
           state,
           dispatch
         } = this.view;
         this.view.focus();
-        const selectionSharedState = ((_this$api7 = this.api) === null || _this$api7 === void 0 ? void 0 : (_this$api7$selection = _this$api7.selection) === null || _this$api7$selection === void 0 ? void 0 : _this$api7$selection.sharedState.currentState()) || {};
+        const selectionSharedState = ((_this$api8 = this.api) === null || _this$api8 === void 0 ? void 0 : (_this$api8$selection = _this$api8.selection) === null || _this$api8$selection === void 0 ? void 0 : _this$api8$selection.sharedState.currentState()) || {};
         // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
         // This is a special case where we want to bypass node selection and jump straight to gap cursor
         if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -557,7 +583,7 @@ export class ExpandNodeView {
     this.initHandlers();
   }
   initHandlers() {
-    var _this$api8;
+    var _this$api9;
     if (this.dom) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       this.dom.addEventListener('click', this.handleClick);
@@ -582,7 +608,7 @@ export class ExpandNodeView {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       this.icon.addEventListener('keydown', this.handleIconKeyDown);
     }
-    if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
+    if ((_this$api9 = this.api) !== null && _this$api9 !== void 0 && _this$api9.editorDisabled) {
       this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(sharedState => {
         const editorDisabled = sharedState.nextSharedState.editorDisabled;
         if (this.input) {
@@ -642,13 +668,13 @@ export class ExpandNodeView {
     }
   }
   isLimitedModeEnabled() {
-    var _this$api9, _this$api9$limitedMod, _this$api9$limitedMod2, _this$api9$limitedMod3, _this$api9$limitedMod4;
+    var _this$api0, _this$api0$limitedMod, _this$api0$limitedMod2, _this$api0$limitedMod3, _this$api0$limitedMod4;
     // Read from `this.view.state` via the exposed plugin key rather than the shared state's
     // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
     // API's editor state isn't wired up yet).
     //
     // Reads the plugin's derived `enabled`, so this covers every reason limited mode can be on.
-    return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 ? void 0 : (_this$api9$limitedMod = _this$api9.limitedMode) === null || _this$api9$limitedMod === void 0 ? void 0 : (_this$api9$limitedMod2 = _this$api9$limitedMod.sharedState.currentState()) === null || _this$api9$limitedMod2 === void 0 ? void 0 : (_this$api9$limitedMod3 = _this$api9$limitedMod2.limitedModePluginKey) === null || _this$api9$limitedMod3 === void 0 ? void 0 : (_this$api9$limitedMod4 = _this$api9$limitedMod3.getState(this.view.state)) === null || _this$api9$limitedMod4 === void 0 ? void 0 : _this$api9$limitedMod4.enabled);
+    return Boolean((_this$api0 = this.api) === null || _this$api0 === void 0 ? void 0 : (_this$api0$limitedMod = _this$api0.limitedMode) === null || _this$api0$limitedMod === void 0 ? void 0 : (_this$api0$limitedMod2 = _this$api0$limitedMod.sharedState.currentState()) === null || _this$api0$limitedMod2 === void 0 ? void 0 : (_this$api0$limitedMod3 = _this$api0$limitedMod2.limitedModePluginKey) === null || _this$api0$limitedMod3 === void 0 ? void 0 : (_this$api0$limitedMod4 = _this$api0$limitedMod3.getState(this.view.state)) === null || _this$api0$limitedMod4 === void 0 ? void 0 : _this$api0$limitedMod4.enabled);
   }
   stopEvent(event) {
     // Ignored via go/ees005
@@ -701,6 +727,12 @@ export class ExpandNodeView {
           this.input.value = this.node.attrs.title;
         }
       });
+      if (isExperimentEnabled('platform_editor_expand_content_a11y_2')) {
+        if (this.node.attrs.title !== node.attrs.title && this.content) {
+          var _node$attrs$title2;
+          this.content.setAttribute('aria-label', getExpandBodyAriaLabel((_node$attrs$title2 = node.attrs.title) !== null && _node$attrs$title2 !== void 0 ? _node$attrs$title2 : '', this.intl));
+        }
+      }
       this.node = node;
       return true;
     }

package/dist/es2019/singlePlayerExpand/node-views/index.js CHANGED Viewed

@@ -3,6 +3,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuid } from 'uuid';
 import { keyName } from 'w3c-keyname';
+import { BLOCK_CONTROLS_DRAG_HANDLE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { expandedState, isExpandCollapsed } from '@atlaskit/editor-common/expand';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
@@ -17,13 +18,13 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { renderExpandButton } from '../../ui/renderExpandButton';
 import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
 import { ExpandButton } from '../ui/ExpandButton';
-import { buildExpandClassName, toDOM } from '../ui/NodeView';
+import { buildExpandClassName, getExpandBodyAriaLabel, toDOM } from '../ui/NodeView';
 import { findReplaceExpandDecorations } from '../utils';
 export class ExpandNodeView {
   constructor(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI, allowInteractiveExpand = true, __livePage = false, cleanUpEditorDisabledOnChange, isExpanded = {
     expanded: false
   }) {
-    var _expandedState$get, _api$editorDisabled, _api$editorDisabled$s, _this$api8;
+    var _expandedState$get, _api$editorDisabled, _api$editorDisabled$s, _this$api9;
     _defineProperty(this, "allowInteractiveExpand", true);
     _defineProperty(this, "isMobile", false);
     _defineProperty(this, "focusTitle", () => {
@@ -147,17 +148,26 @@ export class ExpandNodeView {
               tr
             }) => {
               tr.setSelection(NodeSelection.create(state.doc, pos));
-              // Show the drag handle on the selected expand node
+              if (isExperimentEnabled('platform_editor_block_control_migration')) {
+                var _this$api4, _this$api4$blockContr;
+                const command = (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$blockContr = _this$api4.blockControls) === null || _this$api4$blockContr === void 0 ? void 0 : _this$api4$blockContr.commands.showControlAtPosition(pos, BLOCK_CONTROLS_DRAG_HANDLE, {
+                  isFocused: true
+                });
+                if (command) {
+                  return command({
+                    tr
+                  });
+                }
+                return null;
+              }
               const node = state.doc.nodeAt(pos);
               if (node) {
-                // Find the anchor name from the DOM
                 const dom = this.view.nodeDOM(pos);
                 if (dom instanceof HTMLElement) {
                   const anchorName = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? dom.getAttribute('data-node-anchor') : dom.getAttribute('data-drag-handler-anchor-name');
-                  // Only proceed if we found a valid anchor name
                   if (anchorName) {
-                    var _this$api4, _this$api4$blockContr;
-                    const command = (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$blockContr = _this$api4.blockControls) === null || _this$api4$blockContr === void 0 ? void 0 : _this$api4$blockContr.commands.showDragHandleAt(pos, anchorName, node.type.name, {
+                    var _this$api5, _this$api5$blockContr;
+                    const command = (_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$blockContr = _this$api5.blockControls) === null || _this$api5$blockContr === void 0 ? void 0 : _this$api5$blockContr.commands.showDragHandleAt(pos, anchorName, node.type.name, {
                       isFocused: true
                     });
                     if (command) {
@@ -237,8 +247,8 @@ export class ExpandNodeView {
         return;
       }
       if (expandNode && isEmptyNode(state.schema)(expandNode)) {
-        var _this$api5, _this$api5$analytics;
-        deleteExpand((_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$analytics = _this$api5.analytics) === null || _this$api5$analytics === void 0 ? void 0 : _this$api5$analytics.actions)(state, this.view.dispatch);
+        var _this$api6, _this$api6$analytics;
+        deleteExpand((_this$api6 = this.api) === null || _this$api6 === void 0 ? void 0 : (_this$api6$analytics = _this$api6.analytics) === null || _this$api6$analytics === void 0 ? void 0 : _this$api6$analytics.actions)(state, this.view.dispatch);
       }
     });
     _defineProperty(this, "toggleExpand", () => {
@@ -247,13 +257,13 @@ export class ExpandNodeView {
         return;
       }
       if (this.allowInteractiveExpand) {
-        var _this$api6, _this$api6$analytics;
+        var _this$api7, _this$api7$analytics;
         const {
           state,
           dispatch
         } = this.view;
         toggleExpandExpanded({
-          editorAnalyticsAPI: (_this$api6 = this.api) === null || _this$api6 === void 0 ? void 0 : (_this$api6$analytics = _this$api6.analytics) === null || _this$api6$analytics === void 0 ? void 0 : _this$api6$analytics.actions,
+          editorAnalyticsAPI: (_this$api7 = this.api) === null || _this$api7 === void 0 ? void 0 : (_this$api7$analytics = _this$api7.analytics) === null || _this$api7$analytics === void 0 ? void 0 : _this$api7$analytics.actions,
           pos,
           node: this.node
         })(state, dispatch);
@@ -417,14 +427,14 @@ export class ExpandNodeView {
         selectionEnd
       } = this.input;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api7, _this$api7$selection;
+        var _this$api8, _this$api8$selection;
         event.preventDefault();
         const {
           state,
           dispatch
         } = this.view;
         this.view.focus();
-        const selectionSharedState = ((_this$api7 = this.api) === null || _this$api7 === void 0 ? void 0 : (_this$api7$selection = _this$api7.selection) === null || _this$api7$selection === void 0 ? void 0 : _this$api7$selection.sharedState.currentState()) || {};
+        const selectionSharedState = ((_this$api8 = this.api) === null || _this$api8 === void 0 ? void 0 : (_this$api8$selection = _this$api8.selection) === null || _this$api8$selection === void 0 ? void 0 : _this$api8$selection.sharedState.currentState()) || {};
         // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
         // This is a special case where we want to bypass node selection and jump straight to gap cursor
         if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -539,7 +549,7 @@ export class ExpandNodeView {
     // Prevent ProseMirror from getting a focus event (causes weird selection issues).
     this.titleContainer.addEventListener('focus', this.handleFocus);
     this.icon.addEventListener('keydown', this.handleIconKeyDown);
-    if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
+    if ((_this$api9 = this.api) !== null && _this$api9 !== void 0 && _this$api9.editorDisabled) {
       if (isExperimentEnabled('cc_editor_limited_mode_perf_improvements')) {
         if (this.content) {
           this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
@@ -604,6 +614,12 @@ export class ExpandNodeView {
         }
       });
+      // Sync up the aria-label with the current expand title.
+      if (isExperimentEnabled('platform_editor_expand_content_a11y_2') && this.node.attrs.title !== node.attrs.title && this.content) {
+        var _node$attrs$title;
+        this.content.setAttribute('aria-label', getExpandBodyAriaLabel((_node$attrs$title = node.attrs.title) !== null && _node$attrs$title !== void 0 ? _node$attrs$title : '', this.intl));
+      }
       // This checks if the node has been replaced with a different version
       // and updates the state of the new node to match the old one
       // Eg. typing in a node changes it to a new node so it must be updated
@@ -652,13 +668,13 @@ export class ExpandNodeView {
     };
   }
   isLimitedModeEnabled() {
-    var _this$api9, _this$api9$limitedMod, _this$api9$limitedMod2, _this$api9$limitedMod3, _this$api9$limitedMod4;
+    var _this$api0, _this$api0$limitedMod, _this$api0$limitedMod2, _this$api0$limitedMod3, _this$api0$limitedMod4;
     // Read from `this.view.state` via the exposed plugin key rather than the shared state's
     // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
     // API's editor state isn't wired up yet).
     //
     // Reads the plugin's derived `enabled`, so this covers every reason limited mode can be on.
-    return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 ? void 0 : (_this$api9$limitedMod = _this$api9.limitedMode) === null || _this$api9$limitedMod === void 0 ? void 0 : (_this$api9$limitedMod2 = _this$api9$limitedMod.sharedState.currentState()) === null || _this$api9$limitedMod2 === void 0 ? void 0 : (_this$api9$limitedMod3 = _this$api9$limitedMod2.limitedModePluginKey) === null || _this$api9$limitedMod3 === void 0 ? void 0 : (_this$api9$limitedMod4 = _this$api9$limitedMod3.getState(this.view.state)) === null || _this$api9$limitedMod4 === void 0 ? void 0 : _this$api9$limitedMod4.enabled);
+    return Boolean((_this$api0 = this.api) === null || _this$api0 === void 0 ? void 0 : (_this$api0$limitedMod = _this$api0.limitedMode) === null || _this$api0$limitedMod === void 0 ? void 0 : (_this$api0$limitedMod2 = _this$api0$limitedMod.sharedState.currentState()) === null || _this$api0$limitedMod2 === void 0 ? void 0 : (_this$api0$limitedMod3 = _this$api0$limitedMod2.limitedModePluginKey) === null || _this$api0$limitedMod3 === void 0 ? void 0 : (_this$api0$limitedMod4 = _this$api0$limitedMod3.getState(this.view.state)) === null || _this$api0$limitedMod4 === void 0 ? void 0 : _this$api0$limitedMod4.enabled);
   }
   updateDisplayStyle(node) {
     if (this.content) {

package/dist/es2019/singlePlayerExpand/ui/NodeView.js CHANGED Viewed

@@ -1,12 +1,19 @@
 import { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 export const buildExpandClassName = (type, expanded) => {
   return `${expandClassNames.prefix} ${expandClassNames.type(type)} ${expanded ? expandClassNames.expanded : ''}`;
 };
+export const getExpandBodyAriaLabel = (title, intl) => {
+  const safeTitle = title.trim() || (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaLabelUntitled)) || expandMessages.expandBodyAriaLabelUntitled.defaultMessage;
+  return (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaLabel, {
+    title: safeTitle
+  })) || expandMessages.expandBodyAriaLabel.defaultMessage.replace('{title}', safeTitle);
+};
 export const toDOM = (node, __livePage, intl, titleReadOnly, contentEditable) => {
-  var _expandedState$get;
+  var _expandedState$get, _node$attrs$title, _intl$formatMessage;
   return ['div', {
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false),
@@ -39,12 +46,19 @@ export const toDOM = (node, __livePage, intl, titleReadOnly, contentEditable) =>
     placeholder: intl && typeof intl.formatMessage === 'function' && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
     type: 'text',
     readonly: titleReadOnly ? 'true' : undefined
-  }]]], ['div', {
+  }]]], [isExperimentEnabled('platform_editor_expand_content_a11y_2') ? 'section' : 'div', {
     // prettier-ignore
     class: `${expandClassNames.content} ${expandedState.get(node) ? '' : expandClassNames.contentCollapsed}`,
     contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined,
-    role: 'textbox',
-    'aria-multiline': 'true',
-    'aria-label': intl && intl.formatMessage(expandMessages.expandBodyAriaLabel) || expandMessages.expandBodyAriaLabel.defaultMessage
+    ...(!isExperimentEnabled('platform_editor_expand_content_a11y_2') && {
+      role: 'textbox',
+      'aria-multiline': 'true',
+      'aria-label': intl && intl.formatMessage(expandMessages.expandBodyAriaLabelOriginal) || expandMessages.expandBodyAriaLabelOriginal.defaultMessage
+    }),
+    ...(isExperimentEnabled('platform_editor_expand_content_a11y_2') && {
+      'aria-label': getExpandBodyAriaLabel((_node$attrs$title = node.attrs.title) !== null && _node$attrs$title !== void 0 ? _node$attrs$title : '', intl),
+      'aria-description': (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaDescription)) || expandMessages.expandBodyAriaDescription.defaultMessage,
+      'aria-roledescription': (_intl$formatMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyRoleDescription)) !== null && _intl$formatMessage !== void 0 ? _intl$formatMessage : expandMessages.expandBodyRoleDescription.defaultMessage
+    })
   }, 0]];
 };

package/dist/esm/legacyExpand/nodeviews/index.js CHANGED Viewed

@@ -7,6 +7,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuid } from 'uuid';
 import { keyName } from 'w3c-keyname';
+import { BLOCK_CONTROLS_DRAG_HANDLE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
@@ -25,7 +26,14 @@ import { ExpandIconButton } from '../ui/ExpandIconButton';
 function buildExpandClassName(type, expanded) {
   return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), " ").concat(expanded ? expandClassNames.expanded : '');
 }
+export function getExpandBodyAriaLabel(title, intl) {
+  var safeTitle = title.trim() || (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaLabelUntitled)) || expandMessages.expandBodyAriaLabelUntitled.defaultMessage;
+  return (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaLabel, {
+    title: safeTitle
+  })) || expandMessages.expandBodyAriaLabel.defaultMessage.replace('{title}', safeTitle);
+}
 var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
+  var _node$attrs$title, _intl$formatMessage;
   return ['div', _objectSpread({
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, __livePage ? !node.attrs.__expanded : node.attrs.__expanded),
@@ -57,14 +65,19 @@ var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditabl
     placeholder: intl && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
     type: 'text',
     readonly: titleReadOnly ? 'true' : undefined
-  }]]], ['div', {
+  }]]], [isExperimentEnabled('platform_editor_expand_content_a11y_2') ? 'section' : 'div', _objectSpread(_objectSpread({
     // prettier-ignore
     class: "".concat(expandClassNames.content, " ").concat((__livePage ? !node.attrs.__expanded : node.attrs.__expanded) ? '' : expandClassNames.contentCollapsed),
-    contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined,
+    contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
+  }, !isExperimentEnabled('platform_editor_expand_content_a11y_2') && {
     role: 'textbox',
     'aria-multiline': 'true',
-    'aria-label': intl && intl.formatMessage(expandMessages.expandBodyAriaLabel) || expandMessages.expandBodyAriaLabel.defaultMessage
-  }, 0]];
+    'aria-label': intl && intl.formatMessage(expandMessages.expandBodyAriaLabelOriginal) || expandMessages.expandBodyAriaLabelOriginal.defaultMessage
+  }), isExperimentEnabled('platform_editor_expand_content_a11y_2') && {
+    'aria-label': getExpandBodyAriaLabel((_node$attrs$title = node.attrs.title) !== null && _node$attrs$title !== void 0 ? _node$attrs$title : '', intl),
+    'aria-description': (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaDescription)) || expandMessages.expandBodyAriaDescription.defaultMessage,
+    'aria-roledescription': (_intl$formatMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyRoleDescription)) !== null && _intl$formatMessage !== void 0 ? _intl$formatMessage : expandMessages.expandBodyRoleDescription.defaultMessage
+  }), 0]];
 };
 export var ExpandNodeView = /*#__PURE__*/function () {
   function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI) {
@@ -195,21 +208,30 @@ export var ExpandNodeView = /*#__PURE__*/function () {
             (_this$api3 = _this.api) === null || _this$api3 === void 0 || _this$api3.core.actions.execute(function (_ref) {
               var tr = _ref.tr;
               tr.setSelection(NodeSelection.create(state.doc, pos));
-              // Show the drag handle on the selected expand node
+              if (isExperimentEnabled('platform_editor_block_control_migration')) {
+                var _this$api4;
+                var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showControlAtPosition(pos, BLOCK_CONTROLS_DRAG_HANDLE, {
+                  isFocused: true
+                });
+                if (command) {
+                  return command({
+                    tr: tr
+                  });
+                }
+                return null;
+              }
               var node = state.doc.nodeAt(pos);
               if (node) {
-                // Find the anchor name from the DOM
                 var dom = _this.view.nodeDOM(pos);
                 if (dom instanceof HTMLElement) {
                   var anchorName = dom.getAttribute('data-node-anchor');
-                  // Only proceed if we found a valid anchor name
                   if (anchorName) {
-                    var _this$api4;
-                    var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showDragHandleAt(pos, anchorName, node.type.name, {
+                    var _this$api5;
+                    var _command = (_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.blockControls) === null || _this$api5 === void 0 ? void 0 : _this$api5.commands.showDragHandleAt(pos, anchorName, node.type.name, {
                       isFocused: true
                     });
-                    if (command) {
-                      return command({
+                    if (_command) {
+                      return _command({
                         tr: tr
                       });
                     }
@@ -287,8 +309,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
       var state = _this.view.state;
       var expandNode = _this.node;
       if (expandNode && isEmptyNode(state.schema)(expandNode)) {
-        var _this$api5;
-        deleteExpandAtPos((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.analytics) === null || _this$api5 === void 0 ? void 0 : _this$api5.actions)(pos, expandNode)(state, _this.view.dispatch);
+        var _this$api6;
+        deleteExpandAtPos((_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions)(pos, expandNode)(state, _this.view.dispatch);
       }
     });
     _defineProperty(this, "toggleExpand", function () {
@@ -297,12 +319,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (_this.allowInteractiveExpand) {
-        var _this$api6;
+        var _this$api7;
         var _this$view4 = _this.view,
           state = _this$view4.state,
           dispatch = _this$view4.dispatch;
         toggleExpandExpanded({
-          editorAnalyticsAPI: (_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions,
+          editorAnalyticsAPI: (_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.analytics) === null || _this$api7 === void 0 ? void 0 : _this$api7.actions,
           pos: pos,
           nodeType: _this.node.type,
           __livePage: _this.__livePage
@@ -454,13 +476,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input6.selectionStart,
         selectionEnd = _this$input6.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api7;
+        var _this$api8;
         event.preventDefault();
         var _this$view0 = _this.view,
           state = _this$view0.state,
           dispatch = _this$view0.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.selection) === null || _this$api7 === void 0 ? void 0 : _this$api7.sharedState.currentState()) || {};
+        var selectionSharedState = ((_this$api8 = _this.api) === null || _this$api8 === void 0 || (_this$api8 = _this$api8.selection) === null || _this$api8 === void 0 ? void 0 : _this$api8.sharedState.currentState()) || {};
         // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
         // This is a special case where we want to bypass node selection and jump straight to gap cursor
         if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -547,7 +569,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
   return _createClass(ExpandNodeView, [{
     key: "initHandlers",
     value: function initHandlers() {
-      var _this$api8,
+      var _this$api9,
         _this2 = this;
       if (this.dom) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -573,7 +595,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         this.icon.addEventListener('keydown', this.handleIconKeyDown);
       }
-      if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
+      if ((_this$api9 = this.api) !== null && _this$api9 !== void 0 && _this$api9.editorDisabled) {
         this.cleanUpEditorDisabledOnChange = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
           var editorDisabled = sharedState.nextSharedState.editorDisabled;
           if (_this2.input) {
@@ -643,13 +665,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "isLimitedModeEnabled",
     value: function isLimitedModeEnabled() {
-      var _this$api9;
+      var _this$api0;
       // Read from `this.view.state` via the exposed plugin key rather than the shared state's
       // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
       // API's editor state isn't wired up yet).
       //
       // Reads the plugin's derived `enabled`, so this covers every reason limited mode can be on.
-      return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedMode) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.sharedState.currentState()) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedModePluginKey) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.getState(this.view.state)) === null || _this$api9 === void 0 ? void 0 : _this$api9.enabled);
+      return Boolean((_this$api0 = this.api) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.limitedMode) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.sharedState.currentState()) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.limitedModePluginKey) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.getState(this.view.state)) === null || _this$api0 === void 0 ? void 0 : _this$api0.enabled);
     }
   }, {
     key: "stopEvent",
@@ -711,6 +733,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
             _this4.input.value = _this4.node.attrs.title;
           }
         });
+        if (isExperimentEnabled('platform_editor_expand_content_a11y_2')) {
+          if (this.node.attrs.title !== node.attrs.title && this.content) {
+            var _node$attrs$title2;
+            this.content.setAttribute('aria-label', getExpandBodyAriaLabel((_node$attrs$title2 = node.attrs.title) !== null && _node$attrs$title2 !== void 0 ? _node$attrs$title2 : '', this.intl));
+          }
+        }
         this.node = node;
         return true;
       }

package/dist/esm/singlePlayerExpand/node-views/index.js CHANGED Viewed

@@ -5,6 +5,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuid } from 'uuid';
 import { keyName } from 'w3c-keyname';
+import { BLOCK_CONTROLS_DRAG_HANDLE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { expandedState, isExpandCollapsed } from '@atlaskit/editor-common/expand';
 import { GapCursorSelection, RelativeSelectionPos, Side } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
@@ -19,14 +20,14 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { renderExpandButton } from '../../ui/renderExpandButton';
 import { deleteExpand, setSelectionInsideExpand, toggleExpandExpanded, updateExpandTitle } from '../commands';
 import { ExpandButton } from '../ui/ExpandButton';
-import { buildExpandClassName, toDOM } from '../ui/NodeView';
+import { buildExpandClassName, getExpandBodyAriaLabel, toDOM } from '../ui/NodeView';
 import { findReplaceExpandDecorations } from '../utils';
 export var ExpandNodeView = /*#__PURE__*/function () {
   function ExpandNodeView(_node, view, getPos, getIntl, isMobile, selectNearNode, api, nodeViewPortalProviderAPI) {
     var _this = this,
       _expandedState$get,
       _api$editorDisabled,
-      _this$api8;
+      _this$api9;
     var allowInteractiveExpand = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
     var __livePage = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
     var cleanUpEditorDisabledOnChange = arguments.length > 10 ? arguments[10] : undefined;
@@ -152,21 +153,30 @@ export var ExpandNodeView = /*#__PURE__*/function () {
             (_this$api3 = _this.api) === null || _this$api3 === void 0 || _this$api3.core.actions.execute(function (_ref) {
               var tr = _ref.tr;
               tr.setSelection(NodeSelection.create(state.doc, pos));
-              // Show the drag handle on the selected expand node
+              if (isExperimentEnabled('platform_editor_block_control_migration')) {
+                var _this$api4;
+                var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showControlAtPosition(pos, BLOCK_CONTROLS_DRAG_HANDLE, {
+                  isFocused: true
+                });
+                if (command) {
+                  return command({
+                    tr: tr
+                  });
+                }
+                return null;
+              }
               var node = state.doc.nodeAt(pos);
               if (node) {
-                // Find the anchor name from the DOM
                 var dom = _this.view.nodeDOM(pos);
                 if (dom instanceof HTMLElement) {
                   var anchorName = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? dom.getAttribute('data-node-anchor') : dom.getAttribute('data-drag-handler-anchor-name');
-                  // Only proceed if we found a valid anchor name
                   if (anchorName) {
-                    var _this$api4;
-                    var command = (_this$api4 = _this.api) === null || _this$api4 === void 0 || (_this$api4 = _this$api4.blockControls) === null || _this$api4 === void 0 ? void 0 : _this$api4.commands.showDragHandleAt(pos, anchorName, node.type.name, {
+                    var _this$api5;
+                    var _command = (_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.blockControls) === null || _this$api5 === void 0 ? void 0 : _this$api5.commands.showDragHandleAt(pos, anchorName, node.type.name, {
                       isFocused: true
                     });
-                    if (command) {
-                      return command({
+                    if (_command) {
+                      return _command({
                         tr: tr
                       });
                     }
@@ -239,8 +249,8 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (expandNode && isEmptyNode(state.schema)(expandNode)) {
-        var _this$api5;
-        deleteExpand((_this$api5 = _this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.analytics) === null || _this$api5 === void 0 ? void 0 : _this$api5.actions)(state, _this.view.dispatch);
+        var _this$api6;
+        deleteExpand((_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions)(state, _this.view.dispatch);
       }
     });
     _defineProperty(this, "toggleExpand", function () {
@@ -249,12 +259,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         return;
       }
       if (_this.allowInteractiveExpand) {
-        var _this$api6;
+        var _this$api7;
         var _this$view3 = _this.view,
           state = _this$view3.state,
           dispatch = _this$view3.dispatch;
         toggleExpandExpanded({
-          editorAnalyticsAPI: (_this$api6 = _this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions,
+          editorAnalyticsAPI: (_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.analytics) === null || _this$api7 === void 0 ? void 0 : _this$api7.actions,
           pos: pos,
           node: _this.node
         })(state, dispatch);
@@ -408,13 +418,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
         selectionStart = _this$input6.selectionStart,
         selectionEnd = _this$input6.selectionEnd;
       if (selectionStart === selectionEnd && selectionStart === 0) {
-        var _this$api7;
+        var _this$api8;
         event.preventDefault();
         var _this$view9 = _this.view,
           state = _this$view9.state,
           dispatch = _this$view9.dispatch;
         _this.view.focus();
-        var selectionSharedState = ((_this$api7 = _this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.selection) === null || _this$api7 === void 0 ? void 0 : _this$api7.sharedState.currentState()) || {};
+        var selectionSharedState = ((_this$api8 = _this.api) === null || _this$api8 === void 0 || (_this$api8 = _this$api8.selection) === null || _this$api8 === void 0 ? void 0 : _this$api8.sharedState.currentState()) || {};
         // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
         // This is a special case where we want to bypass node selection and jump straight to gap cursor
         if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
@@ -530,7 +540,7 @@ export var ExpandNodeView = /*#__PURE__*/function () {
     // Prevent ProseMirror from getting a focus event (causes weird selection issues).
     this.titleContainer.addEventListener('focus', this.handleFocus);
     this.icon.addEventListener('keydown', this.handleIconKeyDown);
-    if ((_this$api8 = this.api) !== null && _this$api8 !== void 0 && _this$api8.editorDisabled) {
+    if ((_this$api9 = this.api) !== null && _this$api9 !== void 0 && _this$api9.editorDisabled) {
       if (isExperimentEnabled('cc_editor_limited_mode_perf_improvements')) {
         if (this.content) {
           this.content.setAttribute('contenteditable', this.getContentEditable(this.node) ? 'true' : 'false');
@@ -602,6 +612,12 @@ export var ExpandNodeView = /*#__PURE__*/function () {
           }
         });
+        // Sync up the aria-label with the current expand title.
+        if (isExperimentEnabled('platform_editor_expand_content_a11y_2') && this.node.attrs.title !== node.attrs.title && this.content) {
+          var _node$attrs$title;
+          this.content.setAttribute('aria-label', getExpandBodyAriaLabel((_node$attrs$title = node.attrs.title) !== null && _node$attrs$title !== void 0 ? _node$attrs$title : '', this.intl));
+        }
         // This checks if the node has been replaced with a different version
         // and updates the state of the new node to match the old one
         // Eg. typing in a node changes it to a new node so it must be updated
@@ -658,13 +674,13 @@ export var ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "isLimitedModeEnabled",
     value: function isLimitedModeEnabled() {
-      var _this$api9;
+      var _this$api0;
       // Read from `this.view.state` via the exposed plugin key rather than the shared state's
       // `enabled`, which reads a stale `false` during initial EditorView construction (the injection
       // API's editor state isn't wired up yet).
       //
       // Reads the plugin's derived `enabled`, so this covers every reason limited mode can be on.
-      return Boolean((_this$api9 = this.api) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedMode) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.sharedState.currentState()) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.limitedModePluginKey) === null || _this$api9 === void 0 || (_this$api9 = _this$api9.getState(this.view.state)) === null || _this$api9 === void 0 ? void 0 : _this$api9.enabled);
+      return Boolean((_this$api0 = this.api) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.limitedMode) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.sharedState.currentState()) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.limitedModePluginKey) === null || _this$api0 === void 0 || (_this$api0 = _this$api0.getState(this.view.state)) === null || _this$api0 === void 0 ? void 0 : _this$api0.enabled);
     }
   }, {
     key: "updateDisplayStyle",

package/dist/esm/singlePlayerExpand/ui/NodeView.js CHANGED Viewed

@@ -4,12 +4,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { expandedState } from '@atlaskit/editor-common/expand';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { expandMessages } from '@atlaskit/editor-common/ui';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 export var buildExpandClassName = function buildExpandClassName(type, expanded) {
   return "".concat(expandClassNames.prefix, " ").concat(expandClassNames.type(type), " ").concat(expanded ? expandClassNames.expanded : '');
 };
+export var getExpandBodyAriaLabel = function getExpandBodyAriaLabel(title, intl) {
+  var safeTitle = title.trim() || (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaLabelUntitled)) || expandMessages.expandBodyAriaLabelUntitled.defaultMessage;
+  return (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaLabel, {
+    title: safeTitle
+  })) || expandMessages.expandBodyAriaLabel.defaultMessage.replace('{title}', safeTitle);
+};
 export var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, contentEditable) {
-  var _expandedState$get;
+  var _expandedState$get, _node$attrs$title, _intl$formatMessage;
   return ['div', _objectSpread({
     // prettier-ignore
     'class': buildExpandClassName(node.type.name, (_expandedState$get = expandedState.get(node)) !== null && _expandedState$get !== void 0 ? _expandedState$get : false),
@@ -41,12 +48,17 @@ export var toDOM = function toDOM(node, __livePage, intl, titleReadOnly, content
     placeholder: intl && typeof intl.formatMessage === 'function' && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
     type: 'text',
     readonly: titleReadOnly ? 'true' : undefined
-  }]]], ['div', {
+  }]]], [isExperimentEnabled('platform_editor_expand_content_a11y_2') ? 'section' : 'div', _objectSpread(_objectSpread({
     // prettier-ignore
     class: "".concat(expandClassNames.content, " ").concat(expandedState.get(node) ? '' : expandClassNames.contentCollapsed),
-    contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined,
+    contenteditable: contentEditable !== undefined ? contentEditable ? 'true' : 'false' : undefined
+  }, !isExperimentEnabled('platform_editor_expand_content_a11y_2') && {
     role: 'textbox',
     'aria-multiline': 'true',
-    'aria-label': intl && intl.formatMessage(expandMessages.expandBodyAriaLabel) || expandMessages.expandBodyAriaLabel.defaultMessage
-  }, 0]];
+    'aria-label': intl && intl.formatMessage(expandMessages.expandBodyAriaLabelOriginal) || expandMessages.expandBodyAriaLabelOriginal.defaultMessage
+  }), isExperimentEnabled('platform_editor_expand_content_a11y_2') && {
+    'aria-label': getExpandBodyAriaLabel((_node$attrs$title = node.attrs.title) !== null && _node$attrs$title !== void 0 ? _node$attrs$title : '', intl),
+    'aria-description': (intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyAriaDescription)) || expandMessages.expandBodyAriaDescription.defaultMessage,
+    'aria-roledescription': (_intl$formatMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(expandMessages.expandBodyRoleDescription)) !== null && _intl$formatMessage !== void 0 ? _intl$formatMessage : expandMessages.expandBodyRoleDescription.defaultMessage
+  }), 0]];
 };

package/dist/types/legacyExpand/nodeviews/index.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ import type { ExtractInjectionAPI, getPosHandler, getPosHandlerNode } from '@atl
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { ExpandPlugin } from '../../types';
+export declare function getExpandBodyAriaLabel(title: string, intl?: IntlShape): string;
 export declare class ExpandNodeView implements NodeView {
     private selectNearNode;
     private __livePage;

package/dist/types/singlePlayerExpand/ui/NodeView.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export declare const buildExpandClassName: (type: string, expanded: boolean) => string;
+export declare const getExpandBodyAriaLabel: (title: string, intl?: IntlShape) => string;
 export declare const toDOM: (node: PmNode, __livePage: boolean, intl?: IntlShape, titleReadOnly?: boolean, contentEditable?: boolean) => DOMOutputSpec;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-expand",
-	"version": "20.0.2",
+	"version": "20.0.3",
 	"description": "Expand plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -22,9 +22,9 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^57.5.0",
-		"@atlaskit/button": "^25.3.0",
+		"@atlaskit/button": "^25.4.0",
 		"@atlaskit/editor-plugin-analytics": "^19.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^20.0.0",
+		"@atlaskit/editor-plugin-block-controls": "^20.1.0",
 		"@atlaskit/editor-plugin-block-menu": "^18.0.0",
 		"@atlaskit/editor-plugin-decorations": "^19.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^19.0.0",
@@ -37,7 +37,7 @@
 		"@atlaskit/editor-shared-styles": "^4.3.0",
 		"@atlaskit/editor-tables": "^3.2.0",
 		"@atlaskit/editor-toolbar": "^2.7.0",
-		"@atlaskit/editor-ui-control-model": "^2.9.0",
+		"@atlaskit/editor-ui-control-model": "^2.10.0",
 		"@atlaskit/icon": "^37.7.0",
 		"@atlaskit/icon-lab": "^7.9.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
@@ -52,7 +52,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.2.0",
+		"@atlaskit/editor-common": "^123.3.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"