@flytedan/flytebot-design-system 0.11.2 → 0.11.3

package/dist/index.d.cts

@@ -1505,7 +1505,9 @@ interface TransferListProps<T> {
      *  ghost that follows the cursor: with per-field props that second call has to
      *  remember to pass each of them, and the version of this component that did exactly
      *  that quietly dropped every field but title and meta off the dragged card. Handing
-     *  the same object to both render sites makes that class of bug unrepresentable. */
+     *  the same object to both render sites makes that class of bug unrepresentable.
+     *  The row's `title` also names its +/- action, with the destination side's `label`:
+     *  "Move Alpha to In audience". */
     renderRow: (item: T) => EntityRowContent;
     /** Fired by both a drag-drop and the equivalent +/- click. The caller owns actually
      *  moving the item between whatever backing lists it maintains — this component never

package/dist/index.d.ts

@@ -1505,7 +1505,9 @@ interface TransferListProps<T> {
      *  ghost that follows the cursor: with per-field props that second call has to
      *  remember to pass each of them, and the version of this component that did exactly
      *  that quietly dropped every field but title and meta off the dragged card. Handing
-     *  the same object to both render sites makes that class of bug unrepresentable. */
+     *  the same object to both render sites makes that class of bug unrepresentable.
+     *  The row's `title` also names its +/- action, with the destination side's `label`:
+     *  "Move Alpha to In audience". */
     renderRow: (item: T) => EntityRowContent;
     /** Fired by both a drag-drop and the equivalent +/- click. The caller owns actually
      *  moving the item between whatever backing lists it maintains — this component never

package/dist/index.js

@@ -3177,15 +3177,20 @@ function TransferList({
                 if (isBeingDragged) {
                   return /* @__PURE__ */ jsx43("div", { className: "fd-erow-placeholder", "aria-hidden": "true" });
                 }
+                const content = renderRow(item);
+                const destination = (side === "left" ? right : left).label || "the other list";
                 return /* @__PURE__ */ jsx43(
                   EntityRow,
                   {
-                    ...renderRow(item),
+                    ...content,
                     draggable: true,
                     onPointerDown: (e) => beginDrag(e, item, side),
                     action: {
                       icon: side === "left" ? "plus" : "minus",
-                      label: (side === "left" ? "Move to " : "Move from ") + (side === "left" ? right.label || "the other list" : left.label || "the other list"),
+                      // Names the row AND where it goes. A list repeats this button on every
+                      // row, so a name without the row's title is the same word fifty times
+                      // over to a screen reader, with nothing to tell one button from the next.
+                      label: "Move " + content.title + " to " + destination,
                       tone: side === "left" ? "add" : "remove",
                       onClick: () => onMove(item, side, opposite)
                     }