@proyecto-viviana/solidaria 0.4.0 → 0.4.1

package/src/dnd/DropTargetKeyboardNavigation.ts

@@ -0,0 +1,337 @@
+/**
+ * Keyboard navigation between drop targets within a droppable collection.
+ *
+ * Faithful port of @react-aria/dnd `DropTargetKeyboardNavigation` (react-aria
+ * 3.50). Given a keyboard delegate, the collection, and the current drop target,
+ * returns the next/previous drop target in a given direction — cycling through
+ * the `before`/`on`/`after` drop positions on each item and descending into
+ * nested items.
+ *
+ * Upstream reads `node.nextKey` / `node.prevKey` (the flattened collection
+ * linked-list pointers). In our collection model those are exactly what
+ * `collection.getKeyAfter(key)` / `collection.getKeyBefore(key)` return, so they
+ * are substituted 1:1 with no behavioral difference. Upstream's `lastChildKey`
+ * fast-path is absent from our `CollectionNode`, so we always take upstream's
+ * own `childNodes.findLast` fallback branch.
+ */
+
+import type { Collection, CollectionNode, Key } from "@proyecto-viviana/solid-stately";
+import type { DropTarget } from "@proyecto-viviana/solid-stately";
+
+/**
+ * Keyboard delegate shape consumed by drop-target navigation. Mirrors the
+ * subset of `@react-types/shared` `KeyboardDelegate` that navigation uses,
+ * including the `{includeDisabled}` option so drop positions around disabled
+ * items remain reachable.
+ */
+export interface DropNavigationKeyboardDelegate {
+  getKeyBelow?(key: Key, options?: { includeDisabled?: boolean }): Key | null;
+  getKeyAbove?(key: Key, options?: { includeDisabled?: boolean }): Key | null;
+  getKeyLeftOf?(key: Key, options?: { includeDisabled?: boolean }): Key | null;
+  getKeyRightOf?(key: Key, options?: { includeDisabled?: boolean }): Key | null;
+  getFirstKey?(key?: Key, global?: boolean): Key | null;
+  getLastKey?(key?: Key, global?: boolean): Key | null;
+}
+
+export function navigate(
+  keyboardDelegate: DropNavigationKeyboardDelegate,
+  collection: Collection,
+  target: DropTarget | null | undefined,
+  direction: "left" | "right" | "up" | "down",
+  rtl = false,
+  wrap = false,
+): DropTarget | null {
+  switch (direction) {
+    case "left":
+      return rtl
+        ? nextDropTarget(keyboardDelegate, collection, target, wrap, "left")
+        : previousDropTarget(keyboardDelegate, collection, target, wrap, "left");
+    case "right":
+      return rtl
+        ? previousDropTarget(keyboardDelegate, collection, target, wrap, "right")
+        : nextDropTarget(keyboardDelegate, collection, target, wrap, "right");
+    case "up":
+      return previousDropTarget(keyboardDelegate, collection, target, wrap);
+    case "down":
+      return nextDropTarget(keyboardDelegate, collection, target, wrap);
+  }
+}
+
+function nextDropTarget(
+  keyboardDelegate: DropNavigationKeyboardDelegate,
+  collection: Collection,
+  target: DropTarget | null | undefined,
+  wrap = false,
+  horizontal: "left" | "right" | null = null,
+): DropTarget | null {
+  if (!target) {
+    return {
+      type: "root",
+    };
+  }
+
+  if (target.type === "root") {
+    let nextKey = keyboardDelegate.getFirstKey?.() ?? null;
+    if (nextKey != null) {
+      return {
+        type: "item",
+        key: nextKey,
+        dropPosition: "before",
+      };
+    }
+
+    return null;
+  }
+
+  if (target.type === "item") {
+    let nextKey: Key | null | undefined = null;
+    if (horizontal) {
+      nextKey =
+        horizontal === "right"
+          ? keyboardDelegate.getKeyRightOf?.(target.key, { includeDisabled: true })
+          : keyboardDelegate.getKeyLeftOf?.(target.key, { includeDisabled: true });
+    } else {
+      nextKey = keyboardDelegate.getKeyBelow?.(target.key, { includeDisabled: true });
+    }
+    let nextCollectionKey = getNextItem(collection, target.key, (key) => collection.getKeyAfter(key));
+
+    // If the keyboard delegate did not move to the next key in the collection,
+    // jump to that key with the same drop position. Otherwise, try the other
+    // drop positions on the current key first.
+    if (nextKey != null && nextKey !== nextCollectionKey) {
+      return {
+        type: "item",
+        key: nextKey,
+        dropPosition: target.dropPosition,
+      };
+    }
+
+    switch (target.dropPosition) {
+      case "before": {
+        return {
+          type: "item",
+          key: target.key,
+          dropPosition: "on",
+        };
+      }
+      case "on": {
+        // If there are nested items, traverse to them prior to the "after" position of this target.
+        // If the next key is on the same level, then its "before" position is equivalent to this item's "after" position.
+        let targetNode = collection.getItem(target.key);
+        let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+        if (targetNode && nextNode && nextNode.level >= targetNode.level) {
+          return {
+            type: "item",
+            key: nextNode.key,
+            dropPosition: "before",
+          };
+        }
+
+        return {
+          type: "item",
+          key: target.key,
+          dropPosition: "after",
+        };
+      }
+      case "after": {
+        // If this is the last sibling in a level, traverse to the parent.
+        let targetNode = collection.getItem(target.key);
+        let nextSiblingKey = targetNode != null ? collection.getKeyAfter(targetNode.key) : null;
+        let nextItemInSameLevel = nextSiblingKey != null ? collection.getItem(nextSiblingKey) : null;
+        while (nextItemInSameLevel != null && nextItemInSameLevel.type !== "item") {
+          let afterKey = collection.getKeyAfter(nextItemInSameLevel.key);
+          nextItemInSameLevel = afterKey != null ? collection.getItem(afterKey) : null;
+        }
+
+        if (targetNode && nextItemInSameLevel == null && targetNode.parentKey != null) {
+          // If the parent item has an item after it, use the "before" position.
+          let parentNode = collection.getItem(targetNode.parentKey);
+          let parentNextKey = parentNode != null ? collection.getKeyAfter(parentNode.key) : null;
+          const nextNode = parentNextKey != null ? collection.getItem(parentNextKey) : null;
+          if (nextNode?.type === "item") {
+            return {
+              type: "item",
+              key: nextNode.key,
+              dropPosition: "before",
+            };
+          }
+
+          if (parentNode?.type === "item") {
+            return {
+              type: "item",
+              key: parentNode.key,
+              dropPosition: "after",
+            };
+          }
+        }
+
+        if (nextItemInSameLevel) {
+          return {
+            type: "item",
+            key: nextItemInSameLevel.key,
+            dropPosition: "on",
+          };
+        }
+      }
+    }
+  }
+
+  if (wrap) {
+    return {
+      type: "root",
+    };
+  }
+
+  return null;
+}
+
+function previousDropTarget(
+  keyboardDelegate: DropNavigationKeyboardDelegate,
+  collection: Collection,
+  target: DropTarget | null | undefined,
+  wrap = false,
+  horizontal: "left" | "right" | null = null,
+): DropTarget | null {
+  // Start after the last root-level item.
+  if (!target || (wrap && target.type === "root")) {
+    // Keyboard delegate gets the deepest item but we want the shallowest.
+    let prevKey: Key | null = null;
+    let lastKey = keyboardDelegate.getLastKey?.();
+    while (lastKey != null) {
+      let node = collection.getItem(lastKey);
+      if (node?.type !== "item") {
+        break;
+      }
+      prevKey = lastKey;
+      lastKey = node?.parentKey;
+    }
+
+    if (prevKey != null) {
+      return {
+        type: "item",
+        key: prevKey,
+        dropPosition: "after",
+      };
+    }
+
+    return null;
+  }
+
+  if (target.type === "item") {
+    let prevKey: Key | null | undefined = null;
+    if (horizontal) {
+      prevKey =
+        horizontal === "left"
+          ? keyboardDelegate.getKeyLeftOf?.(target.key, { includeDisabled: true })
+          : keyboardDelegate.getKeyRightOf?.(target.key, { includeDisabled: true });
+    } else {
+      prevKey = keyboardDelegate.getKeyAbove?.(target.key, { includeDisabled: true });
+    }
+    let prevCollectionKey = getNextItem(collection, target.key, (key) =>
+      collection.getKeyBefore(key),
+    );
+
+    // If the keyboard delegate did not move to the next key in the collection,
+    // jump to that key with the same drop position. Otherwise, try the other
+    // drop positions on the current key first.
+    if (prevKey != null && prevKey !== prevCollectionKey) {
+      return {
+        type: "item",
+        key: prevKey,
+        dropPosition: target.dropPosition,
+      };
+    }
+
+    switch (target.dropPosition) {
+      case "before": {
+        // Move after the last child of the previous item.
+        let targetNode = collection.getItem(target.key);
+        let targetPrevKey = targetNode != null ? collection.getKeyBefore(targetNode.key) : null;
+        if (targetNode && targetPrevKey != null) {
+          let lastChild = getLastChild(collection, targetPrevKey);
+          if (lastChild) {
+            return lastChild;
+          }
+        }
+
+        if (prevKey != null) {
+          return {
+            type: "item",
+            key: prevKey,
+            dropPosition: "on",
+          };
+        }
+
+        return {
+          type: "root",
+        };
+      }
+      case "on": {
+        return {
+          type: "item",
+          key: target.key,
+          dropPosition: "before",
+        };
+      }
+      case "after": {
+        // Move after the last child of this item.
+        let lastChild = getLastChild(collection, target.key);
+        if (lastChild) {
+          return lastChild;
+        }
+
+        return {
+          type: "item",
+          key: target.key,
+          dropPosition: "on",
+        };
+      }
+    }
+  }
+
+  if (target.type !== "root") {
+    return {
+      type: "root",
+    };
+  }
+
+  return null;
+}
+
+function getLastChild(collection: Collection, key: Key): DropTarget | null {
+  // getChildNodes still returns child tree items even when the item is collapsed.
+  // Checking if the next item has a greater level is a silly way to determine if the item is expanded.
+  let targetNode = collection.getItem(key);
+  let nextKey = getNextItem(collection, key, (key) => collection.getKeyAfter(key));
+  let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+  if (targetNode && nextNode && nextNode.level > targetNode.level) {
+    let lastChild: CollectionNode | null = null;
+    lastChild =
+      Array.from(targetNode.childNodes).findLast((item) => item.type === "item") || null;
+
+    if (lastChild) {
+      return {
+        type: "item",
+        key: lastChild.key,
+        dropPosition: "after",
+      };
+    }
+  }
+
+  return null;
+}
+
+// Find the next or previous item in a collection, skipping over other types of nodes (e.g. content).
+function getNextItem(
+  collection: Collection,
+  key: Key,
+  getNextKey: (key: Key) => Key | null,
+): Key | null {
+  let nextCollectionKey = getNextKey(key);
+  let nextCollectionNode = nextCollectionKey != null ? collection.getItem(nextCollectionKey) : null;
+  while (nextCollectionNode && nextCollectionNode.type !== "item") {
+    nextCollectionKey = getNextKey(nextCollectionNode.key);
+    nextCollectionNode = nextCollectionKey != null ? collection.getItem(nextCollectionKey) : null;
+  }
+  return nextCollectionKey;
+}

package/src/dnd/createDrag.ts

@@ -6,7 +6,7 @@
  */
 
 import { createMemo, type Accessor } from "solid-js";
-import { createDragState } from "@proyecto-viviana/solid-stately";
+import { createDragState, type DropOperation } from "@proyecto-viviana/solid-stately";
 import type { AriaDragOptions, DragAria } from "./types";
 import {
   getTypes,
@@ -19,6 +19,9 @@ import {
   getGlobalDropEffect,
 } from "./utils";
 import { setGlobalDraggingTypes } from "./createDraggableCollection";
+import { beginDragging } from "./DragManager";
+import { createStringFormatter } from "../i18n/createStringFormatter";
+import { dndIntlStrings } from "./intl";
 
 /**
  * Creates ARIA props for a draggable element.
@@ -40,6 +43,8 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
     preview: getProps().preview,
   }));
 
+  const stringFormatter = createStringFormatter(dndIntlStrings);
+
   let lastX = 0;
   let lastY = 0;
 
@@ -145,14 +150,16 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
     if (e.key === "Enter" && e.target === e.currentTarget) {
       e.preventDefault();
       e.stopPropagation();
-      // Would initiate keyboard-based drag mode
-      // This is a simplified version - full implementation needs DragManager
-      const rect = (e.target as HTMLElement).getBoundingClientRect();
+
+      const el = e.currentTarget as HTMLElement;
+      const rect = el.getBoundingClientRect();
       state.startDrag(rect.x + rect.width / 2, rect.y + rect.height / 2);
+
       const items = state.getItems();
       setGlobalDraggingTypes(getTypes(items));
-      let allowed = DROP_OPERATION.all;
+
       const allowedOps = state.getAllowedDropOperations();
+      let allowed = DROP_OPERATION.all;
       if (allowedOps.length > 0) {
         allowed = DROP_OPERATION.none;
         for (const op of allowedOps) {
@@ -160,6 +167,25 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
         }
       }
       setGlobalAllowedDropOperations(allowed);
+
+      // Hand control to the keyboard DragManager session: it installs the
+      // document-capture listeners that drive Tab-cycling across drop targets,
+      // Arrow navigation within a target, and Enter/Escape drop/cancel.
+      beginDragging(
+        {
+          element: el,
+          items,
+          allowedDropOperations:
+            allowedOps.length > 0 ? allowedOps : (["move", "copy", "link"] as DropOperation[]),
+          onDragEnd: (ev) => {
+            state.endDrag(ev.x, ev.y, ev.dropOperation);
+            setGlobalAllowedDropOperations(DROP_OPERATION.none);
+            setGlobalDraggingTypes(new Set());
+            setGlobalDropEffect(undefined);
+          },
+        },
+        stringFormatter(),
+      );
     }
   };
 

package/src/dnd/createDraggableCollection.ts

@@ -5,37 +5,52 @@
  * component like ListBox, GridList, or Table.
  */
 
-import { createMemo, createEffect, onCleanup, type Accessor } from "solid-js";
+import {
+  createMemo,
+  createEffect,
+  createSignal,
+  onCleanup,
+  untrack,
+  type Accessor,
+} from "solid-js";
 import type { DraggableCollectionState } from "@proyecto-viviana/solid-stately";
 import { getTypes } from "./utils";
 
-// Global state for tracking the dragging collection
-let globalDraggingCollectionRef: HTMLElement | null = null;
-let globalDraggingKeys: Set<string | number> = new Set();
-let globalDraggingTypes: Set<string> = new Set();
+// Global state for tracking the dragging collection. These back the reactive
+// `isVirtualDragging` gate that decides whether drop indicators render across
+// every mounted collection, so they must be Solid signals — React re-renders the
+// whole collection tree on a drag-state change, but Solid's fine-grained
+// reactivity only re-runs the indicator JSX if it subscribed to a signal. Plain
+// module `let`s would make the gate read a stale snapshot and never re-render.
+const [globalDraggingCollectionRef, setGlobalDraggingCollectionRefSignal] =
+  createSignal<HTMLElement | null>(null);
+const [globalDraggingKeys, setGlobalDraggingKeysSignal] = createSignal<Set<string | number>>(
+  new Set(),
+);
+const [globalDraggingTypes, setGlobalDraggingTypesSignal] = createSignal<Set<string>>(new Set());
 
 export function setGlobalDraggingCollectionRef(ref: HTMLElement | null): void {
-  globalDraggingCollectionRef = ref;
+  setGlobalDraggingCollectionRefSignal(ref);
 }
 
 export function getGlobalDraggingCollectionRef(): HTMLElement | null {
-  return globalDraggingCollectionRef;
+  return globalDraggingCollectionRef();
 }
 
 export function setGlobalDraggingKeys(keys: Set<string | number>): void {
-  globalDraggingKeys = new Set(keys);
+  setGlobalDraggingKeysSignal(new Set(keys));
 }
 
 export function getGlobalDraggingKeys(): Set<string | number> {
-  return new Set(globalDraggingKeys);
+  return new Set(globalDraggingKeys());
 }
 
 export function setGlobalDraggingTypes(types: Set<string>): void {
-  globalDraggingTypes = new Set(types);
+  setGlobalDraggingTypesSignal(new Set(types));
 }
 
 export function getGlobalDraggingTypes(): Set<string> {
-  return new Set(globalDraggingTypes);
+  return new Set(globalDraggingTypes());
 }
 
 export interface DraggableCollectionOptions {
@@ -61,11 +76,14 @@ export function createDraggableCollection(
 ): DraggableCollectionAria {
   const ref = createMemo(() => options.ref());
 
-  // Track dragging state globally
+  // Track dragging state globally. This effect subscribes to THIS collection's
+  // `state.draggingKeys`; the global-ref reads are untracked so writing the
+  // globals (which are now signals) can't re-trigger this same effect into a
+  // loop — only a real change in this collection's dragging keys should re-run it.
   createEffect(() => {
     const currentRef = ref();
     if (state.draggingKeys.size > 0) {
-      if (globalDraggingCollectionRef !== currentRef) {
+      if (untrack(getGlobalDraggingCollectionRef) !== currentRef) {
         setGlobalDraggingCollectionRef(currentRef);
       }
       setGlobalDraggingKeys(state.draggingKeys);
@@ -74,7 +92,7 @@ export function createDraggableCollection(
     }
 
     // Clear global drag tracking when this collection is no longer dragging.
-    if (globalDraggingCollectionRef === currentRef) {
+    if (untrack(getGlobalDraggingCollectionRef) === currentRef) {
       setGlobalDraggingCollectionRef(null);
       setGlobalDraggingKeys(new Set());
       setGlobalDraggingTypes(new Set());
@@ -83,7 +101,7 @@ export function createDraggableCollection(
 
   // Clean up on unmount
   onCleanup(() => {
-    if (globalDraggingCollectionRef === ref()) {
+    if (untrack(getGlobalDraggingCollectionRef) === ref()) {
       setGlobalDraggingCollectionRef(null);
       setGlobalDraggingKeys(new Set());
       setGlobalDraggingTypes(new Set());

package/src/dnd/createDraggableItem.ts

@@ -9,10 +9,12 @@ import type { JSX } from "solid-js";
 import type {
   DraggableCollectionState,
   DragPreviewRenderer,
+  DropOperation,
 } from "@proyecto-viviana/solid-stately";
 import {
   getTypes,
   writeToDataTransfer,
+  getDragModality,
   DROP_OPERATION,
   EFFECT_ALLOWED,
   DROP_EFFECT_TO_DROP_OPERATION,
@@ -20,13 +22,30 @@ import {
   setGlobalDropEffect,
   getGlobalDropEffect,
 } from "./utils";
+import { createInteractionModality } from "../interactions";
 import { setGlobalDraggingTypes } from "./createDraggableCollection";
+import { beginDragging } from "./DragManager";
+import { createStringFormatter } from "../i18n/createStringFormatter";
+import { dndIntlStrings } from "./intl";
+import { createDescription } from "../utils/createDescription";
 
 export interface DraggableItemOptions {
   /** The unique key of the item. */
   key: string | number;
   /** Whether the item has a separate drag button affordance. */
   hasDragButton?: boolean;
+  /**
+   * Whether the host item has a primary action (e.g. Enter on a GridList/Table
+   * row) that conflicts with the Enter keyboard drag pickup. When true the drag
+   * description switches to the Alt variant (mirrors upstream `hasAction`).
+   */
+  hasAction?: boolean;
+  /**
+   * The host collection's selection mode. Upstream only surfaces the drag
+   * affordance description (aria-describedby → "Press Enter to start dragging.")
+   * when the mode is not `'none'`.
+   */
+  selectionMode?: "none" | "single" | "multiple";
   /** Whether this item is disabled for dragging. */
   isDisabled?: boolean;
   /** Preview renderer function ref. */
@@ -49,12 +68,24 @@ export interface DraggableItemAria {
  * @param state - Draggable collection state
  * @returns Draggable item ARIA props
  */
+// Drag description keys per interaction modality, mirroring upstream
+// useDraggableItem's MESSAGES table. The port always drags the single focused
+// key, so isSelected is always false → the `notSelected` row is used.
+const DRAG_DESCRIPTION_MESSAGES: Record<string, string> = {
+  keyboard: "dragDescriptionKeyboard",
+  touch: "dragDescriptionLongPress",
+  virtual: "dragDescriptionVirtual",
+};
+
 export function createDraggableItem(
   options: Accessor<DraggableItemOptions>,
   state: DraggableCollectionState,
 ): DraggableItemAria {
   const getOptions = createMemo(() => options());
 
+  const stringFormatter = createStringFormatter(dndIntlStrings);
+  const { modality } = createInteractionModality();
+
   // Track position for drag move
   let lastX = 0;
   let lastY = 0;
@@ -64,6 +95,29 @@ export function createDraggableItem(
     return state.draggingKeys.has(key);
   });
 
+  // Drag affordance description (aria-describedby → "Press Enter to start
+  // dragging."). Mirrors upstream useDraggableItem: surfaced only when the item
+  // has no explicit drag button and the host selection mode is not 'none'. The
+  // port only ever drags the single focused key (getKeysForDrag), so
+  // numKeysForDrag === 1 → isSelected is always false → the base (notSelected)
+  // keyboard message; a host primary action swaps in the Alt variant.
+  const dragDescription = createMemo(() => {
+    const opts = getOptions();
+    if (opts.hasDragButton) return undefined;
+    if (opts.selectionMode == null || opts.selectionMode === "none") return undefined;
+    // Subscribe to modality changes, then resolve the drag modality the same way
+    // upstream does (pointer → virtual, coarse-pointer virtual → touch). At rest
+    // with no keyboard interaction this is 'virtual' → "Click to start dragging.".
+    modality();
+    const dragModality = getDragModality();
+    let msg = DRAG_DESCRIPTION_MESSAGES[dragModality] ?? "dragDescriptionVirtual";
+    if (opts.hasAction && dragModality === "keyboard") {
+      msg += "Alt";
+    }
+    return stringFormatter().format(msg as Parameters<ReturnType<typeof stringFormatter>["format"]>[0]);
+  });
+  const descriptionProps = createDescription(dragDescription);
+
   const getKeysForDrag = (): Set<string | number> => {
     const { key } = getOptions();
     // If the key is not selected, only drag that item
@@ -187,13 +241,16 @@ export function createDraggableItem(
       const opts = getOptions();
       if (opts.isDisabled || state.isDisabled) return;
 
+      const el = e.currentTarget as HTMLElement;
       const keys = getKeysForDrag();
-      const rect = (e.target as HTMLElement).getBoundingClientRect();
+      const rect = el.getBoundingClientRect();
       state.startDrag(keys, rect.x + rect.width / 2, rect.y + rect.height / 2);
+
       const items = state.getItems(keys);
       setGlobalDraggingTypes(getTypes(items));
-      let allowed = DROP_OPERATION.all;
+
       const allowedOps = state.getAllowedDropOperations();
+      let allowed = DROP_OPERATION.all;
       if (allowedOps.length > 0) {
         allowed = DROP_OPERATION.none;
         for (const op of allowedOps) {
@@ -201,6 +258,24 @@ export function createDraggableItem(
         }
       }
       setGlobalAllowedDropOperations(allowed);
+
+      // Hand control to the keyboard DragManager session, which drives
+      // Tab-cycling across drop targets and Enter/Escape drop/cancel.
+      beginDragging(
+        {
+          element: el,
+          items,
+          allowedDropOperations:
+            allowedOps.length > 0 ? allowedOps : (["move", "copy", "link"] as DropOperation[]),
+          onDragEnd: (ev) => {
+            state.endDrag(ev.x, ev.y, ev.dropOperation, false);
+            setGlobalAllowedDropOperations(DROP_OPERATION.none);
+            setGlobalDraggingTypes(new Set());
+            setGlobalDropEffect(undefined);
+          },
+        },
+        stringFormatter(),
+      );
     }
   };
 
@@ -220,10 +295,22 @@ export function createDraggableItem(
       onDragEnd,
     };
 
-    // Add keyboard handlers if no separate drag button
+    // Add keyboard handlers if no separate drag button. Mirrors upstream
+    // useDrag: the Enter pickup is wired in the CAPTURE phase so it runs before
+    // the collection item's own press/selection handlers (which also claim
+    // Enter) and can stopPropagation to suppress them — a bubble-phase handler
+    // would never see the Enter keyup, since press consumes it first. In Solid,
+    // capture-phase spread props use the `oncapture:` prefix.
     if (!opts.hasDragButton) {
-      baseProps.onKeyDown = onKeyDown;
-      baseProps.onKeyUp = onKeyUp;
+      baseProps["oncapture:keydown"] = onKeyDown;
+      baseProps["oncapture:keyup"] = onKeyUp;
+    }
+
+    // Reading the reactive getter here keeps this memo subscribed, so the id
+    // appears once createDescription's effect has mounted the hidden element.
+    const describedBy = descriptionProps["aria-describedby"];
+    if (describedBy) {
+      baseProps["aria-describedby"] = describedBy;
     }
 
     return baseProps;