@happyvertical/smrt-ui 0.42.4 → 0.42.5

package/dist/components/data/__tests__/DataTable.test.js

@@ -20,6 +20,14 @@ const data = [
     { id: 'ada', name: 'Ada', age: 36 },
     { id: 'linus', name: 'Linus', age: 54 },
 ];
+function setHorizontalOverflow(container, clientWidth, scrollWidth) {
+    Object.defineProperties(container, {
+        clientWidth: { configurable: true, value: clientWidth },
+        scrollWidth: { configurable: true, value: scrollWidth },
+        scrollLeft: { configurable: true, value: 0, writable: true },
+    });
+    window.dispatchEvent(new Event('resize'));
+}
 describe('DataTable', () => {
     it('renders caption, headers, cells, and a row per datum', () => {
         render(DataTable, { props: { data, columns, caption: 'People' } });
@@ -33,13 +41,67 @@ describe('DataTable', () => {
         render(DataTable, { props: { data: [], columns } });
         expect(screen.getByText('No data available')).toBeInTheDocument();
     });
-    it('toggles aria-sort when a sortable header is activated', async () => {
+    it('uses action-oriented labels and complete aria-sort transitions for sortable headers', async () => {
         render(DataTable, { props: { data, columns, sortable: true } });
         const nameHeader = screen.getByRole('columnheader', { name: 'Name' });
         // aria-sort is only present on the actively-sorted column.
         expect(nameHeader).not.toHaveAttribute('aria-sort');
-        await userEvent.click(screen.getByRole('button', { name: 'Name' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Name ascending' }));
         expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Name descending' }));
+        expect(nameHeader).toHaveAttribute('aria-sort', 'descending');
+        await userEvent.click(screen.getByRole('button', { name: 'Clear sorting for Name' }));
+        expect(nameHeader).not.toHaveAttribute('aria-sort');
+    });
+    it('announces the next action for each rule in a multi-column sort', async () => {
+        const multiSortColumns = [columns[0], { ...columns[1], sortable: true }];
+        render(DataTable, {
+            props: { data, columns: multiSortColumns, sortable: true },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Name ascending' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Age ascending' }), { shiftKey: true });
+        expect(screen.getByRole('button', { name: 'Sort Age descending' })).toBeInTheDocument();
+    });
+    it('keeps custom sortable headers interactive unless they explicitly opt out', async () => {
+        const customHeader = createRawSnippet(() => ({
+            render: () => '<span>Custom name</span>',
+        }));
+        const customColumns = [{ ...columns[0], header: customHeader }, columns[1]];
+        render(DataTable, {
+            props: { data, columns: customColumns, sortable: true },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Name ascending' }));
+        expect(screen.getByText('Custom name')).toBeInTheDocument();
+        expect(screen.getByRole('columnheader', { name: 'Custom name' })).toHaveAttribute('aria-sort', 'ascending');
+        const { container } = render(DataTable, {
+            props: {
+                data,
+                columns: [
+                    { ...columns[0], header: customHeader, headerSortMode: 'manual' },
+                    columns[1],
+                ],
+                sortable: true,
+            },
+        });
+        expect(within(container).queryByRole('button', { name: 'Sort Name ascending' })).not.toBeInTheDocument();
+    });
+    it('keeps automatic sort controls separate from interactive custom headers', async () => {
+        const customHeader = createRawSnippet(() => ({
+            render: () => '<button type="button">Column actions</button>',
+        }));
+        const customColumns = [{ ...columns[0], header: customHeader }, columns[1]];
+        render(DataTable, {
+            props: { data, columns: customColumns, sortable: true },
+        });
+        const customAction = screen.getByRole('button', { name: 'Column actions' });
+        const sortAction = screen.getByRole('button', {
+            name: 'Sort Name ascending',
+        });
+        expect(sortAction).not.toContainElement(customAction);
+        await userEvent.click(customAction);
+        expect(screen.getAllByRole('columnheader')[0]).not.toHaveAttribute('aria-sort');
+        await userEvent.click(sortAction);
+        expect(screen.getAllByRole('columnheader')[0]).toHaveAttribute('aria-sort', 'ascending');
     });
     it('routes a human sort click through the same controller transition as a command', async () => {
         const controller = createDataTableController({
@@ -47,7 +109,7 @@ describe('DataTable', () => {
         });
         const before = controller.getState();
         render(DataTable, { props: { data, columns, sortable: true, controller } });
-        await userEvent.click(screen.getByRole('button', { name: 'Name' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Name ascending' }));
         expect(controller.getState()).toEqual(transitionDataTableState(before, {
             type: 'toggleSorting',
             columnId: 'name',
@@ -66,7 +128,7 @@ describe('DataTable', () => {
         });
         render(DataTable, { props: { data, columns, sortable: true, controller } });
         const nameHeader = screen.getByRole('columnheader', { name: 'Name' });
-        await userEvent.click(screen.getByRole('button', { name: 'Name' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Name ascending' }));
         expect(nameHeader).not.toHaveAttribute('aria-sort');
         controller.replaceState(onStateChange.mock.calls[0][0]);
         await vi.waitFor(() => expect(nameHeader).toHaveAttribute('aria-sort', 'ascending'));
@@ -244,8 +306,8 @@ describe('DataTable', () => {
             .find((cell) => ['Ada', 'Linus'].includes(cell.textContent ?? ''))
             ?.textContent)
             .filter((name) => name !== undefined);
-        await userEvent.click(screen.getAllByRole('checkbox', { name: 'Select row' })[0]);
-        await userEvent.click(screen.getAllByRole('button', { name: 'Expand row' })[0]);
+        await userEvent.click(screen.getByRole('checkbox', { name: 'Select row 1' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Expand row 1' }));
         expectAdaSelectionAndExpansion();
         controller.dispatch({
             type: 'setSorting',
@@ -289,7 +351,7 @@ describe('DataTable', () => {
             props: { data, columns, modes: { pagination: 'manual' } },
         })).toThrow(/rowKey is required/);
     });
-    it('reveals expandable row content', async () => {
+    it('links localized expansion controls to their row detail', async () => {
         render(DataTable, {
             props: {
                 data,
@@ -300,8 +362,93 @@ describe('DataTable', () => {
                 })),
             },
         });
-        await userEvent.click(screen.getAllByRole('button', { name: 'Expand row' })[0]);
+        const expandButton = screen.getByRole('button', { name: 'Expand row 1' });
+        await userEvent.click(expandButton);
         expect(screen.getByText('Row detail')).toBeInTheDocument();
+        expect(expandButton).toHaveAttribute('aria-expanded', 'true');
+        const expansionId = expandButton.getAttribute('aria-controls');
+        expect(expansionId).toBeTruthy();
+        expect(document.getElementById(expansionId ?? '')).toHaveTextContent('Row detail');
+        expect(screen.getByRole('button', { name: 'Collapse row 1' })).toBe(expandButton);
+    });
+    it('keeps clickable rows semantic and ignores nested row actions', async () => {
+        const onRowClick = vi.fn();
+        const actionCell = createRawSnippet(() => ({
+            render: () => '<button type="button">Archive row</button>',
+        }));
+        const expandedContent = createRawSnippet(() => ({
+            render: () => '<p>Row detail</p>',
+        }));
+        render(DataTable, {
+            props: {
+                data,
+                columns: [
+                    ...columns,
+                    { id: 'actions', label: 'Actions', cell: actionCell },
+                ],
+                rowKey: 'id',
+                selectable: true,
+                expandedContent,
+                onRowClick,
+                rowLabel: (person) => person.name,
+            },
+        });
+        const adaRow = screen.getByRole('cell', { name: 'Ada' }).closest('tr');
+        expect(adaRow).not.toHaveAttribute('role');
+        expect(adaRow).toHaveAttribute('tabindex', '0');
+        await userEvent.click(screen.getByRole('checkbox', { name: 'Select Ada' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Expand Ada' }));
+        await userEvent.click(screen.getAllByRole('button', { name: 'Archive row' })[0]);
+        expect(onRowClick).not.toHaveBeenCalled();
+        await userEvent.click(screen.getByRole('cell', { name: 'Ada' }));
+        expect(onRowClick).toHaveBeenLastCalledWith(data[0], 0);
+        adaRow?.focus();
+        await userEvent.keyboard('{Enter}');
+        expect(onRowClick).toHaveBeenLastCalledWith(data[0], 0);
+    });
+    it('announces async states without replacing usable stale rows', async () => {
+        const onRetry = vi.fn();
+        const props = {
+            data,
+            columns,
+            rowKey: 'id',
+            selectable: true,
+            loading: true,
+            stale: true,
+            partialResults: true,
+            onRetry,
+        };
+        const { rerender } = render(DataTable, { props });
+        expect(screen.getByRole('table')).toHaveAttribute('aria-busy', 'true');
+        expect(screen.getByRole('cell', { name: 'Ada' })).toBeInTheDocument();
+        expect(screen.getByRole('status')).toHaveTextContent('Refreshing table data');
+        expect(screen.getByRole('status')).toHaveTextContent('Showing stale results');
+        expect(screen.getByRole('status')).toHaveTextContent('Showing partial results');
+        await userEvent.click(screen.getByRole('checkbox', { name: 'Select row 1' }));
+        await rerender({ ...props, error: 'Request failed' });
+        expect(screen.getByRole('cell', { name: 'Ada' })).toBeInTheDocument();
+        expect(screen.getByRole('table')).toHaveAttribute('aria-busy', 'false');
+        expect(screen.getByRole('alert')).toHaveTextContent('Request failed');
+        await userEvent.click(screen.getByRole('button', { name: 'Retry' }));
+        expect(onRetry).toHaveBeenCalledTimes(1);
+        await rerender({
+            ...props,
+            data: [],
+            stale: false,
+            partialResults: false,
+            error: null,
+        });
+        expect(screen.getByRole('status')).toHaveTextContent('Loading table data');
+        expect(screen.queryByText('No data available')).not.toBeInTheDocument();
+        await rerender({
+            ...props,
+            data: [],
+            loading: false,
+            error: 'Request failed',
+        });
+        expect(screen.getByRole('alert')).toHaveTextContent('Request failed');
+        await rerender({ ...props, data: [], loading: false, error: '' });
+        expect(screen.getByRole('alert')).toHaveTextContent('Unable to load table data');
     });
     it('rejects duplicate stable row keys and local totals that imply server paging', () => {
         expect(() => render(DataTable, {
@@ -337,6 +484,244 @@ describe('DataTable', () => {
             .map((row) => within(row).getAllByRole('cell')[0].textContent);
         expect(names).toEqual(['Ada', 'Zed']);
     });
+    it('makes only an overflowing narrow table a named, focusable scroll region', async () => {
+        const { container } = render(DataTable, {
+            props: { data, columns, caption: 'People' },
+        });
+        const tableContainer = container.querySelector('.data-table-container');
+        expect(tableContainer).not.toHaveAttribute('role');
+        expect(tableContainer).not.toHaveAttribute('tabindex');
+        setHorizontalOverflow(tableContainer, 320, 960);
+        await vi.waitFor(() => {
+            expect(screen.getByRole('region', {
+                name: 'People table, scroll horizontally to view more columns',
+            })).toBe(tableContainer);
+            expect(tableContainer).toHaveAttribute('tabindex', '0');
+            expect(screen.getByText('More columns →')).toBeVisible();
+            expect(tableContainer).not.toContainElement(screen.getByText('More columns →'));
+        });
+        await expectNoA11yViolations(container);
+        setHorizontalOverflow(tableContainer, 320, 320);
+        await vi.waitFor(() => {
+            expect(tableContainer).not.toHaveAttribute('role');
+            expect(tableContainer).not.toHaveAttribute('tabindex');
+            expect(screen.queryByText('More columns →')).not.toBeInTheDocument();
+        });
+    });
+    it('scrolls an overflowing narrow table with the keyboard', async () => {
+        const user = userEvent.setup();
+        const { container } = render(DataTable, {
+            props: { data, columns, caption: 'People' },
+        });
+        const tableContainer = container.querySelector('.data-table-container');
+        setHorizontalOverflow(tableContainer, 320, 960);
+        await vi.waitFor(() => expect(tableContainer).toHaveAttribute('role', 'region'));
+        tableContainer.focus();
+        await user.keyboard('{ArrowRight}');
+        expect(tableContainer.scrollLeft).toBe(256);
+        expect(screen.getByText('← More columns')).toBeVisible();
+        await user.keyboard('{End}');
+        expect(tableContainer.scrollLeft).toBe(640);
+        await user.keyboard('{Home}');
+        expect(tableContainer.scrollLeft).toBe(0);
+    });
+    it('renders grouped headers from final visible leaf columns without losing leaf sort controls', async () => {
+        const groupedColumns = [
+            {
+                ...columns[0],
+                headerPath: [{ id: 'identity', label: 'Identity' }],
+            },
+            {
+                ...columns[1],
+                sortable: true,
+                headerPath: [{ id: 'measures', label: 'Measures' }],
+            },
+        ];
+        render(DataTable, {
+            props: { data, columns: groupedColumns, sortable: true },
+        });
+        const identity = screen.getByRole('columnheader', { name: 'Identity' });
+        expect(identity).toHaveAttribute('scope', 'colgroup');
+        expect(identity).toHaveAttribute('colspan', '1');
+        expect(screen.getAllByRole('row')).toHaveLength(data.length + 2);
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Name ascending' }));
+        expect(screen.getByRole('columnheader', { name: 'Name' })).toHaveAttribute('aria-sort', 'ascending');
+    });
+    it('keeps a group header aligned when all of its leaves are pinned', () => {
+        const controller = createDataTableController({
+            columnIds: columns.map((column) => column.id),
+            initialState: {
+                columnPinning: [
+                    { columnId: 'name', position: 'start' },
+                    { columnId: 'age', position: 'start' },
+                ],
+            },
+        });
+        render(DataTable, {
+            props: {
+                data,
+                controller,
+                columns: columns.map((column) => ({
+                    ...column,
+                    headerPath: [{ id: 'detail', label: 'Detail' }],
+                })),
+            },
+        });
+        const group = screen.getByRole('columnheader', { name: 'Detail' });
+        expect(group).toHaveClass('data-table__cell--pinned-start');
+        expect(group).toHaveStyle({ left: '0px' });
+    });
+    it('keeps report structural rows semantic and outside data-row selection', () => {
+        const { container } = render(DataTable, {
+            props: {
+                data,
+                columns,
+                rowKey: 'id',
+                selectable: true,
+                structuralRows: [
+                    {
+                        id: 'subtotal',
+                        kind: 'subtotal',
+                        label: 'Current page total',
+                        values: { age: 90 },
+                    },
+                    {
+                        id: 'footer',
+                        kind: 'footer',
+                        label: 'All people',
+                        values: { age: 90 },
+                    },
+                ],
+            },
+        });
+        expect(screen.getByRole('rowheader', { name: /Subtotal: Current page total/ })).toBeInTheDocument();
+        expect(screen.getByRole('rowheader', { name: /Footer: All people/ })).toBeInTheDocument();
+        expect(screen.getAllByRole('checkbox')).toHaveLength(data.length + 1);
+        expect(container.querySelectorAll('tbody.data-table__body--structural input')).toHaveLength(0);
+        expect(container.querySelector('tfoot')).toContainElement(screen.getByRole('rowheader', { name: /Footer: All people/ }));
+    });
+    it('uses controlled width and pin state for the accessible header resize control', async () => {
+        const controller = createDataTableController({
+            columnIds: columns.map((column) => column.id),
+            initialState: {
+                columnWidths: [{ columnId: 'name', width: 120 }],
+                columnPinning: [{ columnId: 'name', position: 'start' }],
+            },
+        });
+        const { container } = render(DataTable, {
+            props: {
+                data,
+                columns: [{ ...columns[0], resizable: true }, columns[1]],
+                controller,
+            },
+        });
+        const nameHeader = screen.getByRole('columnheader', { name: 'Name' });
+        expect(nameHeader).toHaveClass('data-table__cell--pinned-start');
+        expect(nameHeader).toHaveStyle({ width: '120px', left: '0px' });
+        expect(nameHeader).toHaveAttribute('data-column-id', 'name');
+        const separator = screen.getByRole('separator', { name: 'Resize Name' });
+        separator.focus();
+        await userEvent.keyboard('{ArrowRight}');
+        expect(controller.getState().columnWidths).toContainEqual({
+            columnId: 'name',
+            width: 128,
+        });
+        expect(container.querySelector('[data-column-id="name"]')).toHaveAttribute('data-column-id', 'name');
+    });
+    it('uses rem constraints and rendered header widths for resize announcements', async () => {
+        const getBoundingClientRect = vi
+            .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+            .mockReturnValue({ width: 208 });
+        const originalRootFontSize = document.documentElement.style.fontSize;
+        try {
+            document.documentElement.style.fontSize = '16px';
+            const controller = createDataTableController({
+                columnIds: columns.map((column) => column.id),
+            });
+            render(DataTable, {
+                props: {
+                    data,
+                    controller,
+                    columns: [
+                        { ...columns[0], minWidth: '13rem', resizable: true },
+                        columns[1],
+                    ],
+                },
+            });
+            const separator = screen.getByRole('separator', { name: 'Resize Name' });
+            await vi.waitFor(() => expect(separator).toHaveAttribute('aria-valuenow', '208'));
+            separator.focus();
+            await userEvent.keyboard('{Home}');
+            expect(controller.getState().columnWidths).toContainEqual({
+                columnId: 'name',
+                width: 208,
+            });
+        }
+        finally {
+            getBoundingClientRect.mockRestore();
+            document.documentElement.style.fontSize = originalRootFontSize;
+        }
+    });
+    it('clamps restored widths to the declared header constraints', () => {
+        const controller = createDataTableController({
+            columnIds: columns.map((column) => column.id),
+            initialState: {
+                columnWidths: [{ columnId: 'name', width: 200 }],
+            },
+        });
+        render(DataTable, {
+            props: {
+                data,
+                controller,
+                columns: [
+                    { ...columns[0], maxWidth: '100px', resizable: true },
+                    columns[1],
+                ],
+            },
+        });
+        expect(screen.getByRole('columnheader', { name: 'Name' })).toHaveStyle({
+            width: '100px',
+        });
+        expect(screen.getByRole('separator', { name: 'Resize Name' })).toHaveAttribute('aria-valuenow', '100');
+    });
+    it('keeps custom resizable header content as the header name', () => {
+        const customHeader = createRawSnippet(() => ({
+            render: () => '<span>Account total in USD</span>',
+        }));
+        render(DataTable, {
+            props: {
+                data,
+                columns: [
+                    { ...columns[0], header: customHeader, resizable: true },
+                    columns[1],
+                ],
+            },
+        });
+        expect(screen.getByRole('columnheader', { name: /Account total in USD/ })).toBeInTheDocument();
+    });
+    it('keeps statically hidden columns hidden when a controller restores them visible', async () => {
+        const controller = createDataTableController({
+            columnIds: columns.map((column) => column.id),
+            initialState: {
+                columnVisibility: [
+                    { columnId: 'name', visible: true },
+                    { columnId: 'age', visible: true },
+                ],
+            },
+        });
+        render(DataTable, {
+            props: {
+                data,
+                columns: [columns[0], { ...columns[1], hidden: true }],
+                controller,
+            },
+        });
+        await vi.waitFor(() => expect(controller.getState().columnVisibility).toContainEqual({
+            columnId: 'age',
+            visible: false,
+        }));
+        expect(screen.queryByRole('columnheader', { name: 'Age' })).not.toBeInTheDocument();
+    });
     it('is axe-clean', async () => {
         const { container } = render(DataTable, {
             props: { data, columns, caption: 'People' },

package/dist/components/data/__tests__/DataTableConformance.test.js

@@ -0,0 +1,212 @@
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import { createDataTableConformanceRows, dataTableConformanceColumns, dataTableConformanceRows, dataTableConformanceScenarios, dataTableConformanceStructuralRows, } from '../__fixtures__/DataTableConformanceFixture.js';
+import DataTable from '../DataTable.svelte';
+import { createDataTableController, } from '../DataTableController.js';
+function isManualQueryCommand(command) {
+    return (command?.type === 'setSearch' ||
+        command?.type === 'setFilters' ||
+        command?.type === 'setSorting' ||
+        command?.type === 'toggleSorting' ||
+        command?.type === 'setPage' ||
+        command?.type === 'setPageSize');
+}
+/**
+ * A deterministic consumer-side model for the guide's manual-query contract.
+ * The table owns the query state; the consumer owns matching results and never
+ * lets a late response replace the current query's rows.
+ */
+function createManualQueryHost(initialRows) {
+    let revision = 0;
+    let current = {
+        queryFingerprint: '',
+        queryRevision: 'revision-0',
+    };
+    let rows = initialRows;
+    return {
+        begin(state) {
+            revision += 1;
+            current = {
+                queryFingerprint: JSON.stringify({
+                    search: state.search,
+                    filters: state.filters,
+                    sorting: state.sorting,
+                    page: state.page,
+                    pageSize: state.pageSize,
+                }),
+                queryRevision: `revision-${revision}`,
+            };
+            return { ...current };
+        },
+        resolve(response) {
+            if (response.queryFingerprint !== current.queryFingerprint ||
+                response.queryRevision !== current.queryRevision) {
+                return false;
+            }
+            rows = response.rows;
+            return true;
+        },
+        rows: () => rows,
+    };
+}
+function setHorizontalOverflow(container, clientWidth, scrollWidth) {
+    Object.defineProperties(container, {
+        clientWidth: { configurable: true, value: clientWidth },
+        scrollWidth: { configurable: true, value: scrollWidth },
+        scrollLeft: { configurable: true, value: 0, writable: true },
+    });
+    window.dispatchEvent(new Event('resize'));
+}
+describe('DataTable release conformance', () => {
+    it('keeps every release scenario available to both tests and the playground', () => {
+        expect(dataTableConformanceScenarios.map((scenario) => scenario.id)).toEqual([
+            'semantic-interaction',
+            'manual-query',
+            'async-lifecycle',
+            'responsive-overflow',
+            'report-layout',
+            'scale-virtualization',
+        ]);
+        expect(dataTableConformanceScenarios.every((scenario) => scenario.contracts.length > 0)).toBe(true);
+    });
+    it('renders an axe-clean report with grouped headers and structural summaries', async () => {
+        const controller = createDataTableController({
+            columnIds: dataTableConformanceColumns.map((column) => column.id),
+            initialState: {
+                columnWidths: [{ columnId: 'account', width: 240 }],
+                columnPinning: [{ columnId: 'account', position: 'start' }],
+            },
+        });
+        const { container } = render(DataTable, {
+            props: {
+                data: dataTableConformanceRows,
+                columns: dataTableConformanceColumns,
+                rowKey: 'id',
+                controller,
+                structuralRows: dataTableConformanceStructuralRows,
+                caption: 'Conformance forecast report',
+            },
+        });
+        expect(screen.getByRole('columnheader', { name: 'Dimensions' })).toHaveAttribute('scope', 'colgroup');
+        expect(screen.getByRole('rowheader', { name: /Current forecast/ })).toBeInTheDocument();
+        expect(screen.getByRole('rowheader', { name: /All accounts/ })).toBeInTheDocument();
+        await expectNoA11yViolations(container);
+    });
+    it('keeps a manual query usable through stale, failed, and retry states', async () => {
+        const onRetry = vi.fn();
+        const controller = createDataTableController({
+            columnIds: dataTableConformanceColumns.map((column) => column.id),
+            modes: { filtering: 'manual', sorting: 'manual', pagination: 'manual' },
+            initialState: { page: 2, pageSize: 25 },
+        });
+        const props = {
+            data: dataTableConformanceRows,
+            columns: dataTableConformanceColumns,
+            rowKey: 'id',
+            controller,
+            totalRows: 120,
+            loading: true,
+            stale: true,
+            partialResults: true,
+            onRetry,
+            caption: 'Manual query results',
+        };
+        const { rerender } = render(DataTable, { props });
+        expect(screen.getByRole('cell', { name: 'Subscription revenue' })).toBeInTheDocument();
+        expect(screen.getByRole('status')).toHaveTextContent('Showing stale results');
+        expect(screen.getByRole('table')).toHaveAttribute('aria-busy', 'true');
+        await rerender({ ...props, loading: false, error: 'Request failed' });
+        expect(screen.getByRole('alert')).toHaveTextContent('Request failed');
+        await userEvent.click(screen.getByRole('button', { name: 'Retry' }));
+        expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+    it('commits only the current manually owned search, sort, filter, and page response', async () => {
+        const controller = createDataTableController({
+            columnIds: dataTableConformanceColumns.map((column) => column.id),
+            modes: { filtering: 'manual', sorting: 'manual', pagination: 'manual' },
+            initialState: { page: 1, pageSize: 1 },
+        });
+        const host = createManualQueryHost(dataTableConformanceRows);
+        const requests = [];
+        const unsubscribe = controller.subscribe((transition) => {
+            if (isManualQueryCommand(transition.command)) {
+                requests.push(host.begin(transition.next.state));
+            }
+        });
+        render(DataTable, {
+            props: {
+                data: dataTableConformanceRows,
+                columns: dataTableConformanceColumns,
+                rowKey: 'id',
+                controller,
+                sortable: true,
+                totalRows: 2,
+                caption: 'Manual host results',
+            },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Sort Account ascending' }));
+        controller.dispatch({ type: 'setSearch', search: 'Growth' });
+        controller.dispatch({
+            type: 'setSorting',
+            sorting: [{ columnId: 'account', direction: 'desc' }],
+        });
+        controller.dispatch({
+            type: 'setFilters',
+            filters: [{ columnId: 'status', operator: 'equals', value: 'On track' }],
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Next page' }));
+        expect(requests).toHaveLength(5);
+        expect(JSON.parse(requests[1].queryFingerprint)).toMatchObject({
+            search: 'Growth',
+        });
+        expect(requests[0]).not.toEqual(requests[4]);
+        expect(host.resolve({
+            ...requests[0],
+            rows: [dataTableConformanceRows[1]],
+        })).toBe(false);
+        expect(host.rows()).toEqual(dataTableConformanceRows);
+        expect(host.resolve({
+            ...requests[4],
+            rows: [dataTableConformanceRows[0]],
+        })).toBe(true);
+        expect(host.rows()).toEqual([dataTableConformanceRows[0]]);
+        unsubscribe();
+    });
+    it('exposes only real horizontal overflow as a named keyboard-scroll region', async () => {
+        const { container } = render(DataTable, {
+            props: {
+                data: dataTableConformanceRows,
+                columns: dataTableConformanceColumns,
+                rowKey: 'id',
+                caption: 'Responsive conformance report',
+            },
+        });
+        const tableContainer = container.querySelector('.data-table-container');
+        setHorizontalOverflow(tableContainer, 320, 960);
+        await vi.waitFor(() => expect(tableContainer).toHaveAttribute('aria-label', 'Responsive conformance report table, scroll horizontally to view more columns'));
+        tableContainer.focus();
+        await fireEvent.keyDown(tableContainer, { key: 'End' });
+        expect(tableContainer.scrollLeft).toBe(640);
+        await expectNoA11yViolations(container);
+    });
+    it('keeps virtual rows keyed independently from their rendered window', async () => {
+        const rows = createDataTableConformanceRows(120);
+        const { container } = render(DataTable, {
+            props: {
+                data: rows,
+                columns: dataTableConformanceColumns.slice(0, 2),
+                rowKey: 'id',
+                virtualization: { rowHeight: 24, viewportHeight: 96, overscan: 1 },
+                caption: 'Virtual conformance rows',
+            },
+        });
+        const tableContainer = container.querySelector('.data-table-container');
+        expect(screen.getByRole('table')).toHaveAttribute('aria-rowcount', '122');
+        expect(screen.getByText('Subscription revenue 1')).toBeInTheDocument();
+        tableContainer.scrollTop = 240;
+        await fireEvent.scroll(tableContainer);
+        await vi.waitFor(() => expect(screen.getByText('Subscription revenue 11')).toBeInTheDocument());
+    });
+});