@atlaskit/editor-plugin-table 5.4.24 → 5.5.0

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

package/src/plugins/table/toolbar.tsx

@@ -49,7 +49,6 @@ import {
   splitCell,
 } from '@atlaskit/editor-tables/utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   clearHoverSelection,
@@ -489,14 +488,15 @@ export const getToolbarConfig =
 
         return element;
       };
+
+      const { stickyScrollbar } = getEditorFeatureFlags();
+
       return {
         title: 'Table floating controls',
         getDomRef,
         nodeType,
         offset: [0, 18],
-        absoluteOffset: getBooleanFF('platform.editor.table-sticky-scrollbar')
-          ? { top: -6 }
-          : { top: 0 },
+        absoluteOffset: stickyScrollbar ? { top: -6 } : { top: 0 },
         zIndex: akEditorFloatingPanelZIndex + 1, // Place the context menu slightly above the others
         items: [
           menu,

package/src/plugins/table/ui/common-styles.ts

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