chore: Add UAP Action support to resize and drag handle

Author: Johannes Weber

pages/shared/i18n.ts

@@ -61,6 +61,8 @@ export const boardItemI18nStrings: BoardItemProps.I18nStrings = {
   resizeHandleAriaLabel: "Resize handle",
   resizeHandleAriaDescription:
     "Use Space or Enter to activate resize, arrow keys to move, Space or Enter to submit, or Escape to discard. Be sure to temporarily disable any screen reader navigation feature that may interfere with the functionality of the arrow keys.",
+  dragHandleTooltipText: "Drag or select to move",
+  resizeHandleTooltipText: "Drag or select to resize",
 };
 
 export const itemsPaletteI18nStrings: ItemsPaletteProps.I18nStrings<ItemData> = {

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -201,7 +201,10 @@ ARIA labels:
 * \`dragHandleAriaLabel\` (string) - the ARIA label for the drag handle.
 * \`dragHandleAriaDescription\` (string, optional) - the ARIA description for the drag handle.
 * \`resizeHandleAriaLabel\` (string) - the ARIA label for the resize handle.
-* \`resizeHandleAriaDescription\` (string, optional) - the ARIA description for the resize handle.",
+* \`resizeHandleAriaDescription\` (string, optional) - the ARIA description for the resize handle.
+* \`dragHandleTooltipText\` (string, optional) - the ARIA description for the resize handle.
+* \`dragHandleTooltipText\` (string, optional) - the Text for the drag handle Tooltip.
+* \`resizeHandleTooltipText\` (string, optional) - the Text for the resize handle Tooltip.",
       "inlineType": {
         "name": "BoardItemProps.I18nStrings",
         "properties": [
@@ -215,6 +218,11 @@ ARIA labels:
             "optional": false,
             "type": "string",
           },
+          {
+            "name": "dragHandleTooltipText",
+            "optional": true,
+            "type": "string",
+          },
           {
             "name": "resizeHandleAriaDescription",
             "optional": true,
@@ -225,6 +233,11 @@ ARIA labels:
             "optional": false,
             "type": "string",
           },
+          {
+            "name": "resizeHandleTooltipText",
+            "optional": true,
+            "type": "string",
+          },
         ],
         "type": "object",
       },

src/board-item/__tests__/board-item-wrapper.tsx

@@ -9,16 +9,21 @@ export function ItemContextWrapper({ children }: { children: ReactNode }) {
     <ItemContext.Provider
       value={{
         isActive: false,
+        isHidden: false,
         dragHandle: {
           ref: { current: null },
           onPointerDown: () => {},
           onKeyDown: () => {},
-          isActive: false,
+          isActivePointer: false,
+          isActiveUap: false,
+          onDirectionClick: () => {},
         },
         resizeHandle: {
           onPointerDown: () => {},
           onKeyDown: () => {},
-          isActive: false,
+          isActivePointer: false,
+          isActiveUap: false,
+          onDirectionClick: () => {},
         },
       }}
     >

src/board-item/interfaces.ts

@@ -37,6 +37,9 @@ export interface BoardItemProps {
    * * `dragHandleAriaDescription` (string, optional) - the ARIA description for the drag handle.
    * * `resizeHandleAriaLabel` (string) - the ARIA label for the resize handle.
    * * `resizeHandleAriaDescription` (string, optional) - the ARIA description for the resize handle.
+   * * `dragHandleTooltipText` (string, optional) - the ARIA description for the resize handle.
+   * * `dragHandleTooltipText` (string, optional) - the Text for the drag handle Tooltip.
+   * * `resizeHandleTooltipText` (string, optional) - the Text for the resize handle Tooltip.
    */
   i18nStrings: BoardItemProps.I18nStrings;
 }
@@ -47,5 +50,7 @@ export namespace BoardItemProps {
     dragHandleAriaDescription?: string;
     resizeHandleAriaLabel: string;
     resizeHandleAriaDescription?: string;
+    dragHandleTooltipText?: string;
+    resizeHandleTooltipText?: string;
   }
 }

src/board-item/internal.tsx

@@ -4,6 +4,7 @@ import { useId } from "react";
 import clsx from "clsx";
 
 import Container from "@cloudscape-design/components/container";
+import { InternalDragHandleProps } from "@cloudscape-design/components/internal/do-not-use/drag-handle";
 
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
@@ -16,6 +17,16 @@ import type { BoardItemProps } from "./interfaces";
 
 import styles from "./styles.css.js";
 
+const mapHandleDirectionToKeyboardDirection = (direction: InternalDragHandleProps.Direction) => {
+  const directionMap = {
+    "inline-start": "left",
+    "inline-end": "right",
+    "block-start": "up",
+    "block-end": "down",
+  };
+  return directionMap[direction] as any;
+};
+
 export function InternalBoardItem({
   children,
   header,
@@ -26,7 +37,7 @@ export function InternalBoardItem({
   __internalRootRef,
   ...rest
 }: BoardItemProps & InternalBaseComponentProps) {
-  const { dragHandle, resizeHandle, isActive } = useItemContext();
+  const { dragHandle, resizeHandle, isActive, isHidden } = useItemContext();
 
   const dragHandleAriaLabelledBy = useId();
   const dragHandleAriaDescribedBy = useId();
@@ -42,14 +53,24 @@ export function InternalBoardItem({
         header={
           <WidgetContainerHeader
             handle={
-              <DragHandle
-                ref={dragHandle.ref}
-                ariaLabelledBy={dragHandleAriaLabelledBy}
-                ariaDescribedBy={dragHandleAriaDescribedBy}
-                onPointerDown={dragHandle.onPointerDown}
-                onKeyDown={dragHandle.onKeyDown}
-                isActive={dragHandle.isActive}
-              />
+              <>
+                {!isHidden && (
+                  <DragHandle
+                    ref={dragHandle.ref}
+                    ariaLabelledBy={dragHandleAriaLabelledBy}
+                    ariaDescribedBy={dragHandleAriaDescribedBy}
+                    onPointerDown={dragHandle.onPointerDown}
+                    onKeyDown={dragHandle.onKeyDown}
+                    isActivePointer={dragHandle.isActivePointer}
+                    isActiveUap={dragHandle.isActiveUap}
+                    initialShowButtons={dragHandle.initialShowButtons}
+                    onDirectionClick={(direction) =>
+                      dragHandle.onDirectionClick(mapHandleDirectionToKeyboardDirection(direction), "drag")
+                    }
+                    dragHandleTooltipText={i18nStrings.dragHandleTooltipText}
+                  />
+                )}
+              </>
             }
             settings={settings}
           >
@@ -62,14 +83,19 @@ export function InternalBoardItem({
       >
         {children}
       </Container>
-      {resizeHandle && (
+      {resizeHandle && !isHidden && (
         <div className={styles.resizer}>
           <ResizeHandle
             ariaLabelledBy={resizeHandleAriaLabelledBy}
             ariaDescribedBy={resizeHandleAriaDescribedBy}
             onPointerDown={resizeHandle.onPointerDown}
             onKeyDown={resizeHandle.onKeyDown}
-            isActive={resizeHandle.isActive}
+            isActivePointer={resizeHandle.isActivePointer}
+            isActiveUap={resizeHandle.isActiveUap}
+            onDirectionClick={(direction) => {
+              resizeHandle.onDirectionClick(mapHandleDirectionToKeyboardDirection(direction), "resize");
+            }}
+            resizeHandleTooltipText={i18nStrings.resizeHandleTooltipText}
           />
         </div>
       )}

src/internal/drag-handle/index.tsx

@@ -3,35 +3,60 @@
 import { ForwardedRef, forwardRef, KeyboardEvent, PointerEvent } from "react";
 import clsx from "clsx";
 
-import Icon from "@cloudscape-design/components/icon";
-
-import Handle from "../handle";
+import {
+  InternalDragHandle,
+  InternalDragHandleProps,
+} from "@cloudscape-design/components/internal/do-not-use/drag-handle";
 
 import styles from "./styles.css.js";
+import testUtilsStyles from "./test-classes/styles.css.js";
 
 export interface DragHandleProps {
   ariaLabelledBy: string;
   ariaDescribedBy: string;
   onPointerDown: (event: PointerEvent) => void;
   onKeyDown: (event: KeyboardEvent) => void;
-  isActive: boolean;
+  isActivePointer: boolean;
+  isActiveUap: boolean;
+  initialShowButtons?: boolean;
+  onDirectionClick: InternalDragHandleProps["onDirectionClick"];
+  dragHandleTooltipText?: string;
 }
 
 function DragHandle(
-  { ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown, isActive }: DragHandleProps,
-  ref: ForwardedRef<HTMLButtonElement>,
+  {
+    ariaLabelledBy,
+    ariaDescribedBy,
+    onPointerDown,
+    onKeyDown,
+    isActivePointer,
+    isActiveUap,
+    initialShowButtons,
+    onDirectionClick,
+    dragHandleTooltipText,
+  }: DragHandleProps,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   return (
-    <Handle
+    <InternalDragHandle
       ref={ref}
-      className={clsx(styles.handle, isActive && styles.active)}
-      aria-labelledby={ariaLabelledBy}
-      aria-describedby={ariaDescribedBy}
-      onPointerDown={onPointerDown}
+      className={clsx(styles.handle, isActivePointer && styles.active, isActiveUap && testUtilsStyles["active-uap"])}
+      ariaLabelledBy={ariaLabelledBy}
+      ariaDescribedby={ariaDescribedBy}
+      variant="drag-indicator"
+      tooltipText={dragHandleTooltipText}
       onKeyDown={onKeyDown}
-    >
-      <Icon name="drag-indicator" />
-    </Handle>
+      onPointerDown={onPointerDown}
+      directions={{
+        "block-start": "active",
+        "block-end": "active",
+        "inline-start": "active",
+        "inline-end": "active",
+      }}
+      triggerMode="keyboard-activate"
+      onDirectionClick={onDirectionClick}
+      initialShowButtons={initialShowButtons}
+    />
   );
 }
 

src/internal/drag-handle/styles.scss

@@ -7,16 +7,13 @@
 
 .handle {
   cursor: grab;
+  @include shared.handle();
 }
 
 .handle:active {
   cursor: grabbing;
 }
 
-.handle:not(.active):focus-visible {
-  @include shared.focus-highlight();
-}
-
 .active {
   outline: none;
 }

src/internal/drag-handle/test-classes/styles.scss

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.active-uap {
+  /* used in test-utils */
+}

src/internal/global-drag-state-styles/index.ts

@@ -9,20 +9,25 @@ function assertNever(value: never) {
 }
 
 function setup({ operation, interactionType }: DragAndDropData) {
+  const isPointerInteraction = interactionType === "pointer";
   switch (operation) {
     case "insert":
     case "reorder":
-      document.body.classList.add(styles["show-grab-cursor"]);
+      if (isPointerInteraction) {
+        document.body.classList.add(styles["show-grab-cursor"]);
+      }
       break;
     case "resize":
-      document.body.classList.add(styles["show-resize-cursor"]);
+      if (isPointerInteraction) {
+        document.body.classList.add(styles["show-resize-cursor"]);
+      }
       break;
     default:
       // there will be a type error if not all operation types are handled
       assertNever(operation);
   }
 
-  if (interactionType === "pointer") {
+  if (isPointerInteraction) {
     document.body.classList.add(styles["disable-selection"]);
   }
 }