@atlaskit/editor-plugin-expand 20.0.1 → 20.0.3

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

@@ -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/legacyExpand/plugin.js

@@ -5,11 +5,11 @@ import React from 'react';
 import { expandWithNestedExpand } from '@atlaskit/adf-schema/expand';
 import { nestedExpand } from '@atlaskit/adf-schema/nested-expand';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { IconExpand } from '@atlaskit/editor-common/assets';
 import { TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { IconExpand } from '@atlaskit/editor-common/assets';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { toggleExpandRange } from '../editor-commands/toggleExpandRange';
 import { createExpandBlockMenuItem } from '../ui/ExpandBlockMenuItem';
 import { getExpandQuickInsertComponents } from '../ui/quick-insert/getExpandQuickInsertComponents';

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

@@ -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/plugin.js

@@ -5,9 +5,9 @@ import React from 'react';
 import { expandWithNestedExpand, expandWithNestedExpandLocalId } from '@atlaskit/adf-schema/expand';
 import { nestedExpand, nestedExpandWithLocalId } from '@atlaskit/adf-schema/nested-expand';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { IconExpand } from '@atlaskit/editor-common/assets';
 import { TRANSFORM_STRUCTURE_EXPAND_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { IconExpand } from '@atlaskit/editor-common/assets';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';

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

@@ -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/esm/ui/quick-insert/ExpandQuickInsertMenuItem.js

@@ -5,8 +5,8 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import ExpandElementIcon from '@atlaskit/icon-lab/core/expand-element';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createExpandNode as createLegacyExpandNode } from '../../legacyExpand/commands';
 import { createExpandNode as createSinglePlayerExpandNode, wrapSelectionAndSetExpandedState } from '../../singlePlayerExpand/commands';
 export var ExpandQuickInsertMenuItem = function ExpandQuickInsertMenuItem(_ref) {

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

@@ -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

@@ -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/dist/types/types.d.ts

@@ -9,9 +9,9 @@ import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmo
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { LimitedModePlugin } from '@atlaskit/editor-plugin-limited-mode/limited-mode-plugin-type';
 import type { LocalIdPlugin } from '@atlaskit/editor-plugin-local-id';
-import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { SelectionMarkerPlugin } from '@atlaskit/editor-plugin-selection-marker';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { insertExpand, insertExpandWithInputMethod } from './legacyExpand/commands';
 export interface ExpandPluginState {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-expand",
-	"version": "20.0.1",
+	"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",
@@ -36,14 +36,14 @@
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-shared-styles": "^4.3.0",
 		"@atlaskit/editor-tables": "^3.2.0",
-		"@atlaskit/editor-toolbar": "^2.6.0",
-		"@atlaskit/editor-ui-control-model": "^2.9.0",
+		"@atlaskit/editor-toolbar": "^2.7.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",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/prosemirror-history": "^1.2.0",
-		"@atlaskit/tmp-editor-statsig": "^200.0.0",
+		"@atlaskit/tmp-editor-statsig": "^201.0.0",
 		"@atlaskit/tokens": "^18.2.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -52,7 +52,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.0.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"