@atlaskit/editor-common 83.0.2 → 83.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-common
 
+## 83.0.3
+
+### Patch Changes
+
+- [#115110](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115110)
+  [`c6f8e2be84f70`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c6f8e2be84f70) -
+  ECA11Y-20/ECA11Y-59 Make table cell options menu accessible for keyboard only users
+
 ## 83.0.2
 
 ### Patch Changes

package/dist/cjs/keymaps/index.js

@@ -87,7 +87,7 @@ exports.findKeyMapForBrowser = findKeyMapForBrowser;
 exports.findKeymapByDescription = findKeymapByDescription;
 exports.findShortcutByDescription = findShortcutByDescription;
 exports.findShortcutByKeymap = findShortcutByKeymap;
-exports.forwardDelete = exports.focusTableResizer = void 0;
+exports.forwardDelete = exports.focusToContextMenuTrigger = exports.focusTableResizer = void 0;
 exports.getAriaKeyshortcuts = getAriaKeyshortcuts;
 exports.insertRule = exports.insertNewLine = exports.indentList = exports.indent = exports.increaseMediaSize = void 0;
 exports.isCapsLockOnAndModifyKeyboardEvent = isCapsLockOnAndModifyKeyboardEvent;
@@ -100,8 +100,8 @@ Object.defineProperty(exports, "keymap", {
 exports.makeKeyMapArrayWithCommon = makeKeyMapArrayWithCommon;
 exports.makeKeyMapWithCommon = makeKeyMapWithCommon;
 exports.makeKeymap = makeKeymap;
-exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = 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 = void 0;
+exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = 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 = void 0;
 exports.tooltip = tooltip;
 exports.undo = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -207,6 +207,7 @@ var increaseMediaSize = exports.increaseMediaSize = makeKeyMapWithCommon('increa
 var decreaseMediaSize = exports.decreaseMediaSize = makeKeyMapWithCommon('increase image size', 'Mod-Alt-[');
 var activateVideoControls = exports.activateVideoControls = makeKeyMapWithCommon('Activate controls panel on video', 'Shift-F10');
 var toggleHighlightPalette = exports.toggleHighlightPalette = makeKeyMapWithCommon('Toggle Highlight Palette', 'Mod-Alt-b');
+var focusToContextMenuTrigger = exports.focusToContextMenuTrigger = makeKeyMapWithCommon('Focus table context menu trigger', 'Shift-F10');
 var arrowKeysMap = {
   // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
   ARROWLEFT: "\u2190",

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 = "83.0.2";
+var packageVersion = "83.0.3";
 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 = "83.0.2";
+var packageVersion = "83.0.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -23,6 +23,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles = require("../../styles");
@@ -62,7 +63,7 @@ var buttonStyles = function buttonStyles(isActive, submenuActive) {
     return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t> span,\n\t\t\t> span:hover,\n\t\t\t> span:active {\n\t\t\t\tbackground: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
   } else {
     // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t> span:hover[aria-disabled='false'] {\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\t", "\n\t\t\t> span[aria-disabled='true'] {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-text, ".concat(_colors.N900, ")"), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n          > span:active[aria-disabled='false'] {\n            background-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n          }"), "var(--ds-text-disabled, ".concat(_colors.N70, ")"), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
+    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t> span:hover[aria-disabled='false'] {\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\t", "\n\t\t\t> span[aria-disabled='true'] {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-text, ".concat(_colors.N900, ")"), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n\t\t\t\t\t> span:active[aria-disabled='false'] {\n\t\t\t\t\t\tbackground-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n\t\t\t\t\t}"), "var(--ds-text-disabled, ".concat(_colors.N70, ")"), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
 var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_DropList.default);
@@ -101,16 +102,28 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCloseAndFocus", function () {
+    (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();
-      _this.handleClose();
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+        _this.handleClose(event);
+      } else {
+        _this.handleClose();
+      }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClose", function () {
-      if (_this.props.onOpenChange) {
-        _this.props.onOpenChange({
-          isOpen: false
-        });
+    (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')) {
+          onOpenChange({
+            isOpen: false,
+            event: event
+          });
+        } else {
+          onOpenChange({
+            isOpen: false
+          });
+        }
       }
     });
     return _this;
@@ -135,8 +148,8 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
         shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
         onItemActivated = _this$props.onItemActivated,
         arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
-        section = _this$props.section;
-
+        section = _this$props.section,
+        isAllowEnterDefaultBehavior = _this$props.isAllowEnterDefaultBehavior;
       // 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,7 +192,13 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
         handleClickOutside: this.handleClose,
         handleEscapeKeydown: this.handleCloseAndFocus,
         handleEnterKeydown: function handleEnterKeydown(e) {
-          e.preventDefault();
+          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+            if (!isAllowEnterDefaultBehavior) {
+              e.preventDefault();
+            }
+          } else {
+            e.preventDefault();
+          }
           e.stopPropagation();
         },
         targetRef: this.state.target
@@ -316,7 +335,8 @@ function DropdownMenuItem(_ref) {
       return _onMouseLeave && _onMouseLeave({
         item: item
       });
-    }
+    },
+    "aria-expanded": (0, _platformFeatureFlags.getBooleanFF)('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

@@ -95,6 +95,7 @@ export const increaseMediaSize = makeKeyMapWithCommon('increase image size', 'Mo
 export const decreaseMediaSize = makeKeyMapWithCommon('increase image size', 'Mod-Alt-[');
 export const activateVideoControls = makeKeyMapWithCommon('Activate controls panel on video', 'Shift-F10');
 export const toggleHighlightPalette = makeKeyMapWithCommon('Toggle Highlight Palette', 'Mod-Alt-b');
+export const focusToContextMenuTrigger = makeKeyMapWithCommon('Focus table context menu trigger', 'Shift-F10');
 const arrowKeysMap = {
   // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
   ARROWLEFT: '\u2190',

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 = "83.0.2";
+const packageVersion = "83.0.3";
 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 = "83.0.2";
+const packageVersion = "83.0.3";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -1,13 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-
 import React, { PureComponent, useContext } from 'react';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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 { B100, N70, N900 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
@@ -57,9 +56,9 @@ const buttonStyles = (isActive, submenuActive) => {
 				background-color: ${"var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))"};
 			}
 			${!submenuActive && `
-          > span:active[aria-disabled='false'] {
-            background-color: ${"var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"};
-          }`}
+					> span:active[aria-disabled='false'] {
+						background-color: ${"var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"};
+					}`}
 			> span[aria-disabled='true'] {
 				color: ${`var(--ds-text-disabled, ${N70})`};
 			}
@@ -104,16 +103,30 @@ export default class DropdownMenuWrapper extends PureComponent {
         });
       }
     });
-    _defineProperty(this, "handleCloseAndFocus", () => {
+    _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();
-      this.handleClose();
+      if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+        this.handleClose(event);
+      } else {
+        this.handleClose();
+      }
     });
-    _defineProperty(this, "handleClose", () => {
-      if (this.props.onOpenChange) {
-        this.props.onOpenChange({
-          isOpen: false
-        });
+    _defineProperty(this, "handleClose", event => {
+      const {
+        onOpenChange
+      } = this.props;
+      if (onOpenChange) {
+        if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+          onOpenChange({
+            isOpen: false,
+            event: event
+          });
+        } else {
+          onOpenChange({
+            isOpen: false
+          });
+        }
       }
     });
   }
@@ -135,9 +148,9 @@ export default class DropdownMenuWrapper extends PureComponent {
       shouldUseDefaultRole,
       onItemActivated,
       arrowKeyNavigationProviderOptions,
-      section
+      section,
+      isAllowEnterDefaultBehavior
     } = 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
     // MenuArrowKeyNavigationProvider in order to check for re-renders to adjust
@@ -181,7 +194,13 @@ export default class DropdownMenuWrapper extends PureComponent {
       handleClickOutside: this.handleClose,
       handleEscapeKeydown: this.handleCloseAndFocus,
       handleEnterKeydown: e => {
-        e.preventDefault();
+        if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+          if (!isAllowEnterDefaultBehavior) {
+            e.preventDefault();
+          }
+        } else {
+          e.preventDefault();
+        }
         e.stopPropagation();
       },
       targetRef: this.state.target
@@ -303,7 +322,8 @@ export function DropdownMenuItem({
     }),
     onMouseLeave: () => onMouseLeave && onMouseLeave({
       item
-    })
+    }),
+    "aria-expanded": getBooleanFF('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

@@ -96,6 +96,7 @@ export var increaseMediaSize = makeKeyMapWithCommon('increase image size', 'Mod-
 export var decreaseMediaSize = makeKeyMapWithCommon('increase image size', 'Mod-Alt-[');
 export var activateVideoControls = makeKeyMapWithCommon('Activate controls panel on video', 'Shift-F10');
 export var toggleHighlightPalette = makeKeyMapWithCommon('Toggle Highlight Palette', 'Mod-Alt-b');
+export var focusToContextMenuTrigger = makeKeyMapWithCommon('Focus table context menu trigger', 'Shift-F10');
 var arrowKeysMap = {
   // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
   ARROWLEFT: "\u2190",

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 = "83.0.2";
+var packageVersion = "83.0.3";
 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 = "83.0.2";
+var packageVersion = "83.0.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -17,13 +17,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
-
 import React, { PureComponent, useContext } from 'react';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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 { B100, N70, N900 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
@@ -53,7 +52,7 @@ var buttonStyles = function buttonStyles(isActive, submenuActive) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t> span,\n\t\t\t> span:hover,\n\t\t\t> span:active {\n\t\t\t\tbackground: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
   } else {
     // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t> span:hover[aria-disabled='false'] {\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\t", "\n\t\t\t> span[aria-disabled='true'] {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-text, ".concat(N900, ")"), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n          > span:active[aria-disabled='false'] {\n            background-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n          }"), "var(--ds-text-disabled, ".concat(N70, ")"), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t> span:hover[aria-disabled='false'] {\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t\t", "\n\t\t\t> span[aria-disabled='true'] {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t\t:focus > span[aria-disabled='false'] {\n\t\t\t\t", ";\n\t\t\t}\n\t\t\t:focus-visible,\n\t\t\t:focus-visible > span[aria-disabled='false'] {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t"])), "var(--ds-text, ".concat(N900, ")"), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n\t\t\t\t\t> span:active[aria-disabled='false'] {\n\t\t\t\t\t\tbackground-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n\t\t\t\t\t}"), "var(--ds-text-disabled, ".concat(N70, ")"), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
 var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
@@ -92,16 +91,28 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleCloseAndFocus", function () {
+    _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();
-      _this.handleClose();
+      if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+        _this.handleClose(event);
+      } else {
+        _this.handleClose();
+      }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
-      if (_this.props.onOpenChange) {
-        _this.props.onOpenChange({
-          isOpen: false
-        });
+    _defineProperty(_assertThisInitialized(_this), "handleClose", function (event) {
+      var onOpenChange = _this.props.onOpenChange;
+      if (onOpenChange) {
+        if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+          onOpenChange({
+            isOpen: false,
+            event: event
+          });
+        } else {
+          onOpenChange({
+            isOpen: false
+          });
+        }
       }
     });
     return _this;
@@ -126,8 +137,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
         onItemActivated = _this$props.onItemActivated,
         arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
-        section = _this$props.section;
-
+        section = _this$props.section,
+        isAllowEnterDefaultBehavior = _this$props.isAllowEnterDefaultBehavior;
       // 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
@@ -170,7 +181,13 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         handleClickOutside: this.handleClose,
         handleEscapeKeydown: this.handleCloseAndFocus,
         handleEnterKeydown: function handleEnterKeydown(e) {
-          e.preventDefault();
+          if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+            if (!isAllowEnterDefaultBehavior) {
+              e.preventDefault();
+            }
+          } else {
+            e.preventDefault();
+          }
           e.stopPropagation();
         },
         targetRef: this.state.target
@@ -308,7 +325,8 @@ export function DropdownMenuItem(_ref) {
       return _onMouseLeave && _onMouseLeave({
         item: item
       });
-    }
+    },
+    "aria-expanded": getBooleanFF('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

@@ -90,6 +90,7 @@ export declare const increaseMediaSize: Keymap;
 export declare const decreaseMediaSize: Keymap;
 export declare const activateVideoControls: Keymap;
 export declare const toggleHighlightPalette: Keymap;
+export declare const focusToContextMenuTrigger: 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/ui-menu/DropdownMenu/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import type { MenuItem, Props, State } from './types';

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

@@ -30,6 +30,7 @@ export interface Props {
     arrowKeyNavigationProviderOptions: ArrowKeyNavigationProviderOptions;
     section?: SectionOptions;
     children?: React.ReactNode;
+    isAllowEnterDefaultBehavior?: boolean;
 }
 export interface MenuItem {
     key?: string;
@@ -50,6 +51,7 @@ export interface MenuItem {
     'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
     'aria-keyshortcuts'?: React.AriaAttributes['aria-keyshortcuts'];
     onClick?: (editorActions: EditorActions) => void;
+    'aria-expanded'?: React.AriaAttributes['aria-expanded'];
 }
 export interface State {
     target?: HTMLElement;

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

@@ -90,6 +90,7 @@ export declare const increaseMediaSize: Keymap;
 export declare const decreaseMediaSize: Keymap;
 export declare const activateVideoControls: Keymap;
 export declare const toggleHighlightPalette: Keymap;
+export declare const focusToContextMenuTrigger: 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/ui-menu/DropdownMenu/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import type { MenuItem, Props, State } from './types';

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

@@ -30,6 +30,7 @@ export interface Props {
     arrowKeyNavigationProviderOptions: ArrowKeyNavigationProviderOptions;
     section?: SectionOptions;
     children?: React.ReactNode;
+    isAllowEnterDefaultBehavior?: boolean;
 }
 export interface MenuItem {
     key?: string;
@@ -50,6 +51,7 @@ export interface MenuItem {
     'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
     'aria-keyshortcuts'?: React.AriaAttributes['aria-keyshortcuts'];
     onClick?: (editorActions: EditorActions) => void;
+    'aria-expanded'?: React.AriaAttributes['aria-expanded'];
 }
 export interface State {
     target?: HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "83.0.2",
+	"version": "83.0.3",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -262,6 +262,9 @@
 		},
 		"platform.editor.text-alignment-keyboard-shortcuts": {
 			"type": "boolean"
+		},
+		"platform.editor.a11y-table-context-menu_y4c9c": {
+			"type": "boolean"
 		}
 	}
 }