@multiplatform.one/table 6.4.2 → 6.6.0

package/src/components/DataTable/cardLayout.spec.tsx

@@ -213,7 +213,10 @@ describe("DataTable card layout", () => {
           onStateChange={vi.fn()}
         />,
       );
-      expect(getAllByLabelText(/^Select row \d+$/).length).toBe(sampleData.length);
+      // Selection toggles are named by ROW IDENTITY (first cell value /
+      // rowLabel), not a bare position — "Select row Alice", not "Select
+      // row 1" (DG-A11Y-06; selectionSemantics.spec pins the derivation).
+      expect(getAllByLabelText(/^Select row .+$/).length).toBe(sampleData.length);
       expect(container.querySelector('[data-testid="data-table-cards"]')).not.toBeNull();
     });
   });

package/src/components/DataTable/customCellAlign.spec.tsx

@@ -0,0 +1,124 @@
+/**
+ * Custom-cell alignment (DG-TBL-01 / LC-44 ROW-LINE).
+ *
+ * Custom `cell` renderers historically LOST the column's `align` on web:
+ * in the semantic-table displayMode (columnLayout="auto") `Table.Cell` is
+ * `display: table-cell`, where the cell box's own flex `justifyContent` is
+ * a no-op — only the built-in DataTableCell self-aligned, and every custom
+ * renderer had to hand-roll its own alignment wrapper (the InsightsRowLink
+ * class of bug). The fix: DataTable wraps flexRender output in a
+ * full-width flex container driven by the resolved column align
+ * (`data-cell-align`), in every displayMode, so custom cells align like
+ * built-ins with zero consumer code.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Text } from "tamagui";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Pokemon = {
+  id: number;
+  name: string;
+  xp: number;
+  active: boolean;
+};
+
+const sampleData: Pokemon[] = [
+  { id: 1, name: "Bulbasaur", xp: 64, active: true },
+  { id: 2, name: "Charmander", xp: 62, active: false },
+];
+
+const customColumns: DataTableColumn<Pokemon>[] = [
+  {
+    id: "name",
+    accessorKey: "name",
+    header: "Name",
+    cell: ({ getValue }) => <Text>{String(getValue())}</Text>,
+  },
+  {
+    id: "xp",
+    accessorKey: "xp",
+    header: "XP",
+    align: "right",
+    cell: ({ getValue }) => <Text>{String(getValue())}</Text>,
+  },
+  {
+    id: "active",
+    accessorKey: "active",
+    header: "Active",
+    align: "center",
+    cell: ({ getValue }) => <Text>{getValue() ? "yes" : "no"}</Text>,
+  },
+  // Built-in field path (no custom cell) — must NOT grow a wrapper.
+  // (accessor `id`, not `xp`: the custom XP column also paints its value,
+  // and duplicated cell text breaks the single-match queries below.)
+  { id: "plain_id", accessorKey: "id", header: "Plain ID", field: "stepper" },
+];
+
+function alignContainerOf(el: HTMLElement): HTMLElement | null {
+  return el.closest("[data-cell-align]") as HTMLElement | null;
+}
+
+function renderTable(columnLayout: "auto" | "equal") {
+  return renderWithProviders(
+    <DataTable
+      data={sampleData}
+      columns={customColumns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      columnLayout={columnLayout}
+      enablePagination={false}
+      readOnly
+    />,
+  );
+}
+
+describe.each(["auto", "equal"] as const)(
+  "DataTable custom-cell alignment (columnLayout=%s)",
+  (columnLayout) => {
+    it("wraps custom cells in an alignment container driven by the column align", () => {
+      renderTable(columnLayout);
+
+      const nameContainer = alignContainerOf(screen.getByText("Bulbasaur"));
+      expect(nameContainer).not.toBeNull();
+      expect(nameContainer!.getAttribute("data-cell-align")).toBe("left");
+
+      // The wrapper is a full-width flex row whose justifyContent follows
+      // the resolved align (this is what display:table-cell's dead
+      // justifyContent could not do). happy-dom does not resolve tamagui's
+      // class-based styles, so computed flex geometry (display:flex,
+      // justify-content, shared ink edges ±1px) is pinned in the live
+      // browser probe `p-results/table-rowpress/probe.mjs`; here the
+      // structural contract is the container + its declared alignment.
+      const xpContainer = alignContainerOf(screen.getByText("64"));
+      expect(xpContainer).not.toBeNull();
+      expect(xpContainer!.getAttribute("data-cell-align")).toBe("right");
+
+      const centerContainer = alignContainerOf(screen.getAllByText("yes")[0]);
+      expect(centerContainer).not.toBeNull();
+      expect(centerContainer!.getAttribute("data-cell-align")).toBe("center");
+    });
+
+    it("headers carry the same resolved alignment as their cells", () => {
+      const { container } = renderTable(columnLayout);
+      const xpHeader = container.querySelector("#xp-header");
+      expect(xpHeader?.getAttribute("data-align")).toBe("right");
+      const nameHeader = container.querySelector("#name-header");
+      expect(nameHeader?.getAttribute("data-align")).toBe("left");
+    });
+
+    it("built-in field cells stay unwrapped (they self-align internally)", () => {
+      const { container } = renderTable(columnLayout);
+      // Body cells for the plain field column contain no alignment wrapper.
+      const bodyCells = Array.from(
+        container.querySelectorAll('[data-align="right"]'),
+      ) as HTMLElement[];
+      const plainFieldCells = bodyCells.filter(
+        (cell) => cell.id === "" && !cell.querySelector("[data-cell-align]"),
+      );
+      expect(plainFieldCells.length).toBeGreaterThan(0);
+    });
+  },
+);

package/src/components/DataTable/disabledContract.spec.tsx

@@ -156,7 +156,8 @@ describe("DataTable disabled contract (grid layout)", () => {
         onStateChange={vi.fn()}
       />,
     );
-    const rowCheckbox = getAllByLabelText(/^Select row 1$/)[0];
+    // Selection toggles are named by row identity (first cell value).
+    const rowCheckbox = getAllByLabelText(/^Select row John$/)[0];
     fireEvent.click(rowCheckbox);
     await waitFor(() => {
       expect(container.querySelectorAll('[aria-checked="true"]').length).toBe(0);
@@ -233,8 +234,8 @@ describe("DataTable disabled contract (card layout)", () => {
       expect(onDataChange).not.toHaveBeenCalled();
     });
 
-    // Selection does not toggle.
-    fireEvent.click(getAllByLabelText(/^Select row 1$/)[0]);
+    // Selection does not toggle. (Toggles are named by row identity.)
+    fireEvent.click(getAllByLabelText(/^Select row John$/)[0]);
     await waitFor(() => {
       expect(container.querySelectorAll('[aria-checked="true"]').length).toBe(0);
     });

package/src/components/DataTable/index.native.tsx

@@ -134,6 +134,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   enableColumnPinning = false,
   maxPinnedColumns = 3,
   enableKeyboardNavigation: _enableKeyboardNavigation = false,
+  onRowPress,
+  rowLabel,
   readOnly = false,
   onCellChange,
   name,
@@ -456,6 +458,47 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
 
   const tableZebraOn = knobProps.tableZebra === "on";
 
+  // ---- Row press (onRowPress): the ROW is one pressable unit ----
+  // Native twin of the web contract: press anywhere on the row activates.
+  // Inner controls need no isolation walk here — native nested pressables
+  // claim the gesture responder, so a child press never bubbles to the row
+  // (see utils/rowPress.ts). Roving tabindex is a web-only concern.
+  const rowPressActive = Boolean(onRowPress) && !disabled;
+
+  const deriveRowLabel = useCallback(
+    (row: (typeof tableRows)[0], index: number): string => {
+      const fromAccessor = rowLabel?.(row.original as TData);
+      if (fromAccessor) return fromAccessor;
+      let firstCellValue: unknown;
+      try {
+        firstCellValue = row.getVisibleCells()[0]?.getValue();
+      } catch {
+        firstCellValue = undefined;
+      }
+      if (
+        (typeof firstCellValue === "string" && firstCellValue.length > 0) ||
+        typeof firstCellValue === "number"
+      ) {
+        return String(firstCellValue);
+      }
+      return withInterp(t("Row {{row}}", { row: index + 1 }), { row: index + 1 });
+    },
+    [rowLabel, t],
+  );
+
+  const getRowPressProps = useCallback(
+    (row: (typeof tableRows)[0], index: number) => {
+      if (!rowPressActive) return {};
+      return {
+        onPress: () => onRowPress?.(row.original as TData, index),
+        role: "button" as const,
+        "aria-label": deriveRowLabel(row, index),
+        pressStyle: { backgroundColor: "$color4" },
+      };
+    },
+    [rowPressActive, onRowPress, deriveRowLabel],
+  );
+
   const renderRow = useCallback(
     (row: (typeof tableRows)[0], index: number) => (
       <Table.Row
@@ -467,11 +510,12 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
         {...({
           "data-table-zebra": tableZebraOn ? (index % 2 === 0 ? "even" : "odd") : "off",
         } as any)}
+        {...(getRowPressProps(row, index) as any)}
       >
         {renderRowContent(row, index)}
       </Table.Row>
     ),
-    [renderRowContent, tableZebraOn, t],
+    [renderRowContent, tableZebraOn, t, getRowPressProps],
   );
 
   const renderMobileCard = useCallback(
@@ -487,6 +531,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
           borderColor="$borderColor"
           padding="$3"
           marginBottom="$2"
+          {...(getRowPressProps(row, index) as any)}
         >
           {showRowNumbers && (
             <View
@@ -563,6 +608,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       minRows,
       renderCellContent,
       t,
+      getRowPressProps,
     ],
   );
 

package/src/components/DataTable/rowPress.spec.tsx

@@ -0,0 +1,229 @@
+/**
+ * onRowPress — first-class row activation (LC-49 ONE-TAB-STOP, LC-50
+ * KEY-ACTIVATION, DG-A11Y-06 names).
+ *
+ * The row is ONE pressable unit: click/tap anywhere activates, Enter AND
+ * Space activate from the keyboard, the row set exposes exactly one tab
+ * stop (roving tabindex, arrows/Home/End move it), and presses that
+ * originate on inner interactive controls (selection checkboxes, buttons)
+ * never reach the row handler. Cards (layout="cards") take the same
+ * contract with role="button".
+ *
+ * layout="table" pins the grid below the $sm test-env breakpoint.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "@multiplatform.one/forms";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Person = {
+  id: number;
+  firstName: string;
+  age: number;
+};
+
+const sampleData: Person[] = [
+  { id: 1, firstName: "Alice", age: 30 },
+  { id: 2, firstName: "Bob", age: 40 },
+  { id: 3, firstName: "Carol", age: 20 },
+];
+
+// Explicit ids: DataTable seeds columnOrder from `col.id || ""`, so mixing
+// id-less accessor columns with an id'd display column would reorder the
+// display column first (and identity fallbacks would read it as the "first
+// visible cell").
+const columns: DataTableColumn<Person>[] = [
+  { id: "firstName", accessorKey: "firstName", header: "First Name" },
+  { id: "age", accessorKey: "age", header: "Age" },
+];
+
+function pressRows(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll('[data-row-press="true"]')) as HTMLElement[];
+}
+
+function renderRowPressTable(extraProps: Record<string, unknown> = {}) {
+  const onRowPress = vi.fn();
+  const result = renderWithProviders(
+    <DataTable
+      data={sampleData}
+      columns={columns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      enablePagination={false}
+      onRowPress={onRowPress}
+      {...extraProps}
+    />,
+  );
+  return { ...result, onRowPress };
+}
+
+describe("DataTable onRowPress (grid)", () => {
+  it("activates on a click anywhere in the row with the row data and index", () => {
+    const { container, onRowPress } = renderRowPressTable();
+    const rows = pressRows(container);
+    expect(rows).toHaveLength(3);
+
+    fireEvent.click(screen.getByText("Bob"));
+    expect(onRowPress).toHaveBeenCalledTimes(1);
+    expect(onRowPress).toHaveBeenCalledWith(
+      expect.objectContaining({ firstName: "Bob", id: 2 }),
+      1,
+    );
+  });
+
+  it("exposes exactly one tab stop; arrows and Home/End rove it (LC-49)", async () => {
+    const { container } = renderRowPressTable();
+    const rows = pressRows(container);
+
+    const tabStops = () => rows.map((row) => row.getAttribute("tabindex"));
+    expect(tabStops()).toEqual(["0", "-1", "-1"]);
+
+    rows[0].focus();
+    expect(document.activeElement).toBe(rows[0]);
+
+    fireEvent.keyDown(rows[0], { key: "ArrowDown" });
+    expect(document.activeElement).toBe(rows[1]);
+    // The anchor follows focus: still exactly one tabindex=0.
+    await waitFor(() => {
+      const stops = pressRows(container).map((row) => row.getAttribute("tabindex"));
+      expect(stops).toEqual(["-1", "0", "-1"]);
+    });
+
+    fireEvent.keyDown(rows[1], { key: "End" });
+    expect(document.activeElement).toBe(rows[2]);
+    fireEvent.keyDown(rows[2], { key: "Home" });
+    expect(document.activeElement).toBe(rows[0]);
+    fireEvent.keyDown(rows[0], { key: "ArrowUp" });
+    // Clamped at the first row — no wrap.
+    expect(document.activeElement).toBe(rows[0]);
+  });
+
+  it("activates on Enter AND Space, once per physical key press (LC-50)", () => {
+    const { container, onRowPress } = renderRowPressTable();
+    const rows = pressRows(container);
+    rows[0].focus();
+
+    fireEvent.keyDown(rows[0], { key: "Enter" });
+    expect(onRowPress).toHaveBeenCalledTimes(1);
+    expect(onRowPress).toHaveBeenLastCalledWith(expect.objectContaining({ firstName: "Alice" }), 0);
+
+    fireEvent.keyDown(rows[0], { key: " " });
+    expect(onRowPress).toHaveBeenCalledTimes(2);
+
+    // Key auto-repeat never machine-guns activations.
+    fireEvent.keyDown(rows[0], { key: "Enter", repeat: true });
+    expect(onRowPress).toHaveBeenCalledTimes(2);
+  });
+
+  it("ignores presses that originate on inner interactive controls", () => {
+    const buttonPress = vi.fn();
+    const interactiveColumns: DataTableColumn<Person>[] = [
+      ...columns,
+      {
+        id: "row_actions",
+        header: "Actions",
+        cell: ({ row }) => (
+          <Button size="$2" onPress={() => buttonPress(row.original.id)}>
+            Edit
+          </Button>
+        ),
+      },
+    ];
+    const { container, onRowPress } = renderRowPressTable({
+      columns: interactiveColumns as DataTableColumn<Record<string, any>>[],
+      enableRowSelection: true,
+    });
+
+    // Selection checkbox: toggles selection, never fires the row press.
+    const rowCheckbox = screen.getByRole("checkbox", { name: "Select row Alice" });
+    fireEvent.click(rowCheckbox);
+    expect(rowCheckbox.getAttribute("aria-checked")).toBe("true");
+    expect(onRowPress).not.toHaveBeenCalled();
+
+    // Inner button: its own handler fires, the row press does not.
+    fireEvent.click(screen.getAllByText("Edit")[0]);
+    expect(buttonPress).toHaveBeenCalledWith(1);
+    expect(onRowPress).not.toHaveBeenCalled();
+
+    // A plain cell in the same row still activates the row.
+    fireEvent.click(screen.getByText("Alice"));
+    expect(onRowPress).toHaveBeenCalledTimes(1);
+    expect(container.querySelectorAll('[data-row-press="true"]').length).toBe(3);
+  });
+
+  it("names rows: rowLabel accessor wins; first cell value is the fallback", () => {
+    const { container, unmount } = renderRowPressTable({
+      rowLabel: (row: Person) => `Open ${row.firstName}`,
+    });
+    expect(pressRows(container).map((row) => row.getAttribute("aria-label"))).toEqual([
+      "Open Alice",
+      "Open Bob",
+      "Open Carol",
+    ]);
+    unmount();
+
+    const { container: fallbackContainer } = renderRowPressTable();
+    expect(pressRows(fallbackContainer)[0].getAttribute("aria-label")).toBe("Alice");
+  });
+});
+
+describe("DataTable onRowPress (cards layout)", () => {
+  it("cards are pressable buttons with the same activation + isolation contract", async () => {
+    const onRowPress = vi.fn();
+    renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="cards"
+        enablePagination={false}
+        enableRowSelection
+        onRowPress={onRowPress}
+        rowLabel={(row) => (row as Person).firstName}
+      />,
+    );
+
+    const card = screen.getByRole("button", { name: "Bob" });
+    expect(card.getAttribute("data-row-press")).toBe("true");
+
+    // Inner selection checkbox stays isolated from the card press.
+    const checkbox = screen.getByRole("checkbox", { name: "Select row Bob" });
+    fireEvent.click(checkbox);
+    expect(checkbox.getAttribute("aria-checked")).toBe("true");
+    expect(onRowPress).not.toHaveBeenCalled();
+
+    fireEvent.click(card);
+    expect(onRowPress).toHaveBeenCalledTimes(1);
+    expect(onRowPress).toHaveBeenCalledWith(expect.objectContaining({ firstName: "Bob" }), 1);
+
+    // Enter activates the focused card (LC-50).
+    card.focus();
+    fireEvent.keyDown(card, { key: "Enter" });
+    await waitFor(() => expect(onRowPress).toHaveBeenCalledTimes(2));
+  });
+
+  it("card list exposes one roving tab stop scoped to the list (LC-49)", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="cards"
+        enablePagination={false}
+        onRowPress={vi.fn()}
+      />,
+    );
+    const cards = pressRows(container as HTMLElement);
+    expect(cards).toHaveLength(3);
+    expect(cards.map((card) => card.getAttribute("tabindex"))).toEqual(["0", "-1", "-1"]);
+    expect(
+      (container as HTMLElement).querySelector(
+        '[data-row-press-scope="true"] [data-row-press="true"]',
+      ),
+    ).not.toBeNull();
+
+    cards[0].focus();
+    fireEvent.keyDown(cards[0], { key: "ArrowDown" });
+    expect(document.activeElement).toBe(cards[1]);
+  });
+});

package/src/components/DataTable/selectionSemantics.spec.tsx

@@ -0,0 +1,156 @@
+/**
+ * Row-selection semantics (desk-parity audit fix).
+ *
+ * The audit finding: list-row selection toggles rendered as anonymous
+ * pressables — no role=checkbox, no aria-checked, invisible to AT and
+ * automation; the bulk-actions bar was unreachable without a mouse. These
+ * specs pin the REAL checkbox contract on the package selection column:
+ * every toggle is role="checkbox" with aria-checked (header select-all
+ * supports "mixed"), named by row identity ("Select row {name}"), meets
+ * the 44px press floor through the control's own box (LC-54), toggles
+ * from the keyboard, and keyboard-only selection reaches the bulk bar.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import type { BulkAction, DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Person = {
+  id: number;
+  firstName: string;
+  age: number;
+};
+
+const sampleData: Person[] = [
+  { id: 1, firstName: "Alice", age: 30 },
+  { id: 2, firstName: "Bob", age: 40 },
+  { id: 3, firstName: "Carol", age: 20 },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+function renderSelectionTable(extraProps: Record<string, unknown> = {}) {
+  const bulkExecute = vi.fn();
+  const bulkActions: BulkAction<Person>[] = [
+    { id: "archive", label: "Archive", onExecute: bulkExecute },
+  ];
+  const result = renderWithProviders(
+    <DataTable
+      data={sampleData}
+      columns={columns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      enablePagination={false}
+      enableRowSelection
+      bulkActions={bulkActions as BulkAction<Record<string, any>>[]}
+      {...extraProps}
+    />,
+  );
+  return { ...result, bulkExecute };
+}
+
+describe("DataTable selection semantics", () => {
+  it("row toggles are real checkboxes named by row identity", () => {
+    renderSelectionTable();
+
+    const rowCheckboxes = [
+      screen.getByRole("checkbox", { name: "Select row Alice" }),
+      screen.getByRole("checkbox", { name: "Select row Bob" }),
+      screen.getByRole("checkbox", { name: "Select row Carol" }),
+    ];
+    for (const checkbox of rowCheckboxes) {
+      expect(checkbox.getAttribute("aria-checked")).toBe("false");
+      // Real disclosure for automation: state is machine-readable, and the
+      // toggle is a focusable control (not an anonymous pressable View).
+      expect(checkbox.getAttribute("role")).toBe("checkbox");
+      expect((checkbox as HTMLElement).tagName).toBe("BUTTON");
+    }
+  });
+
+  it("rowLabel drives the checkbox names when provided", () => {
+    renderSelectionTable({
+      rowLabel: (row: Person) => `${row.firstName} #${row.id}`,
+    });
+    expect(screen.getByRole("checkbox", { name: "Select row Alice #1" })).toBeDefined();
+    expect(screen.getByRole("checkbox", { name: "Select row Carol #3" })).toBeDefined();
+  });
+
+  it("meets the 44px press floor through the control's own box (LC-54)", () => {
+    renderSelectionTable();
+    const checkbox = screen.getByRole("checkbox", { name: "Select row Alice" });
+    const style = getComputedStyle(checkbox);
+    expect(parseFloat(style.minWidth)).toBeGreaterThanOrEqual(44);
+    expect(parseFloat(style.minHeight)).toBeGreaterThanOrEqual(44);
+  });
+
+  it("header select-all exposes aria-checked including the mixed state", async () => {
+    renderSelectionTable();
+    const selectAll = screen.getByRole("checkbox", { name: "Select all rows on page" });
+    expect(selectAll.getAttribute("aria-checked")).toBe("false");
+
+    fireEvent.click(screen.getByRole("checkbox", { name: "Select row Alice" }));
+    await waitFor(() => expect(selectAll.getAttribute("aria-checked")).toBe("mixed"));
+
+    fireEvent.click(selectAll);
+    await waitFor(() => expect(selectAll.getAttribute("aria-checked")).toBe("true"));
+    for (const name of ["Alice", "Bob", "Carol"]) {
+      expect(
+        screen.getByRole("checkbox", { name: `Select row ${name}` }).getAttribute("aria-checked"),
+      ).toBe("true");
+    }
+
+    fireEvent.click(selectAll);
+    await waitFor(() => expect(selectAll.getAttribute("aria-checked")).toBe("false"));
+  });
+
+  it("keyboard-only selection reaches the bulk-actions bar", async () => {
+    const user = userEvent.setup();
+    const { bulkExecute } = renderSelectionTable();
+    expect(screen.queryByText("1 selected")).toBeNull();
+
+    // Space on the focused checkbox (real keystroke; the role=checkbox
+    // frame is a native button, so Space activates it).
+    const alice = screen.getByRole("checkbox", { name: "Select row Alice" });
+    (alice as HTMLElement).focus();
+    expect(document.activeElement).toBe(alice);
+    await user.keyboard(" ");
+    await waitFor(() => expect(alice.getAttribute("aria-checked")).toBe("true"));
+
+    // The bulk bar appears with the count and reachable actions.
+    expect(await screen.findByText("1 selected")).toBeDefined();
+
+    const carol = screen.getByRole("checkbox", { name: "Select row Carol" });
+    (carol as HTMLElement).focus();
+    await user.keyboard(" ");
+    expect(await screen.findByText("2 selected")).toBeDefined();
+
+    // The bar's actions are real buttons — Enter activates without a pointer.
+    const archive = screen.getByRole("button", { name: "Archive" });
+    (archive as HTMLElement).focus();
+    await user.keyboard("{Enter}");
+    await waitFor(() => expect(bulkExecute).toHaveBeenCalledTimes(1));
+    expect(bulkExecute.mock.calls[0][0]).toHaveLength(2);
+  });
+
+  it("cards layout carries the same checkbox semantics", () => {
+    renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="cards"
+        enablePagination={false}
+        enableRowSelection
+      />,
+    );
+    const checkbox = screen.getByRole("checkbox", { name: "Select row Bob" });
+    expect(checkbox.getAttribute("aria-checked")).toBe("false");
+    fireEvent.click(checkbox);
+    expect(checkbox.getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByRole("checkbox", { name: "Select all rows" })).toBeDefined();
+  });
+});

package/src/components/DataTableBulkActions/index.tsx

@@ -1,10 +1,12 @@
 import { DotsThreeIcon } from "@phosphor-icons/react";
 import { useAccentOnSurface, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Button, zIndex } from "@multiplatform.one/forms";
 import { ConfirmDialog, DropdownMenu } from "@multiplatform.one/components";
 import { Text, View, XStack } from "tamagui";
 import type { BulkAction } from "../../types";
+import { withInterp } from "../../utils/withInterp";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 
 export type { BulkAction };
@@ -43,6 +45,7 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
 
   const [confirmAction, setConfirmAction] = useState<BulkAction<T> | null>(null);
   const [isExecuting, setIsExecuting] = useState<string | null>(null);
+  const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   // UX-P04 / Axiom 12: the selection count is accent-hued text on the bar
   // surface (page), so it needs the page-readable accent — `$accentColor` (the
@@ -135,9 +138,20 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
       >
         {showSelectionCount && (
           <Text fontSize="$3" fontWeight="600" color={countColor}>
+            {/* D-15: one whole-sentence key per variant (never concatenated
+                fragments — word order is locale-owned); withInterp fills the
+                params when no i18n instance is mounted (house table pattern). */}
             {filteredOutCount > 0
-              ? `${selectedItems.length} selected (+${filteredOutCount} filtered out)`
-              : `${selectedItems.length} selected`}
+              ? withInterp(
+                  t("{{n}} selected (+{{hidden}} filtered out)", {
+                    n: selectedItems.length,
+                    hidden: filteredOutCount,
+                  }),
+                  { n: selectedItems.length, hidden: filteredOutCount },
+                )
+              : withInterp(t("{{n}} selected", { n: selectedItems.length }), {
+                  n: selectedItems.length,
+                })}
           </Text>
         )}