@atlaskit/editor-plugin-table 7.6.6 → 7.6.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 7.6.8
+
+### Patch Changes
+
+- [#84955](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84955) [`f5eded0ecb9d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f5eded0ecb9d) - ECA11Y-192: Fix table resize screen reader announcement for NVDA Windows
+
+## 7.6.7
+
+### Patch Changes
+
+- [#86408](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86408) [`6bff86c31d81`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6bff86c31d81) - Clean up feature flag for increasing visibility of table scroll shadows
+
 ## 7.6.6
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -27,6 +27,9 @@
         {
             "path": "../../editor-palette/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../editor-plugin-accessibility-utils/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../editor-plugin-analytics/afm-cc/tsconfig.json"
         },

package/dist/cjs/commands/column-resize.js

@@ -119,16 +119,16 @@ var activateNextResizeArea = exports.activateNextResizeArea = function activateN
     var currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
     var $nextCell = (0, _utils.nextCell)($currentCell, 'horiz', direction);
     if (ariaNotify && getIntl) {
-      var columnDirection = '';
       if (direction === 1) {
-        columnDirection = getIntl().formatMessage(_messages.tableMessages.columnRightResize);
+        ariaNotify(getIntl().formatMessage(_messages.tableMessages.focusedOtherResize, {
+          direction: 'right'
+        }));
       }
       if (direction === -1) {
-        columnDirection = getIntl().formatMessage(_messages.tableMessages.columnLeftResize);
+        ariaNotify(getIntl().formatMessage(_messages.tableMessages.focusedOtherResize, {
+          direction: 'left'
+        }));
       }
-      ariaNotify(getIntl().formatMessage(_messages.tableMessages.focusedOtherResize, {
-        direction: columnDirection
-      }));
     }
     if ($nextCell) {
       // we are somewhere in between the side columns of the table

package/dist/cjs/nodeviews/TableComponent.js

@@ -784,9 +784,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
         style: {
           position: 'absolute',
-          right: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
-          : "var(--ds-space-100, 8px)" // tableOverflowShadowWidth
-          ) : "var(--ds-space-negative-025, -2px)"
+          right: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
+          :
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+          '22px'
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),

package/dist/cjs/nodeviews/TableResizer.js

@@ -9,7 +9,6 @@ exports.TableResizer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -33,7 +32,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
 var RESIZE_STEP_VALUE = 10;
 var handles = {
   right: true
@@ -122,26 +120,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     snappingEnabled = _useState4[0],
     setSnappingEnabled = _useState4[1];
-
-  // we don't want to update aria-live region on each width change, it might provide bad experience for screen reader users
-  var _useState5 = (0, _react.useState)({
-      type: 'none',
-      width: width
-    }),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    screenReaderResizeInformation = _useState6[0],
-    setScreenReaderResizeInformation = _useState6[1];
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var screenReaderResizeAnnouncerMessages = {
-    increase: formatMessage(_messages.tableMessages.tableSizeIncreaseScreenReaderInformation, {
-      newWidth: screenReaderResizeInformation.width
-    }),
-    decrease: formatMessage(_messages.tableMessages.tableSizeDecreaseScreenReaderInformation, {
-      newWidth: screenReaderResizeInformation.width
-    }),
-    none: ''
-  };
   var isTableSelected = ((_findTable = (0, _utils2.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);
@@ -282,6 +262,19 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     }
     displayGapCursor(true);
     dispatch(tr);
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv')) {
+      if (delta.width < 0) {
+        var _pluginInjectionApi$a;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeDecreaseScreenReaderInformation, {
+          newWidth: newWidth
+        }));
+      } else if (delta.width > 0) {
+        var _pluginInjectionApi$a2;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeIncreaseScreenReaderInformation, {
+          newWidth: newWidth
+        }));
+      }
+    }
 
     // Hide guidelines when resizing stops
     displayGuideline([]);
@@ -291,7 +284,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest, formatMessage, pluginInjectionApi]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
@@ -373,27 +366,6 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
     }
   }, [width]);
-  (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv')) {
-      var debouncedSetWidth = (0, _debounce.default)(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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     ref: resizerRef,
     enable: handles,
@@ -422,8 +394,5 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
         keymap: _keymaps.focusTableResizer
       });
     } : formatMessage(_messages.tableMessages.resizeTable)
-  }, children), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv') && /*#__PURE__*/_react.default.createElement("div", {
-    className: "assistive",
-    role: "status"
-  }, screenReaderResizeAnnouncerMessages[screenReaderResizeInformation.type]));
+  }, children));
 };

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

@@ -13,10 +13,8 @@ function tableSelectionKeymapPlugin(editorSelectionAPI) {
   var list = {};
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, (0, _selection.arrowRightFromTable)(editorSelectionAPI)(), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, (0, _selection.arrowLeftFromTable)(editorSelectionAPI)(), list);
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y.table-selection_9uv33')) {
-    (0, _keymaps.bindKeymapArrayWithCommand)(_keymaps.selectColumn, (0, _selection.selectColumns)(editorSelectionAPI)(true), list);
-    (0, _keymaps.bindKeymapArrayWithCommand)(_keymaps.selectRow, (0, _selection.selectRows)(editorSelectionAPI)(true), list);
-  }
+  (0, _keymaps.bindKeymapArrayWithCommand)(_keymaps.selectColumn, (0, _selection.selectColumns)(editorSelectionAPI)(true), list);
+  (0, _keymaps.bindKeymapArrayWithCommand)(_keymaps.selectRow, (0, _selection.selectRows)(editorSelectionAPI)(true), list);
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.shift-arrowup-fix')) {
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.shiftArrowUp.common, (0, _selection.shiftArrowUpFromTable)(editorSelectionAPI)(), list);
   }

package/dist/cjs/ui/ui-styles.js

@@ -73,7 +73,7 @@ var DeleteButton = exports.DeleteButton = function DeleteButton() {
   return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(_consts.tableCellSelectedDeleteIconBackground, ";\n        color: ").concat(_consts.tableCellSelectedDeleteIconColor, ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableCellHoverDeleteIconBackground, _consts.tableCellHoverDeleteIconColor);
 };
 var OverflowShadow = exports.OverflowShadow = function OverflowShadow(isDragAndDropEnabled) {
-  return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: ", ";\n  }\n  .", " {\n    ", "\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, "px)") : "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide - 10 : -2, "px)"), _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
+  return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 140%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 140%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: ", ";\n  }\n  .", " {\n    ", "\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "calc(100% - ".concat(_consts.tableOverflowShadowWidthWide, "px)") : "calc(100% - ".concat(_consts.tableOverflowShadowWidthWide - 10, "px)"), _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
 };
 var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEnabled) {
   if (!isDragAndDropEnabled) {

package/dist/es2019/commands/column-resize.js

@@ -114,16 +114,16 @@ export const activateNextResizeArea = ({
   const currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
   const $nextCell = nextCell($currentCell, 'horiz', direction);
   if (ariaNotify && getIntl) {
-    let columnDirection = '';
     if (direction === 1) {
-      columnDirection = getIntl().formatMessage(messages.columnRightResize);
+      ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
+        direction: 'right'
+      }));
     }
     if (direction === -1) {
-      columnDirection = getIntl().formatMessage(messages.columnLeftResize);
+      ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
+        direction: 'left'
+      }));
     }
-    ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
-      direction: columnDirection
-    }));
   }
   if ($nextCell) {
     // we are somewhere in between the side columns of the table

package/dist/es2019/nodeviews/TableComponent.js

@@ -773,9 +773,10 @@ class TableComponent extends React.Component {
     }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'absolute',
-        right: getBooleanFF('platform.editor.custom-table-width') ? `${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
-        : "var(--ds-space-100, 8px)" // tableOverflowShadowWidth
-        }` : "var(--ds-space-negative-025, -2px)"
+        right: getBooleanFF('platform.editor.custom-table-width') ? `${"var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
+        }` :
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+        '22px'
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,

package/dist/es2019/nodeviews/TableResizer.js

@@ -1,5 +1,4 @@
 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';
@@ -19,7 +18,6 @@ import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGH
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
 import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
-const DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
 const RESIZE_STEP_VALUE = 10;
 const handles = {
   right: true
@@ -105,24 +103,9 @@ export const TableResizer = ({
   // 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);
@@ -274,6 +257,19 @@ export const TableResizer = ({
     }
     displayGapCursor(true);
     dispatch(tr);
+    if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
+      if (delta.width < 0) {
+        var _pluginInjectionApi$a;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
+          newWidth: newWidth
+        }));
+      } else if (delta.width > 0) {
+        var _pluginInjectionApi$a2;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
+          newWidth: newWidth
+        }));
+      }
+    }
 
     // Hide guidelines when resizing stops
     displayGuideline([]);
@@ -283,7 +279,7 @@ export const TableResizer = ({
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest, formatMessage, pluginInjectionApi]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
@@ -365,27 +361,6 @@ export const TableResizer = ({
       (_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,
@@ -415,8 +390,5 @@ export const TableResizer = ({
         keymap: focusTableResizer
       });
     } : formatMessage(messages.resizeTable)
-  }, children), getBooleanFF('platform.editor.a11y-table-resizing_uapcv') && /*#__PURE__*/React.createElement("div", {
-    className: "assistive",
-    role: "status"
-  }, screenReaderResizeAnnouncerMessages[screenReaderResizeInformation.type]));
+  }, children));
 };

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

@@ -6,10 +6,8 @@ export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   const list = {};
   bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
   bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
-  if (getBooleanFF('platform.editor.a11y.table-selection_9uv33')) {
-    bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
-    bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
-  }
+  bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
+  bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
   if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
     bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
   }

package/dist/es2019/ui/ui-styles.js

@@ -4,7 +4,7 @@ import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWid
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 const InsertLine = cssString => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
     background: ${tableBorderSelectedColor};
@@ -267,14 +267,13 @@ export const OverflowShadow = isDragAndDropEnabled => css`
     pointer-events: none;
     top: ${tableMarginTop}px;
     z-index: ${akEditorShadowZIndex};
-    width: ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth}px;
+    width: ${tableOverflowShadowWidthWide}px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
     background: linear-gradient(
         to left,
         transparent 0,
-        ${`var(--ds-shadow-overflow-spread, ${N40A})`}
-          ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}%
+        ${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
       ),
       linear-gradient(
         to right,
@@ -290,15 +289,14 @@ export const OverflowShadow = isDragAndDropEnabled => css`
     background: linear-gradient(
         to right,
         transparent 0,
-        ${`var(--ds-shadow-overflow-spread, ${N40A})`}
-          ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}%
+        ${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
       ),
       linear-gradient(
         to left,
         ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
         transparent 1px
       );
-    left: ${getBooleanFF('platform.editor.custom-table-width') ? `calc(100% - ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth}px)` : `calc(100% - ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide - 10 : -2}px)`};
+    left: ${getBooleanFF('platform.editor.custom-table-width') ? `calc(100% - ${tableOverflowShadowWidthWide}px)` : `calc(100% - ${tableOverflowShadowWidthWide - 10}px)`};
   }
   .${ClassName.WITH_CONTROLS} {
     ${overflowShadowWidhoutDnD(isDragAndDropEnabled)}

package/dist/esm/commands/column-resize.js

@@ -113,16 +113,16 @@ export var activateNextResizeArea = function activateNextResizeArea(_ref2) {
     var currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
     var $nextCell = nextCell($currentCell, 'horiz', direction);
     if (ariaNotify && getIntl) {
-      var columnDirection = '';
       if (direction === 1) {
-        columnDirection = getIntl().formatMessage(messages.columnRightResize);
+        ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
+          direction: 'right'
+        }));
       }
       if (direction === -1) {
-        columnDirection = getIntl().formatMessage(messages.columnLeftResize);
+        ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
+          direction: 'left'
+        }));
       }
-      ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
-        direction: columnDirection
-      }));
     }
     if ($nextCell) {
       // we are somewhere in between the side columns of the table

package/dist/esm/nodeviews/TableComponent.js

@@ -777,9 +777,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
         style: {
           position: 'absolute',
-          right: getBooleanFF('platform.editor.custom-table-width') ? "".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
-          : "var(--ds-space-100, 8px)" // tableOverflowShadowWidth
-          ) : "var(--ds-space-negative-025, -2px)"
+          right: getBooleanFF('platform.editor.custom-table-width') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
+          :
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+          '22px'
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: "".concat(ClassName.TABLE_RIGHT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),

package/dist/esm/nodeviews/TableResizer.js

@@ -3,7 +3,6 @@ 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, 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';
@@ -23,7 +22,6 @@ import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGH
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
 import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
-var DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
 var RESIZE_STEP_VALUE = 10;
 var handles = {
   right: true
@@ -112,26 +110,8 @@ export var TableResizer = function TableResizer(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     snappingEnabled = _useState4[0],
     setSnappingEnabled = _useState4[1];
-
-  // we don't want to update aria-live region on each width change, it might provide bad experience for screen reader users
-  var _useState5 = useState({
-      type: 'none',
-      width: width
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    screenReaderResizeInformation = _useState6[0],
-    setScreenReaderResizeInformation = _useState6[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);
@@ -272,6 +252,19 @@ export var TableResizer = function TableResizer(_ref) {
     }
     displayGapCursor(true);
     dispatch(tr);
+    if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
+      if (delta.width < 0) {
+        var _pluginInjectionApi$a;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
+          newWidth: newWidth
+        }));
+      } else if (delta.width > 0) {
+        var _pluginInjectionApi$a2;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
+          newWidth: newWidth
+        }));
+      }
+    }
 
     // Hide guidelines when resizing stops
     displayGuideline([]);
@@ -281,7 +274,7 @@ export var TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest, formatMessage, pluginInjectionApi]);
   var handleTableSizeChangeOnKeypress = useCallback(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
@@ -363,27 +356,6 @@ export var TableResizer = function TableResizer(_ref) {
       (_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,
@@ -412,8 +384,5 @@ export var TableResizer = function TableResizer(_ref) {
         keymap: focusTableResizer
       });
     } : formatMessage(messages.resizeTable)
-  }, children), getBooleanFF('platform.editor.a11y-table-resizing_uapcv') && /*#__PURE__*/React.createElement("div", {
-    className: "assistive",
-    role: "status"
-  }, screenReaderResizeAnnouncerMessages[screenReaderResizeInformation.type]));
+  }, children));
 };

package/dist/esm/pm-plugins/table-selection-keymap.js

@@ -6,10 +6,8 @@ export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   var list = {};
   bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
   bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
-  if (getBooleanFF('platform.editor.a11y.table-selection_9uv33')) {
-    bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
-    bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
-  }
+  bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
+  bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
   if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
     bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
   }

package/dist/esm/ui/ui-styles.js

@@ -6,7 +6,7 @@ import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWid
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 var InsertLine = function InsertLine(cssString) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor, akEditorUnitZIndex, cssString);
 };
@@ -66,7 +66,7 @@ export var DeleteButton = function DeleteButton() {
   return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(tableCellSelectedDeleteIconBackground, ";\n        color: ").concat(tableCellSelectedDeleteIconColor, ";\n      ")), ClassName.CONTROLS_DELETE_BUTTON, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor);
 };
 export var OverflowShadow = function OverflowShadow(isDragAndDropEnabled) {
-  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: ", ";\n  }\n  .", " {\n    ", "\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop, tableMarginTop, akEditorShadowZIndex, getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", getBooleanFF('platform.editor.custom-table-width') ? "calc(100% - ".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, "px)") : "calc(100% - ".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide - 10 : -2, "px)"), ClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), ClassName.TABLE_LEFT_SHADOW, tableBorderColor);
+  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 140%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 140%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: ", ";\n  }\n  .", " {\n    ", "\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop, tableMarginTop, akEditorShadowZIndex, tableOverflowShadowWidthWide, ClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", getBooleanFF('platform.editor.custom-table-width') ? "calc(100% - ".concat(tableOverflowShadowWidthWide, "px)") : "calc(100% - ".concat(tableOverflowShadowWidthWide - 10, "px)"), ClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), ClassName.TABLE_LEFT_SHADOW, tableBorderColor);
 };
 var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEnabled) {
   if (!isDragAndDropEnabled) {

package/dist/types/plugin.d.ts

@@ -1,6 +1,7 @@
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand, GetEditorFeatureFlags, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
@@ -35,6 +36,7 @@ export type TablePlugin = NextEditorPlugin<'table', {
         insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
     };
     dependencies: [
+        OptionalPlugin<AccessibilityUtilsPlugin>,
         AnalyticsPlugin,
         ContentInsertionPlugin,
         WidthPlugin,