@atlaskit/editor-common 85.0.0 → 85.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-common
 
+## 85.2.0
+
+### Minor Changes
+
+- [#119849](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119849)
+  [`8160c4683046e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8160c4683046e) -
+  EDM-10391 Configure button in smart link in live pages on narrow links now selects link
+
+## 85.1.0
+
+### Minor Changes
+
+- [#119419](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119419)
+  [`a8b716b766200`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a8b716b766200) -
+  [ux] Add keymap for showing drag handle on selected element"
+
+### Patch Changes
+
+- [#120417](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120417)
+  [`26e76bb38b63f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/26e76bb38b63f) -
+  [ux] ECA11Y-175: This changes improves the floating toolbar a11y by making the image border
+  options menu accessible for keyboard-only users, and is behind the feature gate
+  `platform-editor-a11y-image-border-options-dropdown`.
+
 ## 85.0.0
 
 ### Major Changes

package/dist/cjs/keymaps/index.js

@@ -100,8 +100,8 @@ Object.defineProperty(exports, "keymap", {
 exports.makeKeyMapArrayWithCommon = makeKeyMapArrayWithCommon;
 exports.makeKeyMapWithCommon = makeKeyMapWithCommon;
 exports.makeKeymap = makeKeymap;
-exports.toggleBulletList = exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.startColumnResizing = exports.splitListItem = exports.splitCodeBlock = exports.space = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.shiftArrowUp = exports.setNormalText = exports.selectTable = exports.selectRow = exports.selectColumn = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.navToFloatingToolbar = exports.navToEditorToolbar = exports.moveUp = exports.moveRowUp = exports.moveRowDown = exports.moveRight = exports.moveLeft = exports.moveDown = exports.moveColumnRight = exports.moveColumnLeft = void 0;
-exports.toggleUnderline = exports.toggleTaskItemCheckbox = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = exports.toggleHighlightPalette = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = void 0;
+exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.startColumnResizing = exports.splitListItem = exports.splitCodeBlock = exports.space = exports.showElementDragHandle = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.shiftArrowUp = exports.setNormalText = exports.selectTable = exports.selectRow = exports.selectColumn = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.navToFloatingToolbar = exports.navToEditorToolbar = exports.moveUp = exports.moveRowUp = exports.moveRowDown = exports.moveRight = exports.moveLeft = exports.moveDown = exports.moveColumnRight = exports.moveColumnLeft = void 0;
+exports.toggleUnderline = exports.toggleTaskItemCheckbox = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = exports.toggleHighlightPalette = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = exports.toggleBulletList = void 0;
 exports.tooltip = tooltip;
 exports.undo = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -210,6 +210,7 @@ var toggleHighlightPalette = exports.toggleHighlightPalette = makeKeyMapWithComm
 var focusToContextMenuTrigger = exports.focusToContextMenuTrigger = makeKeyMapWithCommon('Focus table context menu trigger', 'Shift-F10');
 var dragToMoveUp = exports.dragToMoveUp = makeKeyMapWithCommon('Move node up in the document', 'Ctrl-Alt-Shift-ArrowUp');
 var dragToMoveDown = exports.dragToMoveDown = makeKeyMapWithCommon('Move node down in the document', 'Ctrl-Alt-Shift-ArrowDown');
+var showElementDragHandle = exports.showElementDragHandle = makeKeyMapWithCommon('Show drag handle for editor element', 'Ctrl-Alt-Shift-a');
 var arrowKeysMap = {
   // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
   ARROWLEFT: "\u2190",

package/dist/cjs/link/ConfigureLinkOverlay/Dropdown.js

@@ -26,7 +26,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
 var Dropdown = function Dropdown(_ref) {
-  var onDropdownChange = _ref.onDropdownChange,
+  var onConfigureClickCallback = _ref.onConfigureClick,
+    onDropdownChange = _ref.onDropdownChange,
     testId = _ref.testId;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
@@ -48,7 +49,8 @@ var Dropdown = function Dropdown(_ref) {
   }, [fireActionClickEvent]);
   var onConfigureClick = (0, _react.useCallback)(function () {
     fireActionClickEvent('configureLink');
-  }, [fireActionClickEvent]);
+    onConfigureClickCallback === null || onConfigureClickCallback === void 0 || onConfigureClickCallback();
+  }, [fireActionClickEvent, onConfigureClickCallback]);
   return (0, _react2.jsx)(_dropdownMenu.default, {
     trigger: function trigger(_ref3) {
       var _onClick = _ref3.onClick,
@@ -80,7 +82,8 @@ var Dropdown = function Dropdown(_ref) {
       label: configureLinkLabel,
       size: 'medium'
     }),
-    onClick: onConfigureClick
+    onClick: onConfigureClick,
+    testId: "".concat(testId, "-dropdown-item-configure")
   }, configureLinkLabel)));
 };
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/link/ConfigureLinkOverlay/index.js

@@ -94,6 +94,7 @@ var OverlayButton = exports.OverlayButton = (0, _analyticsNext.withAnalyticsCont
     "data-testid": testId
   }, showDropdown ? (0, _react2.jsx)(_Dropdown.default, {
     testId: testId,
+    onConfigureClick: handleConfigureClick,
     onDropdownChange: onDropdownChange
   }) : (0, _react2.jsx)(_tooltip.default, {
     content: configureLinkLabel,

package/dist/cjs/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js

@@ -35,7 +35,7 @@ var useLinkOverlayAnalyticsEvents = exports.useLinkOverlayAnalyticsEvents = func
           action: _analytics.ACTION.VIEWED,
           actionSubject: _analytics.ACTION_SUBJECT.INLINE_DIALOG,
           actionSubjectId: _analytics.ACTION_SUBJECT_ID.SMART_LINK_TOOLBAR,
-          eventType: _analytics.EVENT_TYPE.SCREEN,
+          eventType: _analytics.EVENT_TYPE.UI,
           attributes: {
             linkType: 'smallLink'
           }

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "85.0.0";
+var packageVersion = "85.2.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/ui/DropList/index.js

@@ -20,7 +20,7 @@ var _Layer = _interopRequireDefault(require("../Layer"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "85.0.0";
+var packageVersion = "85.2.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui-color/ColorPalette/Color/index.js

@@ -37,6 +37,16 @@ var Color = function Color(props) {
     e.preventDefault();
     onClick(value, label);
   };
+  var onKeyDown = function onKeyDown(e) {
+    var onKeyDown = props.onKeyDown,
+      value = props.value,
+      label = props.label;
+    if (!onKeyDown) {
+      return undefined;
+    }
+    e.preventDefault();
+    onKeyDown(value, label, e);
+  };
   return (0, _react2.jsx)(_tooltip.default, {
     content: label
   }, (0, _react2.jsx)("span", {
@@ -50,6 +60,7 @@ var Color = function Color(props) {
     role: "radio",
     "aria-checked": isSelected,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     tabIndex: tabIndex
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/cjs/ui-color/ColorPalette/index.js

@@ -49,6 +49,7 @@ var ColorPalette = function ColorPalette(props) {
   var _props$cols = props.cols,
     cols = _props$cols === void 0 ? _utils.DEFAULT_COLOR_PICKER_COLUMNS : _props$cols,
     onClick = props.onClick,
+    onKeyDown = props.onKeyDown,
     selectedColor = props.selectedColor,
     className = props.className,
     formatMessage = props.intl.formatMessage,
@@ -91,6 +92,7 @@ var ColorPalette = function ColorPalette(props) {
         borderColor: border,
         label: message ? formatMessage(message) : label,
         onClick: onClick,
+        onKeyDown: onKeyDown,
         isSelected: value === selectedColor,
         checkMarkColor: getCheckMarkColor(value, useIconToken),
         hexToPaletteColor: hexToPaletteColor,

package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js

@@ -29,13 +29,14 @@ var MenuArrowKeyNavigationProvider = exports.MenuArrowKeyNavigationProvider = fu
     closeOnTab = _ref.closeOnTab,
     onSelection = _ref.onSelection,
     editorRef = _ref.editorRef,
-    popupsMountPoint = _ref.popupsMountPoint;
+    popupsMountPoint = _ref.popupsMountPoint,
+    disableCloseOnArrowClick = _ref.disableCloseOnArrowClick;
   var wrapperRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(-1),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     currentSelectedItemIndex = _useState2[0],
     setCurrentSelectedItemIndex = _useState2[1];
-  var element = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-main-toolbar-navigation_osrty') && popupsMountPoint ? [popupsMountPoint, editorRef.current] : [editorRef.current];
+  var element = popupsMountPoint && (0, _platformFeatureFlags.fg)('platform.editor.a11y-main-toolbar-navigation_osrty') ? [popupsMountPoint, editorRef.current] : [editorRef.current];
   var _useState3 = (0, _react.useState)(element),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
     listenerTargetElement = _useState4[0];
@@ -130,7 +131,13 @@ var MenuArrowKeyNavigationProvider = exports.MenuArrowKeyNavigationProvider = fu
           if (targetElement instanceof HTMLElement && !targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
-          handleClose(event);
+          if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+            if (!disableCloseOnArrowClick) {
+              handleClose(event);
+            }
+          } else {
+            handleClose(event);
+          }
           if (targetElement instanceof HTMLElement && !targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 || keyDownHandlerContext.handleArrowLeft();
           }
@@ -139,7 +146,13 @@ var MenuArrowKeyNavigationProvider = exports.MenuArrowKeyNavigationProvider = fu
           if (targetElement instanceof HTMLElement && !targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
-          handleClose(event);
+          if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+            if (!disableCloseOnArrowClick) {
+              handleClose(event);
+            }
+          } else {
+            handleClose(event);
+          }
           if (targetElement instanceof HTMLElement && !targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 || keyDownHandlerContext.handleArrowRight();
           }
@@ -164,7 +177,7 @@ var MenuArrowKeyNavigationProvider = exports.MenuArrowKeyNavigationProvider = fu
         elem && elem.removeEventListener('keydown', handleKeyDown);
       });
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement, disableCloseOnArrowClick]);
   return /*#__PURE__*/_react.default.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "menu-key-handler-wrapper custom-key-handler-wrapper",

package/dist/cjs/ui-menu/DropdownMenu/index.js

@@ -105,7 +105,7 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCloseAndFocus", function (event) {
       var _this$state$target;
       (_this$state$target = _this.state.target) === null || _this$state$target === void 0 || (_this$state$target = _this$state$target.querySelector('button')) === null || _this$state$target === void 0 || _this$state$target.focus();
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if ((0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c')) {
         _this.handleClose(event);
       } else {
         _this.handleClose();
@@ -114,7 +114,7 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClose", function (event) {
       var onOpenChange = _this.props.onOpenChange;
       if (onOpenChange) {
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+        if ((0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c')) {
           onOpenChange({
             isOpen: false,
             event: event
@@ -149,7 +149,8 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
         onItemActivated = _this$props.onItemActivated,
         arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
         section = _this$props.section,
-        isAllowEnterDefaultBehavior = _this$props.isAllowEnterDefaultBehavior;
+        allowEnterDefaultBehavior = _this$props.allowEnterDefaultBehavior,
+        handleEscapeKeydown = _this$props.handleEscapeKeydown;
       // Note that this onSelection function can't be refactored to useMemo for
       // performance gains as it is being used as a dependency in a useEffect in
       // MenuArrowKeyNavigationProvider in order to check for re-renders to adjust
@@ -190,10 +191,10 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
         shouldFitContainer: true,
         isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
-        handleEscapeKeydown: this.handleCloseAndFocus,
+        handleEscapeKeydown: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? handleEscapeKeydown || this.handleCloseAndFocus : this.handleCloseAndFocus,
         handleEnterKeydown: function handleEnterKeydown(e) {
-          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
-            if (!isAllowEnterDefaultBehavior) {
+          if ((0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c') || (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+            if (!allowEnterDefaultBehavior) {
               e.preventDefault();
             }
           } else {
@@ -255,7 +256,7 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
             key: 'ArrowDown',
             bubbles: true
           });
-          if (mountTo && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-main-toolbar-navigation_osrty')) {
+          if (mountTo && (0, _platformFeatureFlags.fg)('platform.editor.a11y-main-toolbar-navigation_osrty')) {
             mountTo.dispatchEvent(keyboardEvent);
             return;
           }
@@ -306,17 +307,38 @@ function DropdownMenuItem(_ref) {
   var _handleSubmenuActive = function _handleSubmenuActive(event) {
     setSubmenuActive(Boolean(event.target instanceof HTMLElement && event.target.closest(".".concat(_styles.DropdownMenuSharedCssClassName.SUBMENU))));
   };
+  var ariaLabel;
+  if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+    ariaLabel = item['aria-label'] === '' ? undefined : item['aria-label'] || String(item.content);
+  } else {
+    ariaLabel = item['aria-label'] || String(item.content);
+  }
+  var testId;
+  if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+    testId = item['data-testid'] || "dropdown-item__".concat(item.content);
+  } else {
+    testId = "dropdown-item__".concat(String(item.content));
+  }
+
+  // From time to time we don't want to have any tabIndex on item wrapper
+  // especially when we pass any interactive element as a item.content
+  var tabIndex;
+  if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
+    tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
+  } else {
+    tabIndex = -1;
+  }
   var dropListItem = (0, _react2.jsx)("div", {
     css: function css() {
       return buttonStyles(item.isActive, submenuActive);
     },
-    tabIndex: -1,
+    tabIndex: tabIndex,
     "aria-disabled": item.isDisabled ? 'true' : 'false',
     onMouseDown: _handleSubmenuActive
   }, (0, _react2.jsx)(_menu.CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
-    testId: "dropdown-item__".concat(String(item.content)),
+    testId: testId,
     role: shouldUseDefaultRole ? 'button' : 'menuitem',
     iconBefore: item.elemBefore,
     iconAfter: item.elemAfter,
@@ -326,7 +348,7 @@ function DropdownMenuItem(_ref) {
         item: item
       });
     },
-    "aria-label": item['aria-label'] || String(item.content),
+    "aria-label": ariaLabel,
     "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
     "aria-keyshortcuts": item['aria-keyshortcuts'],
     onMouseDown: function onMouseDown(e) {
@@ -343,7 +365,7 @@ function DropdownMenuItem(_ref) {
         item: item
       });
     },
-    "aria-expanded": (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') ? item['aria-expanded'] : undefined
+    "aria-expanded": (0, _platformFeatureFlags.fg)('platform.editor.a11y-table-context-menu_y4c9c') ? item['aria-expanded'] : undefined
   }, item.content));
   if (item.tooltipDescription) {
     var _item$key3;

package/dist/es2019/keymaps/index.js

@@ -98,6 +98,7 @@ export const toggleHighlightPalette = makeKeyMapWithCommon('Toggle Highlight Pal
 export const focusToContextMenuTrigger = makeKeyMapWithCommon('Focus table context menu trigger', 'Shift-F10');
 export const dragToMoveUp = makeKeyMapWithCommon('Move node up in the document', 'Ctrl-Alt-Shift-ArrowUp');
 export const dragToMoveDown = makeKeyMapWithCommon('Move node down in the document', 'Ctrl-Alt-Shift-ArrowDown');
+export const showElementDragHandle = makeKeyMapWithCommon('Show drag handle for editor element', 'Ctrl-Alt-Shift-a');
 const arrowKeysMap = {
   // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
   ARROWLEFT: '\u2190',

package/dist/es2019/link/ConfigureLinkOverlay/Dropdown.js

@@ -15,6 +15,7 @@ import { StyledButton } from './StyledButton';
 import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
 const SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
 const Dropdown = ({
+  onConfigureClick: onConfigureClickCallback,
   onDropdownChange,
   testId
 }) => {
@@ -41,7 +42,8 @@ const Dropdown = ({
   }, [fireActionClickEvent]);
   const onConfigureClick = useCallback(() => {
     fireActionClickEvent('configureLink');
-  }, [fireActionClickEvent]);
+    onConfigureClickCallback === null || onConfigureClickCallback === void 0 ? void 0 : onConfigureClickCallback();
+  }, [fireActionClickEvent, onConfigureClickCallback]);
   return jsx(DropdownMenu, {
     trigger: ({
       onClick,
@@ -72,7 +74,8 @@ const Dropdown = ({
       label: configureLinkLabel,
       size: 'medium'
     }),
-    onClick: onConfigureClick
+    onClick: onConfigureClick,
+    testId: `${testId}-dropdown-item-configure`
   }, configureLinkLabel)));
 };
 export default withAnalyticsContext({

package/dist/es2019/link/ConfigureLinkOverlay/index.js

@@ -85,6 +85,7 @@ export const OverlayButton = withAnalyticsContext()(({
     "data-testid": testId
   }, showDropdown ? jsx(Dropdown, {
     testId: testId,
+    onConfigureClick: handleConfigureClick,
     onDropdownChange: onDropdownChange
   }) : jsx(Tooltip, {
     content: configureLinkLabel,

package/dist/es2019/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js

@@ -29,7 +29,7 @@ export const useLinkOverlayAnalyticsEvents = () => {
         action: ACTION.VIEWED,
         actionSubject: ACTION_SUBJECT.INLINE_DIALOG,
         actionSubjectId: ACTION_SUBJECT_ID.SMART_LINK_TOOLBAR,
-        eventType: EVENT_TYPE.SCREEN,
+        eventType: EVENT_TYPE.UI,
         attributes: {
           linkType: 'smallLink'
         }

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "85.0.0";
+const packageVersion = "85.2.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/ui/DropList/index.js

@@ -9,7 +9,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "85.0.0";
+const packageVersion = "85.2.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui-color/ColorPalette/Color/index.js

@@ -39,6 +39,18 @@ const Color = props => {
     e.preventDefault();
     onClick(value, label);
   };
+  const onKeyDown = e => {
+    const {
+      onKeyDown,
+      value,
+      label
+    } = props;
+    if (!onKeyDown) {
+      return undefined;
+    }
+    e.preventDefault();
+    onKeyDown(value, label, e);
+  };
   return jsx(Tooltip, {
     content: label
   }, jsx("span", {
@@ -52,6 +64,7 @@ const Color = props => {
     role: "radio",
     "aria-checked": isSelected,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     tabIndex: tabIndex
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/es2019/ui-color/ColorPalette/index.js

@@ -39,6 +39,7 @@ const ColorPalette = props => {
   const {
     cols = DEFAULT_COLOR_PICKER_COLUMNS,
     onClick,
+    onKeyDown,
     selectedColor,
     className,
     intl: {
@@ -87,6 +88,7 @@ const ColorPalette = props => {
       borderColor: border,
       label: message ? formatMessage(message) : label,
       onClick: onClick,
+      onKeyDown: onKeyDown,
       isSelected: value === selectedColor,
       checkMarkColor: getCheckMarkColor(value, useIconToken),
       hexToPaletteColor: hexToPaletteColor,

package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 const hasEnabledItems = list => list.some(item => item.getAttribute('aria-disabled') !== 'true');
 
 /**
@@ -14,11 +14,12 @@ export const MenuArrowKeyNavigationProvider = ({
   closeOnTab,
   onSelection,
   editorRef,
-  popupsMountPoint
+  popupsMountPoint,
+  disableCloseOnArrowClick
 }) => {
   const wrapperRef = useRef(null);
   const [currentSelectedItemIndex, setCurrentSelectedItemIndex] = useState(-1);
-  const element = getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty') && popupsMountPoint ? [popupsMountPoint, editorRef.current] : [editorRef.current];
+  const element = popupsMountPoint && fg('platform.editor.a11y-main-toolbar-navigation_osrty') ? [popupsMountPoint, editorRef.current] : [editorRef.current];
   const [listenerTargetElement] = useState(element);
   const incrementIndex = useCallback(list => {
     const currentIndex = currentSelectedItemIndex;
@@ -111,7 +112,13 @@ export const MenuArrowKeyNavigationProvider = ({
           if (targetElement instanceof HTMLElement && !targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
-          handleClose(event);
+          if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+            if (!disableCloseOnArrowClick) {
+              handleClose(event);
+            }
+          } else {
+            handleClose(event);
+          }
           if (targetElement instanceof HTMLElement && !targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
           }
@@ -120,7 +127,13 @@ export const MenuArrowKeyNavigationProvider = ({
           if (targetElement instanceof HTMLElement && !targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
-          handleClose(event);
+          if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+            if (!disableCloseOnArrowClick) {
+              handleClose(event);
+            }
+          } else {
+            handleClose(event);
+          }
           if (targetElement instanceof HTMLElement && !targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
           }
@@ -145,7 +158,7 @@ export const MenuArrowKeyNavigationProvider = ({
         elem && elem.removeEventListener('keydown', handleKeyDown);
       });
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement, disableCloseOnArrowClick]);
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "menu-key-handler-wrapper custom-key-handler-wrapper",

package/dist/es2019/ui-menu/DropdownMenu/index.js

@@ -6,7 +6,7 @@ import React, { PureComponent, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B100, N70, N900 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
@@ -106,7 +106,7 @@ export default class DropdownMenuWrapper extends PureComponent {
     _defineProperty(this, "handleCloseAndFocus", event => {
       var _this$state$target, _this$state$target$qu;
       (_this$state$target = this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
-      if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
         this.handleClose(event);
       } else {
         this.handleClose();
@@ -117,7 +117,7 @@ export default class DropdownMenuWrapper extends PureComponent {
         onOpenChange
       } = this.props;
       if (onOpenChange) {
-        if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+        if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
           onOpenChange({
             isOpen: false,
             event: event
@@ -149,7 +149,8 @@ export default class DropdownMenuWrapper extends PureComponent {
       onItemActivated,
       arrowKeyNavigationProviderOptions,
       section,
-      isAllowEnterDefaultBehavior
+      allowEnterDefaultBehavior,
+      handleEscapeKeydown
     } = this.props;
     // Note that this onSelection function can't be refactored to useMemo for
     // performance gains as it is being used as a dependency in a useEffect in
@@ -192,10 +193,10 @@ export default class DropdownMenuWrapper extends PureComponent {
       shouldFitContainer: true,
       isTriggerNotTabbable: true,
       handleClickOutside: this.handleClose,
-      handleEscapeKeydown: this.handleCloseAndFocus,
+      handleEscapeKeydown: fg('platform-editor-a11y-image-border-options-dropdown') ? handleEscapeKeydown || this.handleCloseAndFocus : this.handleCloseAndFocus,
       handleEnterKeydown: e => {
-        if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
-          if (!isAllowEnterDefaultBehavior) {
+        if (fg('platform.editor.a11y-table-context-menu_y4c9c') || fg('platform-editor-a11y-image-border-options-dropdown')) {
+          if (!allowEnterDefaultBehavior) {
             e.preventDefault();
           }
         } else {
@@ -253,7 +254,7 @@ export default class DropdownMenuWrapper extends PureComponent {
           key: 'ArrowDown',
           bubbles: true
         });
-        if (mountTo && getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty')) {
+        if (mountTo && fg('platform.editor.a11y-main-toolbar-navigation_osrty')) {
           mountTo.dispatchEvent(keyboardEvent);
           return;
         }
@@ -302,15 +303,36 @@ export function DropdownMenuItem({
   const _handleSubmenuActive = event => {
     setSubmenuActive(Boolean(event.target instanceof HTMLElement && event.target.closest(`.${DropdownMenuSharedCssClassName.SUBMENU}`)));
   };
+  let ariaLabel;
+  if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+    ariaLabel = item['aria-label'] === '' ? undefined : item['aria-label'] || String(item.content);
+  } else {
+    ariaLabel = item['aria-label'] || String(item.content);
+  }
+  let testId;
+  if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+    testId = item['data-testid'] || `dropdown-item__${item.content}`;
+  } else {
+    testId = `dropdown-item__${String(item.content)}`;
+  }
+
+  // From time to time we don't want to have any tabIndex on item wrapper
+  // especially when we pass any interactive element as a item.content
+  let tabIndex;
+  if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+    tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
+  } else {
+    tabIndex = -1;
+  }
   const dropListItem = jsx("div", {
     css: () => buttonStyles(item.isActive, submenuActive),
-    tabIndex: -1,
+    tabIndex: tabIndex,
     "aria-disabled": item.isDisabled ? 'true' : 'false',
     onMouseDown: _handleSubmenuActive
   }, jsx(CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
-    testId: `dropdown-item__${String(item.content)}`,
+    testId: testId,
     role: shouldUseDefaultRole ? 'button' : 'menuitem',
     iconBefore: item.elemBefore,
     iconAfter: item.elemAfter,
@@ -318,7 +340,7 @@ export function DropdownMenuItem({
     onClick: () => onItemActivated && onItemActivated({
       item
     }),
-    "aria-label": item['aria-label'] || String(item.content),
+    "aria-label": ariaLabel,
     "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
     "aria-keyshortcuts": item['aria-keyshortcuts'],
     onMouseDown: e => {
@@ -331,7 +353,7 @@ export function DropdownMenuItem({
     onMouseLeave: () => onMouseLeave && onMouseLeave({
       item
     }),
-    "aria-expanded": getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? item['aria-expanded'] : undefined
+    "aria-expanded": fg('platform.editor.a11y-table-context-menu_y4c9c') ? item['aria-expanded'] : undefined
   }, item.content));
   if (item.tooltipDescription) {
     var _item$key3;

package/dist/esm/keymaps/index.js

@@ -99,6 +99,7 @@ export var toggleHighlightPalette = makeKeyMapWithCommon('Toggle Highlight Palet
 export var focusToContextMenuTrigger = makeKeyMapWithCommon('Focus table context menu trigger', 'Shift-F10');
 export var dragToMoveUp = makeKeyMapWithCommon('Move node up in the document', 'Ctrl-Alt-Shift-ArrowUp');
 export var dragToMoveDown = makeKeyMapWithCommon('Move node down in the document', 'Ctrl-Alt-Shift-ArrowDown');
+export var showElementDragHandle = makeKeyMapWithCommon('Show drag handle for editor element', 'Ctrl-Alt-Shift-a');
 var arrowKeysMap = {
   // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
   ARROWLEFT: "\u2190",

package/dist/esm/link/ConfigureLinkOverlay/Dropdown.js

@@ -17,7 +17,8 @@ import { StyledButton } from './StyledButton';
 import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
 var SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
 var Dropdown = function Dropdown(_ref) {
-  var onDropdownChange = _ref.onDropdownChange,
+  var onConfigureClickCallback = _ref.onConfigureClick,
+    onDropdownChange = _ref.onDropdownChange,
     testId = _ref.testId;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -39,7 +40,8 @@ var Dropdown = function Dropdown(_ref) {
   }, [fireActionClickEvent]);
   var onConfigureClick = useCallback(function () {
     fireActionClickEvent('configureLink');
-  }, [fireActionClickEvent]);
+    onConfigureClickCallback === null || onConfigureClickCallback === void 0 || onConfigureClickCallback();
+  }, [fireActionClickEvent, onConfigureClickCallback]);
   return jsx(DropdownMenu, {
     trigger: function trigger(_ref3) {
       var _onClick = _ref3.onClick,
@@ -71,7 +73,8 @@ var Dropdown = function Dropdown(_ref) {
       label: configureLinkLabel,
       size: 'medium'
     }),
-    onClick: onConfigureClick
+    onClick: onConfigureClick,
+    testId: "".concat(testId, "-dropdown-item-configure")
   }, configureLinkLabel)));
 };
 export default withAnalyticsContext({

package/dist/esm/link/ConfigureLinkOverlay/index.js

@@ -86,6 +86,7 @@ export var OverlayButton = withAnalyticsContext()(function (_ref) {
     "data-testid": testId
   }, showDropdown ? jsx(Dropdown, {
     testId: testId,
+    onConfigureClick: handleConfigureClick,
     onDropdownChange: onDropdownChange
   }) : jsx(Tooltip, {
     content: configureLinkLabel,

package/dist/esm/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js

@@ -29,7 +29,7 @@ export var useLinkOverlayAnalyticsEvents = function useLinkOverlayAnalyticsEvent
           action: ACTION.VIEWED,
           actionSubject: ACTION_SUBJECT.INLINE_DIALOG,
           actionSubjectId: ACTION_SUBJECT_ID.SMART_LINK_TOOLBAR,
-          eventType: EVENT_TYPE.SCREEN,
+          eventType: EVENT_TYPE.UI,
           attributes: {
             linkType: 'smallLink'
           }

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "85.0.0";
+var packageVersion = "85.2.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/ui/DropList/index.js

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "85.0.0";
+var packageVersion = "85.2.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui-color/ColorPalette/Color/index.js

@@ -29,6 +29,16 @@ var Color = function Color(props) {
     e.preventDefault();
     onClick(value, label);
   };
+  var onKeyDown = function onKeyDown(e) {
+    var onKeyDown = props.onKeyDown,
+      value = props.value,
+      label = props.label;
+    if (!onKeyDown) {
+      return undefined;
+    }
+    e.preventDefault();
+    onKeyDown(value, label, e);
+  };
   return jsx(Tooltip, {
     content: label
   }, jsx("span", {
@@ -42,6 +52,7 @@ var Color = function Color(props) {
     role: "radio",
     "aria-checked": isSelected,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     tabIndex: tabIndex
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/esm/ui-color/ColorPalette/index.js

@@ -41,6 +41,7 @@ var ColorPalette = function ColorPalette(props) {
   var _props$cols = props.cols,
     cols = _props$cols === void 0 ? DEFAULT_COLOR_PICKER_COLUMNS : _props$cols,
     onClick = props.onClick,
+    onKeyDown = props.onKeyDown,
     selectedColor = props.selectedColor,
     className = props.className,
     formatMessage = props.intl.formatMessage,
@@ -83,6 +84,7 @@ var ColorPalette = function ColorPalette(props) {
         borderColor: border,
         label: message ? formatMessage(message) : label,
         onClick: onClick,
+        onKeyDown: onKeyDown,
         isSelected: value === selectedColor,
         checkMarkColor: getCheckMarkColor(value, useIconToken),
         hexToPaletteColor: hexToPaletteColor,

package/dist/esm/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 var hasEnabledItems = function hasEnabledItems(list) {
   return list.some(function (item) {
     return item.getAttribute('aria-disabled') !== 'true';
@@ -19,13 +19,14 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
     closeOnTab = _ref.closeOnTab,
     onSelection = _ref.onSelection,
     editorRef = _ref.editorRef,
-    popupsMountPoint = _ref.popupsMountPoint;
+    popupsMountPoint = _ref.popupsMountPoint,
+    disableCloseOnArrowClick = _ref.disableCloseOnArrowClick;
   var wrapperRef = useRef(null);
   var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     currentSelectedItemIndex = _useState2[0],
     setCurrentSelectedItemIndex = _useState2[1];
-  var element = getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty') && popupsMountPoint ? [popupsMountPoint, editorRef.current] : [editorRef.current];
+  var element = popupsMountPoint && fg('platform.editor.a11y-main-toolbar-navigation_osrty') ? [popupsMountPoint, editorRef.current] : [editorRef.current];
   var _useState3 = useState(element),
     _useState4 = _slicedToArray(_useState3, 1),
     listenerTargetElement = _useState4[0];
@@ -120,7 +121,13 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
           if (targetElement instanceof HTMLElement && !targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
-          handleClose(event);
+          if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+            if (!disableCloseOnArrowClick) {
+              handleClose(event);
+            }
+          } else {
+            handleClose(event);
+          }
           if (targetElement instanceof HTMLElement && !targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 || keyDownHandlerContext.handleArrowLeft();
           }
@@ -129,7 +136,13 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
           if (targetElement instanceof HTMLElement && !targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
-          handleClose(event);
+          if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+            if (!disableCloseOnArrowClick) {
+              handleClose(event);
+            }
+          } else {
+            handleClose(event);
+          }
           if (targetElement instanceof HTMLElement && !targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 || keyDownHandlerContext.handleArrowRight();
           }
@@ -154,7 +167,7 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
         elem && elem.removeEventListener('keydown', handleKeyDown);
       });
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement, disableCloseOnArrowClick]);
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "menu-key-handler-wrapper custom-key-handler-wrapper",

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -22,7 +22,7 @@ import React, { PureComponent, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B100, N70, N900 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
@@ -94,7 +94,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "handleCloseAndFocus", function (event) {
       var _this$state$target;
       (_this$state$target = _this.state.target) === null || _this$state$target === void 0 || (_this$state$target = _this$state$target.querySelector('button')) === null || _this$state$target === void 0 || _this$state$target.focus();
-      if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
         _this.handleClose(event);
       } else {
         _this.handleClose();
@@ -103,7 +103,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "handleClose", function (event) {
       var onOpenChange = _this.props.onOpenChange;
       if (onOpenChange) {
-        if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+        if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
           onOpenChange({
             isOpen: false,
             event: event
@@ -138,7 +138,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         onItemActivated = _this$props.onItemActivated,
         arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
         section = _this$props.section,
-        isAllowEnterDefaultBehavior = _this$props.isAllowEnterDefaultBehavior;
+        allowEnterDefaultBehavior = _this$props.allowEnterDefaultBehavior,
+        handleEscapeKeydown = _this$props.handleEscapeKeydown;
       // Note that this onSelection function can't be refactored to useMemo for
       // performance gains as it is being used as a dependency in a useEffect in
       // MenuArrowKeyNavigationProvider in order to check for re-renders to adjust
@@ -179,10 +180,10 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         shouldFitContainer: true,
         isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
-        handleEscapeKeydown: this.handleCloseAndFocus,
+        handleEscapeKeydown: fg('platform-editor-a11y-image-border-options-dropdown') ? handleEscapeKeydown || this.handleCloseAndFocus : this.handleCloseAndFocus,
         handleEnterKeydown: function handleEnterKeydown(e) {
-          if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
-            if (!isAllowEnterDefaultBehavior) {
+          if (fg('platform.editor.a11y-table-context-menu_y4c9c') || fg('platform-editor-a11y-image-border-options-dropdown')) {
+            if (!allowEnterDefaultBehavior) {
               e.preventDefault();
             }
           } else {
@@ -244,7 +245,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
             key: 'ArrowDown',
             bubbles: true
           });
-          if (mountTo && getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty')) {
+          if (mountTo && fg('platform.editor.a11y-main-toolbar-navigation_osrty')) {
             mountTo.dispatchEvent(keyboardEvent);
             return;
           }
@@ -296,17 +297,38 @@ export function DropdownMenuItem(_ref) {
   var _handleSubmenuActive = function _handleSubmenuActive(event) {
     setSubmenuActive(Boolean(event.target instanceof HTMLElement && event.target.closest(".".concat(DropdownMenuSharedCssClassName.SUBMENU))));
   };
+  var ariaLabel;
+  if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+    ariaLabel = item['aria-label'] === '' ? undefined : item['aria-label'] || String(item.content);
+  } else {
+    ariaLabel = item['aria-label'] || String(item.content);
+  }
+  var testId;
+  if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+    testId = item['data-testid'] || "dropdown-item__".concat(item.content);
+  } else {
+    testId = "dropdown-item__".concat(String(item.content));
+  }
+
+  // From time to time we don't want to have any tabIndex on item wrapper
+  // especially when we pass any interactive element as a item.content
+  var tabIndex;
+  if (fg('platform-editor-a11y-image-border-options-dropdown')) {
+    tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
+  } else {
+    tabIndex = -1;
+  }
   var dropListItem = jsx("div", {
     css: function css() {
       return buttonStyles(item.isActive, submenuActive);
     },
-    tabIndex: -1,
+    tabIndex: tabIndex,
     "aria-disabled": item.isDisabled ? 'true' : 'false',
     onMouseDown: _handleSubmenuActive
   }, jsx(CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
-    testId: "dropdown-item__".concat(String(item.content)),
+    testId: testId,
     role: shouldUseDefaultRole ? 'button' : 'menuitem',
     iconBefore: item.elemBefore,
     iconAfter: item.elemAfter,
@@ -316,7 +338,7 @@ export function DropdownMenuItem(_ref) {
         item: item
       });
     },
-    "aria-label": item['aria-label'] || String(item.content),
+    "aria-label": ariaLabel,
     "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
     "aria-keyshortcuts": item['aria-keyshortcuts'],
     onMouseDown: function onMouseDown(e) {
@@ -333,7 +355,7 @@ export function DropdownMenuItem(_ref) {
         item: item
       });
     },
-    "aria-expanded": getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? item['aria-expanded'] : undefined
+    "aria-expanded": fg('platform.editor.a11y-table-context-menu_y4c9c') ? item['aria-expanded'] : undefined
   }, item.content));
   if (item.tooltipDescription) {
     var _item$key3;

package/dist/types/keymaps/index.d.ts

@@ -93,6 +93,7 @@ export declare const toggleHighlightPalette: Keymap;
 export declare const focusToContextMenuTrigger: Keymap;
 export declare const dragToMoveUp: Keymap;
 export declare const dragToMoveDown: Keymap;
+export declare const showElementDragHandle: Keymap;
 export declare function tooltip(keymap?: Keymap, description?: string): string | undefined;
 export declare const ToolTipContent: React.MemoExoticComponent<({ description, shortcutOverride, keymap, }: {
     description?: string | React.ReactNode;

package/dist/types/link/ConfigureLinkOverlay/Dropdown.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export type OnDropdownChange = (isOpen: boolean) => void;
 export type DropdownProps = {
+    /** Callback fired when the Configure dropdown item is clicked */
+    onConfigureClick: () => void;
     /** Callback fired when the dropdown is open or close */
     onDropdownChange?: OnDropdownChange;
     testId: string;

package/dist/types/ui-color/ColorPalette/Color/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { type ReactElement } from 'react';
+import React, { type ReactElement } from 'react';
 import { jsx } from '@emotion/react';
 export interface Props {
     value: string;
@@ -7,6 +7,7 @@ export interface Props {
     tabIndex?: number;
     isSelected?: boolean;
     onClick: (value: string, label: string) => void;
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
     borderColor: string;
     checkMarkColor?: string;
     autoFocus?: boolean;

package/dist/types/ui-color/ColorPalette/index.d.ts

@@ -5,6 +5,7 @@ import type { PaletteColor, PaletteTooltipMessages } from './Palettes/type';
 interface Props {
     selectedColor: string | null;
     onClick: (value: string, label: string) => void;
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
     cols?: number;
     className?: string;
     /**

package/dist/types/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.d.ts

@@ -4,4 +4,4 @@ import type { MenuArrowKeyNavigationProviderProps } from '../types';
  * This component is a wrapper of vertical menus which listens to keydown events of children
  * and handles up/down arrow key navigation
  */
-export declare const MenuArrowKeyNavigationProvider: ({ children, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, editorRef, popupsMountPoint, }: React.PropsWithChildren<Omit<MenuArrowKeyNavigationProviderProps, 'type'>>) => JSX.Element;
+export declare const MenuArrowKeyNavigationProvider: ({ children, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, editorRef, popupsMountPoint, disableCloseOnArrowClick, }: React.PropsWithChildren<Omit<MenuArrowKeyNavigationProviderProps, 'type'>>) => JSX.Element;

package/dist/types/ui-menu/ArrowKeyNavigationProvider/types.d.ts

@@ -28,6 +28,7 @@ export type MenuArrowKeyNavigationOptions = {
     type: ArrowKeyNavigationType.MENU;
     disableArrowKeyNavigation?: boolean;
     keyDownHandlerContext?: KeyDownHandlerContext;
+    disableCloseOnArrowClick?: boolean;
     children?: React.ReactNode;
 };
 export type MenuArrowKeyNavigationProviderProps = MenuArrowKeyNavigationOptions & {

package/dist/types/ui-menu/DropdownMenu/types.d.ts

@@ -30,7 +30,8 @@ export interface Props {
     arrowKeyNavigationProviderOptions: ArrowKeyNavigationProviderOptions;
     section?: SectionOptions;
     children?: React.ReactNode;
-    isAllowEnterDefaultBehavior?: boolean;
+    allowEnterDefaultBehavior?: boolean;
+    handleEscapeKeydown?: (e: KeyboardEvent) => void;
 }
 export interface MenuItem {
     key?: string;
@@ -50,8 +51,10 @@ export interface MenuItem {
     'aria-label'?: React.AriaAttributes['aria-label'];
     'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
     'aria-keyshortcuts'?: React.AriaAttributes['aria-keyshortcuts'];
+    'data-testid'?: string;
     onClick?: (editorActions: EditorActions) => void;
     'aria-expanded'?: React.AriaAttributes['aria-expanded'];
+    wrapperTabIndex?: number | null;
 }
 export interface State {
     target?: HTMLElement;

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

@@ -93,6 +93,7 @@ export declare const toggleHighlightPalette: Keymap;
 export declare const focusToContextMenuTrigger: Keymap;
 export declare const dragToMoveUp: Keymap;
 export declare const dragToMoveDown: Keymap;
+export declare const showElementDragHandle: Keymap;
 export declare function tooltip(keymap?: Keymap, description?: string): string | undefined;
 export declare const ToolTipContent: React.MemoExoticComponent<({ description, shortcutOverride, keymap, }: {
     description?: string | React.ReactNode;

package/dist/types-ts4.5/link/ConfigureLinkOverlay/Dropdown.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export type OnDropdownChange = (isOpen: boolean) => void;
 export type DropdownProps = {
+    /** Callback fired when the Configure dropdown item is clicked */
+    onConfigureClick: () => void;
     /** Callback fired when the dropdown is open or close */
     onDropdownChange?: OnDropdownChange;
     testId: string;

package/dist/types-ts4.5/ui-color/ColorPalette/Color/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { type ReactElement } from 'react';
+import React, { type ReactElement } from 'react';
 import { jsx } from '@emotion/react';
 export interface Props {
     value: string;
@@ -7,6 +7,7 @@ export interface Props {
     tabIndex?: number;
     isSelected?: boolean;
     onClick: (value: string, label: string) => void;
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
     borderColor: string;
     checkMarkColor?: string;
     autoFocus?: boolean;

package/dist/types-ts4.5/ui-color/ColorPalette/index.d.ts

@@ -5,6 +5,7 @@ import type { PaletteColor, PaletteTooltipMessages } from './Palettes/type';
 interface Props {
     selectedColor: string | null;
     onClick: (value: string, label: string) => void;
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
     cols?: number;
     className?: string;
     /**

package/dist/types-ts4.5/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.d.ts

@@ -4,4 +4,4 @@ import type { MenuArrowKeyNavigationProviderProps } from '../types';
  * This component is a wrapper of vertical menus which listens to keydown events of children
  * and handles up/down arrow key navigation
  */
-export declare const MenuArrowKeyNavigationProvider: ({ children, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, editorRef, popupsMountPoint, }: React.PropsWithChildren<Omit<MenuArrowKeyNavigationProviderProps, 'type'>>) => JSX.Element;
+export declare const MenuArrowKeyNavigationProvider: ({ children, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, editorRef, popupsMountPoint, disableCloseOnArrowClick, }: React.PropsWithChildren<Omit<MenuArrowKeyNavigationProviderProps, 'type'>>) => JSX.Element;

package/dist/types-ts4.5/ui-menu/ArrowKeyNavigationProvider/types.d.ts

@@ -28,6 +28,7 @@ export type MenuArrowKeyNavigationOptions = {
     type: ArrowKeyNavigationType.MENU;
     disableArrowKeyNavigation?: boolean;
     keyDownHandlerContext?: KeyDownHandlerContext;
+    disableCloseOnArrowClick?: boolean;
     children?: React.ReactNode;
 };
 export type MenuArrowKeyNavigationProviderProps = MenuArrowKeyNavigationOptions & {

package/dist/types-ts4.5/ui-menu/DropdownMenu/types.d.ts

@@ -30,7 +30,8 @@ export interface Props {
     arrowKeyNavigationProviderOptions: ArrowKeyNavigationProviderOptions;
     section?: SectionOptions;
     children?: React.ReactNode;
-    isAllowEnterDefaultBehavior?: boolean;
+    allowEnterDefaultBehavior?: boolean;
+    handleEscapeKeydown?: (e: KeyboardEvent) => void;
 }
 export interface MenuItem {
     key?: string;
@@ -50,8 +51,10 @@ export interface MenuItem {
     'aria-label'?: React.AriaAttributes['aria-label'];
     'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
     'aria-keyshortcuts'?: React.AriaAttributes['aria-keyshortcuts'];
+    'data-testid'?: string;
     onClick?: (editorActions: EditorActions) => void;
     'aria-expanded'?: React.AriaAttributes['aria-expanded'];
+    wrapperTabIndex?: number | null;
 }
 export interface State {
     target?: HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "85.0.0",
+	"version": "85.2.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -243,6 +243,9 @@
 		"platform_editor_tables_padding_increase": {
 			"type": "boolean"
 		},
+		"platform-editor-a11y-image-border-options-dropdown": {
+			"type": "boolean"
+		},
 		"platform.editor.a11y-table-context-menu_y4c9c": {
 			"type": "boolean"
 		},