@atlaskit/editor-plugin-expand 20.0.1 → 20.0.3

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

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

@@ -2,11 +2,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/es2019/singlePlayerExpand/node-views/index.js

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

@@ -2,9 +2,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/es2019/singlePlayerExpand/ui/NodeView.js

@@ -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/es2019/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 const ExpandQuickInsertMenuItem = ({

package/dist/esm/entry-points/plugin.js

@@ -1,2 +1,3 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
+
 export { expandPlugin } from '../plugin';