@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/src/Resizable/ResizeHandle.tsx

@@ -46,7 +46,11 @@ import {
 } from '../theme/tokens.stylex';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {mergeProps, rtlStyles} from '../utils';
-import type {ResizableProps} from './useResizable';
+import {
+  getCollapseControls,
+  getEffectiveMaxPx,
+  type ResizableProps,
+} from './useResizable';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
@@ -360,6 +364,60 @@ export interface ResizeHandleProps extends Omit<
   children?: ReactNode;
 }
 
+/**
+ * The snap point `count` points away from the region's current size in
+ * `direction` (+1 grows, -1 shrinks). A point beyond `minSize` or `maxSize`
+ * counts as that bound; the nearest end point serves when fewer remain, and
+ * the current size when it is already there.
+ */
+function adjacentSnapPoint(
+  resizable: ResizableProps,
+  direction: 1 | -1,
+  count: number,
+): number {
+  const points = [
+    ...new Set(
+      resizable._snaps.map(p =>
+        Math.min(resizable._maxSizePx, Math.max(resizable._minSizePx, p)),
+      ),
+    ),
+  ].sort((a, b) => a - b);
+  const size = resizable._size;
+  const ahead =
+    direction > 0
+      ? points.filter(p => p > size)
+      : points.filter(p => p < size).reverse();
+  if (ahead.length === 0) {
+    return size;
+  }
+  return ahead[Math.min(count, ahead.length) - 1];
+}
+
+/**
+ * Collapse an open pane, or restore a collapsed one to the size it had before
+ * it collapsed (APG window splitter: Enter "restores the splitter to its
+ * previous position"). The hook's own collapse/expand do exactly that; a
+ * hand-built `ResizableProps` (no registered controls) falls back to a resize
+ * gesture to the minimum, which also cannot reopen a pane whose minimum sits below its
+ * collapse threshold.
+ */
+function toggleCollapse(resizable: ResizableProps): void {
+  const controls = getCollapseControls(resizable);
+  if (controls) {
+    if (resizable._isCollapsed) {
+      controls.expand();
+    } else {
+      controls.collapse();
+    }
+    return;
+  }
+  resizable._onResizeStart();
+  resizable._onResizeMove(
+    resizable._isCollapsed ? resizable._minSizePx : -resizable._size,
+  );
+  resizable._onResizeEnd();
+}
+
 /**
  * Draggable resize handle placed between resizable panels. Renders as a thin
  * divider line with a wider invisible hit area and optional pill grip indicator.
@@ -375,6 +433,7 @@ export interface ResizeHandleProps extends Omit<
  *   hasDivider />
  * ```
  */
+
 export function ResizeHandle({
   direction = 'horizontal',
   position: positionMode = 'inline',
@@ -528,20 +587,64 @@ export function ResizeHandle({
       const step = e.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;
       const rtl = isHorizontal ? getRTLMultiplier() : 1;
 
+      // The pane's grow direction on this key: ArrowRight/Down grow unless the
+      // layout is reversed or, on the inline axis, right-to-left.
+      const grows = (key: string) =>
+        (key === 'ArrowRight' || key === 'ArrowDown'
+          ? 1
+          : key === 'ArrowLeft' || key === 'ArrowUp'
+            ? -1
+            : 0) *
+          (isHorizontal ? rtl : 1) *
+          sign >
+        0;
+
       switch (e.key) {
         case 'ArrowRight':
-        case 'ArrowDown': {
-          e.preventDefault();
-          resizable._onResizeStart();
-          resizable._onResizeMove(step * (isHorizontal ? rtl : 1) * sign);
-          resizable._onResizeEnd();
-          break;
-        }
+        case 'ArrowDown':
         case 'ArrowLeft':
         case 'ArrowUp': {
           e.preventDefault();
+          if (resizable._isCollapsed) {
+            // A collapsed pane answers only the grow arrow: it opens one step
+            // above its minimum, the value the separator announces while
+            // collapsed, or at the collapse threshold when that is larger (APG
+            // window splitter: the arrow moves the separator from where it is;
+            // a bare step would stay below the threshold and leave it in
+            // place). The shrink arrow is a no-op.
+            if (grows(e.key)) {
+              resizable._onResizeStart();
+              // At least the collapse threshold, or the move would stay
+              // collapsed when the minimum sits below it.
+              resizable._onResizeMove(
+                Math.max(resizable._minSizePx + step, resizable._collapsedSize),
+              );
+              resizable._onResizeEnd();
+            }
+            break;
+          }
+          if (resizable._snaps.length > 0) {
+            // With snap points the region can rest only on a point, so a
+            // pixel step would snap straight back; the arrow moves to the
+            // adjacent point in its direction instead (Shift, two points),
+            // staying within the bounds.
+            resizable._onResizeStart();
+            resizable._onResizeMove(
+              adjacentSnapPoint(
+                resizable,
+                grows(e.key) ? 1 : -1,
+                e.shiftKey ? 2 : 1,
+              ) - resizable._size,
+            );
+            resizable._onResizeEnd();
+            break;
+          }
+          const direction =
+            e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : -1;
           resizable._onResizeStart();
-          resizable._onResizeMove(-step * (isHorizontal ? rtl : 1) * sign);
+          resizable._onResizeMove(
+            direction * step * (isHorizontal ? rtl : 1) * sign,
+          );
           resizable._onResizeEnd();
           break;
         }
@@ -554,6 +657,9 @@ export function ResizeHandle({
         }
         case 'End': {
           e.preventDefault();
+          // Only a configured maximum is the region's own limit; the reported
+          // stand-in for an unbounded region is where the pane *could* reach,
+          // not where End may safely move it (a recorded gap).
           if (resizable._maxSizePx !== Infinity) {
             resizable._onResizeStart();
             resizable._onResizeMove(resizable._maxSizePx - resizable._size);
@@ -564,11 +670,7 @@ export function ResizeHandle({
         case 'Enter': {
           e.preventDefault();
           if (resizable._collapsible) {
-            resizable._onResizeStart();
-            resizable._onResizeMove(
-              resizable._isCollapsed ? resizable._minSizePx : -resizable._size,
-            );
-            resizable._onResizeEnd();
+            toggleCollapse(resizable);
           }
           break;
         }
@@ -582,11 +684,7 @@ export function ResizeHandle({
     if (isDisabled || !resizable || !resizable._collapsible) {
       return;
     }
-    resizable._onResizeStart();
-    resizable._onResizeMove(
-      resizable._isCollapsed ? resizable._minSizePx : -resizable._size,
-    );
-    resizable._onResizeEnd();
+    toggleCollapse(resizable);
   }, [isDisabled, resizable]);
 
   // --- Cleanup on unmount ---
@@ -620,9 +718,16 @@ export function ResizeHandle({
       : resizable._size
     : undefined;
   const ariaValueMin = resizable ? resizable._minSizePx : undefined;
+  // A separator with a value needs a maximum (WAI-ARIA, APG window splitter).
+  // Unbounded regions report the basis they can fill; a hand-built props
+  // object without it reports only a configured maximum.
+  const effectiveMax = resizable
+    ? (getEffectiveMaxPx(resizable) ??
+      (resizable._maxSizePx !== Infinity ? resizable._maxSizePx : undefined))
+    : undefined;
   const ariaValueMax =
-    resizable && resizable._maxSizePx !== Infinity
-      ? resizable._maxSizePx
+    effectiveMax != null && Number.isFinite(effectiveMax)
+      ? effectiveMax
       : undefined;
   const ariaValueText =
     resizable && isCollapsed ? t('@astryx.resizable.collapsed') : undefined;

package/src/Resizable/__tests__/ResizeHandle.a11y.chromium.spec.ts

@@ -0,0 +1,119 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ResizeHandle.a11y.chromium.spec.ts
+ * @input Built ResizeHandle stories and WINDOW_SPLITTER_PATTERN in real Chromium
+ * @output Browser evidence for every window-splitter expectation across the binding's states, reconciled against the exact known failures
+ * @position Chromium lane of the ResizeHandle binding (component:Resizable AR1)
+ */
+
+import {
+  expect,
+  test,
+  type CDPSession,
+  type Locator,
+  type Page,
+} from '@playwright/test';
+import {
+  WINDOW_SPLITTER_PATTERN,
+  blockingResults,
+  checkAccessibilitySpec,
+  formatFailures,
+  neverExercised,
+  summarize,
+  unmatchedKnownFailures,
+  type BindingResult,
+} from '@astryxdesign/a11y-spec';
+import {
+  createChromiumHarness,
+  holdMotionStill,
+} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+import {RESIZE_HANDLE_KNOWN_FAILURES} from './ResizeHandle.a11y.known-failures';
+import {
+  RESIZE_HANDLE_BINDING_STATES,
+  type ResizeHandleBindingState,
+} from './ResizeHandle.a11y.states';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+function storyUrl(storyId: string): string {
+  return `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`;
+}
+
+async function mountState(
+  page: Page,
+  state: ResizeHandleBindingState,
+): Promise<{subject: Locator; related: Record<string, Locator>}> {
+  await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
+  await holdMotionStill(page);
+  const root = page.locator('#storybook-root');
+  const subject = root.getByRole('separator', {name: state.label});
+  await subject.waitFor({state: 'attached'});
+  const pane = root.locator('#a11y-splitter-pane');
+  return {subject, related: {pane}};
+}
+
+async function runState(
+  page: Page,
+  cdp: CDPSession,
+  state: ResizeHandleBindingState,
+): Promise<BindingResult> {
+  return checkAccessibilitySpec({
+    spec: WINDOW_SPLITTER_PATTERN,
+    binding: 'ResizeHandle',
+    state: state.id,
+    facts: state.facts,
+    knownFailures: RESIZE_HANDLE_KNOWN_FAILURES,
+    mount: async () => {
+      const {subject, related} = await mountState(page, state);
+      return createChromiumHarness({page, cdp, subject, related});
+    },
+  });
+}
+
+test('every window-splitter expectation is exercised by a ResizeHandle state', async ({
+  page,
+}) => {
+  // One test mounts and checks every binding state in turn: about 20s on an
+  // idle machine, three times that when the contract run shares a runner's
+  // cores, so the default 60s ran out mid-loop on whichever state it reached.
+  // Budget it like the other whole-inventory sweeps (Button, Checkbox).
+  test.setTimeout(3 * 60 * 1000);
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of RESIZE_HANDLE_BINDING_STATES) {
+    results.push(await runState(page, cdp, state));
+  }
+  expect(neverExercised(results)).toEqual([]);
+  expect(unmatchedKnownFailures(RESIZE_HANDLE_KNOWN_FAILURES, results)).toEqual(
+    [],
+  );
+});
+
+for (const state of RESIZE_HANDLE_BINDING_STATES) {
+  test(`ResizeHandle [${state.id}] — ${state.summary}`, async ({page}) => {
+    const cdp = await page.context().newCDPSession(page);
+    const result = await runState(page, cdp, state);
+    const report = summarize(WINDOW_SPLITTER_PATTERN, [result]);
+    // Required rows block (AST-020 FR9); advisory rows and exact known
+    // failures report.
+    expect(formatFailures(blockingResults([result]))).toBe('');
+    expect(report.unrunLayers).toEqual([]);
+    expect(report.counts.unexpectedPass).toBe(0);
+  });
+}

package/src/Resizable/__tests__/ResizeHandle.a11y.known-failures.ts

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ResizeHandle.a11y.known-failures.ts
+ * @input The exact window-splitter failures the shipped ResizeHandle produces today
+ * @output RESIZE_HANDLE_KNOWN_FAILURES — records both lanes reconcile against, so a fix shows up as an unexpected pass and any other failure stays a failure
+ * @position Known-failure ledger for the ResizeHandle binding
+ */
+
+import type {KnownFailure} from '@astryxdesign/a11y-spec';
+
+export const RESIZE_HANDLE_KNOWN_FAILURES: ReadonlyArray<KnownFailure> = [
+  {
+    expectation: 'windowsplitter.separator.maximum',
+    binding: 'ResizeHandle',
+    state: 'bare-unbounded-in-container',
+    evidenceLayer: 'dom',
+    failureEquals: 'the splitter exposes no aria-valuemax',
+    standardsReference:
+      'WAI-ARIA separator (focusable): aria-valuemax; APG Window Splitter states and properties; Astryx component:Resizable AR1 (an unbounded Handle in a container that no percentage bound observes carries no aria-valuemax, because measuring that container would add an observer to a region whose bounds are all in pixels).',
+    userImpact:
+      'A screen-reader user on a handle whose pixel-only region sits in a container and sets no maximum hears a value and a minimum but no maximum.',
+    reason:
+      'A recorded gap with a reason the record owns (Performance and resources: atomic pixel paths add no observer); it closes only with a record decision, not a fix.',
+  },
+  {
+    expectation: 'windowsplitter.separator.controls-pane',
+    binding: 'ResizeHandle',
+    state: 'bare-documented-usage',
+    evidenceLayer: 'dom',
+    failureEquals: 'the splitter carries no aria-controls',
+    standardsReference:
+      'APG Window Splitter states and properties: the separator has aria-controls set to the id of the primary pane; Astryx component:Resizable AR1 (the Handle names the pane it resizes with aria-controls only when its caller passes one).',
+    userImpact:
+      'A screen-reader user on a handle rendered the documented minimal way hears a separator with no named pane; the relationship exists only when the caller wires it (SideNav does).',
+    reason:
+      'A recorded gap the record owns: whether the Handle should derive the pane relationship itself is a component decision for its own spec-backed patch.',
+  },
+];

package/src/Resizable/__tests__/ResizeHandle.a11y.renders.tsx

@@ -0,0 +1,80 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ResizeHandle.a11y.renders.tsx
+ * @input One ResizeHandle binding state
+ * @output The React tree every lane renders for that state (the jsdom test directly, the story through Storybook)
+ * @position Shared fixture for the ResizeHandle binding
+ */
+
+import {useRef, type ReactElement} from 'react';
+import {ResizeHandle} from '../ResizeHandle';
+import {useResizable} from '../useResizable';
+import type {ResizeHandleBindingState} from './ResizeHandle.a11y.states';
+
+/** The id the binding gives the pane the bare handle controls. */
+export const BARE_PANE_ID = 'a11y-splitter-pane';
+
+function BareSplitter({state}: {state: ResizeHandleBindingState}) {
+  const direction = state.direction ?? 'horizontal';
+  const containerRef = useRef<HTMLDivElement>(null);
+  const region = useResizable({
+    containerRef: state.inContainer ? containerRef : undefined,
+    defaultSize: state.facts.valueNow,
+    minSize: state.facts.valueMin,
+    maxSize: state.maxSize === null ? undefined : (state.facts.valueMax ?? 400),
+    direction,
+    collapsible: state.facts.collapsible,
+    collapsedSize: state.collapsedSize,
+    defaultIsCollapsed: state.startsCollapsed,
+    snaps: state.snaps ? [...state.snaps] : undefined,
+  });
+  const isHorizontal = direction === 'horizontal';
+  const pane = (
+    <div
+      id={BARE_PANE_ID}
+      style={{
+        ...(isHorizontal ? {width: region.size} : {height: region.size}),
+        background: 'var(--astryx-bg-surface, #f2f2f2)',
+        padding: 12,
+      }}>
+      Details
+    </div>
+  );
+  const handle = (
+    <ResizeHandle
+      resizable={region.props}
+      label={state.label}
+      direction={direction}
+      isReversed={state.isReversed}
+      isDisabled={state.disabled}
+      aria-controls={state.withoutControls ? undefined : BARE_PANE_ID}
+    />
+  );
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        display: 'flex',
+        flexDirection: isHorizontal ? 'row' : 'column',
+        width: 600,
+        height: 320,
+      }}>
+      {state.isReversed ? handle : pane}
+      {state.isReversed ? pane : handle}
+      <div style={{flex: 1, padding: 12}}>Main content</div>
+    </div>
+  );
+}
+
+export function renderResizeHandleState(
+  state: ResizeHandleBindingState,
+): ReactElement {
+  return (
+    <div dir={state.rtl ? 'rtl' : 'ltr'} style={{padding: 16}}>
+      <BareSplitter state={state} />
+    </div>
+  );
+}

package/src/Resizable/__tests__/ResizeHandle.a11y.states.ts

@@ -0,0 +1,197 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ResizeHandle.a11y.states.ts
+ * @input ResizeHandle's representative splitter states and the facts WINDOW_SPLITTER_PATTERN reads
+ * @output RESIZE_HANDLE_BINDING_STATES and the explicit ownership exclusions for this binding
+ * @position Binding inventory shared by the jsdom test, the Chromium spec, and the story (component:Resizable AR1)
+ */
+
+import type {WindowSplitterStateFacts} from '@astryxdesign/a11y-spec';
+
+export interface ResizeHandleBindingState {
+  readonly id: string;
+  readonly summary: string;
+  readonly storyId: string;
+  /** Which composition renders the handle; SideNav's binding follows separately. */
+  readonly component: 'ResizeHandle';
+  /** The separator's accessible name. */
+  readonly label: string;
+  readonly facts: WindowSplitterStateFacts;
+  /** Bare-handle configuration. */
+  readonly direction?: 'horizontal' | 'vertical';
+  readonly isReversed?: boolean;
+  readonly rtl?: boolean;
+  readonly maxSize?: number | null;
+  /** The hook's collapse threshold, when the state sets one. */
+  readonly collapsedSize?: number;
+  /** Start the pane collapsed (`defaultIsCollapsed`). */
+  readonly startsCollapsed?: boolean;
+  /** Pass a `containerRef` (a pixel-only region inside a container). */
+  readonly inContainer?: boolean;
+  /** Snap points for the region (`snaps`). */
+  readonly snaps?: ReadonlyArray<number>;
+  /** Render the documented minimal usage: no `aria-controls` passed. */
+  readonly withoutControls?: boolean;
+  readonly disabled?: boolean;
+}
+
+function facts(
+  overrides: Partial<WindowSplitterStateFacts> = {},
+): WindowSplitterStateFacts {
+  return {
+    valueNow: 200,
+    valueMin: 100,
+    valueMax: 400,
+    orientation: 'vertical',
+    increaseKey: 'ArrowRight',
+    step: 10,
+    operable: true,
+    collapsible: false,
+    ...overrides,
+  };
+}
+
+const story = (id: string) => `a11y-windowsplitter--${id}`;
+
+export const RESIZE_HANDLE_BINDING_STATES = [
+  {
+    id: 'bare-horizontal',
+    summary: 'a bare ResizeHandle on the end side of a 200px pane (100–400)',
+    storyId: story('bare-horizontal'),
+    component: 'ResizeHandle',
+    label: 'Resize details pane',
+    facts: facts(),
+  },
+  {
+    id: 'bare-vertical',
+    summary: 'a bare ResizeHandle below a 200px pane: ArrowDown grows it',
+    storyId: story('bare-vertical'),
+    component: 'ResizeHandle',
+    label: 'Resize log pane',
+    facts: facts({orientation: 'horizontal', increaseKey: 'ArrowDown'}),
+    direction: 'vertical',
+  },
+  {
+    id: 'bare-reversed',
+    summary:
+      'a bare ResizeHandle on the start side of its pane: ArrowLeft grows it',
+    storyId: story('bare-reversed'),
+    component: 'ResizeHandle',
+    label: 'Resize details pane',
+    facts: facts({increaseKey: 'ArrowLeft'}),
+    isReversed: true,
+  },
+  {
+    id: 'bare-rtl',
+    summary:
+      'a bare ResizeHandle on a right-to-left page: the inline arrows follow the reading direction',
+    storyId: story('bare-rtl'),
+    component: 'ResizeHandle',
+    label: 'Resize details pane',
+    facts: facts({increaseKey: 'ArrowLeft'}),
+    rtl: true,
+  },
+  {
+    id: 'bare-collapsible',
+    summary:
+      'a bare ResizeHandle on a collapsible pane: Enter collapses and restores',
+    storyId: story('bare-collapsible'),
+    component: 'ResizeHandle',
+    label: 'Resize details pane',
+    facts: facts({collapsible: true}),
+  },
+  {
+    id: 'bare-small-min',
+    summary:
+      'a bare ResizeHandle on a collapsible pane whose minimum sits below the collapse threshold',
+    storyId: story('bare-small-min'),
+    component: 'ResizeHandle',
+    label: 'Resize details pane',
+    facts: facts({collapsible: true, valueMin: 20}),
+    collapsedSize: 50,
+  },
+  {
+    id: 'bare-start-collapsed',
+    summary:
+      'a bare ResizeHandle on a pane that starts collapsed: it announces the minimum as its value',
+    storyId: story('bare-start-collapsed'),
+    component: 'ResizeHandle',
+    label: 'Resize details pane',
+    // Collapsed, the handle announces the minimum (100) as its value.
+    facts: facts({collapsible: true, startsCollapsed: true, valueNow: 100}),
+    startsCollapsed: true,
+  },
+  {
+    id: 'bare-unbounded',
+    summary: 'a bare ResizeHandle whose region sets no maximum',
+    storyId: story('bare-unbounded'),
+    component: 'ResizeHandle',
+    label: 'Resize details pane',
+    facts: facts({valueMax: null}),
+    maxSize: null,
+  },
+  {
+    id: 'bare-unbounded-in-container',
+    summary:
+      'a bare ResizeHandle whose pixel-only region sets no maximum and passes a containerRef: the first useResizable example',
+    storyId: story('bare-unbounded-in-container'),
+    component: 'ResizeHandle',
+    label: 'Resize details pane',
+    facts: facts({valueMax: null}),
+    maxSize: null,
+    inContainer: true,
+  },
+  {
+    id: 'bare-snapped',
+    summary:
+      'a bare ResizeHandle whose region sets snap points [100, 200, 300, 400]: an arrow moves to the adjacent point',
+    storyId: story('bare-snapped'),
+    component: 'ResizeHandle',
+    label: 'Resize details pane',
+    // One arrow moves to the adjacent point: 100px apart here.
+    facts: facts({step: 100}),
+    snaps: [100, 200, 300, 400],
+  },
+  {
+    id: 'bare-documented-usage',
+    summary:
+      'the documented minimal usage — <ResizeHandle direction resizable={region.props} /> with no aria-controls passed',
+    storyId: story('bare-documented-usage'),
+    component: 'ResizeHandle',
+    label: 'Resize details pane',
+    facts: facts(),
+    withoutControls: true,
+  },
+  {
+    id: 'bare-disabled',
+    summary: 'a disabled ResizeHandle: out of the Tab order and unmoving',
+    storyId: story('bare-disabled'),
+    component: 'ResizeHandle',
+    label: 'Resize details pane',
+    facts: facts({operable: false}),
+    disabled: true,
+  },
+] as const satisfies ReadonlyArray<ResizeHandleBindingState>;
+
+export const RESIZE_HANDLE_EXCLUSIONS = [
+  {
+    id: 'sidenav-binding',
+    owner:
+      'SideNav.test.tsx until SideNav binds this contract in its own change',
+    reason:
+      'SideNav renders ResizeHandle in overlay position with its own collapse coupling and translated label, and hides the handle entirely while the nav is collapsed, so the collapse-and-restore row cannot run against it as written; SideNav binds separately with states shaped for that.',
+  },
+  {
+    id: 'pointer-drag-model',
+    owner: 'ResizeHandle.test.tsx pointer suites',
+    reason:
+      "Dragging (pointer capture on the grab zone, ignoring a pointer that does not own the drag, ending on pointercancel or lost capture), double-click collapse and restore, and the grab-zone geometry are pointer behavior outside the keyboard-and-semantics pattern; the component's own jsdom pointer suites prove them. ResizeHandle has no Escape cancel and no Chromium pointer suite.",
+  },
+  {
+    id: 'pane-cycling',
+    owner: 'component:Resizable AR1 (not adopted) and the composing page',
+    reason:
+      "F6 pane cycling is an optional part of the APG pattern that the record does not adopt; which panes exist and how focus cycles among them is the composing page's decision.",
+  },
+] as const;