@astryxdesign/lab 0.7.5-canary.45b0afd → 0.7.5-canary.4bcd84f

package/dist/ListInput/ListInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListInput.d.ts","sourceRoot":"","sources":["../../src/ListInput/ListInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListInput.d.ts","sourceRoot":"","sources":["../../src/ListInput/ListInput.tsx"],"names":[],"mappings":"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"}

package/dist/ListInput/ListInput.js

@@ -476,6 +476,25 @@ export function ListInput({
       announce(t('@astryx.listInput.announceReorderCancelled'));
     }
   }, [isDisabled, isLoading, announce, t]);
+
+  // A second pointer that lands anywhere during a pointer reorder (the second
+  // finger of a pinch) cancels the reorder. A pinch whose first finger slid
+  // first zooms without a pointercancel, so the drag would otherwise commit on
+  // release and drop the row at the end of the list.
+  useEffect(() => {
+    if (!isPointerReorderActive) {
+      return;
+    }
+    const onPointerDown = event => {
+      const activeState = reorderStateRef.current;
+      if (activeState?.mode === 'pointer' && activeState.pointerId !== event.pointerId) {
+        setReorderState(null);
+        announce(t('@astryx.listInput.announceReorderCancelled'));
+      }
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () => document.removeEventListener('pointerdown', onPointerDown, true);
+  }, [isPointerReorderActive, announce, t]);
   useEffect(() => {
     const activeAnimations = activeMutationAnimationsRef.current;
     return () => {

package/dist/TransferList/TransferList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransferList.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TransferList.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferList.tsx"],"names":[],"mappings":"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"}

package/dist/TransferList/TransferList.js

@@ -655,6 +655,26 @@ export function TransferList({
       event.currentTarget.releasePointerCapture?.(event.pointerId);
     }
   }, [finishReorder]);
+
+  // A second pointer that lands anywhere during a pointer reorder (the second
+  // finger of a pinch) cancels the reorder. A pinch whose first finger slid
+  // first zooms without a pointercancel, so the drag would otherwise commit on
+  // release and drop the row at the end of the list.
+  const isPointerReorderActive = previewCloneValue != null;
+  useEffect(() => {
+    if (!isPointerReorderActive) {
+      return;
+    }
+    const onPointerDown = event => {
+      const session = reorderSessionRef.current;
+      if (session?.mode === 'pointer' && session.pointerId !== event.pointerId) {
+        suppressClickRef.current = false;
+        finishReorder(true);
+      }
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () => document.removeEventListener('pointerdown', onPointerDown, true);
+  }, [isPointerReorderActive, finishReorder]);
   const handleSearch = useCallback(nextQuery => {
     setQuery(nextQuery);
     const normalized = nextQuery.trim().toLowerCase();

package/dist/lab.css

@@ -544,7 +544,7 @@
   .xkrqix3:not(#\#):not(#\#):not(#\#){text-decoration-line:none}
   .xlyipyv:not(#\#):not(#\#):not(#\#){text-overflow:ellipsis}
   .xtvhhri:not(#\#):not(#\#):not(#\#){text-transform:uppercase}
-  .x5ve5x3:not(#\#):not(#\#):not(#\#){touch-action:none}
+  .x1j4r261:not(#\#):not(#\#):not(#\#){touch-action:pinch-zoom}
   .x1bd091l:not(#\#):not(#\#):not(#\#){transform-origin:left bottom}
   .x9tu13d:not(#\#):not(#\#):not(#\#){transform:rotate(-90deg)}
   .x19jd1h0:not(#\#):not(#\#):not(#\#){transform:rotate(180deg)}

package/dist/reorderStyles.d.ts

@@ -59,11 +59,11 @@ export declare const reorderStyles: Readonly<{
     }>;
     readonly handle: Readonly<{
         readonly cursor: stylex.StyleXClassNameFor<"cursor", "default" | "grab">;
-        readonly touchAction: stylex.StyleXClassNameFor<"touchAction", "none">;
+        readonly touchAction: stylex.StyleXClassNameFor<"touchAction", "pinch-zoom">;
     }>;
     readonly handleActive: Readonly<{
         readonly cursor: stylex.StyleXClassNameFor<"cursor", "default" | "grabbing">;
-        readonly touchAction: stylex.StyleXClassNameFor<"touchAction", "none">;
+        readonly touchAction: stylex.StyleXClassNameFor<"touchAction", "pinch-zoom">;
     }>;
 }>;
 //# sourceMappingURL=reorderStyles.d.ts.map

package/dist/reorderStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reorderStyles.d.ts","sourceRoot":"","sources":["../src/reorderStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAoB3C;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDxB,CAAC"}
+{"version":3,"file":"reorderStyles.d.ts","sourceRoot":"","sources":["../src/reorderStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAoB3C;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDxB,CAAC"}

package/dist/reorderStyles.js

@@ -71,12 +71,12 @@ export const reorderStyles = {
   },
   handle: {
     kkrTdU: "x1jm3nie x16khyan",
-    kFalU9: "x5ve5x3",
+    kFalU9: "x1j4r261",
     $$css: true
   },
   handleActive: {
     kkrTdU: "xi9pz9s x16khyan",
-    kFalU9: "x5ve5x3",
+    kFalU9: "x1j4r261",
     $$css: true
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.5-canary.45b0afd",
+  "version": "0.7.5-canary.4bcd84f",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.5-canary.45b0afd",
+    "@astryxdesign/core": "0.7.5-canary.4bcd84f",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,8 +59,8 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.5-canary.45b0afd",
-    "@astryxdesign/cli": "0.7.5-canary.45b0afd",
+    "@astryxdesign/a11y-spec": "0.7.5-canary.4bcd84f",
+    "@astryxdesign/cli": "0.7.5-canary.4bcd84f",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -74,14 +74,14 @@
   },
   "scripts": {
     "build": "node ../../scripts/clean-dist.mjs && pnpm build:esm && tsc --project tsconfig.build.json && node ../../scripts/add-declaration-extensions.mjs && pnpm build:css && node ../../scripts/check-no-dev-jsx.mjs && node ../../scripts/check-fully-specified.mjs",
-    "build:esm": "babel src --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.ts,**/*.test.tsx,**/__tests__/**,**/*.perf.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css,**/*.css.d.ts\" --config-file ./babel.config.json",
+    "build:esm": "babel src --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.ts,**/*.test.tsx,**/__tests__/**,**/*.perf.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css,**/*.css.d.ts\" --config-file ./babel.config.cjs",
     "build:css": "node ../../scripts/build-css.mjs --package lab",
-    "dev": "babel src --watch --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css*\" --config-file ./babel.config.json",
+    "dev": "babel src --watch --out-dir dist --extensions .ts,.tsx --out-file-extension .js --ignore \"**/*.test.*,**/*.doc.mjs,**/*.d.ts,**/*.css*\" --config-file ./babel.config.cjs",
     "test": "vitest run --root ../..",
     "test:watch": "vitest --root ../..",
     "lint": "eslint src",
     "typecheck:docs": "tsc --project tsconfig.docs.json",
-    "typecheck": "tsc --project tsconfig.json --noEmit",
+    "typecheck": "tsc --project tsconfig.json --noEmit && pnpm typecheck:docs",
     "generate:emoji-data": "node scripts/generate-emoji-data.mjs"
   }
 }

package/src/Comments/Comments.test.tsx

@@ -82,6 +82,12 @@ import type {
   CommentUser,
 } from './types';
 
+// The page's shared live regions are not the component's error Banner.
+const errorBanner = () =>
+  screen
+    .queryAllByRole('alert')
+    .find(element => !element.hasAttribute('data-astryx-live-region'));
+
 const VIEWER: CommentUser = {id: 'avery', name: 'Avery Kim'};
 const OTHER: CommentUser = {id: 'maya', name: 'Maya Chen'};
 const AGENT: CommentUser = {
@@ -900,12 +906,12 @@ describe('Comments threads', () => {
       }),
     );
     await flush();
-    const banner = screen.getByRole('alert');
+    const banner = errorBanner()!;
     expect(banner.textContent).toContain("Your reaction couldn't be saved.");
     await click(within(banner).getByRole('button', {name: 'Retry'}));
     await flush();
     expect(onReact).toHaveBeenCalledTimes(2);
-    expect(screen.queryByRole('alert')).toBeNull();
+    expect(errorBanner()).toBeUndefined();
   });
 
   it('copies a link to the comment', async () => {
@@ -999,7 +1005,7 @@ describe('Comments threads', () => {
         />
       </Sized>,
     );
-    const banner = screen.getByRole('alert');
+    const banner = errorBanner()!;
     expect(banner.textContent).toContain("Couldn't post this comment.");
     await click(within(banner).getByRole('button', {name: 'Retry'}));
     await flush();
@@ -1022,7 +1028,7 @@ describe('Comments threads', () => {
     );
     await click(screen.getByRole('button', {name: 'Load earlier comments'}));
     await flush();
-    const banner = screen.getByRole('alert');
+    const banner = errorBanner()!;
     expect(banner.textContent).toContain("Earlier comments couldn't load");
     await click(within(banner).getByRole('button', {name: 'Retry'}));
     await flush();

package/src/InfoTip/InfoTip.test.tsx

@@ -167,12 +167,16 @@ describe('InfoTip', () => {
     expect(screen.getByTestId('rich-content')).toBeInTheDocument();
   });
   describe('touch', () => {
-    /** A tap: the pointer sequence a finger produces before hover is faked. */
+    /**
+     * A tap, in the order a browser dispatches it: the finger's pointer events,
+     * the hover it synthesizes, then the `click` that says the touch was a tap.
+     */
     const tap = (element: HTMLElement) => {
       fireEvent.pointerEnter(element, {pointerType: 'touch'});
       fireEvent.pointerDown(element, {pointerType: 'touch'});
       fireEvent.pointerUp(element, {pointerType: 'touch'});
       fireEvent.mouseEnter(element);
+      fireEvent.click(element);
     };
 
     it('opens on a tap, though the trigger is a button', async () => {
@@ -221,9 +225,10 @@ describe('InfoTip', () => {
         expect(popoverOpenState.get(layer)).toBe(true);
       });
 
-      fireEvent.pointerDown(screen.getByRole('button', {name: 'Elsewhere'}), {
-        pointerType: 'touch',
-      });
+      // The tap outside counts when the finger lifts.
+      const elsewhere = screen.getByRole('button', {name: 'Elsewhere'});
+      fireEvent.pointerDown(elsewhere, {pointerType: 'touch'});
+      fireEvent.pointerUp(elsewhere, {pointerType: 'touch'});
 
       await waitFor(() => {
         expect(popoverOpenState.get(layer)).toBe(false);

package/src/ListInput/ListInput.test.tsx

@@ -19,7 +19,7 @@ import {
   waitFor,
   within,
 } from '@testing-library/react';
-import {useContainerReveal} from '@astryxdesign/core/hooks';
+import {useAnnounce, useContainerReveal} from '@astryxdesign/core/hooks';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import {
   ListInput,
@@ -206,6 +206,13 @@ function mockMutationAnimations(events: string[] = []) {
 
 afterEach(() => {
   vi.restoreAllMocks();
+  // The shared live regions outlive each test, and a test that stubs
+  // requestAnimationFrame can strand an announcement's frame. An empty
+  // announcement clears what is still waiting, so it is not joined into the
+  // next test's announcements (spec:AST-086 FR9).
+  const announcer = renderHook(() => useAnnounce());
+  announcer.result.current('');
+  announcer.unmount();
   if (originalAnimateDescriptor == null) {
     Reflect.deleteProperty(HTMLElement.prototype, 'animate');
   } else {
@@ -653,10 +660,13 @@ describe('ListInput', () => {
     expect(animate).not.toHaveBeenCalled();
     expect(screen.queryByDisplayValue('Ada')).not.toBeInTheDocument();
     expect(screen.getByRole('button', {name: 'Add guest'})).toHaveFocus();
+    // The removal and the empty state that appears join in one frame (FR9).
     await waitFor(() => {
       expect(
         Array.from(document.querySelectorAll('[aria-live="polite"]')).some(
-          node => node.textContent === 'Removed guest 1.',
+          node =>
+            node.textContent ===
+            'Removed guest 1. No guests yet Add a guest to get started.',
         ),
       ).toBe(true);
     });
@@ -1195,6 +1205,32 @@ describe('ListInput', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('cancels a pointer reorder when a second pointer lands, as a pinch does', () => {
+    const onChange = vi.fn();
+    const {container} = renderListInput({isReorderable: true, onChange});
+    const handle = screen.getByRole('button', {name: 'Reorder guest 1'});
+
+    fireEvent.pointerDown(handle, {
+      button: 0,
+      pointerId: 8,
+      clientX: 10,
+      clientY: 10,
+    });
+    fireEvent.pointerMove(handle, {pointerId: 8, clientX: 10, clientY: 34});
+    expect(
+      container.querySelector('[data-list-input-reorder-source]'),
+    ).toBeInTheDocument();
+
+    // The second finger of a pinch lands elsewhere on the page.
+    fireEvent.pointerDown(document.body, {pointerId: 9, clientX: 200});
+    expect(
+      container.querySelector('[data-list-input-reorder-source]'),
+    ).not.toBeInTheDocument();
+
+    fireEvent.pointerUp(handle, {pointerId: 8, clientX: 10, clientY: 90});
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   it('clears a sub-threshold pointer drag without reordering', () => {
     const onChange = vi.fn();
     const {container} = renderListInput({isReorderable: true, onChange});
@@ -1273,10 +1309,14 @@ describe('ListInput', () => {
     fireEvent.pointerUp(handle, {pointerId: 9, clientX: 15, clientY: 10});
 
     expect(onChange).not.toHaveBeenCalled();
+    // The grab and the return land in the same frame, so they are spoken
+    // together, in order (spec:AST-086 FR9).
     await waitFor(() => {
       expect(
         Array.from(document.querySelectorAll('[aria-live="polite"]')).some(
-          node => node.textContent === 'guest returned to position 1.',
+          node =>
+            node.textContent ===
+            'guest 1 grabbed. Use arrow keys to move, Space or Enter to drop, and Escape to cancel. guest returned to position 1.',
         ),
       ).toBe(true);
     });

package/src/ListInput/ListInput.tsx

@@ -809,6 +809,29 @@ export function ListInput<T>({
     }
   }, [isDisabled, isLoading, announce, t]);
 
+  // A second pointer that lands anywhere during a pointer reorder (the second
+  // finger of a pinch) cancels the reorder. A pinch whose first finger slid
+  // first zooms without a pointercancel, so the drag would otherwise commit on
+  // release and drop the row at the end of the list.
+  useEffect(() => {
+    if (!isPointerReorderActive) {
+      return;
+    }
+    const onPointerDown = (event: PointerEvent) => {
+      const activeState = reorderStateRef.current;
+      if (
+        activeState?.mode === 'pointer' &&
+        activeState.pointerId !== event.pointerId
+      ) {
+        setReorderState(null);
+        announce(t('@astryx.listInput.announceReorderCancelled'));
+      }
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () =>
+      document.removeEventListener('pointerdown', onPointerDown, true);
+  }, [isPointerReorderActive, announce, t]);
+
   useEffect(() => {
     const activeAnimations = activeMutationAnimationsRef.current;
     return () => {

package/src/MobileTokenizer/MobileTokenizer.test.tsx

@@ -56,7 +56,14 @@ function Harness({
   );
 }
 
-function CreateHarness({spy}: {spy: ReturnType<typeof vi.fn>}) {
+function CreateHarness({
+  spy,
+}: {
+  spy: (
+    items: SearchableItem[],
+    change: MobileTokenizerChange<SearchableItem>,
+  ) => void;
+}) {
   const [value, setValue] = useState<SearchableItem[]>([]);
   return (
     <MobileTokenizer
@@ -105,8 +112,10 @@ beforeEach(() => {
   window.scrollTo = vi.fn();
   vi.stubGlobal(
     'requestAnimationFrame',
+    // Next microtask, not synchronously: a real frame never runs before
+    // requestAnimationFrame returns, and callers may rely on its id.
     vi.fn((cb: FrameRequestCallback) => {
-      cb(0);
+      queueMicrotask(() => cb(0));
       return 1;
     }),
   );
@@ -302,7 +311,7 @@ describe('MobileTokenizer (Lab, single-sheet flow)', () => {
     const title = await screen.findByRole('heading', {
       name: 'No results found',
     });
-    const emptyState = title.closest('[role="status"]');
+    const emptyState = title.closest('.astryx-empty-state');
     expect(emptyState).toHaveTextContent('Try a different search.');
     expect(emptyState?.querySelector('.astryx-icon')).toHaveAttribute(
       'data-size',

package/src/TransferList/TransferList.composition.test.tsx

@@ -125,7 +125,7 @@ function StagedColumnSelector({
 }
 
 function openSelector(): void {
-  fireEvent.keyDown(screen.getByRole('button', {name: 'View options'}), {
+  fireEvent.keyDown(screen.getByRole('combobox', {name: 'View options'}), {
     key: 'ArrowDown',
   });
 }
@@ -144,7 +144,7 @@ describe('ComplexSelector + TransferList composition', () => {
     openSelector();
     await waitFor(() => {
       expect(
-        screen.getByRole('button', {name: 'View options'}),
+        screen.getByRole('combobox', {name: 'View options'}),
       ).toHaveAttribute('aria-expanded', 'true');
     });
 
@@ -173,7 +173,7 @@ describe('ComplexSelector + TransferList composition', () => {
     const user = userEvent.setup();
     const onCommit = vi.fn();
     render(<StagedColumnSelector onCommit={onCommit} />);
-    const trigger = screen.getByRole('button', {name: 'View options'});
+    const trigger = screen.getByRole('combobox', {name: 'View options'});
 
     openSelector();
     await user.click(
@@ -255,7 +255,7 @@ describe('ComplexSelector + TransferList composition', () => {
     const user = userEvent.setup();
     const onCommit = vi.fn();
     render(<StagedColumnSelector onCommit={onCommit} />);
-    const trigger = screen.getByRole('button', {name: 'View options'});
+    const trigger = screen.getByRole('combobox', {name: 'View options'});
 
     openSelector();
     await waitFor(() => {

package/src/TransferList/TransferList.test.tsx

@@ -534,6 +534,42 @@ describe('TransferList', () => {
       expect(screen.getByTestId('popover-host')).toContainElement(layer);
     });
 
+    it('cancels a pointer reorder when a second pointer lands, as a pinch does', () => {
+      const onValueChange = vi.fn();
+      const {container} = render(
+        <ControlledTransferList
+          initialValue={['name', 'owner', 'status']}
+          onValueChange={onValueChange}
+        />,
+      );
+      const rows = [
+        ...container.querySelectorAll<HTMLElement>('[data-transfer-list-row]'),
+      ];
+      mockRowBounds(rows);
+      const handle = screen.getByRole('button', {name: 'Reorder Name'});
+
+      fireEvent.pointerDown(handle, {
+        button: 0,
+        pointerId: 7,
+        clientX: 300,
+        clientY: 10,
+      });
+      fireEvent.pointerMove(handle, {pointerId: 7, clientX: 300, clientY: 34});
+      expect(
+        container.querySelector('[data-transfer-list-reorder-source]'),
+      ).toBeInTheDocument();
+
+      // The second finger of a pinch lands elsewhere on the page.
+      fireEvent.pointerDown(document.body, {pointerId: 8, clientX: 600});
+      expect(
+        container.querySelector('[data-transfer-list-reorder-source]'),
+      ).not.toBeInTheDocument();
+
+      fireEvent.pointerMove(handle, {pointerId: 7, clientX: 300, clientY: 140});
+      fireEvent.pointerUp(handle, {pointerId: 7, clientX: 300, clientY: 140});
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+
     it('keeps rows stationary, locks X, follows pointer Y, and commits once', () => {
       const onValueChange = vi.fn();
       const {container} = render(

package/src/TransferList/TransferList.tsx

@@ -994,6 +994,30 @@ export function TransferList<T extends string = string>({
     [finishReorder],
   );
 
+  // A second pointer that lands anywhere during a pointer reorder (the second
+  // finger of a pinch) cancels the reorder. A pinch whose first finger slid
+  // first zooms without a pointercancel, so the drag would otherwise commit on
+  // release and drop the row at the end of the list.
+  const isPointerReorderActive = previewCloneValue != null;
+  useEffect(() => {
+    if (!isPointerReorderActive) {
+      return;
+    }
+    const onPointerDown = (event: PointerEvent) => {
+      const session = reorderSessionRef.current;
+      if (
+        session?.mode === 'pointer' &&
+        session.pointerId !== event.pointerId
+      ) {
+        suppressClickRef.current = false;
+        finishReorder(true);
+      }
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () =>
+      document.removeEventListener('pointerdown', onPointerDown, true);
+  }, [isPointerReorderActive, finishReorder]);
+
   const handleSearch = useCallback(
     (nextQuery: string) => {
       setQuery(nextQuery);

package/src/TransferList/TransferListSelector.test.tsx

@@ -106,7 +106,7 @@ function Harness({
 async function openSelector(
   name = 'Visible fields',
 ): Promise<HTMLButtonElement> {
-  const trigger = screen.getByRole('button', {
+  const trigger = screen.getByRole('combobox', {
     name,
   }) as HTMLButtonElement;
   fireEvent.keyDown(trigger, {key: 'ArrowDown'});
@@ -416,7 +416,7 @@ describe('TransferListSelector', () => {
     );
 
     expect(
-      screen.getByRole('button', {name: 'Visible fields'}),
+      screen.getByRole('combobox', {name: 'Visible fields'}),
     ).toHaveTextContent('3 selected');
   });
 
@@ -462,7 +462,7 @@ describe('TransferListSelector', () => {
     expect(fieldset).not.toContainElement(cancel);
     expect(apply).toBeDisabled();
     expect(
-      screen.getByRole('button', {name: 'Visible fields'}),
+      screen.getByRole('combobox', {name: 'Visible fields'}),
     ).toHaveAttribute('aria-disabled', 'true');
 
     view.rerender(
@@ -564,7 +564,7 @@ describe('TransferListSelector', () => {
       screen.getByTestId('column-selector').closest('.astryx-complex-selector'),
     ).toHaveAttribute('data-size', 'sm');
     expect(
-      screen.getByRole('button', {name: 'Table columns'}),
+      screen.getByRole('combobox', {name: 'Table columns'}),
     ).toHaveTextContent('Customize columns');
     expect(
       screen.getByTestId('column-selector').closest('.astryx-field'),

package/src/__tests__/ReorderGripPinchZoom.a11y.chromium.spec.ts

@@ -0,0 +1,177 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ReorderGripPinchZoom.a11y.chromium.spec.ts
+ * @input The checked-in Lab/ListInput › Tag Options and Lab/TransferList ›
+ *   Default stories, a built Storybook and real Chromium touch input (CDP) on
+ *   a phone viewport
+ * @output Browser evidence that a pinch which starts on, or reaches, a reorder
+ *   grip zooms the page and leaves the order as it was, while a one-finger
+ *   drag on the grip still reorders (WCAG 1.4.4)
+ * @position Chromium proof for the shared Lab reorder grip's `touch-action`
+ *   (packages/lab/src/reorderStyles.ts)
+ */
+
+import {expect, test, type CDPSession, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+// A phone: the viewport meta applies and the page can pinch-zoom.
+test.use({
+  hasTouch: true,
+  isMobile: true,
+  viewport: {width: 390, height: 844},
+  deviceScaleFactor: 3,
+});
+
+const sleep = async (ms: number) =>
+  new Promise(resolve => setTimeout(resolve, ms));
+
+type Point = {x: number; y: number};
+type Box = {x: number; y: number; width: number; height: number};
+
+interface Surface {
+  name: string;
+  story: string;
+  /** The first row's reorder grip. */
+  grip: string;
+  /** Every reorderable row, in display order, keyed by this attribute. */
+  rowAttribute: string;
+}
+
+const SURFACES: Surface[] = [
+  {
+    name: 'ListInput',
+    story: 'lab-listinput--tag-options',
+    grip: 'button[data-list-input-reorder]',
+    rowAttribute: 'data-list-input-row',
+  },
+  {
+    name: 'TransferList',
+    story: 'lab-transferlist--default',
+    grip: '[data-transfer-list-row]:not([data-transfer-list-row=""]) button[aria-pressed]',
+    rowAttribute: 'data-transfer-list-row',
+  },
+];
+
+async function openStory(page: Page, surface: Surface) {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=${surface.story}&viewMode=story`,
+  );
+  const grip = page.locator(surface.grip).first();
+  await expect(grip).toBeVisible();
+  expect(await page.evaluate(() => window.visualViewport?.scale)).toBe(1);
+  const box = (await grip.boundingBox()) as Box;
+  const center = {x: box.x + box.width / 2, y: box.y + box.height / 2};
+  const cdp = await page.context().newCDPSession(page);
+  return {center, cdp, order: await readOrder(page, surface)};
+}
+
+async function readOrder(page: Page, surface: Surface) {
+  return page.evaluate(
+    attribute =>
+      Array.from(document.querySelectorAll(`[${attribute}]`))
+        .map(row => row.getAttribute(attribute))
+        .filter((key): key is string => key != null && key !== ''),
+    surface.rowAttribute,
+  );
+}
+
+const zoom = async (page: Page) =>
+  page.evaluate(() => window.visualViewport?.scale ?? 1);
+
+async function touch(
+  cdp: CDPSession,
+  type: 'touchStart' | 'touchMove' | 'touchEnd',
+  points: Point[],
+) {
+  await cdp.send('Input.dispatchTouchEvent', {
+    type,
+    touchPoints: points.map((point, index) => ({...point, id: index + 1})),
+  });
+}
+
+// Two fingers land one after the other and spread apart, as a person pinches.
+// The spread is wide enough to clear the browser's minimum pinch span.
+async function pinch(cdp: CDPSession, first: Point, second: Point) {
+  const steps = 12;
+  const spread = 2.5;
+  const mid = {x: (first.x + second.x) / 2, y: (first.y + second.y) / 2};
+  const at = (p: Point, k: number) => ({
+    x: mid.x + (p.x - mid.x) * k,
+    y: mid.y + (p.y - mid.y) * k,
+  });
+  await touch(cdp, 'touchStart', [first]);
+  await sleep(30);
+  await touch(cdp, 'touchStart', [first, second]);
+  for (let i = 1; i <= steps; i++) {
+    await sleep(16);
+    const k = 1 + ((spread - 1) * i) / steps;
+    await touch(cdp, 'touchMove', [at(first, k), at(second, k)]);
+  }
+  await sleep(16);
+  await touch(cdp, 'touchEnd', []);
+  await sleep(600);
+}
+
+for (const surface of SURFACES) {
+  test.describe(surface.name, () => {
+    test('a pinch whose first finger lands on a grip zooms the page', async ({
+      page,
+    }) => {
+      const {center, cdp, order} = await openStory(page, surface);
+      await pinch(cdp, center, {x: center.x + 40, y: center.y + 140});
+      expect(await zoom(page)).toBeGreaterThan(1.2);
+      expect(await readOrder(page, surface)).toEqual(order);
+    });
+
+    test('a pinch whose second finger lands on a grip zooms the page', async ({
+      page,
+    }) => {
+      const {center, cdp, order} = await openStory(page, surface);
+      await pinch(cdp, {x: center.x + 40, y: center.y + 140}, center);
+      expect(await zoom(page)).toBeGreaterThan(1.2);
+      expect(await readOrder(page, surface)).toEqual(order);
+    });
+
+    test('a one-finger drag on a grip still reorders', async ({page}) => {
+      const {center, cdp, order} = await openStory(page, surface);
+      const rows = await page.evaluate(
+        attribute =>
+          Array.from(document.querySelectorAll(`[${attribute}]`))
+            .filter(row => row.getAttribute(attribute))
+            .map(row => row.getBoundingClientRect().top),
+        surface.rowAttribute,
+      );
+      // Past the second row's centre: the first row lands second or later.
+      const distance = (rows[2] - rows[0]) * 0.9;
+      await touch(cdp, 'touchStart', [center]);
+      for (let i = 1; i <= 20; i++) {
+        await sleep(16);
+        await touch(cdp, 'touchMove', [
+          {x: center.x, y: center.y + (distance * i) / 20},
+        ]);
+      }
+      await sleep(100);
+      await touch(cdp, 'touchEnd', []);
+      await sleep(600);
+      expect(await zoom(page)).toBe(1);
+      const after = await readOrder(page, surface);
+      expect(after).not.toEqual(order);
+      expect(after.indexOf(order[0])).toBeGreaterThan(0);
+    });
+  });
+}

package/src/reorderStyles.ts

@@ -65,18 +65,23 @@ export const reorderStyles = stylex.create({
       insetBlockEnd: `calc(-1 * ${spacingVars['--spacing-0-5']})`,
     },
   },
+  // A finger on a grip drags its row from the first move, so the grip refuses
+  // panning. It still allows pinch-zoom: a pinch whose first finger lands on a
+  // grip zooms the page (WCAG 1.4.4); the browser's pointercancel then ends
+  // the drag, as it would any drag the browser takes. `touch-action` is read
+  // when the touch starts, so the active state keeps the same value.
   handle: {
     cursor: {
       default: 'grab',
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
-    touchAction: 'none',
+    touchAction: 'pinch-zoom',
   },
   handleActive: {
     cursor: {
       default: 'grabbing',
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
-    touchAction: 'none',
+    touchAction: 'pinch-zoom',
   },
 });