@atlaskit/editor-plugin-table 7.18.1 → 7.18.3

package/dist/es2019/reducer.js

@@ -116,6 +116,7 @@ export default ((pluginState, action) => {
     case 'HOVER_CELL':
     case 'SHOW_RESIZE_HANDLE_LINE':
     case 'SET_EDITOR_FOCUS':
+    case 'SET_CELL_MENU_OPEN':
       return {
         ...pluginState,
         ...action.data

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -12,6 +12,7 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { toggleContextualMenu } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
 import FixedButton from './FixedButton';
@@ -26,6 +27,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     stickyHeader,
     tableWrapper,
     targetCellPosition,
+    isCellMenuOpenByKeyboard,
     intl: {
       formatMessage
     }
@@ -48,6 +50,18 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   const domAtPos = editorView.domAtPos.bind(editorView);
   let targetCellRef;
   targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  useEffect(() => {
+    if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
+        const {
+          state,
+          dispatch
+        } = editorView;
+        // open the menu when the keyboard shortcut is pressed
+        toggleContextualMenu()(state, dispatch);
+      }
+    }
+  }, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
   if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
     return null;
   }
@@ -68,7 +82,8 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     iconBefore: jsx(ExpandIcon, {
       label: ""
     }),
-    "aria-label": labelCellOptions
+    "aria-label": labelCellOptions,
+    "aria-expanded": getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? isContextualMenuOpen : undefined
   }));
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   if (stickyHeader && parentSticky && tableWrapper) {

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

@@ -1,8 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
-import { Component } from 'react';
-
+import React, { Component } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
@@ -11,8 +10,8 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
-import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
@@ -21,22 +20,26 @@ import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, toggleContextualMenu } from '../../commands';
+import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
+import { pluginKey as tablePluginKey } from '../../pm-plugins/plugin-key';
 import { getNewResizeStateFromSelectedColumns } from '../../pm-plugins/table-resizing/utils/resize-state';
 import { canMergeCells } from '../../transforms';
 import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
-import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
+import { colorPalletteColumns, contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
 import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
+const arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
 export class ContextualMenu extends Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
-      isSubmenuOpen: false
+      isSubmenuOpen: false,
+      isOpenAllowed: false
     });
+    _defineProperty(this, "dropdownMenuRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "handleSubMenuRef", ref => {
       const parent = closestElement(this.props.editorView.dom, '.fabric-editor-popup-scroll-parent');
       if (!(parent && ref)) {
@@ -58,7 +61,8 @@ export class ContextualMenu extends Component {
         intl: {
           formatMessage
         },
-        editorView
+        editorView,
+        isCellMenuOpenByKeyboard
       } = this.props;
       const {
         isSubmenuOpen
@@ -68,9 +72,16 @@ export class ContextualMenu extends Component {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
       if (allowBackgroundColor) {
-        var _node$attrs, _node$attrs2;
+        var _node$attrs, _node$attrs2, _node$attrs3;
         const node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+        let selectedRowIndex;
+        let selectedColumnIndex;
+        if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+          const selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette, background, colorPalletteColumns);
+          selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
+          selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
+        }
         return {
           content: isDragAndDropEnabled ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
           value: {
@@ -94,10 +105,27 @@ export class ContextualMenu extends Component {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             ,
             className: isDragAndDropEnabled ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && jsx("div", {
+          }), getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen && jsx("div", {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: this.handleSubMenuRef
+          }, jsx(ArrowKeyNavigationProvider, {
+            type: ArrowKeyNavigationType.COLOR,
+            selectedRowIndex: selectedRowIndex || 0,
+            selectedColumnIndex: selectedColumnIndex || 0,
+            handleClose: () => {
+              this.setState({
+                isSubmenuOpen: false
+              });
+              if (this.dropdownMenuRef && this.dropdownMenuRef.current) {
+                const focusableItems = this.dropdownMenuRef.current.querySelectorAll('div[tabindex="-1"]:not([disabled])');
+                if (focusableItems && focusableItems.length) {
+                  focusableItems[0].focus();
+                }
+              }
+            },
+            isPopupPositioned: true,
+            isOpenedByKeyboard: isCellMenuOpenByKeyboard
           }, jsx(ColorPalette, {
             cols: 7,
             onClick: this.setColor,
@@ -107,7 +135,22 @@ export class ContextualMenu extends Component {
               paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
               hexToPaletteColor: hexToEditorBackgroundPaletteColor
             }
-          })))
+          }))) : isSubmenuOpen &&
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          jsx("div", {
+            className: ClassName.CONTEXTUAL_SUBMENU,
+            ref: this.handleSubMenuRef
+          }, jsx(ColorPalette, {
+            cols: 7,
+            onClick: this.setColor,
+            selectedColor: (node === null || node === void 0 ? void 0 : (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.background) || '#ffffff',
+            paletteOptions: {
+              palette: cellBackgroundColorPalette,
+              paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
+              hexToPaletteColor: hexToEditorBackgroundPaletteColor
+            }
+          }))),
+          'aria-expanded': getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen : undefined
         };
       }
     });
@@ -439,7 +482,8 @@ export class ContextualMenu extends Component {
         selectionRect,
         editorAnalyticsAPI,
         getEditorContainerWidth,
-        getEditorFeatureFlags
+        getEditorFeatureFlags,
+        isCellMenuOpenByKeyboard
       } = this.props;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
@@ -454,6 +498,21 @@ export class ContextualMenu extends Component {
         tableDuplicateCellColouring = false,
         tableWithFixedColumnWidthsOption = false
       } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
+      // context menu opened by keyboard and any item except 'background' activated
+      // or color has been chosen from color palette
+      if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard && (item.value.name !== 'background' || item.value.name === 'background' && this.state.isSubmenuOpen)) {
+        const {
+          tr
+        } = state;
+        tr.setMeta(tablePluginKey, {
+          type: 'SET_CELL_MENU_OPEN',
+          data: {
+            isCellMenuOpenByKeyboard: false
+          }
+        });
+        dispatch(tr);
+        editorView.dom.focus(); // otherwise cursor disappears from cell
+      }
       const shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
       switch (item.value.name) {
         case 'sort_column_desc':
@@ -507,6 +566,19 @@ export class ContextualMenu extends Component {
           deleteRowsWithAnalytics(editorAnalyticsAPI)(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 (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard && !this.state.isSubmenuOpen) {
+              this.setState({
+                isSubmenuOpen: true
+              });
+            }
+            break;
+          }
       }
     });
     _defineProperty(this, "toggleOpen", () => {
@@ -524,17 +596,51 @@ export class ContextualMenu extends Component {
         });
       }
     });
-    _defineProperty(this, "handleOpenChange", () => {
+    _defineProperty(this, "handleOpenChange", payload => {
       const {
         editorView: {
           state,
-          dispatch
-        }
+          dispatch,
+          dom
+        },
+        isCellMenuOpenByKeyboard
       } = this.props;
-      toggleContextualMenu()(state, dispatch);
-      this.setState({
-        isSubmenuOpen: false
-      });
+      if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+        if (payload) {
+          const {
+            event
+          } = payload;
+          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();
+              }
+              toggleContextualMenu()(state, dispatch);
+              this.setState({
+                isSubmenuOpen: false
+              });
+              setFocusToCellMenu(false)(state, dispatch);
+              dom.focus();
+            }
+          } else {
+            // mouse click outside
+            toggleContextualMenu()(state, dispatch);
+            this.setState({
+              isSubmenuOpen: false
+            });
+            if (isCellMenuOpenByKeyboard) {
+              setFocusToCellMenu(false)(state, dispatch);
+            }
+          }
+        }
+      } else {
+        toggleContextualMenu()(state, dispatch);
+        this.setState({
+          isSubmenuOpen: false
+        });
+      }
     });
     _defineProperty(this, "handleItemMouseEnter", ({
       item
@@ -601,21 +707,46 @@ export class ContextualMenu extends Component {
       this.toggleOpen();
     });
   }
+  componentDidMount() {
+    if (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
+      const {
+        isCellMenuOpenByKeyboard
+      } = this.props;
+      if (isCellMenuOpenByKeyboard) {
+        this.setState({
+          ...this.state,
+          isOpenAllowed: isCellMenuOpenByKeyboard
+        });
+      }
+    }
+  }
   render() {
     const {
       isOpen,
       mountPoint,
       offset,
       boundariesElement,
-      editorView
+      editorView,
+      isCellMenuOpenByKeyboard
     } = this.props;
     const {
       isDragAndDropEnabled
     } = getPluginState(editorView.state);
     const items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+    let isOpenAllowed = false;
+    if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+      isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
+    } else {
+      isOpenAllowed = isOpen;
+    }
     return jsx("div", {
       "data-testid": "table-cell-contextual-menu",
-      onMouseLeave: this.closeSubmenu
+      onMouseLeave: this.closeSubmenu,
+      ref: this.dropdownMenuRef
     }, jsx(DropdownMenu, {
       mountTo: mountPoint
       //This needs be removed when the a11y is completely handled
@@ -623,21 +754,25 @@ export class ContextualMenu extends Component {
       ,
       arrowKeyNavigationProviderOptions: {
         type: ArrowKeyNavigationType.MENU,
-        disableArrowKeyNavigation: true
+        disableArrowKeyNavigation: 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 ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
+      shouldFocusFirstItem: getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? () => {
+        return Boolean(isCellMenuOpenByKeyboard);
+      } : undefined,
       boundariesElement: boundariesElement,
       offset: offset,
       section: isDragAndDropEnabled ? {
         hasSeparator: true
-      } : undefined
+      } : undefined,
+      isAllowEnterDefaultBehavior: getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
     }));
   }
 }

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

@@ -18,7 +18,8 @@ const FloatingContextualMenu = ({
   pluginConfig,
   editorAnalyticsAPI,
   getEditorContainerWidth,
-  getEditorFeatureFlags
+  getEditorFeatureFlags,
+  isCellMenuOpenByKeyboard
 }) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
@@ -71,7 +72,8 @@ const FloatingContextualMenu = ({
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
     getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorFeatureFlags: getEditorFeatureFlags,
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/dist/esm/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/esm/commands/misc.js

@@ -619,4 +619,18 @@ export var setTableAlignmentWithTableContentWithPos = function setTableAlignment
     tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };
+};
+export var setFocusToCellMenu = function setFocusToCellMenu() {
+  var isCellMenuOpenByKeyboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var originalTr = arguments.length > 1 ? arguments[1] : undefined;
+  return createCommand(function () {
+    return {
+      type: 'SET_CELL_MENU_OPEN',
+      data: {
+        isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
+      }
+    };
+  }, function (tr) {
+    return (originalTr || tr).setMeta('addToHistory', false);
+  });
 };

package/dist/esm/plugin.js

@@ -349,10 +349,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 ? 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,
@@ -362,7 +363,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             isContextualMenuOpen: isContextualMenuOpen,
             stickyHeader: stickyHeader,
-            tableWrapper: tableWrapperTarget
+            tableWrapper: tableWrapperTarget,
+            isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
           }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
             tableNode: tableNode,
             tableRef: tableRef,
@@ -390,7 +392,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.createElement(FloatingDragMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,

package/dist/esm/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';
@@ -77,6 +77,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;

package/dist/esm/reducer.js

@@ -95,6 +95,7 @@ export default (function (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/esm/ui/FloatingContextualButton/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -12,6 +12,7 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { toggleContextualMenu } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
 import FixedButton from './FixedButton';
@@ -25,6 +26,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     stickyHeader = props.stickyHeader,
     tableWrapper = props.tableWrapper,
     targetCellPosition = props.targetCellPosition,
+    isCellMenuOpenByKeyboard = props.isCellMenuOpenByKeyboard,
     formatMessage = props.intl.formatMessage; //  : Props & WrappedComponentProps
 
   var handleClick = function handleClick() {
@@ -42,6 +44,16 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   var domAtPos = editorView.domAtPos.bind(editorView);
   var targetCellRef;
   targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  useEffect(function () {
+    if (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
+        toggleContextualMenu()(state, dispatch);
+      }
+    }
+  }, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
   if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
     return null;
   }
@@ -62,7 +74,8 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     iconBefore: jsx(ExpandIcon, {
       label: ""
     }),
-    "aria-label": labelCellOptions
+    "aria-label": labelCellOptions,
+    "aria-expanded": getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? isContextualMenuOpen : undefined
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   if (stickyHeader && parentSticky && tableWrapper) {