@atlaskit/editor-plugin-table 7.18.2 → 7.18.4

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';
@@ -47,27 +47,28 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
     bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   }
-  if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
-      ariaNotify: ariaNotifyPlugin,
-      getIntl: getIntl
-    }), list);
-    bindKeymapWithCommand(moveRight.common, activateNextResizeArea({
-      direction: 1,
-      ariaNotify: ariaNotifyPlugin,
-      getIntl: getIntl
-    }), list);
-    bindKeymapWithCommand(moveLeft.common, activateNextResizeArea({
-      direction: -1,
-      ariaNotify: ariaNotifyPlugin,
-      getIntl: getIntl
-    }), list);
-    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
-    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
-    bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing({
-      ariaNotify: ariaNotifyPlugin,
-      getIntl: getIntl
-    }), list);
+  bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
+    ariaNotify: ariaNotifyPlugin,
+    getIntl: getIntl
+  }), list);
+  bindKeymapWithCommand(moveRight.common, activateNextResizeArea({
+    direction: 1,
+    ariaNotify: ariaNotifyPlugin,
+    getIntl: getIntl
+  }), list);
+  bindKeymapWithCommand(moveLeft.common, activateNextResizeArea({
+    direction: -1,
+    ariaNotify: ariaNotifyPlugin,
+    getIntl: getIntl
+  }), list);
+  bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+  bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+  bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing({
+    ariaNotify: ariaNotifyPlugin,
+    getIntl: getIntl
+  }), list);
+  if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+    bindKeymapWithCommand(focusToContextMenuTrigger.common, setFocusToCellMenu(), list);
   }
   return keymap(list);
 }

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

@@ -106,31 +106,29 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
               tableRef = parent.querySelector('table') || undefined;
             }
             const tableNode = findTable(state.selection);
-            if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-              // when keyboard cursor leaves the table we need to stop column resizing
-              const pluginPrevState = getPluginState(prevState);
-              const isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
-              if (isStopKeyboardColumResizing) {
-                const isTableNodesDifferent = (pluginPrevState === null || pluginPrevState === void 0 ? void 0 : pluginPrevState.tableNode) !== (tableNode === null || tableNode === void 0 ? void 0 : tableNode.node);
-                if (pluginPrevState !== null && pluginPrevState !== void 0 && pluginPrevState.tableNode && tableNode && isTableNodesDifferent) {
-                  const oldRowsNumber = TableMap.get(pluginPrevState.tableNode).height;
-                  const newRowsNumber = TableMap.get(tableNode.node).height;
-                  if (oldRowsNumber !== newRowsNumber ||
-                  // Add/delete row
-                  tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
-                    // Jump to another table
-                    stopKeyboardColumnResizing({
-                      ariaNotify: ariaNotifyPlugin,
-                      getIntl: getIntl
-                    })(state, dispatch);
-                  }
-                } else if (!tableNode) {
-                  // selection outside of table
+            // when keyboard cursor leaves the table we need to stop column resizing
+            const pluginPrevState = getPluginState(prevState);
+            const isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
+            if (isStopKeyboardColumResizing) {
+              const isTableNodesDifferent = (pluginPrevState === null || pluginPrevState === void 0 ? void 0 : pluginPrevState.tableNode) !== (tableNode === null || tableNode === void 0 ? void 0 : tableNode.node);
+              if (pluginPrevState !== null && pluginPrevState !== void 0 && pluginPrevState.tableNode && tableNode && isTableNodesDifferent) {
+                const oldRowsNumber = TableMap.get(pluginPrevState.tableNode).height;
+                const newRowsNumber = TableMap.get(tableNode.node).height;
+                if (oldRowsNumber !== newRowsNumber ||
+                // Add/delete row
+                tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
+                  // Jump to another table
                   stopKeyboardColumnResizing({
                     ariaNotify: ariaNotifyPlugin,
                     getIntl: getIntl
                   })(state, dispatch);
                 }
+              } else if (!tableNode) {
+                // selection outside of table
+                stopKeyboardColumnResizing({
+                  ariaNotify: ariaNotifyPlugin,
+                  getIntl: getIntl
+                })(state, dispatch);
               }
             }
           }
@@ -240,17 +238,15 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           state,
           dispatch
         } = view;
-        if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-          const {
-            isKeyboardResize
-          } = getPluginState(state);
-          if (isKeyboardResize) {
-            stopKeyboardColumnResizing({
-              ariaNotify: ariaNotifyPlugin,
-              getIntl: getIntl
-            })(state, dispatch);
-            return false;
-          }
+        const {
+          isKeyboardResize
+        } = getPluginState(state);
+        if (isKeyboardResize) {
+          stopKeyboardColumnResizing({
+            ariaNotify: ariaNotifyPlugin,
+            getIntl: getIntl
+          })(state, dispatch);
+          return false;
         }
         const tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
         if (tr.selectionSet) {

package/dist/es2019/pm-plugins/table-resizing/event-handlers.js

@@ -118,15 +118,11 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
 
     // If we let go in the same place we started, don't need to do anything.
     if (dragging && clientX === dragging.startX) {
-      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-        if (isKeyboardResize || !isTableHovered) {
-          /** if column resize had started via keyboard but continued by mouse
-           *  or mouse pointer leaves the table but mouse button still pressed
-           */
-          return stopKeyboardColumnResizing({})(state, dispatch, view);
-        } else {
-          return stopResizing()(state, dispatch);
-        }
+      if (isKeyboardResize || !isTableHovered) {
+        /** if column resize had started via keyboard but continued by mouse
+         *  or mouse pointer leaves the table but mouse button still pressed
+         */
+        return stopKeyboardColumnResizing({})(state, dispatch, view);
       } else {
         return stopResizing()(state, dispatch);
       }
@@ -197,17 +193,13 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
           }
         })(tr);
       }
-      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-        if (isKeyboardResize || !isTableHovered) {
-          /** if column resize had started via keyboard but continued by mouse
-           *  or mouse pointer leaves the table but mouse button still pressed
-           */
-          return stopKeyboardColumnResizing({
-            originalTr: tr
-          })(state, dispatch, view);
-        } else {
-          return stopResizing(tr)(state, dispatch);
-        }
+      if (isKeyboardResize || !isTableHovered) {
+        /** if column resize had started via keyboard but continued by mouse
+         *  or mouse pointer leaves the table but mouse button still pressed
+         */
+        return stopKeyboardColumnResizing({
+          originalTr: tr
+        })(state, dispatch, view);
       } else {
         return stopResizing(tr)(state, dispatch);
       }
@@ -228,7 +220,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     const {
       isTableHovered
     } = getTablePluginState(state);
-    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered && getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered) {
       return finish(event);
     }
     const $cell = state.doc.resolve(resizeHandlePos);

package/dist/es2019/pm-plugins/table-resizing/plugin.js

@@ -1,6 +1,5 @@
 import classnames from 'classnames';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName } from '../../types';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { setResizeHandlePos } from './commands';
@@ -41,17 +40,15 @@ export function createPlugin(dispatch, {
             dragging
           } = getPluginState(state);
           let isColumnKeyboardResizeStarted = false;
-          if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-            /*
-                    We need to start listening mouse events if column resize started from keyboard.
-                    This will allow continue resizing via mouse
-                  */
-            const {
-              isKeyboardResize
-            } = getTablePluginState(state);
-            if (isKeyboardResize) {
-              isColumnKeyboardResizeStarted = isKeyboardResize;
-            }
+          /*
+          	We need to start listening mouse events if column resize started from keyboard.
+          	This will allow continue resizing via mouse
+          */
+          const {
+            isKeyboardResize
+          } = getTablePluginState(state);
+          if (isKeyboardResize) {
+            isColumnKeyboardResizeStarted = isKeyboardResize;
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
             if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled)) {

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';