@atlaskit/editor-plugin-table 5.4.24 → 5.5.0

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -81,7 +81,10 @@ class TableComponent extends React.Component {
       if (!this.wrapper || event.target !== this.wrapper) {
         return;
       }
-      if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+      const {
+        stickyScrollbar
+      } = this.props.getEditorFeatureFlags();
+      if (stickyScrollbar) {
         if (this.stickyScrollbar) {
           this.stickyScrollbar.scrollLeft(this.wrapper.scrollLeft);
         }
@@ -306,13 +309,17 @@ class TableComponent extends React.Component {
       eventDispatcher,
       options,
       isDragAndDropEnabled,
-      getNode
+      getNode,
+      getEditorFeatureFlags
     } = this.props;
     if (allowColumnResizing && this.wrapper && !isIE11) {
       this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
         passive: true
       });
-      if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+      const {
+        stickyScrollbar
+      } = getEditorFeatureFlags();
+      if (stickyScrollbar) {
         if (this.table) {
           this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
         }
@@ -398,7 +405,8 @@ class TableComponent extends React.Component {
       allowColumnResizing,
       eventDispatcher,
       options,
-      isDragAndDropEnabled
+      isDragAndDropEnabled,
+      getEditorFeatureFlags
     } = this.props;
     if (this.wrapper && !isIE11) {
       this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
@@ -406,7 +414,10 @@ class TableComponent extends React.Component {
     if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
       this.dragAndDropCleanupFn();
     }
-    if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+    const {
+      stickyScrollbar
+    } = getEditorFeatureFlags();
+    if (stickyScrollbar) {
       if (this.stickyScrollbar) {
         this.stickyScrollbar.dispose();
       }
@@ -518,7 +529,8 @@ class TableComponent extends React.Component {
       getPos,
       pluginInjectionApi,
       isDragAndDropEnabled,
-      canDrag
+      canDrag,
+      getEditorFeatureFlags
     } = this.props;
     const {
       showBeforeShadow,
@@ -575,8 +587,8 @@ class TableComponent extends React.Component {
       selection: view.state.selection,
       headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
       stickyHeader: this.state.stickyHeader,
-      getEditorFeatureFlags: this.props.getEditorFeatureFlags,
-      canDrag: canDrag
+      canDrag: canDrag,
+      getEditorFeatureFlags: getEditorFeatureFlags
     }) : null;
     const shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
     const shadowStyle = memoizeOne(visible => ({
@@ -596,6 +608,9 @@ class TableComponent extends React.Component {
     }
     const isNested = isTableNested(view.state, tablePos);
     const topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
+    const {
+      stickyScrollbar
+    } = getEditorFeatureFlags();
     return /*#__PURE__*/React.createElement(TableContainer, {
       className: classnames(ClassName.TABLE_CONTAINER, {
         [ClassName.WITH_CONTROLS]: allowControls && tableActive,
@@ -616,7 +631,7 @@ class TableComponent extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"
-    }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
+    }), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
       "data-testid": "sticky-scrollbar-sentinel-top"
     }), allowControls && rowControls, isDragAndDropEnabled && /*#__PURE__*/React.createElement(ExternalDropTargets, {
@@ -653,11 +668,13 @@ class TableComponent extends React.Component {
           }
         }
       }
-    }, allowControls && colControls), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
+    }, allowControls && colControls), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
       style: {
         height: MAX_BROWSER_SCROLLBAR_HEIGHT,
-        display: 'none'
+        display: 'none',
+        // prevent unwanted scroll during table resize without removing scrollbar container from the dom
+        width: isResizing ? '0px' : '100%'
       }
     }, /*#__PURE__*/React.createElement("div", {
       style: {
@@ -682,7 +699,7 @@ class TableComponent extends React.Component {
     })), /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
       "data-testid": "sticky-sentinel-bottom"
-    }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
+    }), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
       "data-testid": "sticky-scrollbar-sentinel-bottom"
     }));

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -1,10 +1,13 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import debounce from 'lodash/debounce';
 import rafSchd from 'raf-schd';
 import { useIntl } from 'react-intl-next';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
+import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { browser } from '@atlaskit/editor-common/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -15,6 +18,8 @@ import { TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines } from '../utils/guidelines';
 import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
+const DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
+const RESIZE_STEP_VALUE = 10;
 const handles = {
   right: true
 };
@@ -83,10 +88,31 @@ export const TableResizer = ({
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   const isResizing = useRef(false);
+  const areResizeMetaKeysPressed = useRef(false);
+  const resizerRef = useRef(null);
+
+  // used to reposition tooltip when table is resizing via keyboard
+  const updateTooltip = React.useRef();
   const [snappingEnabled, setSnappingEnabled] = useState(false);
+
+  // we don't want to update aria-live region on each width change, it might provide bad experience for screen reader users
+  const [screenReaderResizeInformation, setScreenReaderResizeInformation] = useState({
+    type: 'none',
+    width
+  });
   const {
     formatMessage
   } = useIntl();
+  const screenReaderResizeAnnouncerMessages = {
+    increase: formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
+      newWidth: screenReaderResizeInformation.width
+    }),
+    decrease: formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
+      newWidth: screenReaderResizeInformation.width
+    }),
+    none: ''
+  };
+  const isTableSelected = ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
   const resizerMinWidth = getResizerMinWidth(node);
   const handleSize = getResizerHandleHeight(tableRef);
   const {
@@ -230,8 +256,109 @@ export const TableResizer = ({
     }
     return newWidth;
   }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
-  const isTableSelected = ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
-  return /*#__PURE__*/React.createElement(ResizerNext, {
+  const handleTableSizeChangeOnKeypress = useCallback(step => {
+    const newWidth = width + step;
+    if (newWidth > maxWidth || newWidth < resizerMinWidth) {
+      return;
+    }
+    handleResizeStop({
+      width: width,
+      x: 0,
+      y: 0,
+      height: 0
+    }, {
+      width: step,
+      height: 0
+    });
+  }, [width, handleResizeStop, maxWidth, resizerMinWidth]);
+  const handleEscape = useCallback(() => {
+    editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+  }, [editorView]);
+  const handleKeyDown = useCallback(event => {
+    const isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
+    const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+    if (event.altKey || metaKey || event.shiftKey) {
+      areResizeMetaKeysPressed.current = true;
+    }
+    if (event.altKey && metaKey) {
+      if (isBracketKey) {
+        event.preventDefault();
+        handleTableSizeChangeOnKeypress(event.code === 'BracketRight' ? RESIZE_STEP_VALUE : -RESIZE_STEP_VALUE);
+      }
+    } else if (!areResizeMetaKeysPressed.current) {
+      handleEscape();
+    }
+  }, [handleEscape, handleTableSizeChangeOnKeypress]);
+  const handleKeyUp = useCallback(event => {
+    if (event.altKey || event.metaKey) {
+      areResizeMetaKeysPressed.current = false;
+    }
+    return;
+  }, [areResizeMetaKeysPressed]);
+  useLayoutEffect(() => {
+    if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
+      if (!resizerRef.current) {
+        return;
+      }
+      const resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
+      const globalKeyDownHandler = event => {
+        const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+        if (!isTableSelected) {
+          return;
+        }
+        if (event.altKey && event.shiftKey && metaKey && event.code === 'KeyR') {
+          event.preventDefault();
+          if (!resizeHandleThumbEl) {
+            return;
+          }
+          resizeHandleThumbEl.focus();
+          resizeHandleThumbEl.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'nearest'
+          });
+        }
+      };
+      const editorViewDom = editorView === null || editorView === void 0 ? void 0 : editorView.dom;
+      editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.addEventListener('keydown', globalKeyDownHandler);
+      resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 ? void 0 : resizeHandleThumbEl.addEventListener('keydown', handleKeyDown);
+      resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 ? void 0 : resizeHandleThumbEl.addEventListener('keyup', handleKeyUp);
+      return () => {
+        editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
+        resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 ? void 0 : resizeHandleThumbEl.removeEventListener('keydown', handleKeyDown);
+        resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 ? void 0 : resizeHandleThumbEl.removeEventListener('keyup', handleKeyUp);
+      };
+    }
+  }, [resizerRef, editorView, handleResizeStop, isTableSelected, handleKeyDown, handleKeyUp]);
+  useLayoutEffect(() => {
+    if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
+      var _updateTooltip$curren;
+      (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 ? void 0 : _updateTooltip$curren.call(updateTooltip);
+    }
+  }, [width]);
+  useEffect(() => {
+    if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
+      const debouncedSetWidth = debounce(setScreenReaderResizeInformation, DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER);
+      debouncedSetWidth(prevState => {
+        let type = 'none';
+        if (prevState.width > width) {
+          type = 'decrease';
+        }
+        if (prevState.width < width) {
+          type = 'increase';
+        }
+        return {
+          type,
+          width
+        };
+      });
+      return () => {
+        debouncedSetWidth.cancel();
+      };
+    }
+  }, [width]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
+    ref: resizerRef,
     enable: handles,
     width: width,
     handleAlignmentMethod: "sticky",
@@ -249,6 +376,17 @@ export const TableResizer = ({
     isHandleVisible: isTableSelected,
     appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
-    handleTooltipContent: formatMessage(messages.resizeTable)
-  }, children);
+    handleTooltipContent: getBooleanFF('platform.editor.a11y-table-resizing_uapcv') ? ({
+      update
+    }) => {
+      updateTooltip.current = update;
+      return /*#__PURE__*/React.createElement(ToolTipContent, {
+        description: formatMessage(messages.resizeTable),
+        keymap: focusTableResizer
+      });
+    } : formatMessage(messages.resizeTable)
+  }, children), getBooleanFF('platform.editor.a11y-table-resizing_uapcv') && /*#__PURE__*/React.createElement("div", {
+    className: "assistive",
+    role: "status"
+  }, screenReaderResizeAnnouncerMessages[screenReaderResizeInformation.type]));
 };

package/dist/es2019/plugins/table/toolbar.js

@@ -11,7 +11,6 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType, splitCell } from '@atlaskit/editor-tables/utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -304,12 +303,15 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
       }
       return element;
     };
+    const {
+      stickyScrollbar
+    } = getEditorFeatureFlags();
     return {
       title: 'Table floating controls',
       getDomRef,
       nodeType,
       offset: [0, 18],
-      absoluteOffset: getBooleanFF('platform.editor.table-sticky-scrollbar') ? {
+      absoluteOffset: stickyScrollbar ? {
         top: -6
       } : {
         top: 0

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -77,8 +77,8 @@ const stickyScrollbarContainerStyles = `.${ClassName.TABLE_CONTAINER} {
     bottom: 0;
   }
 }`;
-const stickyScrollbarStyles = () => {
-  return getBooleanFF('platform.editor.table-sticky-scrollbar') ? `${stickyScrollbarContainerStyles} ${stickyScrollbarSentinelStyles}` : '';
+const stickyScrollbarStyles = featureFlags => {
+  return featureFlags !== null && featureFlags !== void 0 && featureFlags.stickyScrollbar ? `${stickyScrollbarContainerStyles} ${stickyScrollbarSentinelStyles}` : '';
 };
 const shadowSentinelStyles = `
   .${ClassName.TABLE_SHADOW_SENTINEL_LEFT},
@@ -437,7 +437,7 @@ export const tableStyles = props => {
 
     ${sentinelStyles}
     ${OverflowShadow(props)}
-    ${stickyScrollbarStyles()}
+    ${stickyScrollbarStyles(props.featureFlags)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
       height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -92,7 +92,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!_this.wrapper || event.target !== _this.wrapper) {
         return;
       }
-      if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+      var _this$props$getEditor = _this.props.getEditorFeatureFlags(),
+        stickyScrollbar = _this$props$getEditor.stickyScrollbar;
+      if (stickyScrollbar) {
         if (_this.stickyScrollbar) {
           _this.stickyScrollbar.scrollLeft(_this.wrapper.scrollLeft);
         }
@@ -304,12 +306,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         eventDispatcher = _this$props7.eventDispatcher,
         options = _this$props7.options,
         isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
-        getNode = _this$props7.getNode;
+        getNode = _this$props7.getNode,
+        getEditorFeatureFlags = _this$props7.getEditorFeatureFlags;
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
         });
-        if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+        var _getEditorFeatureFlag = getEditorFeatureFlags(),
+          stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
+        if (stickyScrollbar) {
           if (this.table) {
             this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
           }
@@ -393,14 +398,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         allowColumnResizing = _this$props8.allowColumnResizing,
         eventDispatcher = _this$props8.eventDispatcher,
         options = _this$props8.options,
-        isDragAndDropEnabled = _this$props8.isDragAndDropEnabled;
+        isDragAndDropEnabled = _this$props8.isDragAndDropEnabled,
+        getEditorFeatureFlags = _this$props8.getEditorFeatureFlags;
       if (this.wrapper && !isIE11) {
         this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
       }
       if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
         this.dragAndDropCleanupFn();
       }
-      if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+      var _getEditorFeatureFlag2 = getEditorFeatureFlags(),
+        stickyScrollbar = _getEditorFeatureFlag2.stickyScrollbar;
+      if (stickyScrollbar) {
         if (this.stickyScrollbar) {
           this.stickyScrollbar.dispose();
         }
@@ -512,7 +520,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getPos = _this$props10.getPos,
         pluginInjectionApi = _this$props10.pluginInjectionApi,
         isDragAndDropEnabled = _this$props10.isDragAndDropEnabled,
-        canDrag = _this$props10.canDrag;
+        canDrag = _this$props10.canDrag,
+        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
@@ -566,8 +575,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         selection: view.state.selection,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
-        getEditorFeatureFlags: this.props.getEditorFeatureFlags,
-        canDrag: canDrag
+        canDrag: canDrag,
+        getEditorFeatureFlags: getEditorFeatureFlags
       }) : null;
       var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
       var shadowStyle = memoizeOne(function (visible) {
@@ -589,6 +598,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       var isNested = isTableNested(view.state, tablePos);
       var topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
+      var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
+        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
       return /*#__PURE__*/React.createElement(TableContainer, {
         className: classnames(ClassName.TABLE_CONTAINER, (_classnames = {}, _defineProperty(_classnames, ClassName.WITH_CONTROLS, allowControls && tableActive), _defineProperty(_classnames, ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _defineProperty(_classnames, ClassName.HOVERED_DELETE_BUTTON, isInDanger), _defineProperty(_classnames, ClassName.TABLE_SELECTED, isTableSelected(view.state.selection)), _classnames)),
         editorView: view,
@@ -604,7 +615,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
-      }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
+      }), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
       }), allowControls && rowControls, isDragAndDropEnabled && /*#__PURE__*/React.createElement(ExternalDropTargets, {
@@ -641,11 +652,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             }
           }
         }
-      }, allowControls && colControls), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
+      }, allowControls && colControls), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         style: {
           height: MAX_BROWSER_SCROLLBAR_HEIGHT,
-          display: 'none'
+          display: 'none',
+          // prevent unwanted scroll during table resize without removing scrollbar container from the dom
+          width: isResizing ? '0px' : '100%'
         }
       }, /*#__PURE__*/React.createElement("div", {
         style: {
@@ -670,7 +683,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       })), /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
         "data-testid": "sticky-sentinel-bottom"
-      }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
+      }), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"
       }));

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -2,13 +2,16 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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; }
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import debounce from 'lodash/debounce';
 import rafSchd from 'raf-schd';
 import { useIntl } from 'react-intl-next';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
+import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { browser } from '@atlaskit/editor-common/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -19,6 +22,8 @@ import { TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines } from '../utils/guidelines';
 import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
+var DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
+var RESIZE_STEP_VALUE = 10;
 var handles = {
   right: true
 };
@@ -86,12 +91,36 @@ export var TableResizer = function TableResizer(_ref) {
   var currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = useRef(false);
+  var areResizeMetaKeysPressed = useRef(false);
+  var resizerRef = useRef(null);
+
+  // used to reposition tooltip when table is resizing via keyboard
+  var updateTooltip = React.useRef();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     snappingEnabled = _useState2[0],
     setSnappingEnabled = _useState2[1];
+
+  // we don't want to update aria-live region on each width change, it might provide bad experience for screen reader users
+  var _useState3 = useState({
+      type: 'none',
+      width: width
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    screenReaderResizeInformation = _useState4[0],
+    setScreenReaderResizeInformation = _useState4[1];
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var screenReaderResizeAnnouncerMessages = {
+    increase: formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
+      newWidth: screenReaderResizeInformation.width
+    }),
+    decrease: formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
+      newWidth: screenReaderResizeInformation.width
+    }),
+    none: ''
+  };
+  var isTableSelected = ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
   var resizerMinWidth = getResizerMinWidth(node);
   var handleSize = getResizerHandleHeight(tableRef);
   var _getPluginState = getPluginState(editorView.state),
@@ -225,8 +254,109 @@ export var TableResizer = function TableResizer(_ref) {
     }
     return newWidth;
   }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
-  var isTableSelected = ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
-  return /*#__PURE__*/React.createElement(ResizerNext, {
+  var handleTableSizeChangeOnKeypress = useCallback(function (step) {
+    var newWidth = width + step;
+    if (newWidth > maxWidth || newWidth < resizerMinWidth) {
+      return;
+    }
+    handleResizeStop({
+      width: width,
+      x: 0,
+      y: 0,
+      height: 0
+    }, {
+      width: step,
+      height: 0
+    });
+  }, [width, handleResizeStop, maxWidth, resizerMinWidth]);
+  var handleEscape = useCallback(function () {
+    editorView === null || editorView === void 0 || editorView.focus();
+  }, [editorView]);
+  var handleKeyDown = useCallback(function (event) {
+    var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
+    var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+    if (event.altKey || metaKey || event.shiftKey) {
+      areResizeMetaKeysPressed.current = true;
+    }
+    if (event.altKey && metaKey) {
+      if (isBracketKey) {
+        event.preventDefault();
+        handleTableSizeChangeOnKeypress(event.code === 'BracketRight' ? RESIZE_STEP_VALUE : -RESIZE_STEP_VALUE);
+      }
+    } else if (!areResizeMetaKeysPressed.current) {
+      handleEscape();
+    }
+  }, [handleEscape, handleTableSizeChangeOnKeypress]);
+  var handleKeyUp = useCallback(function (event) {
+    if (event.altKey || event.metaKey) {
+      areResizeMetaKeysPressed.current = false;
+    }
+    return;
+  }, [areResizeMetaKeysPressed]);
+  useLayoutEffect(function () {
+    if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
+      if (!resizerRef.current) {
+        return;
+      }
+      var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
+      var globalKeyDownHandler = function globalKeyDownHandler(event) {
+        var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+        if (!isTableSelected) {
+          return;
+        }
+        if (event.altKey && event.shiftKey && metaKey && event.code === 'KeyR') {
+          event.preventDefault();
+          if (!resizeHandleThumbEl) {
+            return;
+          }
+          resizeHandleThumbEl.focus();
+          resizeHandleThumbEl.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'nearest'
+          });
+        }
+      };
+      var editorViewDom = editorView === null || editorView === void 0 ? void 0 : editorView.dom;
+      editorViewDom === null || editorViewDom === void 0 || editorViewDom.addEventListener('keydown', globalKeyDownHandler);
+      resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.addEventListener('keydown', handleKeyDown);
+      resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.addEventListener('keyup', handleKeyUp);
+      return function () {
+        editorViewDom === null || editorViewDom === void 0 || editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
+        resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keydown', handleKeyDown);
+        resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keyup', handleKeyUp);
+      };
+    }
+  }, [resizerRef, editorView, handleResizeStop, isTableSelected, handleKeyDown, handleKeyUp]);
+  useLayoutEffect(function () {
+    if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
+      var _updateTooltip$curren;
+      (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
+    }
+  }, [width]);
+  useEffect(function () {
+    if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
+      var debouncedSetWidth = debounce(setScreenReaderResizeInformation, DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER);
+      debouncedSetWidth(function (prevState) {
+        var type = 'none';
+        if (prevState.width > width) {
+          type = 'decrease';
+        }
+        if (prevState.width < width) {
+          type = 'increase';
+        }
+        return {
+          type: type,
+          width: width
+        };
+      });
+      return function () {
+        debouncedSetWidth.cancel();
+      };
+    }
+  }, [width]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
+    ref: resizerRef,
     enable: handles,
     width: width,
     handleAlignmentMethod: "sticky",
@@ -244,6 +374,16 @@ export var TableResizer = function TableResizer(_ref) {
     isHandleVisible: isTableSelected,
     appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
-    handleTooltipContent: formatMessage(messages.resizeTable)
-  }, children);
+    handleTooltipContent: getBooleanFF('platform.editor.a11y-table-resizing_uapcv') ? function (_ref3) {
+      var update = _ref3.update;
+      updateTooltip.current = update;
+      return /*#__PURE__*/React.createElement(ToolTipContent, {
+        description: formatMessage(messages.resizeTable),
+        keymap: focusTableResizer
+      });
+    } : formatMessage(messages.resizeTable)
+  }, children), getBooleanFF('platform.editor.a11y-table-resizing_uapcv') && /*#__PURE__*/React.createElement("div", {
+    className: "assistive",
+    role: "status"
+  }, screenReaderResizeAnnouncerMessages[screenReaderResizeInformation.type]));
 };