@atlaskit/editor-plugin-table 7.18.2 → 7.18.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.18.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
+
 ## 7.18.2
 
 ### Patch Changes

package/dist/cjs/commands/index.js

@@ -165,6 +165,12 @@ Object.defineProperty(exports, "setEditorFocus", {
     return _misc.setEditorFocus;
   }
 });
+Object.defineProperty(exports, "setFocusToCellMenu", {
+  enumerable: true,
+  get: function get() {
+    return _misc.setFocusToCellMenu;
+  }
+});
 Object.defineProperty(exports, "setMultipleCellAttrs", {
   enumerable: true,
   get: function get() {

package/dist/cjs/commands/misc.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignmentWithTableContentWithPos = exports.setTableAlignment = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
+exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignmentWithTableContentWithPos = exports.setTableAlignment = exports.setMultipleCellAttrs = exports.setFocusToCellMenu = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -626,4 +626,18 @@ var setTableAlignmentWithTableContentWithPos = exports.setTableAlignmentWithTabl
     tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };
+};
+var setFocusToCellMenu = exports.setFocusToCellMenu = function setFocusToCellMenu() {
+  var isCellMenuOpenByKeyboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var originalTr = arguments.length > 1 ? arguments[1] : undefined;
+  return (0, _pluginFactory.createCommand)(function () {
+    return {
+      type: 'SET_CELL_MENU_OPEN',
+      data: {
+        isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
+      }
+    };
+  }, function (tr) {
+    return (originalTr || tr).setMeta('addToHistory', false);
+  });
 };

package/dist/cjs/plugin.js

@@ -356,10 +356,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isHeaderColumnEnabled = _ref18.isHeaderColumnEnabled,
             isHeaderRowEnabled = _ref18.isHeaderRowEnabled,
             isDragAndDropEnabled = _ref18.isDragAndDropEnabled,
-            tableWrapperTarget = _ref18.tableWrapperTarget;
+            tableWrapperTarget = _ref18.tableWrapperTarget,
+            isCellMenuOpenByKeyboard = _ref18.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
-          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && tableRef && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
             tableNode: tableNode,
@@ -369,7 +370,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             isContextualMenuOpen: isContextualMenuOpen,
             stickyHeader: stickyHeader,
-            tableWrapper: tableWrapperTarget
+            tableWrapper: tableWrapperTarget,
+            isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
           }), allowControls && /*#__PURE__*/_react.default.createElement(_FloatingInsertButton.default, {
             tableNode: tableNode,
             tableRef: tableRef,
@@ -397,7 +399,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             pluginConfig: pluginConfig,
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
-            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
+            isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
           }), isDragAndDropEnabled && /*#__PURE__*/_react.default.createElement(_FloatingDragMenu.default, {
             editorView: editorView,
             mountPoint: popupsMountPoint,

package/dist/cjs/pm-plugins/keymap.js

@@ -84,6 +84,9 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
       getIntl: getIntl
     }), list);
   }
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.focusToContextMenuTrigger.common, (0, _commands2.setFocusToCellMenu)(), list);
+  }
   return (0, _keymap.keymap)(list);
 }
 var _default = exports.default = keymapPlugin;

package/dist/cjs/reducer.js

@@ -102,6 +102,7 @@ var _default = exports.default = function _default(pluginState, action) {
     case 'HOVER_CELL':
     case 'SHOW_RESIZE_HANDLE_LINE':
     case 'SET_EDITOR_FOCUS':
+    case 'SET_CELL_MENU_OPEN':
       return _objectSpread(_objectSpread({}, pluginState), action.data);
     default:
       return pluginState;

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

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = _default;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -16,10 +17,13 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../commands");
 var _types = require("../../types");
 var _FixedButton = _interopRequireDefault(require("./FixedButton"));
 var _styles = require("./styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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; }
 /** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -33,6 +37,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     stickyHeader = props.stickyHeader,
     tableWrapper = props.tableWrapper,
     targetCellPosition = props.targetCellPosition,
+    isCellMenuOpenByKeyboard = props.isCellMenuOpenByKeyboard,
     formatMessage = props.intl.formatMessage; //  : Props & WrappedComponentProps
 
   var handleClick = function handleClick() {
@@ -50,6 +55,16 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   var domAtPos = editorView.domAtPos.bind(editorView);
   var targetCellRef;
   targetCellRef = (0, _utils.findDomRefAtPos)(targetCellPosition, domAtPos);
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
+        var state = editorView.state,
+          dispatch = editorView.dispatch;
+        // open the menu when the keyboard shortcut is pressed
+        (0, _commands.toggleContextualMenu)()(state, dispatch);
+      }
+    }
+  }, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
   if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
     return null;
   }
@@ -70,7 +85,8 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     iconBefore: (0, _react2.jsx)(_chevronDown.default, {
       label: ""
     }),
-    "aria-label": labelCellOptions
+    "aria-label": labelCellOptions,
+    "aria-expanded": (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') ? isContextualMenuOpen : undefined
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   if (stickyHeader && parentSticky && tableWrapper) {

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +14,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _customSteps = require("@atlaskit/custom-steps");
@@ -34,6 +35,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../commands");
 var _commandsWithAnalytics = require("../../commands-with-analytics");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
+var _pluginKey = require("../../pm-plugins/plugin-key");
 var _resizeState = require("../../pm-plugins/table-resizing/utils/resize-state");
 var _transforms = require("../../transforms");
 var _types = require("../../types");
@@ -41,10 +43,13 @@ var _utils3 = require("../../utils");
 var _consts = require("../consts");
 var _icons = require("../icons");
 var _styles2 = require("./styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; })(); } /* eslint-disable @atlaskit/design-system/prefer-primitives */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
 var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ContextualMenu, _Component);
   var _super = _createSuper(ContextualMenu);
@@ -56,8 +61,10 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isSubmenuOpen: false
+      isSubmenuOpen: false,
+      isOpenAllowed: false
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dropdownMenuRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubMenuRef", function (ref) {
       var parent = (0, _utils.closestElement)(_this.props.editorView.dom, '.fabric-editor-popup-scroll-parent');
       if (!(parent && ref)) {
@@ -75,15 +82,23 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         state = _this$props.editorView.state,
         isOpen = _this$props.isOpen,
         formatMessage = _this$props.intl.formatMessage,
-        editorView = _this$props.editorView;
+        editorView = _this$props.editorView,
+        isCellMenuOpenByKeyboard = _this$props.isCellMenuOpenByKeyboard;
       var isSubmenuOpen = _this.state.isSubmenuOpen;
       var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
         targetCellPosition = _getPluginState.targetCellPosition,
         isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
       if (allowBackgroundColor) {
-        var _node$attrs, _node$attrs2;
+        var _node$attrs, _node$attrs2, _node$attrs3;
         var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+        var selectedRowIndex;
+        var selectedColumnIndex;
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+          var selectedRowAndColumnFromPalette = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.cellBackgroundColorPalette, background, _consts.colorPalletteColumns);
+          selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
+          selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
+        }
         return {
           content: isDragAndDropEnabled ? formatMessage(_messages.tableMessages.backgroundColor) : formatMessage(_messages.tableMessages.cellBackground),
           value: {
@@ -107,10 +122,27 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             ,
             className: isDragAndDropEnabled ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && (0, _react2.jsx)("div", {
+          }), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen && (0, _react2.jsx)("div", {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
+          }, (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
+            type: _uiMenu.ArrowKeyNavigationType.COLOR,
+            selectedRowIndex: selectedRowIndex || 0,
+            selectedColumnIndex: selectedColumnIndex || 0,
+            handleClose: function handleClose() {
+              _this.setState({
+                isSubmenuOpen: false
+              });
+              if (_this.dropdownMenuRef && _this.dropdownMenuRef.current) {
+                var focusableItems = _this.dropdownMenuRef.current.querySelectorAll('div[tabindex="-1"]:not([disabled])');
+                if (focusableItems && focusableItems.length) {
+                  focusableItems[0].focus();
+                }
+              }
+            },
+            isPopupPositioned: true,
+            isOpenedByKeyboard: isCellMenuOpenByKeyboard
           }, (0, _react2.jsx)(_uiColor.ColorPalette, {
             cols: 7,
             onClick: _this.setColor,
@@ -120,7 +152,22 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
               paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
               hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
             }
-          })))
+          }))) : isSubmenuOpen &&
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          (0, _react2.jsx)("div", {
+            className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
+            ref: _this.handleSubMenuRef
+          }, (0, _react2.jsx)(_uiColor.ColorPalette, {
+            cols: 7,
+            onClick: _this.setColor,
+            selectedColor: (node === null || node === void 0 || (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.background) || '#ffffff',
+            paletteOptions: {
+              palette: _uiColor.cellBackgroundColorPalette,
+              paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
+              hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
+            }
+          }))),
+          'aria-expanded': (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen : undefined
         };
       }
     });
@@ -406,7 +453,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         selectionRect = _this$props10.selectionRect,
         editorAnalyticsAPI = _this$props10.editorAnalyticsAPI,
         getEditorContainerWidth = _this$props10.getEditorContainerWidth,
-        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
+        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags,
+        isCellMenuOpenByKeyboard = _this$props10.isCellMenuOpenByKeyboard;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var state = editorView.state,
         dispatch = editorView.dispatch;
@@ -419,6 +467,19 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         tableDuplicateCellColouring = _ref4$tableDuplicateC === void 0 ? false : _ref4$tableDuplicateC,
         _ref4$tableWithFixedC = _ref4.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _ref4$tableWithFixedC === void 0 ? false : _ref4$tableWithFixedC;
+      // context menu opened by keyboard and any item except 'background' activated
+      // or color has been chosen from color palette
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard && (item.value.name !== 'background' || item.value.name === 'background' && _this.state.isSubmenuOpen)) {
+        var tr = state.tr;
+        tr.setMeta(_pluginKey.pluginKey, {
+          type: 'SET_CELL_MENU_OPEN',
+          data: {
+            isCellMenuOpenByKeyboard: false
+          }
+        });
+        dispatch(tr);
+        editorView.dom.focus(); // otherwise cursor disappears from cell
+      }
       var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
       switch (item.value.name) {
         case 'sort_column_desc':
@@ -469,6 +530,19 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           (0, _commandsWithAnalytics.deleteRowsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
           _this.toggleOpen();
           break;
+        case 'background':
+          {
+            // This is called twice.
+            // 1st time when user chooses the background color item.
+            // 2nd when color has been chosen from color palette.
+            // here we are handling the 1st call relying on the isSubmenuOpen state value
+            if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen) {
+              _this.setState({
+                isSubmenuOpen: true
+              });
+            }
+            break;
+          }
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
@@ -484,22 +558,55 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenChange", function () {
-      var _this$props$editorVie = _this.props.editorView,
-        state = _this$props$editorVie.state,
-        dispatch = _this$props$editorVie.dispatch;
-      (0, _commands.toggleContextualMenu)()(state, dispatch);
-      _this.setState({
-        isSubmenuOpen: false
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref5) {
-      var item = _ref5.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenChange", function (payload) {
       var _this$props12 = _this.props,
         _this$props12$editorV = _this$props12.editorView,
         state = _this$props12$editorV.state,
         dispatch = _this$props12$editorV.dispatch,
-        selectionRect = _this$props12.selectionRect;
+        dom = _this$props12$editorV.dom,
+        isCellMenuOpenByKeyboard = _this$props12.isCellMenuOpenByKeyboard;
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+        if (payload) {
+          var event = payload.event;
+          if (event && event instanceof KeyboardEvent) {
+            if (!_this.state.isSubmenuOpen) {
+              if (arrowsList.has(event.key)) {
+                // preventing default behavior for avoiding cursor jump to next/previous table column
+                // when left/right arrow pressed.
+                event.preventDefault();
+              }
+              (0, _commands.toggleContextualMenu)()(state, dispatch);
+              _this.setState({
+                isSubmenuOpen: false
+              });
+              (0, _commands.setFocusToCellMenu)(false)(state, dispatch);
+              dom.focus();
+            }
+          } else {
+            // mouse click outside
+            (0, _commands.toggleContextualMenu)()(state, dispatch);
+            _this.setState({
+              isSubmenuOpen: false
+            });
+            if (isCellMenuOpenByKeyboard) {
+              (0, _commands.setFocusToCellMenu)(false)(state, dispatch);
+            }
+          }
+        }
+      } else {
+        (0, _commands.toggleContextualMenu)()(state, dispatch);
+        _this.setState({
+          isSubmenuOpen: false
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref5) {
+      var item = _ref5.item;
+      var _this$props13 = _this.props,
+        _this$props13$editorV = _this$props13.editorView,
+        state = _this$props13$editorV.state,
+        dispatch = _this$props13$editorV.dispatch,
+        selectionRect = _this$props13.selectionRect;
       if (item.value.name === 'background') {
         if (!_this.state.isSubmenuOpen) {
           _this.setState({
@@ -519,9 +626,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseLeave", function (_ref6) {
       var item = _ref6.item;
-      var _this$props$editorVie2 = _this.props.editorView,
-        state = _this$props$editorVie2.state,
-        dispatch = _this$props$editorVie2.dispatch;
+      var _this$props$editorVie = _this.props.editorView,
+        state = _this$props$editorVie.state,
+        dispatch = _this$props$editorVie.dispatch;
       if (item.value.name === 'background') {
         _this.closeSubmenu();
       }
@@ -537,9 +644,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setColor", function (color) {
-      var _this$props13 = _this.props,
-        editorView = _this$props13.editorView,
-        editorAnalyticsAPI = _this$props13.editorAnalyticsAPI;
+      var _this$props14 = _this.props,
+        editorView = _this$props14.editorView,
+        editorAnalyticsAPI = _this$props14.editorAnalyticsAPI;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var _getPluginState13 = (0, _pluginFactory.getPluginState)(editorView.state),
         targetCellPosition = _getPluginState13.targetCellPosition;
@@ -551,20 +658,44 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     return _this;
   }
   (0, _createClass2.default)(ContextualMenu, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+        // ArrowKeyNavigationProvider in DropdownMenu expects that menu handle will stay focused
+        // until user pressed ArrowDown.
+        // Behavior above fails the A11Y requirement about first item in menu should be focused immediately.
+        // so here is triggering componentDidUpdate inside dropdown to set focus on first element
+        var isCellMenuOpenByKeyboard = this.props.isCellMenuOpenByKeyboard;
+        if (isCellMenuOpenByKeyboard) {
+          this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
+            isOpenAllowed: isCellMenuOpenByKeyboard
+          }));
+        }
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _this$props14 = this.props,
-        isOpen = _this$props14.isOpen,
-        mountPoint = _this$props14.mountPoint,
-        offset = _this$props14.offset,
-        boundariesElement = _this$props14.boundariesElement,
-        editorView = _this$props14.editorView;
+      var _this$props15 = this.props,
+        isOpen = _this$props15.isOpen,
+        mountPoint = _this$props15.mountPoint,
+        offset = _this$props15.offset,
+        boundariesElement = _this$props15.boundariesElement,
+        editorView = _this$props15.editorView,
+        isCellMenuOpenByKeyboard = _this$props15.isCellMenuOpenByKeyboard;
       var _getPluginState14 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState14.isDragAndDropEnabled;
       var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+      var isOpenAllowed = false;
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+        isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
+      } else {
+        isOpenAllowed = isOpen;
+      }
       return (0, _react2.jsx)("div", {
         "data-testid": "table-cell-contextual-menu",
-        onMouseLeave: this.closeSubmenu
+        onMouseLeave: this.closeSubmenu,
+        ref: this.dropdownMenuRef
       }, (0, _react2.jsx)(_uiMenu.DropdownMenu, {
         mountTo: mountPoint
         //This needs be removed when the a11y is completely handled
@@ -572,21 +703,25 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         ,
         arrowKeyNavigationProviderOptions: {
           type: _uiMenu.ArrowKeyNavigationType.MENU,
-          disableArrowKeyNavigation: true
+          disableArrowKeyNavigation: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard && !this.state.isSubmenuOpen ? false : true
         },
         items: items,
-        isOpen: isOpen,
+        isOpen: isOpenAllowed,
         onOpenChange: this.handleOpenChange,
         onItemActivated: this.onMenuItemActivated,
         onMouseEnter: this.handleItemMouseEnter,
         onMouseLeave: this.handleItemMouseLeave,
         fitHeight: 188,
         fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth,
+        shouldFocusFirstItem: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') ? function () {
+          return Boolean(isCellMenuOpenByKeyboard);
+        } : undefined,
         boundariesElement: boundariesElement,
         offset: offset,
         section: isDragAndDropEnabled ? {
           hasSeparator: true
-        } : undefined
+        } : undefined,
+        isAllowEnterDefaultBehavior: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
       }));
     }
   }]);

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

@@ -26,7 +26,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     pluginConfig = _ref.pluginConfig,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     getEditorContainerWidth = _ref.getEditorContainerWidth,
-    getEditorFeatureFlags = _ref.getEditorFeatureFlags;
+    getEditorFeatureFlags = _ref.getEditorFeatureFlags,
+    isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard;
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition,
@@ -75,7 +76,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
     getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorFeatureFlags: getEditorFeatureFlags,
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/dist/es2019/commands/index.js

@@ -2,7 +2,7 @@ export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clear
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './toggle';
 export { clearMultipleCells } from './clear';
-export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest } from './misc';
+export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, setFocusToCellMenu } from './misc';
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';

package/dist/es2019/commands/misc.js

@@ -589,4 +589,12 @@ export const setTableAlignmentWithTableContentWithPos = (newAlignment, tableNode
   }
   tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
   return tr;
-};
+};
+export const setFocusToCellMenu = (isCellMenuOpenByKeyboard = true, originalTr) => createCommand(() => {
+  return {
+    type: 'SET_CELL_MENU_OPEN',
+    data: {
+      isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
+    }
+  };
+}, tr => (originalTr || tr).setMeta('addToHistory', false));

package/dist/es2019/plugin.js

@@ -347,13 +347,14 @@ const tablesPlugin = ({
             isHeaderColumnEnabled,
             isHeaderRowEnabled,
             isDragAndDropEnabled,
-            tableWrapperTarget
+            tableWrapperTarget,
+            isCellMenuOpenByKeyboard
           } = tablePluginState;
           const {
             allowControls
           } = pluginConfig;
           const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
-          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
             tableNode: tableNode,
@@ -363,7 +364,8 @@ const tablesPlugin = ({
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             isContextualMenuOpen: isContextualMenuOpen,
             stickyHeader: stickyHeader,
-            tableWrapper: tableWrapperTarget
+            tableWrapper: tableWrapperTarget,
+            isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
           }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
             tableNode: tableNode,
             tableRef: tableRef,
@@ -391,7 +393,8 @@ const tablesPlugin = ({
             pluginConfig: pluginConfig,
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
-            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
+            isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
           }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,

package/dist/es2019/pm-plugins/keymap.js

@@ -1,9 +1,9 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, addRowAfter, addRowAfterVO, addRowBefore, addRowBeforeVO, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
+import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, addRowAfter, addRowAfterVO, addRowBefore, addRowBeforeVO, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, focusToContextMenuTrigger, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { goToNextCell, moveCursorBackward } from '../commands';
+import { goToNextCell, moveCursorBackward, setFocusToCellMenu } from '../commands';
 import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable } from '../commands/insert';
@@ -69,6 +69,9 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
       getIntl: getIntl
     }), list);
   }
+  if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+    bindKeymapWithCommand(focusToContextMenuTrigger.common, setFocusToCellMenu(), list);
+  }
   return keymap(list);
 }
 export default keymapPlugin;