@atlaskit/editor-plugin-table 5.4.25 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.5.0
+
+### Minor Changes
+
+- [#56823](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/56823) [`d2fbdf3b6822`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d2fbdf3b6822) - [ux] ECA11Y-111: Keyboard accessibility of table resizer
+
 ## 5.4.25
 
 ### Patch Changes

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

@@ -9,17 +9,20 @@ 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");
 var _guideline = require("@atlaskit/editor-common/guideline");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _resizer = require("@atlaskit/editor-common/resizer");
-var _utils = require("@atlaskit/editor-tables/utils");
+var _utils = require("@atlaskit/editor-common/utils");
+var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
-var _utils2 = require("../pm-plugins/table-resizing/utils");
+var _utils3 = require("../pm-plugins/table-resizing/utils");
 var _tableWidth = require("../pm-plugins/table-width");
 var _consts = require("../ui/consts");
 var _analytics2 = require("../utils/analytics");
@@ -29,6 +32,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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
 };
@@ -59,8 +64,8 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   return 'small';
 };
 var getResizerMinWidth = function getResizerMinWidth(node) {
-  var currentColumnCount = (0, _utils2.getColgroupChildrenLength)(node);
-  var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils2.COLUMN_MIN_WIDTH : 3 * _utils2.COLUMN_MIN_WIDTH;
+  var currentColumnCount = (0, _utils3.getColgroupChildrenLength)(node);
+  var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils3.COLUMN_MIN_WIDTH : 3 * _utils3.COLUMN_MIN_WIDTH;
   // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;
@@ -96,12 +101,36 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
   var currentGap = (0, _react.useRef)(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = (0, _react.useRef)(false);
+  var areResizeMetaKeysPressed = (0, _react.useRef)(false);
+  var resizerRef = (0, _react.useRef)(null);
+
+  // used to reposition tooltip when table is resizing via keyboard
+  var updateTooltip = _react.default.useRef();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_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 = (0, _react.useState)({
+      type: 'none',
+      width: width
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    screenReaderResizeInformation = _useState4[0],
+    setScreenReaderResizeInformation = _useState4[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);
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
@@ -171,7 +200,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     if (typeof pos !== 'number') {
       return;
     }
-    (0, _utils2.previewScaleTable)(tableRef, {
+    (0, _utils3.previewScaleTable)(tableRef, {
       node: node,
       prevNode: node,
       start: pos + 1,
@@ -211,7 +240,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
         width: newWidth
       }));
       var newNode = tr.doc.nodeAt(pos);
-      tr = (0, _utils2.scaleTable)(tableRef, {
+      tr = (0, _utils3.scaleTable)(tableRef, {
         node: newNode,
         prevNode: node,
         start: pos + 1,
@@ -235,8 +264,109 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     }
     return newWidth;
   }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
-  var isTableSelected = ((_findTable = (0, _utils.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.default.createElement(_resizer.ResizerNext, {
+  var handleTableSizeChangeOnKeypress = (0, _react.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 = (0, _react.useCallback)(function () {
+    editorView === null || editorView === void 0 || editorView.focus();
+  }, [editorView]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
+    var metaKey = _utils.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 = (0, _react.useCallback)(function (event) {
+    if (event.altKey || event.metaKey) {
+      areResizeMetaKeysPressed.current = false;
+    }
+    return;
+  }, [areResizeMetaKeysPressed]);
+  (0, _react.useLayoutEffect)(function () {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv')) {
+      if (!resizerRef.current) {
+        return;
+      }
+      var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
+      var globalKeyDownHandler = function globalKeyDownHandler(event) {
+        var metaKey = _utils.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]);
+  (0, _react.useLayoutEffect)(function () {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv')) {
+      var _updateTooltip$curren;
+      (_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,
     width: width,
     handleAlignmentMethod: "sticky",
@@ -254,6 +384,16 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     isHandleVisible: isTableSelected,
     appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
-    handleTooltipContent: formatMessage(_messages.tableMessages.resizeTable)
-  }, children);
+    handleTooltipContent: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv') ? function (_ref3) {
+      var update = _ref3.update;
+      updateTooltip.current = update;
+      return /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+        description: formatMessage(_messages.tableMessages.resizeTable),
+        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]));
 };

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/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]));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.4.25",
+  "version": "5.5.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -141,6 +141,9 @@
     },
     "platform.editor.table.analytics-plugin-moved-event": {
       "type": "boolean"
+    },
+    "platform.editor.a11y-table-resizing_uapcv": {
+      "type": "boolean"
     }
   }
 }

package/src/__tests__/unit/nodeviews/TableContainer.tsx

@@ -9,6 +9,7 @@ import {
   TABLE_ACTION,
 } from '@atlaskit/editor-common/analytics';
 import type { DocBuilder } from '@atlaskit/editor-common/types';
+import { browser } from '@atlaskit/editor-common/utils';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
@@ -22,6 +23,7 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../../plugins/table-plugin';
 import {
@@ -128,6 +130,89 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
     });
   });
 
+  describe('should focus resize handle thumb after Cmd + Opt + R key comibnation is pressed', () => {
+    let originalScrollBy: typeof window.scrollBy;
+    let originalScrollIntoView: typeof window.HTMLElement.prototype.scrollIntoView;
+
+    beforeEach(() => {
+      originalScrollBy = window.scrollBy;
+      originalScrollIntoView = window.HTMLElement.prototype.scrollIntoView;
+
+      window.scrollBy = jest.fn();
+      window.HTMLElement.prototype.scrollIntoView = jest.fn();
+    });
+
+    afterEach(() => {
+      window.scrollBy = originalScrollBy;
+      window.HTMLElement.prototype.scrollIntoView = originalScrollIntoView;
+    });
+
+    const buildContainer = (
+      isTableResizingEnabled: boolean,
+      isBreakoutEnabled: boolean = true,
+    ) => {
+      const { table, editorView } = createNode();
+
+      const { container } = render(
+        <TableContainer
+          containerWidth={{
+            width: 1800,
+            lineLength: 720,
+          }}
+          node={table}
+          isTableResizingEnabled={isTableResizingEnabled}
+          isBreakoutEnabled={isBreakoutEnabled}
+          className={''}
+          editorView={editorView}
+          getPos={() => 1}
+          tableRef={{} as any}
+          isNested={false}
+        />,
+      );
+
+      return container;
+    };
+    ffTest(
+      'platform.editor.a11y-table-resizing_uapcv',
+      () => {
+        const { editorView } = createNode();
+        const container = buildContainer(true);
+        const resizerThumbHandle = container.querySelector(
+          '[data-testid="resizer-handle-right-thumb"',
+        );
+
+        fireEvent.keyDown(editorView.dom, {
+          key: 'R',
+          code: 'KeyR',
+          altKey: true,
+          metaKey: browser.mac,
+          shiftKey: true,
+          ctrlKey: !browser.mac,
+        });
+
+        expect(resizerThumbHandle).toStrictEqual(document.activeElement);
+      },
+      () => {
+        const { editorView } = createNode();
+        const container = buildContainer(true);
+        const resizerThumbHandle = container.querySelector(
+          '[data-testid="resizer-handle-right-thumb"',
+        );
+
+        fireEvent.keyDown(editorView.dom, {
+          key: 'R',
+          code: 'KeyR',
+          altKey: true,
+          metaKey: browser.mac,
+          shiftKey: true,
+          ctrlKey: !browser.mac,
+        });
+
+        expect(resizerThumbHandle).not.toStrictEqual(document.activeElement);
+      },
+    );
+  });
+
   describe('when table is nested', () => {
     const buildContainer = (
       isTableResizingEnabled: boolean,

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -2,11 +2,13 @@ import type { PropsWithChildren } 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';
 
@@ -14,9 +16,14 @@ import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import {
+  focusTableResizer,
+  ToolTipContent,
+} from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { browser } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -67,6 +74,13 @@ export interface TableResizerImprovementProps extends TableResizerProps {
   onResizeStart?: () => void;
 }
 
+type ResizerNextHandler = React.ElementRef<typeof ResizerNext>;
+
+type ResizeAction = 'increase' | 'decrease' | 'none';
+
+const DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
+const RESIZE_STEP_VALUE = 10;
+
 const handles = { right: true };
 const handleStyles = {
   right: {
@@ -150,8 +164,37 @@ 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<ResizerNextHandler>(null);
+
+  // used to reposition tooltip when table is resizing via keyboard
+  const updateTooltip = React.useRef<() => void>();
   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: ResizeAction;
+      width: number;
+    }>({
+      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(editorView.state?.selection)?.pos === getPos();
 
   const resizerMinWidth = getResizerMinWidth(node);
   const handleSize = getResizerHandleHeight(tableRef);
@@ -374,33 +417,196 @@ export const TableResizer = ({
     ],
   );
 
-  const isTableSelected =
-    findTable(editorView.state?.selection)?.pos === getPos();
+  const handleTableSizeChangeOnKeypress = useCallback(
+    (step: number) => {
+      const newWidth = width + step;
 
-  return (
-    <ResizerNext
-      enable={handles}
-      width={width}
-      handleAlignmentMethod="sticky"
-      handleSize={handleSize}
-      handleStyles={handleStyles}
-      handleResizeStart={handleResizeStart}
-      handleResize={scheduleResize}
-      handleResizeStop={handleResizeStop}
-      resizeRatio={2}
-      minWidth={resizerMinWidth}
-      maxWidth={maxWidth}
-      snapGap={TABLE_SNAP_GAP}
-      snap={guidelineSnaps}
-      handlePositioning="adjacent"
-      isHandleVisible={isTableSelected}
-      appearance={
-        isTableSelected && isWholeTableInDanger ? 'danger' : undefined
+      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((): void => {
+    editorView?.focus();
+  }, [editorView]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent): void => {
+      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();
       }
-      handleHighlight="shadow"
-      handleTooltipContent={formatMessage(messages.resizeTable)}
-    >
-      {children}
-    </ResizerNext>
+    },
+    [handleEscape, handleTableSizeChangeOnKeypress],
+  );
+
+  const handleKeyUp = useCallback(
+    (event: KeyboardEvent): void => {
+      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: KeyboardEvent): void => {
+        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?.dom as HTMLElement | undefined;
+      editorViewDom?.addEventListener('keydown', globalKeyDownHandler);
+      resizeHandleThumbEl?.addEventListener('keydown', handleKeyDown);
+      resizeHandleThumbEl?.addEventListener('keyup', handleKeyUp);
+      return () => {
+        editorViewDom?.removeEventListener('keydown', globalKeyDownHandler);
+        resizeHandleThumbEl?.removeEventListener('keydown', handleKeyDown);
+        resizeHandleThumbEl?.removeEventListener('keyup', handleKeyUp);
+      };
+    }
+  }, [
+    resizerRef,
+    editorView,
+    handleResizeStop,
+    isTableSelected,
+    handleKeyDown,
+    handleKeyUp,
+  ]);
+
+  useLayoutEffect(() => {
+    if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
+      updateTooltip.current?.();
+    }
+  }, [width]);
+
+  useEffect(() => {
+    if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
+      const debouncedSetWidth = debounce(
+        setScreenReaderResizeInformation,
+        DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER,
+      );
+      debouncedSetWidth((prevState) => {
+        let type: ResizeAction = 'none';
+        if (prevState.width > width) {
+          type = 'decrease';
+        }
+
+        if (prevState.width < width) {
+          type = 'increase';
+        }
+
+        return {
+          type,
+          width,
+        };
+      });
+
+      return () => {
+        debouncedSetWidth.cancel();
+      };
+    }
+  }, [width]);
+
+  return (
+    <>
+      <ResizerNext
+        ref={resizerRef}
+        enable={handles}
+        width={width}
+        handleAlignmentMethod="sticky"
+        handleSize={handleSize}
+        handleStyles={handleStyles}
+        handleResizeStart={handleResizeStart}
+        handleResize={scheduleResize}
+        handleResizeStop={handleResizeStop}
+        resizeRatio={2}
+        minWidth={resizerMinWidth}
+        maxWidth={maxWidth}
+        snapGap={TABLE_SNAP_GAP}
+        snap={guidelineSnaps}
+        handlePositioning="adjacent"
+        isHandleVisible={isTableSelected}
+        appearance={
+          isTableSelected && isWholeTableInDanger ? 'danger' : undefined
+        }
+        handleHighlight="shadow"
+        handleTooltipContent={
+          getBooleanFF('platform.editor.a11y-table-resizing_uapcv')
+            ? ({ update }) => {
+                updateTooltip.current = update;
+                return (
+                  <ToolTipContent
+                    description={formatMessage(messages.resizeTable)}
+                    keymap={focusTableResizer}
+                  />
+                );
+              }
+            : formatMessage(messages.resizeTable)
+        }
+      >
+        {children}
+      </ResizerNext>
+      {getBooleanFF('platform.editor.a11y-table-resizing_uapcv') && (
+        <div className="assistive" role="status">
+          {
+            screenReaderResizeAnnouncerMessages[
+              screenReaderResizeInformation.type
+            ]
+          }
+        </div>
+      )}
+    </>
   );
 };