@elabs-ai/components-data 4.0.0 → 4.2.0

package/src/data-table/data-table.test.tsx

@@ -1,4 +1,4 @@
-import { createRef } from "react";
+import { createRef, useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { act, render, screen, fireEvent } from "@testing-library/react";
 import type {
@@ -8,7 +8,8 @@ import type {
   Table as TanstackTable,
   VisibilityState,
 } from "@tanstack/react-table";
-import { DataTable } from "./data-table";
+import { LocaleProvider } from "@elabs-ai/components-ui";
+import { DataTable, createSelectionColumn } from "./data-table";
 import type { DataTableServerArgs } from "./data-table";
 
 // ─── Shared fixtures ─────────────────────────────────────────────────────────
@@ -542,7 +543,7 @@ describe("DataTable — virtualized a11y + composability", () => {
     );
     const scroll = container.querySelector(".overflow-auto");
     expect(scroll).toHaveAttribute("tabindex", "0");
-    expect(scroll?.className).toMatch(/focus-visible:ring-2/);
+    expect(scroll?.className).toMatch(/focus-ring/);
     // A focusable element must have an accessible name (WCAG 4.1.2).
     expect(scroll).toHaveAttribute("aria-label");
   });
@@ -591,11 +592,35 @@ describe("DataTable — zebra striping (default) vs lines", () => {
     const rows = container.querySelectorAll("tbody tr");
     expect(rows.length).toBe(3);
     // 2nd row (index 1) is striped; 1st/3rd are not — the stripe is the cue.
-    expect(rows[0]?.className).not.toContain("bg-foreground/5");
-    expect(rows[1]?.className).toContain("bg-foreground/5");
-    expect(rows[2]?.className).not.toContain("bg-foreground/5");
-    // No row carries a divider (a border on a striped region would be redundant).
-    rows.forEach((r) => expect(r.className).not.toContain("border-b"));
+    expect(rows[0]?.className).not.toContain("bg-table-stripe");
+    expect(rows[1]?.className).toContain("bg-table-stripe");
+    expect(rows[2]?.className).not.toContain("bg-table-stripe");
+    // No row carries a fixed divider (a border on a striped region would be
+    // redundant). The only row rule is the theme-gated width, `0px` by default,
+    // for a theme that turns the stripe off.
+    rows.forEach((r) => {
+      const classes = r.className.split(/\s+/);
+      expect(classes).not.toContain("border-b");
+      expect(classes).toContain("border-b-(length:--table-row-rule-width)");
+    });
+  });
+
+  it("draws column dividers only when asked", () => {
+    const plain = render(<DataTable columns={columns} data={data} />);
+    plain.container
+      .querySelectorAll("th, td")
+      .forEach((c) => expect(c.className.split(/\s+/)).not.toContain("border-e"));
+    plain.unmount();
+
+    const { container } = render(<DataTable columns={columns} data={data} columnDividers />);
+    const cells = container.querySelectorAll("thead th, tbody td");
+    expect(cells.length).toBeGreaterThan(0);
+    cells.forEach((c) => {
+      const classes = c.className.split(/\s+/);
+      expect(classes).toContain("border-e");
+      expect(classes).toContain("border-rule");
+      expect(classes).toContain("last:border-e-0");
+    });
   });
 
   it("draws border-strong dividers and no stripes when zebra is disabled", () => {
@@ -604,7 +629,7 @@ describe("DataTable — zebra striping (default) vs lines", () => {
     rows.forEach((r) => {
       expect(r.className).toContain("border-b");
       expect(r.className).toContain("border-border-strong");
-      expect(r.className).not.toContain("bg-foreground/5");
+      expect(r.className).not.toContain("bg-table-stripe");
     });
     // Last row drops its divider so it doesn't double with the container border.
     expect(rows[rows.length - 1]?.className).toContain("last:border-b-0");
@@ -819,7 +844,7 @@ describe("DataTable — #330 plain-branch scroll container is overflow-auto, not
     const scrollRegion = scrollRegionOf(container);
     expect(scrollRegion.className).toMatch(/overflow-auto/);
     expect(scrollRegion.className).not.toMatch(/overflow-hidden/);
-    expect(scrollRegion.className).toMatch(/focus-visible:ring-2/);
+    expect(scrollRegion.className).toMatch(/focus-ring-inset/);
 
     // The OUTER chrome div (border/rounded/bg-card) stays overflow-hidden (it
     // clips to the rounded corners) — only the SCROLL region changed.
@@ -865,6 +890,32 @@ describe("DataTable — #330 the scroll tab stop exists only while the region ov
     simulateScrollMetrics(scrollRegion, { scrollWidth: 800, clientWidth: 900, scrollLeft: 0 });
     expect(scrollRegion).not.toHaveAttribute("tabindex");
   });
+
+  it('gains role="group" once it overflows — a named, non-landmark stop', () => {
+    const { container } = render(<DataTable columns={columns} data={data} />);
+    const scrollRegion = scrollRegionOf(container);
+    // `aria-label` on a plain `<div>` (role `generic`) is not guaranteed to
+    // produce an accessible name at all — the stop needs a naming-capable
+    // role, and `group` (not the `region` landmark, which collides under axe
+    // `landmark-unique` across tables) is it.
+    expect(scrollRegion).not.toHaveAttribute("role");
+    simulateScrollMetrics(scrollRegion, { scrollWidth: 800, clientWidth: 300, scrollLeft: 0 });
+    expect(scrollRegion).toHaveAttribute("role", "group");
+  });
+});
+
+describe("DataTable — virtualized scroll region has a naming-capable role", () => {
+  it('the always-focusable virtualized scroll container carries role="group"', () => {
+    const { container } = render(
+      <DataTable columns={columns} data={data} enableRowVirtualization />,
+    );
+    const scroll = container.querySelector(".overflow-auto");
+    expect(scroll).toHaveAttribute("tabindex", "0");
+    expect(scroll).toHaveAttribute("aria-label");
+    // Same reasoning as the non-virtualized branch above: `aria-label` alone
+    // on a role-less `<div>` is not guaranteed to compute an accessible name.
+    expect(scroll).toHaveAttribute("role", "group");
+  });
 });
 
 describe("DataTable — #330 horizontal-scroll edge-fade affordance", () => {
@@ -1112,15 +1163,37 @@ describe("DataTable — #337 onRowClick + rowClassName", () => {
     expect(screen.getByRole("button", { name: "Open Alpha details" })).toBeInTheDocument();
   });
 
-  it("falls back to the localized generic name when the first cell has no primitive value", () => {
+  it("skips a leading display column with no accessor and names the button from the first DATA column (#11 I6)", () => {
     const nonPrimitiveFirstColumn: ColumnDef<Row>[] = [
       { id: "avatar", header: "Avatar", cell: () => <span aria-hidden="true">◆</span> },
       { accessorKey: "name", header: "Name" },
     ];
     render(<DataTable columns={nonPrimitiveFirstColumn} data={data} onRowClick={vi.fn()} />);
+    // The leading column has no `accessorKey`/`accessorFn`, so `rowActionName`
+    // does not stop at it and falls through to `name` — a real per-row name,
+    // not the generic fallback every row would otherwise share.
+    expect(screen.getByRole("button", { name: "Alpha" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Beta" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Gamma" })).toBeInTheDocument();
+  });
+
+  it("falls back to the localized generic name when NO visible column has a data accessor", () => {
+    const allDisplayColumns: ColumnDef<Row>[] = [
+      { id: "avatar", header: "Avatar", cell: () => <span aria-hidden="true">◆</span> },
+      { id: "spacer", header: "", cell: () => null },
+    ];
+    render(<DataTable columns={allDisplayColumns} data={data} onRowClick={vi.fn()} />);
     expect(screen.getAllByRole("button", { name: "Activate row" })).toHaveLength(data.length);
   });
 
+  it("#11 I6: a leading selection column does not degrade the row-activation name to the generic fallback", () => {
+    const withSelection: ColumnDef<Row>[] = [createSelectionColumn<Row>(), ...columns];
+    render(<DataTable columns={withSelection} data={data} onRowClick={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "Alpha" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Beta" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Gamma" })).toBeInTheDocument();
+  });
+
   it("is keyboard-operable: activating the row's button fires onRowClick exactly once", () => {
     const onRowClick = vi.fn();
     render(<DataTable columns={columns} data={data} onRowClick={onRowClick} />);
@@ -1154,7 +1227,7 @@ describe("DataTable — #337 onRowClick + rowClassName", () => {
     const betaRow = screen.getByText("Beta").closest("tr")!;
     expect(betaRow).toHaveClass("is-highlighted");
     // Beta is row index 1 — the zebra stripe class must still be present.
-    expect(betaRow.className).toContain("bg-foreground/5");
+    expect(betaRow.className).toContain("bg-table-stripe");
   });
 
   it("gives a clickable row a pointer cursor and a focus ring driven by its activation button", () => {
@@ -1163,10 +1236,29 @@ describe("DataTable — #337 onRowClick + rowClassName", () => {
     expect(row.className).toMatch(/cursor-pointer/);
     // Focus lives on the sr-only button; the visible indicator paints on the
     // ROW via `:has()`, so the user sees which row they are about to activate.
+    // …and it is the SHARED compound indicator (#67), not a hand-rolled ring:
+    // `focus-ring-static-inset` is the static-trigger, inset-geometry flavour,
+    // because the focused element is the sr-only button and an outside ring
+    // would be clipped by the scroll viewport.
     expect(row.className).toMatch(
-      /has-\[\[data-slot=data-table-row-action\]:focus-visible\]:outline-2/,
+      /has-\[\[data-slot=data-table-row-action\]:focus-visible\]:focus-ring-static-inset/,
     );
   });
+
+  it("suppresses the proxy button's OWN native focus ring (#311) — the row paints the only indicator", () => {
+    const { container } = render(<DataTable columns={columns} data={data} onRowClick={vi.fn()} />);
+    const row = firstBodyRow(container);
+    const proxy = row.querySelector<HTMLElement>('[data-slot="data-table-row-action"]')!;
+    proxy.focus();
+    expect(document.activeElement).toBe(proxy);
+    // sr-only removes the proxy from the visual layout but NOT the platform's
+    // own outline painting — that must be suppressed explicitly, or it leaks
+    // as a stray dot next to the row's deliberate compound indicator above.
+    // (This package's vitest config sets `css: false`, so `getComputedStyle`
+    // never resolves Tailwind here — the real-browser assertion lives in the
+    // `ClickableRows` story's play function, which DOES run under real CSS.)
+    expect(proxy.className).toMatch(/focus-visible:outline-none/);
+  });
 });
 
 // ─── #333: column pinning ────────────────────────────────────────────────────
@@ -1351,10 +1443,10 @@ describe("DataTable — #333 pinned cells compose with the row wash, not overpai
     expect(odd!.className).toContain("bg-card");
     // Only the striped row re-applies the wash, on the decorative ::before layer
     // — this is the bug #333 reports: a single opaque fill erased the stripe.
-    expect(odd!.className).toContain("before:bg-foreground/5");
-    expect(even!.className).not.toContain("before:bg-foreground/5");
+    expect(odd!.className).toContain("before:bg-table-stripe");
+    expect(even!.className).not.toContain("before:bg-table-stripe");
     // Hover/selected are re-applied from the row group in both cases.
-    expect(even!.className).toContain("group-hover/row:before:bg-foreground/10");
+    expect(even!.className).toContain("group-hover/row:before:bg-table-row-hover");
     expect(container.querySelector("tbody tr")!.className).toContain("group/row");
   });
 
@@ -1369,7 +1461,7 @@ describe("DataTable — #333 pinned cells compose with the row wash, not overpai
     );
     for (const cell of pinned(container, "left")) {
       expect(cell.className).toContain("bg-card");
-      expect(cell.className).not.toContain("before:bg-foreground/5");
+      expect(cell.className).not.toContain("before:bg-table-stripe");
     }
     // The row divider is still the separation cue and is untouched by pinning.
     expect(container.querySelector("tbody tr")!.className).toContain("border-border-strong");
@@ -1511,3 +1603,1325 @@ describe("DataTable — #333 dev warning for a pinned column with no explicit si
     }
   });
 });
+
+// ─── #12: column resizing ─────────────────────────────────────────────────────
+//
+// TanStack's resize handler (`ColumnSizing.ts`) computes, for a leaf (non-grouped)
+// header, `newSize = round((startSize + startSize * deltaOffset / startSize) * 100) / 100`,
+// which for a single leaf column simplifies to `startSize + deltaOffset` where
+// `deltaOffset = moveClientX - mouseDownClientX`. Starting the drag at `clientX: 0`
+// makes the move's `clientX` equal to `deltaOffset` directly, which is why these
+// tests drag from `0`.
+
+/** Columns wide enough to resize meaningfully; both declare an explicit `size`. */
+const resizableColumns: ColumnDef<Row>[] = [
+  { accessorKey: "name", header: "Name", size: 150 },
+  { accessorKey: "value", header: "Value", size: 100 },
+];
+
+describe("DataTable — #12 column resizing", () => {
+  it("is a no-op (no resize handle, no inline width) when enableColumnResizing is unset", () => {
+    const { container } = render(<DataTable columns={resizableColumns} data={data} />);
+    expect(container.querySelectorAll('[data-slot="data-table-resize-handle"]')).toHaveLength(0);
+    const th = container.querySelector("thead th")!;
+    expect(th.getAttribute("style")).toBeNull();
+  });
+
+  it("resizes a column via pointer drag (uncontrolled)", () => {
+    const { container } = render(
+      <DataTable columns={resizableColumns} data={data} enableColumnResizing />,
+    );
+    const th = container.querySelector<HTMLElement>("thead th")!;
+    expect(th.style.width).toBe("150px");
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    fireEvent.mouseDown(handle, { clientX: 0 });
+    fireEvent.mouseMove(document, { clientX: 40 });
+    fireEvent.mouseUp(document, { clientX: 40 });
+    expect(th.style.width).toBe("190px");
+    // The `<td>`s in every row follow the same resolved `getSize()`.
+    for (const td of container.querySelectorAll("tbody tr td:first-child")) {
+      expect((td as HTMLElement).style.width).toBe("190px");
+    }
+  });
+
+  it("resizes via the keyboard (ArrowRight/ArrowLeft) and keeps aria-valuenow in sync", () => {
+    const { container } = render(
+      <DataTable columns={resizableColumns} data={data} enableColumnResizing />,
+    );
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    expect(handle).toHaveAttribute("aria-valuenow", "150");
+    fireEvent.keyDown(handle, { key: "ArrowRight" });
+    expect(handle).toHaveAttribute("aria-valuenow", "160");
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("160px");
+    fireEvent.keyDown(handle, { key: "ArrowLeft" });
+    fireEvent.keyDown(handle, { key: "ArrowLeft" });
+    expect(handle).toHaveAttribute("aria-valuenow", "140");
+  });
+
+  // #51 — the resize handle's accessible VALUE lacked a unit: a screen reader
+  // announced a bare number ("150"), which reads as a dimensionless ordinal
+  // rather than a size. `aria-valuetext` supplies the unit while
+  // `aria-valuenow` stays the plain numeric value TanStack/AT expect.
+  it("exposes aria-valuetext with an explicit unit, kept in sync with aria-valuenow across a keyboard resize", () => {
+    const { container } = render(
+      <DataTable columns={resizableColumns} data={data} enableColumnResizing />,
+    );
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    expect(handle).toHaveAttribute("aria-valuenow", "150");
+    expect(handle).toHaveAttribute("aria-valuetext", "150 pixels");
+    fireEvent.keyDown(handle, { key: "ArrowRight" });
+    expect(handle).toHaveAttribute("aria-valuenow", "160");
+    expect(handle).toHaveAttribute("aria-valuetext", "160 pixels");
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("160px");
+  });
+
+  // PR #81 review, "Format the announced resize value for the active
+  // locale": the announced value must go through `formatNumber` (so a
+  // non-Latin-digit locale doesn't hear raw JS-number Latin digits) and pass
+  // the numeric `count` a `PluralMessage` override needs to select its own
+  // plural category, not just interpolate `{size}` into a fixed "other" form.
+  it("formats the announced resize value for the active locale (non-Latin digits) and reaches PluralMessage's singular form", () => {
+    const singularSizeColumns: ColumnDef<Row>[] = [
+      { accessorKey: "name", header: "Name", size: 1, minSize: 1 },
+      { accessorKey: "value", header: "Value", size: 100 },
+    ];
+    render(
+      <LocaleProvider
+        locale="ar-EG"
+        messages={{
+          "data.table.resizeColumnValue": { one: "{size} بكسل واحد", other: "{size} بكسل" },
+        }}
+      >
+        <DataTable columns={singularSizeColumns} data={data} enableColumnResizing />
+      </LocaleProvider>,
+    );
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    // aria-valuenow stays a plain numeric value for AT/TanStack regardless of
+    // locale — only aria-valuetext is localized.
+    expect(handle).toHaveAttribute("aria-valuenow", "1");
+    // ar-EG renders "1" as the Arabic-Indic digit "١", proving the value went
+    // through `formatNumber` rather than a raw `String(1)` interpolation —
+    // and the "one" plural form fired, proving `count` reached the message.
+    expect(handle).toHaveAttribute("aria-valuetext", "١ بكسل واحد");
+  });
+
+  it("is a controlled/uncontrolled slice: a keyboard resize notifies the caller but the DOM only moves once the prop does", () => {
+    const onColumnSizingChange = vi.fn();
+    const { container, rerender } = render(
+      <DataTable
+        columns={resizableColumns}
+        data={data}
+        enableColumnResizing
+        columnSizing={{ name: 150 }}
+        onColumnSizingChange={onColumnSizingChange}
+      />,
+    );
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    fireEvent.keyDown(handle, { key: "ArrowRight" });
+    expect(onColumnSizingChange).toHaveBeenCalledTimes(1);
+    // Controlled: the prop still says 150, so the DOM must not have moved.
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("150px");
+    rerender(
+      <DataTable
+        columns={resizableColumns}
+        data={data}
+        enableColumnResizing
+        columnSizing={{ name: 220 }}
+        onColumnSizingChange={onColumnSizingChange}
+      />,
+    );
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("220px");
+  });
+
+  // #51 — a resize handle can only be dragged wider/narrower; there was no way
+  // to snap a column back to its authored width short of reloading the table.
+  // Double-click is the platform convention (spreadsheets, file managers) for
+  // "reset this to its intrinsic size".
+  it("double-clicking the handle resets a resized column back to its declared size", () => {
+    const { container } = render(
+      <DataTable columns={resizableColumns} data={data} enableColumnResizing />,
+    );
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    fireEvent.keyDown(handle, { key: "ArrowRight" });
+    fireEvent.keyDown(handle, { key: "ArrowRight" });
+    expect(handle).toHaveAttribute("aria-valuenow", "170");
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("170px");
+
+    fireEvent.doubleClick(handle);
+    expect(handle).toHaveAttribute("aria-valuenow", "150");
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("150px");
+  });
+
+  it("double-clicking the handle resets an undeclared-size column to TanStack's own default (150)", () => {
+    const undeclaredSizeColumns: ColumnDef<Row>[] = [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "value", header: "Value" },
+    ];
+    const { container } = render(
+      <DataTable columns={undeclaredSizeColumns} data={data} enableColumnResizing />,
+    );
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    fireEvent.keyDown(handle, { key: "ArrowRight" });
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("160px");
+
+    fireEvent.doubleClick(handle);
+    expect(handle).toHaveAttribute("aria-valuenow", "150");
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("150px");
+  });
+
+  it("double-click reset goes through table.setColumnSizing: a controlled caller observes it via onColumnSizingChange and the DOM only moves once the prop does", () => {
+    const onColumnSizingChange = vi.fn();
+    const { container, rerender } = render(
+      <DataTable
+        columns={resizableColumns}
+        data={data}
+        enableColumnResizing
+        columnSizing={{ name: 220 }}
+        onColumnSizingChange={onColumnSizingChange}
+      />,
+    );
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("220px");
+
+    fireEvent.doubleClick(handle);
+    expect(onColumnSizingChange).toHaveBeenCalledTimes(1);
+    // Controlled: the prop still says 220, so the DOM must not have moved yet.
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("220px");
+
+    rerender(
+      <DataTable
+        columns={resizableColumns}
+        data={data}
+        enableColumnResizing
+        columnSizing={{ name: 150 }}
+        onColumnSizingChange={onColumnSizingChange}
+      />,
+    );
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("150px");
+  });
+
+  // PR #81 review, "Remove the sizing override when resetting a column": a
+  // double-click reset must actually RESET (remove the override), not pin the
+  // column to whatever its declared size happened to be at reset time — else
+  // the column stops tracking a later authored `size` change, unlike a column
+  // that was never resized at all.
+  it("double-click reset does not pin the column — it still tracks a LATER change to the column's declared size", () => {
+    const { container, rerender } = render(
+      <DataTable columns={resizableColumns} data={data} enableColumnResizing />,
+    );
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    fireEvent.keyDown(handle, { key: "ArrowRight" });
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("160px");
+
+    fireEvent.doubleClick(handle);
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("150px");
+
+    // The `columns` prop now declares a DIFFERENT authored size for "name" —
+    // e.g. a caller switching table configurations. A column that was never
+    // resized would pick this up for free; the double-click-reset column must
+    // too, because the reset should have removed its override rather than
+    // freezing it at 150.
+    const resizedDeclaredColumns: ColumnDef<Row>[] = [
+      { accessorKey: "name", header: "Name", size: 300 },
+      { accessorKey: "value", header: "Value", size: 100 },
+    ];
+    rerender(<DataTable columns={resizedDeclaredColumns} data={data} enableColumnResizing />);
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("300px");
+  });
+
+  it("seeds an uncontrolled slice once from initialView.columnSizing", () => {
+    const { container } = render(
+      <DataTable
+        columns={resizableColumns}
+        data={data}
+        enableColumnResizing
+        initialView={{ columnSizing: { name: 300 } }}
+      />,
+    );
+    expect(container.querySelector<HTMLElement>("thead th")!.style.width).toBe("300px");
+  });
+
+  it("composes with column pinning — a pinned column's sticky offset already tracks getSize()", () => {
+    let table: TanstackTable<Row> | undefined;
+    const { container } = render(
+      <DataTable
+        columns={pinnableColumns}
+        data={data}
+        enableColumnResizing
+        columnPinning={{ left: ["name", "value"] }}
+        toolbar={(t) => {
+          table = t;
+          return null;
+        }}
+      />,
+    );
+    const pinnedHeaders = Array.from(
+      container.querySelectorAll<HTMLElement>("th[data-pinned='left']"),
+    );
+    // Before resizing: `value` (the second pinned column) sits at the declared
+    // size of `name` (150) per the #333 offset arithmetic.
+    expect(pinnedHeaders[1]!.style.left).toBe("150px");
+    act(() => table!.setColumnSizing((old) => ({ ...old, name: 210 })));
+    // After resizing `name` to 210, `value`'s sticky offset follows it —
+    // proving pinning already composes with resizing via `column.getSize()`,
+    // with no changes needed on the pinning side.
+    expect(pinnedHeaders[1]!.style.left).toBe("210px");
+  });
+
+  // #51 — the handle's hit box was `w-2` (8px), well under any recognized
+  // touch-target minimum, and it SHRANK further under `data-density="compact"`
+  // because `w-2` compiles to `calc(var(--spacing) * 2)` and density rescales
+  // `--spacing`. `w-[min(24px,50%)]` is a literal pixel value clamped to half
+  // the header cell, so it is density-independent by construction. jsdom can
+  // only assert the class is present — the actual rendered geometry (and the
+  // compact-density case specifically) is measured in a real browser by the
+  // `WithColumnResizingCompactDensity` story's play function.
+  it("gives the resize handle a density-independent, wider-than-8px hit box class", () => {
+    const { container } = render(
+      <DataTable columns={resizableColumns} data={data} enableColumnResizing />,
+    );
+    const handle = container.querySelector('[data-slot="data-table-resize-handle"]')!;
+    // Split into literal Tailwind class tokens so a variant-prefixed sibling
+    // (`hover:after:w-2` / `focus-visible:after:w-2`, the DRAWN seam width —
+    // deliberately unchanged) can't masquerade as the base hit-box class.
+    const classes = handle.className.split(/\s+/);
+    expect(classes).toContain("w-[min(24px,50%)]");
+    expect(classes).not.toContain("w-2");
+  });
+});
+
+// ─── #82 gap 2: resize handle vs the header's own controls ───────────────────
+// The resize handle's 24px hit box (`w-[min(24px,50%)]`, absolutely positioned
+// at the header cell's trailing edge) sits over part of the SAME header cell a
+// sortable column's toggle button occupies. jsdom dispatches `fireEvent.click`
+// straight to the target node with no real hit-testing, so this test can only
+// prove the button still RESPONDS to a click addressed to it — it cannot prove
+// a real screen click at the button's own on-screen coordinates lands on the
+// button rather than the overlapping handle. That geometric claim is covered
+// by the `WithColumnResizingSortToggleHitTest` story's play function (real
+// browser, coordinate-targeted click) alongside this regression lock.
+describe("DataTable — #82 resize handle vs header's own controls", () => {
+  it("the sort-toggle button stays clickable when the column is ALSO resizable (24px handle present)", () => {
+    const onSortingChange = vi.fn();
+    render(
+      <DataTable
+        columns={resizableColumns}
+        data={data}
+        enableColumnResizing
+        sorting={[]}
+        onSortingChange={onSortingChange}
+      />,
+    );
+    // Column is both resizable (prop) and sortable (resizableColumns sets no
+    // `enableSorting: false`, and the table applies no table-wide override —
+    // TanStack's own default is `true`), so the handle and the sort button
+    // are both present on the same header cell.
+    expect(screen.getByRole("separator", { name: /Resize column, Name/i })).toBeInTheDocument();
+    const sortButton = screen.getByRole("button", { name: /Sort by Name/i });
+    fireEvent.click(sortButton);
+    expect(onSortingChange).toHaveBeenCalledTimes(1);
+  });
+});
+
+// #12 code-review finding (P1): the resize handle sits at the column's logical
+// `end` edge (`end-0`), which renders on the physical LEFT under `dir="rtl"` —
+// but TanStack's own pointer-drag math and the hand-rolled keyboard path both
+// default to LTR unless told the active direction, so dragging/pressing an
+// arrow moved the width opposite the visible boundary. Fixed by threading
+// `useLocale().dir` into `columnResizeDirection` (pointer path) and reversing
+// the keyboard delta.
+describe('DataTable — #12 review P1: column resizing under dir="rtl"', () => {
+  it("reverses the keyboard resize delta — ArrowRight shrinks, ArrowLeft grows", () => {
+    render(
+      <LocaleProvider dir="rtl">
+        <DataTable columns={resizableColumns} data={data} enableColumnResizing />
+      </LocaleProvider>,
+    );
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    expect(handle).toHaveAttribute("aria-valuenow", "150");
+
+    fireEvent.keyDown(handle, { key: "ArrowRight" });
+    expect(handle).toHaveAttribute("aria-valuenow", "140");
+
+    fireEvent.keyDown(handle, { key: "ArrowLeft" });
+    fireEvent.keyDown(handle, { key: "ArrowLeft" });
+    expect(handle).toHaveAttribute("aria-valuenow", "160");
+  });
+
+  it("reverses the pointer-drag resize direction (columnResizeDirection wired to useReactTable)", () => {
+    const { container } = render(
+      <LocaleProvider dir="rtl">
+        <DataTable columns={resizableColumns} data={data} enableColumnResizing />
+      </LocaleProvider>,
+    );
+    const th = container.querySelector<HTMLElement>("thead th")!;
+    expect(th.style.width).toBe("150px");
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    // Same drag as the LTR pointer-drag test above (0 → 40, which GROWS the
+    // column to 190px there) — under RTL it must SHRINK instead.
+    fireEvent.mouseDown(handle, { clientX: 0 });
+    fireEvent.mouseMove(document, { clientX: 40 });
+    fireEvent.mouseUp(document, { clientX: 40 });
+    expect(th.style.width).toBe("110px");
+  });
+
+  it("keyboard and pointer resizing stay in agreement under RTL (never diverge)", () => {
+    const { container } = render(
+      <LocaleProvider dir="rtl">
+        <DataTable columns={resizableColumns} data={data} enableColumnResizing />
+      </LocaleProvider>,
+    );
+    const th = container.querySelector<HTMLElement>("thead th")!;
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    fireEvent.keyDown(handle, { key: "ArrowLeft" }); // grows under RTL
+    expect(th.style.width).toBe("160px");
+    fireEvent.mouseDown(handle, { clientX: 0 });
+    fireEvent.mouseMove(document, { clientX: -20 }); // physical-left drag also grows
+    fireEvent.mouseUp(document, { clientX: -20 });
+    expect(th.style.width).toBe("180px");
+  });
+});
+
+// #12 code-review finding (P2): a resizable column with no explicit `maxSize`
+// omitted `aria-valuemax` entirely, so WAI-ARIA's implicit default of 100
+// applied — a column at its ordinary 150px starting width announced as
+// "150 of 100", out of its own stated range. Fixed by always supplying a
+// numeric ceiling that contains the live value.
+describe("DataTable — #12 review P2: resize separator aria-valuemax stays in range", () => {
+  it("supplies an explicit aria-valuemax containing the current size when the column declares no maxSize", () => {
+    render(<DataTable columns={resizableColumns} data={data} enableColumnResizing />);
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    expect(handle).toHaveAttribute("aria-valuenow", "150");
+    const max = Number(handle.getAttribute("aria-valuemax"));
+    expect(Number.isFinite(max)).toBe(true);
+    expect(max).toBeGreaterThanOrEqual(150);
+  });
+
+  it("keeps raising the announced ceiling as the column grows past it", () => {
+    const wideColumns: ColumnDef<Row>[] = [
+      { accessorKey: "name", header: "Name", size: 2500 },
+      { accessorKey: "value", header: "Value", size: 100 },
+    ];
+    render(<DataTable columns={wideColumns} data={data} enableColumnResizing />);
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    expect(handle).toHaveAttribute("aria-valuenow", "2500");
+    const max = Number(handle.getAttribute("aria-valuemax"));
+    expect(max).toBeGreaterThanOrEqual(2500);
+  });
+
+  it("still honors an explicit columnDef.maxSize unchanged", () => {
+    const cappedColumns: ColumnDef<Row>[] = [
+      { accessorKey: "name", header: "Name", size: 150, maxSize: 300 },
+      { accessorKey: "value", header: "Value", size: 100 },
+    ];
+    render(<DataTable columns={cappedColumns} data={data} enableColumnResizing />);
+    const handle = screen.getByRole("separator", { name: /Resize column, Name/i });
+    expect(handle).toHaveAttribute("aria-valuemax", "300");
+  });
+});
+
+// ─── #11: row selection ───────────────────────────────────────────────────────
+
+const selectableColumns: ColumnDef<Row>[] = [createSelectionColumn<Row>(), ...columns];
+
+function selectAllCheckbox(container: HTMLElement): HTMLElement {
+  const el = container.querySelector('thead [data-slot="data-table-select-all"]');
+  if (!el) throw new Error("select-all checkbox not found");
+  return el as HTMLElement;
+}
+
+function rowCheckboxes(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll('tbody [data-slot="data-table-select-cell"]'));
+}
+
+describe("DataTable — #11 row selection: uncontrolled", () => {
+  it("select-all toggles every row, and the header itself reports checked", () => {
+    const { container } = render(<DataTable columns={selectableColumns} data={data} />);
+    fireEvent.click(selectAllCheckbox(container));
+    for (const tr of container.querySelectorAll("tbody tr")) {
+      expect(tr).toHaveAttribute("data-state", "selected");
+    }
+    expect(selectAllCheckbox(container)).toHaveAttribute("data-state", "checked");
+
+    // Toggling again clears every row.
+    fireEvent.click(selectAllCheckbox(container));
+    for (const tr of container.querySelectorAll("tbody tr")) {
+      expect(tr).not.toHaveAttribute("data-state", "selected");
+    }
+  });
+
+  it("a per-row toggle updates only that row", () => {
+    const { container } = render(<DataTable columns={selectableColumns} data={data} />);
+    fireEvent.click(rowCheckboxes(container)[1]!); // Beta
+    const trs = Array.from(container.querySelectorAll("tbody tr"));
+    expect(trs[0]).not.toHaveAttribute("data-state", "selected");
+    expect(trs[1]).toHaveAttribute("data-state", "selected");
+    expect(trs[2]).not.toHaveAttribute("data-state", "selected");
+  });
+});
+
+describe("DataTable — #11 row selection: controlled", () => {
+  it("never mutates its own state when controlled — it re-renders from the prop", () => {
+    const onRowSelectionChange = vi.fn();
+    const { container, rerender } = render(
+      <DataTable
+        columns={selectableColumns}
+        data={data}
+        rowSelection={{}}
+        onRowSelectionChange={onRowSelectionChange}
+      />,
+    );
+    fireEvent.click(rowCheckboxes(container)[0]!);
+    expect(onRowSelectionChange).toHaveBeenCalledTimes(1);
+    // Controlled: the prop hasn't moved, so the DOM must not have either.
+    expect(container.querySelectorAll('tbody tr[data-state="selected"]')).toHaveLength(0);
+
+    rerender(
+      <DataTable
+        columns={selectableColumns}
+        data={data}
+        rowSelection={{ "0": true }}
+        onRowSelectionChange={onRowSelectionChange}
+      />,
+    );
+    const trs = Array.from(container.querySelectorAll("tbody tr"));
+    expect(trs[0]).toHaveAttribute("data-state", "selected");
+    expect(trs[1]).not.toHaveAttribute("data-state", "selected");
+  });
+});
+
+describe("DataTable — #11 select-all / indeterminate", () => {
+  it("reports indeterminate for a partial selection, checked once every row is selected", () => {
+    const { container } = render(<DataTable columns={selectableColumns} data={data} />);
+    const header = selectAllCheckbox(container);
+    expect(header).toHaveAttribute("data-state", "unchecked");
+    expect(header).toHaveAttribute("aria-checked", "false");
+
+    fireEvent.click(rowCheckboxes(container)[0]!);
+    expect(header).toHaveAttribute("data-state", "indeterminate");
+    expect(header).toHaveAttribute("aria-checked", "mixed");
+
+    fireEvent.click(rowCheckboxes(container)[1]!);
+    fireEvent.click(rowCheckboxes(container)[2]!);
+    expect(header).toHaveAttribute("data-state", "checked");
+    expect(header).toHaveAttribute("aria-checked", "true");
+  });
+});
+
+describe("DataTable — #11 row selection is a controlled/uncontrolled slice", () => {
+  it("seeds an uncontrolled slice once from initialView.rowSelection", () => {
+    const { container } = render(
+      <DataTable
+        columns={selectableColumns}
+        data={data}
+        initialView={{ rowSelection: { "1": true } }}
+      />,
+    );
+    const trs = Array.from(container.querySelectorAll("tbody tr"));
+    expect(trs[0]).not.toHaveAttribute("data-state", "selected");
+    expect(trs[1]).toHaveAttribute("data-state", "selected");
+    expect(trs[2]).not.toHaveAttribute("data-state", "selected");
+  });
+
+  it("keeps selection out of the server-change payload — it is layout, not a query", () => {
+    const onServerChange = vi.fn();
+    const { container } = render(
+      <DataTable
+        columns={selectableColumns}
+        data={data}
+        manualSorting
+        manualFiltering
+        manualPagination
+        rowCount={3}
+        onServerChange={onServerChange}
+      />,
+    );
+    fireEvent.click(rowCheckboxes(container)[0]!);
+    expect(onServerChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("DataTable — #11 a client-side sort never disturbs selection identity (with or without getRowId)", () => {
+  // TanStack's default row id is assigned ONCE per row object when the core
+  // row model is built, then reused by reference through the sorted row
+  // model — sorting reorders which `Row` objects appear where, it never
+  // reassigns their ids. So this holds identically with `getRowId` supplied
+  // or omitted; it is NOT evidence that `getRowId` did anything (#11 I1 — the
+  // discriminating case is the `data` object-replacement describe below).
+  function expectSortPreservesSelection(getRowId: ((row: Row) => string) | undefined) {
+    const { container } = render(
+      <DataTable columns={selectableColumns} data={data} getRowId={getRowId} />,
+    );
+    // Initial order: Alpha, Beta, Gamma — select Beta (index 1).
+    fireEvent.click(rowCheckboxes(container)[1]!);
+    expect(Array.from(container.querySelectorAll("tbody tr"))[1]).toHaveTextContent("Beta");
+    expect(Array.from(container.querySelectorAll("tbody tr"))[1]).toHaveAttribute(
+      "data-state",
+      "selected",
+    );
+
+    // Sort by Value ascending: Beta(1), Gamma(2), Alpha(3) — Beta moves to index 0.
+    fireEvent.click(screen.getByRole("button", { name: "Sort by Value, not sorted" }));
+    const trs = Array.from(container.querySelectorAll("tbody tr"));
+    const betaRow = trs.find((tr) => tr.textContent?.includes("Beta"));
+    expect(betaRow).toHaveAttribute("data-state", "selected");
+    for (const tr of trs) {
+      if (tr !== betaRow) expect(tr).not.toHaveAttribute("data-state", "selected");
+    }
+  }
+
+  it("keeps selection attached to the right row across a sort, WITH getRowId", () => {
+    expectSortPreservesSelection((row: Row) => row.name);
+  });
+
+  it("keeps selection attached to the right row across a sort, WITHOUT getRowId too", () => {
+    expectSortPreservesSelection(undefined);
+  });
+});
+
+describe("DataTable — #11 getRowId keeps selection keyed to a stable id, not row index", () => {
+  it("WITHOUT getRowId, a data prop replacement re-keys selection by index, not identity (negative control)", () => {
+    const { container, rerender } = render(<DataTable columns={selectableColumns} data={data} />);
+    fireEvent.click(rowCheckboxes(container)[1]!); // select Beta (index 1)
+    expect(Array.from(container.querySelectorAll("tbody tr"))[1]).toHaveAttribute(
+      "data-state",
+      "selected",
+    );
+
+    // Same new-object-reference reorder as the positive case below, but with
+    // no `getRowId` — the default index-based id means the "selected" id (1)
+    // now belongs to whatever row the new array put at index 1: Alpha, not
+    // Beta. This is the exact footgun `getRowId` exists to prevent.
+    const reordered: Row[] = [
+      { name: "Gamma", value: 2 },
+      { name: "Alpha", value: 3 },
+      { name: "Beta", value: 1 },
+    ];
+    rerender(<DataTable columns={selectableColumns} data={reordered} />);
+    const trs = Array.from(container.querySelectorAll("tbody tr"));
+    const alphaRow = trs.find((tr) => tr.textContent?.includes("Alpha"));
+    const betaRow = trs.find((tr) => tr.textContent?.includes("Beta"));
+    expect(alphaRow).toHaveAttribute("data-state", "selected");
+    expect(betaRow).not.toHaveAttribute("data-state", "selected");
+  });
+
+  it("survives a data prop replacement with new object references, same ids", () => {
+    const { container, rerender } = render(
+      <DataTable columns={selectableColumns} data={data} getRowId={(row: Row) => row.name} />,
+    );
+    fireEvent.click(rowCheckboxes(container)[1]!); // select Beta
+    expect(Array.from(container.querySelectorAll("tbody tr"))[1]).toHaveAttribute(
+      "data-state",
+      "selected",
+    );
+
+    // A brand-new `data` array — new object references, reordered — the shape a
+    // re-fetch would hand back. Without a stable id, TanStack would key
+    // selection by array index and "select" whatever object now sits at index 1
+    // (this fixture's whole point: Gamma) instead of Beta.
+    const reordered: Row[] = [
+      { name: "Gamma", value: 2 },
+      { name: "Alpha", value: 3 },
+      { name: "Beta", value: 1 },
+    ];
+    rerender(
+      <DataTable columns={selectableColumns} data={reordered} getRowId={(row: Row) => row.name} />,
+    );
+    const trs = Array.from(container.querySelectorAll("tbody tr"));
+    const betaRow = trs.find((tr) => tr.textContent?.includes("Beta"));
+    expect(betaRow).toHaveAttribute("data-state", "selected");
+    for (const tr of trs) {
+      if (tr !== betaRow) expect(tr).not.toHaveAttribute("data-state", "selected");
+    }
+  });
+});
+
+describe("DataTable — #11 selection survives row virtualization windowing", () => {
+  it("keeps a selected row in the selection MODEL even when its <tr> isn't mounted", () => {
+    const manyRows: Row[] = Array.from({ length: 200 }, (_, i) => ({ name: `Row ${i}`, value: i }));
+    let table: TanstackTable<Row> | undefined;
+    const { container } = render(
+      <DataTable
+        columns={selectableColumns}
+        data={manyRows}
+        getRowId={(row) => row.name}
+        enableRowVirtualization
+        estimateRowHeight={32}
+        maxBodyHeight="200px"
+        toolbar={(t) => {
+          table = t;
+          return null;
+        }}
+      />,
+    );
+    // jsdom reports zero client height, so only a handful of rows mount near
+    // the top — "Row 150" is well outside that window.
+    expect(container.querySelector('tr[data-index="150"]')).toBeNull();
+
+    act(() => table!.getRow("Row 150")!.toggleSelected(true));
+
+    expect(table!.getSelectedRowModel().rows.map((r) => r.id)).toEqual(["Row 150"]);
+  });
+});
+
+describe("DataTable — #11 C1: enableMultiRowSelection={false} suppresses the select-all header", () => {
+  it("renders no select-all checkbox in single-select mode", () => {
+    const { container } = render(
+      <DataTable columns={selectableColumns} data={data} enableMultiRowSelection={false} />,
+    );
+    expect(container.querySelector('thead [data-slot="data-table-select-all"]')).toBeNull();
+    // The per-row checkboxes are unaffected.
+    expect(rowCheckboxes(container)).toHaveLength(data.length);
+  });
+
+  it("selecting a second row deselects the first (single-select semantics)", () => {
+    const { container } = render(
+      <DataTable columns={selectableColumns} data={data} enableMultiRowSelection={false} />,
+    );
+    fireEvent.click(rowCheckboxes(container)[0]!); // Alpha
+    expect(Array.from(container.querySelectorAll("tbody tr"))[0]).toHaveAttribute(
+      "data-state",
+      "selected",
+    );
+
+    fireEvent.click(rowCheckboxes(container)[1]!); // Beta
+    const trs = Array.from(container.querySelectorAll("tbody tr"));
+    expect(trs[0]).not.toHaveAttribute("data-state", "selected");
+    expect(trs[1]).toHaveAttribute("data-state", "selected");
+  });
+});
+
+describe("DataTable — #11 I5: enableRowSelection restricts which rows can be selected", () => {
+  it("disables the checkbox for rows the predicate excludes", () => {
+    const { container } = render(
+      <DataTable
+        columns={selectableColumns}
+        data={data}
+        enableRowSelection={(row) => row.original.value !== 1}
+      />,
+    );
+    const checkboxes = rowCheckboxes(container);
+    // data[0] = Alpha/value 3, data[1] = Beta/value 1 (excluded), data[2] = Gamma/value 2.
+    expect(checkboxes[0]).not.toHaveAttribute("data-disabled");
+    expect(checkboxes[1]).toHaveAttribute("data-disabled");
+    expect(checkboxes[2]).not.toHaveAttribute("data-disabled");
+
+    // Clicking the disabled checkbox does not select its row.
+    fireEvent.click(checkboxes[1]!);
+    expect(Array.from(container.querySelectorAll("tbody tr"))[1]).not.toHaveAttribute(
+      "data-state",
+      "selected",
+    );
+  });
+
+  it("disables every row's checkbox when enableRowSelection is false", () => {
+    const { container } = render(
+      <DataTable columns={selectableColumns} data={data} enableRowSelection={false} />,
+    );
+    for (const checkbox of rowCheckboxes(container)) {
+      expect(checkbox).toHaveAttribute("data-disabled");
+    }
+  });
+});
+
+describe("DataTable — #11 I4: each row checkbox gets a distinguishing accessible name", () => {
+  it("names every row's checkbox from its own data, not an identical generic label", () => {
+    render(<DataTable columns={selectableColumns} data={data} />);
+    expect(screen.getByRole("checkbox", { name: "Select Alpha" })).toBeInTheDocument();
+    expect(screen.getByRole("checkbox", { name: "Select Beta" })).toBeInTheDocument();
+    expect(screen.getByRole("checkbox", { name: "Select Gamma" })).toBeInTheDocument();
+  });
+
+  it("falls back to the generic name when no data column value is derivable", () => {
+    const allDisplayColumns: ColumnDef<Row>[] = [
+      createSelectionColumn<Row>(),
+      { id: "avatar", header: "Avatar", cell: () => <span aria-hidden="true">◆</span> },
+    ];
+    const { container } = render(<DataTable columns={allDisplayColumns} data={data} />);
+    expect(rowCheckboxes(container)).toHaveLength(data.length);
+    expect(screen.getAllByRole("checkbox", { name: "Select row" })).toHaveLength(data.length);
+  });
+});
+
+// ─── #69: columnDef.meta numeric-column seam ─────────────────────────────────
+
+describe("DataTable — #69 columnDef.meta numeric column seam", () => {
+  const metaColumns: ColumnDef<Row>[] = [
+    { accessorKey: "name", header: "Name" },
+    { accessorKey: "value", header: "Value", meta: { numeric: true } },
+  ];
+
+  it("applies tabular-nums + end-alignment to the numeric column's <th> AND <td>, leaving the plain column unchanged", () => {
+    render(<DataTable columns={metaColumns} data={data} />);
+
+    const headers = screen.getAllByRole("columnheader");
+    const [nameHeader, valueHeader] = headers;
+    // A column without `meta.numeric` stays the default: start-aligned, proportional.
+    expect(nameHeader!.className).not.toContain("text-end");
+    expect(nameHeader!.className).not.toContain("tabular-nums");
+    // `meta.numeric` reaches the header too — a fix that only aligns the cells
+    // and leaves the header start-aligned looks worse than no fix.
+    expect(valueHeader!.className).toContain("text-end");
+    expect(valueHeader!.className).toContain("tabular-nums");
+
+    const cells = screen.getAllByRole("cell");
+    // First data row's pair, in column order: [name, value].
+    const [nameCell, valueCell] = cells;
+    expect(nameCell!.className).not.toContain("text-end");
+    expect(nameCell!.className).not.toContain("tabular-nums");
+    expect(valueCell!.className).toContain("text-end");
+    expect(valueCell!.className).toContain("tabular-nums");
+  });
+
+  it("mirrors the same numeric alignment on the loading skeleton, so no column shifts when data arrives", () => {
+    const { container } = render(
+      <DataTable columns={metaColumns} data={[]} loading loadingRows={1} />,
+    );
+    const skeletonCells = container.querySelectorAll<HTMLElement>(
+      'tbody tr[aria-hidden="true"] td',
+    );
+    expect(skeletonCells).toHaveLength(2);
+    const [nameSkeleton, valueSkeleton] = skeletonCells;
+    expect(nameSkeleton!.className).not.toContain("text-end");
+    expect(valueSkeleton!.className).toContain("text-end");
+    expect(valueSkeleton!.className).toContain("tabular-nums");
+  });
+
+  it("meta.align alone controls alignment without pulling in tabular-nums", () => {
+    const alignColumns: ColumnDef<Row>[] = [
+      { accessorKey: "name", header: "Name", meta: { align: "center" } },
+      { accessorKey: "value", header: "Value" },
+    ];
+    render(<DataTable columns={alignColumns} data={data} />);
+    const [nameHeader] = screen.getAllByRole("columnheader");
+    expect(nameHeader!.className).toContain("text-center");
+    expect(nameHeader!.className).not.toContain("tabular-nums");
+  });
+});
+
+// ─── #13: row drag-reorder ───────────────────────────────────────────────────
+
+describe("DataTable — #13 row drag-reorder", () => {
+  /** Every mounted data `<tr>`, in DOM order. */
+  function bodyRows(container: HTMLElement): HTMLTableRowElement[] {
+    return Array.from(container.querySelectorAll<HTMLTableRowElement>("tbody tr"));
+  }
+
+  /**
+   * `sortableKeyboardCoordinates` resolves an arrow-key move by comparing
+   * `getBoundingClientRect()` of the sortable `<tr>`s — jsdom's default rect
+   * is all-zero, so every row would collide at the same point. Stub distinct,
+   * vertically-stacked rects keyed by each row's position in the DOM; any
+   * other element (headers, buttons) falls back to the real implementation.
+   */
+  function mockRowRects() {
+    const original = HTMLElement.prototype.getBoundingClientRect;
+    return vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
+      this: HTMLElement,
+    ) {
+      const table = this.closest("table");
+      const rows = table ? Array.from(table.querySelectorAll("tbody tr")) : [];
+      const index = rows.indexOf(this as HTMLTableRowElement);
+      if (this.tagName !== "TR" || index === -1) {
+        return original.call(this);
+      }
+      const top = index * 40;
+      return {
+        top,
+        bottom: top + 40,
+        left: 0,
+        right: 200,
+        width: 200,
+        height: 40,
+        x: 0,
+        y: top,
+        toJSON() {
+          return {};
+        },
+      } as DOMRect;
+    });
+  }
+
+  /**
+   * `KeyboardSensor.attach()` picks up the row SYNCHRONOUSLY, then defers
+   * attaching its own document-level keydown listener (for the subsequent
+   * move/drop/cancel keys) by one macrotask (`setTimeout(fn, 0)`). A move
+   * key fired before that tick is silently dropped.
+   */
+  async function tick() {
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+  }
+
+  it("is opt-in — an existing table renders no grip column and no live region by default", () => {
+    const { container } = render(<DataTable columns={columns} data={data} />);
+    expect(screen.queryByRole("button", { name: /reorder/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+    expect(bodyRows(container)).toHaveLength(3);
+  });
+
+  it("renders a focusable grip handle per row with an accessible name (cell mode, the default)", () => {
+    render(<DataTable columns={columns} data={data} enableRowReorder />);
+    expect(screen.getByRole("button", { name: "Reorder Alpha" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Reorder Beta" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Reorder Gamma" })).toBeInTheDocument();
+  });
+
+  it("warns once (dev) when enableRowReorder is combined with active sorting", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const sorting: SortingState = [{ id: "name", desc: false }];
+      const { rerender } = render(
+        <DataTable columns={columns} data={data} enableRowReorder sorting={sorting} />,
+      );
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+      expect(warnSpy.mock.calls[0]?.[0]).toMatch(/enableRowReorder.*sort/is);
+
+      rerender(<DataTable columns={columns} data={data} enableRowReorder sorting={sorting} />);
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+    } finally {
+      warnSpy.mockRestore();
+    }
+  });
+
+  it("does NOT warn about sorting when sorting is empty", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      render(<DataTable columns={columns} data={data} enableRowReorder sorting={[]} />);
+      expect(warnSpy).not.toHaveBeenCalled();
+    } finally {
+      warnSpy.mockRestore();
+    }
+  });
+
+  it("warns (dev) and disables reorder when combined with enableRowVirtualization", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      render(<DataTable columns={columns} data={data} enableRowReorder enableRowVirtualization />);
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+      expect(warnSpy.mock.calls[0]?.[0]).toMatch(/enableRowReorder.*enableRowVirtualization/is);
+      // Virtualization wins — no grip column, no live region.
+      expect(screen.queryByRole("button", { name: /reorder/i })).not.toBeInTheDocument();
+      expect(screen.queryByRole("status")).not.toBeInTheDocument();
+    } finally {
+      warnSpy.mockRestore();
+    }
+  });
+
+  /**
+   * dnd-kit's own live region (`role="status" aria-live="assertive"`) is
+   * still rendered — `DndContext`'s `accessibility` prop has no way to
+   * remove it — but round-1 finding 4 silences its TEXT permanently, so
+   * `getByRole("status")` would now match it AND DataTable's own region
+   * ambiguously. Scope to the one this feature actually drives.
+   */
+  function getReorderLiveRegion(container: HTMLElement): HTMLElement {
+    const region = container.querySelector('[data-slot="data-table-reorder-live-region"]');
+    if (!region) throw new Error("reorder live region not found");
+    return region as HTMLElement;
+  }
+
+  it("supports the full keyboard flow — Space picks up, ArrowDown moves, Space drops, and onRowReorder fires with the new indices", async () => {
+    const rectSpy = mockRowRects();
+    const onRowReorder = vi.fn();
+    try {
+      const { container } = render(
+        <DataTable columns={columns} data={data} enableRowReorder onRowReorder={onRowReorder} />,
+      );
+      const live = getReorderLiveRegion(container);
+      // Round-1 finding 4 fix: the live region is `polite`, never `assertive`.
+      expect(live).toHaveAttribute("aria-live", "polite");
+      const handle = screen.getByRole("button", { name: "Reorder Alpha" });
+
+      fireEvent.keyDown(handle, { code: "Space" });
+      // Round-1 finding 4 also fixed the race that used to make this
+      // untestable: dnd-kit fires an immediate self-collision `onDragOver`
+      // (over === active, same position) in the same synchronous batch as
+      // `onDragStart`, which used to stomp this message before it was ever
+      // observable. `handleRowDragOver` now seeds
+      // `reorderLastAnnouncedPositionRef` from the pickup position and skips
+      // a same-position re-fire, so "Picked up" is the actually-committed text.
+      expect(live).toHaveTextContent("Picked up Alpha.");
+      expect(handle).toHaveAttribute("aria-pressed", "true");
+
+      await tick();
+
+      fireEvent.keyDown(document, { code: "ArrowDown" });
+      await tick();
+      // A real, single-position move announces exactly once (not once per
+      // keystroke merged with a no-op self-collision).
+      expect(live).toHaveTextContent("Alpha moved to position 2 of 3.");
+
+      fireEvent.keyDown(document, { code: "Space" });
+
+      expect(onRowReorder).toHaveBeenCalledTimes(1);
+      expect(onRowReorder).toHaveBeenCalledWith(0, 1, data[0]);
+      expect(live).toHaveTextContent(/alpha dropped at position 2 of 3/i);
+      expect(handle).not.toHaveAttribute("aria-pressed");
+    } finally {
+      rectSpy.mockRestore();
+    }
+  });
+
+  it("Escape cancels the drag — onRowReorder does not fire and the live region announces the cancellation", async () => {
+    const rectSpy = mockRowRects();
+    const onRowReorder = vi.fn();
+    try {
+      const { container } = render(
+        <DataTable columns={columns} data={data} enableRowReorder onRowReorder={onRowReorder} />,
+      );
+      const live = getReorderLiveRegion(container);
+      const handle = screen.getByRole("button", { name: "Reorder Beta" });
+
+      fireEvent.keyDown(handle, { code: "Space" });
+      expect(live).toHaveTextContent("Picked up Beta.");
+      expect(handle).toHaveAttribute("aria-pressed", "true");
+
+      await tick();
+
+      fireEvent.keyDown(document, { code: "Escape" });
+
+      expect(onRowReorder).not.toHaveBeenCalled();
+      expect(live).toHaveTextContent(/reordering cancelled\. beta returned to position 2 of 3/i);
+      expect(handle).not.toHaveAttribute("aria-pressed");
+    } finally {
+      rectSpy.mockRestore();
+    }
+  });
+
+  it("does not re-announce when an arrow key hits the list boundary (no real position change) — round-1 finding 4", async () => {
+    const rectSpy = mockRowRects();
+    try {
+      const { container } = render(
+        <DataTable columns={columns} data={data} enableRowReorder onRowReorder={vi.fn()} />,
+      );
+      const live = getReorderLiveRegion(container);
+      const handle = screen.getByRole("button", { name: "Reorder Alpha" });
+
+      fireEvent.keyDown(handle, { code: "Space" });
+      expect(live).toHaveTextContent("Picked up Alpha.");
+      await tick();
+
+      // Alpha is already first — ArrowUp has nowhere to go, so dnd-kit
+      // reports the SAME position again. That must not overwrite the
+      // "Picked up" message with a redundant "moved to position 1" — a
+      // screen-reader user gets one meaningful announcement, not a repeat.
+      fireEvent.keyDown(document, { code: "ArrowUp" });
+      await tick();
+      expect(live).toHaveTextContent("Picked up Alpha.");
+
+      fireEvent.keyDown(document, { code: "Escape" });
+    } finally {
+      rectSpy.mockRestore();
+    }
+  });
+
+  it("resolves onRowReorder indices against the full `data` array, not the sorted VIEW — round-1 finding 1 (data corruption)", async () => {
+    const rectSpy = mockRowRects();
+    const onRowReorder = vi.fn();
+    try {
+      // Sorted desc by name: view order is Gamma, Beta, Alpha — i.e. the
+      // FIRST rendered row is `data[2]`, not `data[0]`.
+      const sorting: SortingState = [{ id: "name", desc: true }];
+      render(
+        <DataTable
+          columns={columns}
+          data={data}
+          enableRowReorder
+          onRowReorder={onRowReorder}
+          sorting={sorting}
+          onSortingChange={vi.fn()}
+        />,
+      );
+      const handle = screen.getByRole("button", { name: "Reorder Gamma" });
+      fireEvent.keyDown(handle, { code: "Space" });
+      await tick();
+      fireEvent.keyDown(document, { code: "ArrowDown" });
+      await tick();
+      fireEvent.keyDown(document, { code: "Space" });
+
+      // View-relative positions would report (0, 1, Gamma) — a caller doing
+      // `arrayMove(data, 0, 1)` (the idiom both shipped stories use) would
+      // then swap `data[0]`/`data[1]` (Alpha/Beta), touching neither row the
+      // user actually dragged. Resolved against `data`, Gamma is `data[2]`
+      // and the row it was dropped onto (Beta) is `data[1]`.
+      expect(onRowReorder).toHaveBeenCalledTimes(1);
+      expect(onRowReorder).toHaveBeenCalledWith(2, 1, data[2]);
+    } finally {
+      rectSpy.mockRestore();
+    }
+  });
+
+  it("resolves onRowReorder indices against the full `data` array under client-side pagination — round-1 finding 1 (data corruption)", async () => {
+    const rectSpy = mockRowRects();
+    const manyRows: Row[] = Array.from({ length: 10 }, (_, i) => ({
+      name: `svc-${i}`,
+      value: i,
+    }));
+    const onRowReorder = vi.fn();
+    try {
+      render(
+        <DataTable
+          columns={columns}
+          data={manyRows}
+          enableRowReorder
+          onRowReorder={onRowReorder}
+          enablePagination
+          pageSize={5}
+          pagination={{ pageIndex: 1, pageSize: 5 }}
+          onPaginationChange={vi.fn()}
+        />,
+      );
+      // Page 2 renders svc-5..svc-9 at VIEW positions 0..4.
+      const handle = screen.getByRole("button", { name: "Reorder svc-5" });
+      fireEvent.keyDown(handle, { code: "Space" });
+      await tick();
+      fireEvent.keyDown(document, { code: "ArrowDown" });
+      await tick();
+      fireEvent.keyDown(document, { code: "Space" });
+
+      // View-relative positions would report (0, 1, svc-5) — a caller doing
+      // `arrayMove(data, 0, 1)` would corrupt svc-0/svc-1 on page 1, which
+      // the user never touched. svc-5 is `data[5]`; the row it landed on
+      // (svc-6) is `data[6]`.
+      expect(onRowReorder).toHaveBeenCalledTimes(1);
+      expect(onRowReorder).toHaveBeenCalledWith(5, 6, manyRows[5]);
+    } finally {
+      rectSpy.mockRestore();
+    }
+  });
+
+  it("keeps keyboard focus on the SAME row that moved after a drop, across a `data` array replacement — round-1 finding 3 (focus loss)", async () => {
+    const rectSpy = mockRowRects();
+    // Mirrors the exact "controlled slice" harness the `RowReorder` story
+    // uses: `onRowReorder` re-orders the caller's OWN `data`, which means a
+    // NEW array is passed back down on every drop — TanStack's default,
+    // index-based row id gets reassigned by POSITION when that happens, so
+    // this only fails without the round-1 stable-identity fix.
+    function Harness() {
+      const [items, setItems] = useState(data);
+      return (
+        <DataTable
+          columns={columns}
+          data={items}
+          enableRowReorder
+          onRowReorder={(from, to) => {
+            setItems((current) => {
+              const next = current.slice();
+              const [moved] = next.splice(from, 1);
+              next.splice(to, 0, moved!);
+              return next;
+            });
+          }}
+        />
+      );
+    }
+    try {
+      render(<Harness />);
+      const handle = screen.getByRole("button", { name: "Reorder Alpha" });
+      handle.focus();
+      fireEvent.keyDown(handle, { code: "Space" });
+      await tick();
+      fireEvent.keyDown(document, { code: "ArrowDown" });
+      await tick();
+      fireEvent.keyDown(document, { code: "Space" });
+      // dnd-kit's own focus-restore effect (`accessibility.restoreFocus`,
+      // on by default) re-focuses the activator node via
+      // `requestAnimationFrame` after the drop commits — give it a tick.
+      await act(async () => {
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+      });
+
+      // Alpha moved from view position 0 to 1. A POSITIONAL row id (reissued
+      // when `data` is replaced by the splice above) would leave the grip
+      // DOM NODE — and the focus it carries — at index 0, which now renders
+      // Beta. This asserts focus followed the RECORD, not the slot.
+      expect(document.activeElement).toHaveAccessibleName("Reorder Alpha");
+      expect(screen.getAllByRole("button", { name: /^Reorder /i })[0]).toHaveAccessibleName(
+        "Reorder Beta",
+      );
+    } finally {
+      rectSpy.mockRestore();
+    }
+  });
+
+  // A jsdom pointer-drag unit test was attempted here and dropped: this
+  // environment has no global `PointerEvent` constructor at all (verified
+  // directly — `typeof PointerEvent === "undefined"`), so `PointerSensor`'s
+  // own activator gate (`!event.isPrimary || event.button !== 0` in
+  // `@dnd-kit/core`) rejects every synthetic pointerdown before dnd-kit does
+  // anything else; no test-authoring fix changes that. Pointer drag is
+  // dnd-kit's own well-tested mechanism (not new code this issue adds) and is
+  // exercised for real in `data-table.stories.tsx`'s `RowReorder` story,
+  // which runs in an actual browser via Storybook's interaction test runner.
+  // The keyboard path above is the one this issue's `accessibility` label
+  // makes mandatory, and it is covered without this gap.
+
+  it('rowReorderHandle="row" makes the whole row the activator instead of a grip column', () => {
+    const { container } = render(
+      <DataTable columns={columns} data={data} enableRowReorder rowReorderHandle="row" />,
+    );
+    // No dedicated grip button anywhere.
+    expect(screen.queryByRole("button", { name: /reorder/i })).not.toBeInTheDocument();
+
+    const [firstRow] = bodyRows(container);
+    // dnd-kit's default activator role is overridden back to the table's own
+    // `row`, and `aria-pressed` (meaningless off a button) is stripped.
+    expect(firstRow!.getAttribute("role")).toBe("row");
+    expect(firstRow!.hasAttribute("aria-pressed")).toBe(false);
+    expect(firstRow!.getAttribute("tabindex")).toBe("0");
+  });
+
+  // ── Round-2 finding 6: a `data` array that repeats a record ───────────────
+  // The SAME object reference at two positions (a record shown twice by
+  // design, a list that only LOOKS de-duplicated) used to collapse onto its
+  // FIRST index on drop: the drag-end handler resolved `from`/`to` through a
+  // `Map` keyed by `row.original`, which can only hold one index per value.
+  // A caller running this component's own documented `arrayMove(data, from,
+  // to)` idiom then moved a row the user never touched, silently — no error,
+  // no warning, no visual sign. Both identity paths are locked, because they
+  // fail for different reasons: without `getRowId` the drag IDs themselves
+  // collide, with it only the index lookup does.
+  const repeatedRecord: Row = { name: "Alpha", value: 3 };
+  const dataWithRepeat: Row[] = [repeatedRecord, { name: "Beta", value: 1 }, repeatedRecord];
+
+  it("gives each occurrence of a repeated record its own drag identity — round-2 finding 6", () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      render(<DataTable columns={columns} data={dataWithRepeat} enableRowReorder />);
+      // Both occurrences mount as real, separately addressable rows...
+      expect(screen.getAllByRole("button", { name: "Reorder Alpha" })).toHaveLength(2);
+      // ...and React sees two distinct keys, not one repeated one. A shared
+      // key is the visible symptom of a shared dnd-kit id: one `<tr>`
+      // registration for two rows, so the drop cannot tell them apart.
+      const duplicateKeyWarnings = errorSpy.mock.calls.filter((call) =>
+        String(call[0]).includes("same key"),
+      );
+      expect(duplicateKeyWarnings).toEqual([]);
+    } finally {
+      errorSpy.mockRestore();
+    }
+  });
+
+  it("reports the dragged occurrence's OWN index when `data` repeats a record — round-2 finding 6 (data corruption)", async () => {
+    const rectSpy = mockRowRects();
+    const onRowReorder = vi.fn();
+    try {
+      render(
+        <DataTable
+          columns={columns}
+          data={dataWithRepeat}
+          enableRowReorder
+          onRowReorder={onRowReorder}
+        />,
+      );
+      // The SECOND "Alpha" grip — the row rendered from `data[2]`.
+      const handles = screen.getAllByRole("button", { name: "Reorder Alpha" });
+      fireEvent.keyDown(handles[1]!, { code: "Space" });
+      await tick();
+      fireEvent.keyDown(document, { code: "ArrowUp" });
+      await tick();
+      fireEvent.keyDown(document, { code: "Space" });
+
+      // Value-keyed indices reported (0, 1, Alpha): `arrayMove(data, 0, 1)`
+      // would swap `data[0]`/`data[1]`, leaving `data[2]` — the row actually
+      // dragged — where it was. The dragged occupant is `data[2]`; the row it
+      // landed on (Beta) is `data[1]`.
+      expect(onRowReorder).toHaveBeenCalledTimes(1);
+      expect(onRowReorder).toHaveBeenCalledWith(2, 1, repeatedRecord);
+    } finally {
+      rectSpy.mockRestore();
+    }
+  });
+
+  it("reports the dragged occurrence's OWN index when `data` repeats a record and the caller supplies `getRowId` — round-2 finding 6", async () => {
+    const rectSpy = mockRowRects();
+    const onRowReorder = vi.fn();
+    try {
+      render(
+        <DataTable
+          columns={columns}
+          data={dataWithRepeat}
+          enableRowReorder
+          onRowReorder={onRowReorder}
+          getRowId={(_row, index) => `row-${index}`}
+        />,
+      );
+      // Caller-supplied ids already disambiguate the two occurrences, so this
+      // isolates the index lookup itself.
+      const handles = screen.getAllByRole("button", { name: "Reorder Alpha" });
+      fireEvent.keyDown(handles[1]!, { code: "Space" });
+      await tick();
+      fireEvent.keyDown(document, { code: "ArrowUp" });
+      await tick();
+      fireEvent.keyDown(document, { code: "Space" });
+
+      expect(onRowReorder).toHaveBeenCalledTimes(1);
+      expect(onRowReorder).toHaveBeenCalledWith(2, 1, repeatedRecord);
+    } finally {
+      rectSpy.mockRestore();
+    }
+  });
+
+  // ── Issue #98: dnd-kit's own AT strings (keyboard instructions,
+  // aria-roledescription) were never localized — the six sibling `reorder*`
+  // strings all go through `t()`, but these two are produced INSIDE dnd-kit
+  // and injected into our DOM, so they shipped hardcoded English regardless
+  // of locale. The German wrapper below supplies all three reorder keys that
+  // touch AT-visible reorder text (`reorderHandle` for the grip's accessible
+  // name, plus the two new `reorder*` keys this fix adds).
+  const germanReorderMessages = {
+    "data.table.reorderHandle": "Sortieren {name}",
+    "data.table.reorderInstructions":
+      "Um eine Zeile aufzunehmen, drücken Sie die Leertaste oder die Eingabetaste. Verwenden Sie beim Ziehen die Pfeiltasten, um die Zeile zu verschieben. Drücken Sie erneut die Leertaste oder die Eingabetaste, um die Zeile an ihrer neuen Position abzulegen, oder drücken Sie die Escape-Taste, um abzubrechen.",
+    "data.table.reorderRoleDescription": "sortierbar",
+  };
+
+  it("localizes dnd-kit's keyboard instructions and role description (cell mode) — #98", () => {
+    render(
+      <LocaleProvider locale="de-DE" messages={germanReorderMessages}>
+        <DataTable columns={columns} data={data} enableRowReorder />
+      </LocaleProvider>,
+    );
+    const handle = screen.getByRole("button", { name: "Sortieren Alpha" });
+    expect(handle).toHaveAttribute("aria-roledescription", "sortierbar");
+
+    const describedById = handle.getAttribute("aria-describedby");
+    expect(describedById).toBeTruthy();
+    const describedByText = document.getElementById(describedById!)?.textContent ?? "";
+    expect(describedByText).toContain("Leertaste");
+    // Load-bearing negative assertion: dnd-kit's verbatim English default
+    // instructions must NOT be present alongside (or instead of) the
+    // localized text.
+    expect(describedByText).not.toMatch(/To pick up|space bar/i);
+  });
+
+  it('keeps role="row" while localizing the role description in row-handle mode — #98', () => {
+    const { container } = render(
+      <LocaleProvider locale="de-DE" messages={germanReorderMessages}>
+        <DataTable columns={columns} data={data} enableRowReorder rowReorderHandle="row" />
+      </LocaleProvider>,
+    );
+    const [firstRow] = bodyRows(container);
+    expect(firstRow!.getAttribute("role")).toBe("row");
+    expect(firstRow!.getAttribute("aria-roledescription")).toBe("sortierbar");
+
+    const describedById = firstRow!.getAttribute("aria-describedby");
+    expect(describedById).toBeTruthy();
+    const describedByText = document.getElementById(describedById!)?.textContent ?? "";
+    expect(describedByText).toContain("Leertaste");
+    expect(describedByText).not.toMatch(/To pick up|space bar/i);
+  });
+
+  it("falls back to the English defaults with no LocaleProvider override — #98", () => {
+    render(<DataTable columns={columns} data={data} enableRowReorder />);
+    const handle = screen.getByRole("button", { name: "Reorder Alpha" });
+    expect(handle).toHaveAttribute("aria-roledescription", "sortable");
+
+    const describedById = handle.getAttribute("aria-describedby");
+    expect(describedById).toBeTruthy();
+    const describedByText = document.getElementById(describedById!)?.textContent ?? "";
+    expect(describedByText).toMatch(/To pick up|space bar/i);
+  });
+});