@redsift/ds-mcp-server 12.5.1-muiv6-alpha.6 → 12.5.1

package/data/demos/patterns/_shared/StateDebugPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import type { GridApiPro } from '@mui/x-data-grid-pro/models/gridApiPro';
+import type { GridApiPremium } from '@mui/x-data-grid-premium';
 
 // localStorage key categories — must match @redsift/table internals
 const LS_CATEGORIES = [
@@ -13,7 +13,7 @@ const LS_CATEGORIES = [
 ];
 
 interface StateDebugPanelProps {
-  apiRef: React.MutableRefObject<GridApiPro>;
+  apiRef: React.MutableRefObject<GridApiPremium | null>;
   useRouter: () => { pathname: string; search: string; historyReplace: (newSearch: string) => void };
   localStorageVersion?: number;
 }

package/data/demos/patterns/_shared/columns.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { createColumn, TextCell } from '@redsift/table';
 import { Flexbox, Icon, IconButtonLink, Pill } from '@redsift/design-system';
 import { mdiArrowRight, mdiCheck, mdiClose } from '@redsift/icons';
-import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-pro';
+import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-premium';
 import { Row } from './data';
 
 // -- Option constants -------------------------------------------------------
@@ -80,6 +80,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'Items',
     headerName: 'Item',
     flex: 1,
+    display: 'flex',
     ...createColumn('string'),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value}</TextCell>,
   },
@@ -88,6 +89,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'Category',
     headerName: 'Category',
     width: 120,
+    display: 'flex',
     ...createColumn('singleSelect'),
     valueOptions: CATEGORY_OPTIONS,
     renderCell: ({ value }: GridRenderCellParams) => <Pill color={categoryColor(value)}>{value}</Pill>,
@@ -97,6 +99,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'Paid',
     headerName: 'Price',
     width: 100,
+    display: 'flex',
     ...createColumn('number'),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{formatCurrency(value as number)}</TextCell>,
   },
@@ -105,8 +108,9 @@ export const columns: GridColDef<Row>[] = [
     field: 'Date',
     headerName: 'Date',
     width: 140,
+    display: 'flex',
     ...createColumn('date'),
-    valueGetter: (params: any) => parseDate(params.value),
+    valueGetter: (value: string) => parseDate(value),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value ? formatDate(value as Date) : '—'}</TextCell>,
   },
   // DateTime
@@ -114,8 +118,9 @@ export const columns: GridColDef<Row>[] = [
     field: 'DateTime',
     headerName: 'Date & Time',
     width: 180,
+    display: 'flex',
     ...createColumn('dateTime'),
-    valueGetter: (params: any) => parseDate(params.value),
+    valueGetter: (value: string) => parseDate(value),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value ? formatDateTime(value as Date) : '—'}</TextCell>,
   },
   // Boolean — in stock
@@ -123,6 +128,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'InStock',
     headerName: 'In Stock',
     width: 90,
+    display: 'flex',
     type: 'boolean',
     renderCell: ({ value }: GridRenderCellParams) =>
       value ? (
@@ -136,6 +142,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'Allergens',
     headerName: 'Allergens',
     flex: 1,
+    display: 'flex',
     ...createColumn('multiSelect'),
     valueOptions: ALLERGEN_OPTIONS,
     sortable: false,
@@ -158,6 +165,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'Tags',
     headerName: 'Tags',
     flex: 1,
+    display: 'flex',
     ...createColumn('tags'),
     valueOptions: TAG_OPTIONS,
     sortable: false,
@@ -180,6 +188,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'actions',
     headerName: '',
     width: 56,
+    display: 'flex',
     hideable: false,
     sortable: false,
     filterable: false,

package/data/demos/patterns/_shared/defaults.ts

@@ -1,4 +1,4 @@
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 /**
  * Default filter model applied to all pattern examples.

package/data/demos/patterns/_shared/filter-helpers.ts

@@ -1,4 +1,4 @@
-import { GridFilterModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel } from '@mui/x-data-grid-premium';
 import { Row } from './data';
 
 // -- Types ------------------------------------------------------------------

package/data/demos/patterns/_shared/helpers.tsx

@@ -8,7 +8,7 @@ import {
   GridToolbarExport,
   GridToolbarFilterButton,
   GridToolbarQuickFilter,
-} from '@mui/x-data-grid-pro';
+} from '@mui/x-data-grid-premium';
 
 // -- Toolbar ----------------------------------------------------------------
 
@@ -35,7 +35,7 @@ export const BulkActionBar: React.FC<{ count: number; onLog?: () => void; onDele
 }) => {
   if (count === 0) return null;
   return (
-    <Flexbox gap="8px" alignItems="center" style={{ padding: '8px 0' }}>
+    <Flexbox gap="8px" alignItems="center" style={{ padding: '8px 0' }} role="status">
       <Pill color="info">{count} selected</Pill>
       {onLog && (
         <Button variant="secondary" onClick={onLog}>
@@ -60,6 +60,8 @@ export const NoRowsOverlay = () => (
     justifyContent="center"
     gap="12px"
     style={{ height: '100%', padding: '48px 0' }}
+    role="status"
+    aria-label="No records found"
   >
     <Icon icon={mdiMagnify} size="large" color="grey" />
     <Text variant="body" color="grey">

package/data/demos/patterns/_shared/server-logic.ts

@@ -1,4 +1,4 @@
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 import { Row, allRows } from './data';
 import { Aggregates, computeAggregates, applyFilters } from './filter-helpers';
 

package/data/demos/patterns/_shared/story-helpers.ts

@@ -179,6 +179,27 @@ export const assertChartsRendered = async (canvasElement: HTMLElement, minCount
   });
 };
 
+/**
+ * Wait for chart container elements to be fully present in the DOM.
+ * Unlike `assertChartsRendered` (which checks for any SVG with data, including icons),
+ * this verifies the actual PieChart and BarChart containers have mounted.
+ *
+ * Note: we check for `.redsift-piechart` / `.redsift-barchart` only. These classes
+ * are only present when the chart has data (RenderedPieChart / RenderedBarChart),
+ * not during the loading state (LoadingPieChart). We intentionally do NOT check
+ * for `role="region"` because client-side crossfiltered charts wrapped in
+ * <WithFilters> receive `role="listbox"` (via FilterablePieChart / FilterableBarChart).
+ */
+export const waitForChartContainers = async (canvasElement: HTMLElement) => {
+  await waitFor(
+    () => {
+      expect(canvasElement.querySelector('.redsift-piechart')).toBeTruthy();
+      expect(canvasElement.querySelector('.redsift-barchart')).toBeTruthy();
+    },
+    { timeout: 25000 }
+  );
+};
+
 // ---------------------------------------------------------------------------
 // PieChart — slice count and legend labels
 // ---------------------------------------------------------------------------
@@ -292,7 +313,7 @@ export const assertBulkActionBarVisible = async (canvasElement: HTMLElement, exp
       expect(selectionPill).toBeTruthy();
       expect(selectionPill!.textContent).toContain(`${expectedCount} selected`);
     },
-    { timeout: 5000 }
+    { timeout: 10000 }
   );
 };
 
@@ -313,6 +334,8 @@ export const assertBulkActionBarHidden = async (canvasElement: HTMLElement) => {
 export const clickHeaderCheckbox = async (canvasElement: HTMLElement) => {
   // Wait for the grid to be stable: rows present, no loading, checkbox exists.
   // This prevents clicking during a mid-render where the grid ignores the click.
+  // Server-side grids may briefly re-render after MSW/router state changes, so
+  // allow 10 s for the checkbox to appear.
   await waitFor(
     () => {
       const rows = canvasElement.querySelectorAll('.MuiDataGrid-row');
@@ -320,25 +343,42 @@ export const clickHeaderCheckbox = async (canvasElement: HTMLElement) => {
       const headerCheckbox = canvasElement.querySelector('.MuiDataGrid-columnHeaderCheckbox input[type="checkbox"]');
       expect(headerCheckbox).toBeTruthy();
     },
-    { timeout: 3000 }
+    { timeout: 10000 }
   );
-  // Small yield to let React finish any pending microtask re-renders
-  await new Promise((resolve) => setTimeout(resolve, 200));
-  const headerCheckbox = canvasElement.querySelector('.MuiDataGrid-columnHeaderCheckbox input[type="checkbox"]')!;
-  fireEvent.click(headerCheckbox);
-  // Wait for React and MUI DataGrid to process the selection change
-  await new Promise((resolve) => setTimeout(resolve, 200));
+  // Ensure no loading overlay is active (server-side grids replace content during fetch)
+  await waitFor(() => {
+    const loading = canvasElement.querySelector('.MuiDataGrid-overlayWrapper [role="progressbar"]');
+    expect(loading).toBeFalsy();
+  });
+  // Yield to let React finish any pending microtask re-renders
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  const headerCheckbox = canvasElement.querySelector(
+    '.MuiDataGrid-columnHeaderCheckbox input[type="checkbox"]'
+  ) as HTMLInputElement;
+  // Use userEvent.click for reliable event dispatching — fireEvent.click on a hidden
+  // checkbox input doesn't trigger the native change event in Playwright/Chromium,
+  // causing server-side pagination grids to miss the selection update.
+  await userEvent.click(headerCheckbox);
+  // Wait for React and MUI DataGrid to process the selection change.
+  // Server-side grids with router state sync need extra time.
+  await new Promise((resolve) => setTimeout(resolve, 500));
 };
 
 /** Click a row checkbox by row index (0-based, within the visible page). */
 export const clickRowCheckbox = async (canvasElement: HTMLElement, rowIndex: number) => {
-  await waitFor(() => {
-    const rows = canvasElement.querySelectorAll('.MuiDataGrid-row');
-    expect(rows.length).toBeGreaterThan(rowIndex);
-  });
+  // Wait for BOTH the row AND its checkbox to be present.
+  // Server-side grids may render rows before checkboxes are mounted.
+  await waitFor(
+    () => {
+      const rows = canvasElement.querySelectorAll('.MuiDataGrid-row');
+      expect(rows.length).toBeGreaterThan(rowIndex);
+      const cb = rows[rowIndex].querySelector('input[type="checkbox"]');
+      expect(cb).toBeTruthy();
+    },
+    { timeout: 5000 }
+  );
   const rows = canvasElement.querySelectorAll('.MuiDataGrid-row');
-  const checkbox = rows[rowIndex].querySelector('input[type="checkbox"]');
-  if (!checkbox) throw new Error(`Could not find checkbox in row ${rowIndex}`);
+  const checkbox = rows[rowIndex].querySelector('input[type="checkbox"]')!;
   await userEvent.click(checkbox);
   // Wait for React and MUI DataGrid to process the selection change
   await new Promise((resolve) => setTimeout(resolve, 200));
@@ -641,9 +681,14 @@ export const clickBarChartBar = async (canvasElement: HTMLElement, key: string)
 // Chart accessibility — region, screen reader content, keyboard nav
 // ---------------------------------------------------------------------------
 
-/** Get all chart container regions (elements with role="region" inside .redsift-chart-container). */
+/**
+ * Get all chart container elements. Uses `.redsift-chart-container` without a
+ * role filter because the role varies: standalone charts have `role="region"`,
+ * while client-side crossfiltered charts wrapped in <WithFilters> receive
+ * `role="listbox"` from FilterablePieChart / FilterableBarChart.
+ */
 export const getChartRegions = (canvasElement: HTMLElement): HTMLElement[] =>
-  Array.from(canvasElement.querySelectorAll('.redsift-chart-container[role="region"]'));
+  Array.from(canvasElement.querySelectorAll('.redsift-chart-container'));
 
 /** Assert a chart container region exists with the given aria-label substring. */
 export const assertChartRegion = async (canvasElement: HTMLElement, labelSubstring: string) => {
@@ -907,18 +952,39 @@ export const waitForPaginationEnabled = async (canvasElement: HTMLElement, direc
 
 /**
  * Change the page size via the MUI pagination "Rows per page" select.
- * The dropdown menu renders as a portal on document.body.
+ * MUI Material v7's `useSlot()` applies `.MuiTablePagination-select` to the
+ * Select wrapper, NOT the inner display div that has the `onMouseDown` handler.
+ * We target `[role="combobox"]` inside the pagination toolbar instead, which is
+ * the actual interactive element rendered by `SelectInput`.
+ * `userEvent.click` in the Storybook Playwright runner doesn't reliably
+ * trigger mouseDown on MUI Select, so we use `fireEvent.mouseDown` directly,
+ * then `userEvent.click` to select the option in the dropdown.
  */
 export const changePageSize = async (canvasElement: HTMLElement, newSize: number) => {
-  const select = canvasElement.querySelector('.MuiTablePagination-select') as HTMLElement | null;
-  if (!select) throw new Error('Could not find page size select');
-  await userEvent.click(select);
-  // The menu renders as a MUI Popper on document.body
-  await waitFor(() => {
-    const options = document.querySelectorAll('li[role="option"]');
-    expect(options.length).toBeGreaterThan(0);
-  });
-  const options = document.querySelectorAll('li[role="option"]');
+  // Wait for the pagination combobox to be present
+  await waitFor(
+    () => {
+      const el = canvasElement.querySelector('.MuiTablePagination-toolbar [role="combobox"]');
+      expect(el).toBeTruthy();
+    },
+    { timeout: 5000 }
+  );
+
+  const select = canvasElement.querySelector('.MuiTablePagination-toolbar [role="combobox"]') as HTMLElement;
+
+  // Use fireEvent.mouseDown to reliably open MUI v7 Select dropdown
+  fireEvent.mouseDown(select);
+
+  // Wait for the dropdown to render (MUI uses a portal on document.body)
+  await waitFor(
+    () => {
+      const options = document.querySelectorAll('[role="option"]');
+      expect(options.length).toBeGreaterThan(0);
+    },
+    { timeout: 5000 }
+  );
+
+  const options = document.querySelectorAll('[role="option"]');
   const target = Array.from(options).find((opt) => opt.textContent === String(newSize));
   if (!target) throw new Error(`Could not find page size option "${newSize}"`);
   await userEvent.click(target);
@@ -937,17 +1003,18 @@ export const openColumnsPanel = async (canvasElement: HTMLElement) => {
   await userEvent.click(btn);
   // Wait for the panel to appear on document.body
   await waitFor(() => {
-    const panel = document.querySelector('.MuiDataGrid-columnsPanel');
+    const panel = document.querySelector('.MuiDataGrid-columnsManagement');
     expect(panel).toBeTruthy();
   });
 };
 
 /** Toggle a column's visibility in the columns panel by its label text. */
 export const toggleColumnInPanel = async (fieldLabel: string) => {
-  const panel = document.querySelector('.MuiDataGrid-columnsPanel');
+  const panel = document.querySelector('.MuiDataGrid-columnsManagement');
   if (!panel) throw new Error('Columns panel is not open');
-  const labels = Array.from(panel.querySelectorAll('.MuiFormControlLabel-root'));
-  const target = labels.find((label) => label.textContent?.includes(fieldLabel));
+  // MUI v8 renders each column toggle as a baseCheckbox slot with class columnsManagementRow
+  const rows = Array.from(panel.querySelectorAll('.MuiDataGrid-columnsManagementRow'));
+  const target = rows.find((row) => row.textContent?.includes(fieldLabel));
   if (!target) throw new Error(`Could not find column "${fieldLabel}" in columns panel`);
   const checkbox = target.querySelector('input[type="checkbox"]') as HTMLElement | null;
   if (!checkbox) throw new Error(`Could not find checkbox for column "${fieldLabel}"`);
@@ -959,7 +1026,7 @@ export const closeColumnsPanel = async () => {
   // Press Escape to close the panel
   await userEvent.keyboard('{Escape}');
   await waitFor(() => {
-    const panel = document.querySelector('.MuiDataGrid-columnsPanel');
+    const panel = document.querySelector('.MuiDataGrid-columnsManagement');
     expect(panel).toBeFalsy();
   });
 };
@@ -1151,6 +1218,12 @@ interface SyncAssertionOptions {
   checkDensity?: boolean;
   /** Whether to check column order sync */
   checkColumnOrder?: boolean;
+  /** Whether to check row grouping sync */
+  checkRowGrouping?: boolean;
+  /** Whether to check aggregation sync */
+  checkAggregation?: boolean;
+  /** Whether to check pivot sync */
+  checkPivot?: boolean;
 }
 
 /**
@@ -1169,6 +1242,9 @@ export const assertAllStatesInSync = async ({
   checkPagination = true,
   checkDensity = true,
   checkColumnOrder = false,
+  checkRowGrouping = false,
+  checkAggregation = false,
+  checkPivot = false,
 }: SyncAssertionOptions) => {
   await waitFor(
     () => {
@@ -1275,6 +1351,53 @@ export const assertAllStatesInSync = async ({
           expect(urlColumnOrder).toBe(inner);
         }
       }
+
+      // --- Row Grouping ---
+      if (checkRowGrouping) {
+        const lsKey = `${pathname}:${localStorageVersion}:rowGroupingModel`;
+        const lsRaw = localStorage.getItem(lsKey);
+        const lsRowGrouping = lsRaw ? JSON.parse(lsRaw) : '';
+
+        const urlRowGrouping = url.get('_rowGrouping');
+        if (lsRowGrouping && urlRowGrouping) {
+          // localStorage: `_rowGrouping=[a,b,c]`
+          // URL: `_rowGrouping=a,b,c`
+          const lsParams = new URLSearchParams(lsRowGrouping);
+          const lsValue = lsParams.get('_rowGrouping') ?? '';
+          const inner = lsValue.startsWith('[') && lsValue.endsWith(']') ? lsValue.slice(1, -1) : lsValue;
+          expect(urlRowGrouping).toBe(inner);
+        }
+      }
+
+      // --- Aggregation ---
+      if (checkAggregation) {
+        const lsKey = `${pathname}:${localStorageVersion}:aggregationModel`;
+        const lsRaw = localStorage.getItem(lsKey);
+        const lsAggregation = lsRaw ? JSON.parse(lsRaw) : '';
+
+        const urlAggregation = url.get('_aggregation');
+        if (lsAggregation && urlAggregation) {
+          // Both use same format: `_aggregation=field.func,...`
+          const lsParams = new URLSearchParams(lsAggregation);
+          const lsValue = lsParams.get('_aggregation') ?? '';
+          expect(urlAggregation).toBe(lsValue);
+        }
+      }
+
+      // --- Pivot ---
+      if (checkPivot) {
+        const lsKey = `${pathname}:${localStorageVersion}:pivotModel`;
+        const lsRaw = localStorage.getItem(lsKey);
+        const lsPivot = lsRaw ? JSON.parse(lsRaw) : '';
+
+        const urlPivot = url.get('_pivot');
+        if (lsPivot && urlPivot) {
+          // Both use same format: `_pivot=cols:f1;rows:f2;vals:f3.sum`
+          const lsParams = new URLSearchParams(lsPivot);
+          const lsValue = lsParams.get('_pivot') ?? '';
+          expect(urlPivot).toBe(lsValue);
+        }
+      }
     },
     { timeout: 5000 }
   );

package/data/demos/patterns/crossfiltered-datagrid-client-side/CrossfilteredDatagridClientSide.interaction.stories.tsx

@@ -28,6 +28,13 @@ import {
   clickBodyRow,
   clickPieSlice,
   clickBarChartBar,
+  assertChartRegion,
+  assertScreenReaderContent,
+  assertDataPointAriaLabels,
+  tabIntoChart,
+  assertScreenReaderIncludes,
+  assertScreenReaderSequence,
+  waitForChartContainers,
 } from '../_shared/story-helpers';
 import {
   TOTAL,
@@ -502,3 +509,145 @@ export const WithError: Story = {
     expect(retryButton).toBeTruthy();
   },
 };
+
+// ---------------------------------------------------------------------------
+// Accessibility — ARIA structure, chart regions, and data point labels
+// ---------------------------------------------------------------------------
+
+export const Accessibility: Story = {
+  render: () => <Example />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForGridToLoad(canvas);
+    await waitForChartContainers(canvasElement);
+
+    // --- Chart container regions ---
+    await assertChartRegion(canvasElement, 'Items');
+    await assertChartRegion(canvasElement, 'Tags');
+
+    // --- Screen reader hidden regions ---
+    await assertScreenReaderContent(canvasElement, 'Items', 'Pie chart showing the number of items by product');
+    await assertScreenReaderContent(canvasElement, 'Items', 'Click a slice or press Enter to filter the grid');
+    await assertScreenReaderContent(canvasElement, 'Tags', 'Bar chart showing the number of items by tag');
+    await assertScreenReaderContent(canvasElement, 'Tags', 'Click a bar or press Enter to filter the grid');
+
+    // --- Data point aria-labels ---
+    await assertDataPointAriaLabels(canvasElement, '.redsift-arc');
+    await assertDataPointAriaLabels(canvasElement, '.redsift-bar');
+
+    // --- Interactive data points (listbox options) ---
+    // Crossfiltered charts wrapped in <WithFilters> use role="listbox" with
+    // role="option" on each slice/bar (via FilterablePieChart/FilterableBarChart),
+    // rather than tabindex="0" on each data point.
+    const pieChart = canvasElement.querySelector('.redsift-piechart');
+    expect(pieChart).toBeTruthy();
+    expect(pieChart!.querySelectorAll('[role="option"]').length).toBeGreaterThanOrEqual(2);
+
+    const barChart = canvasElement.querySelector('.redsift-barchart');
+    expect(barChart).toBeTruthy();
+    expect(barChart!.querySelectorAll('[role="option"]').length).toBeGreaterThanOrEqual(2);
+
+    // --- DataCard listbox ARIA ---
+    const categoryListbox = getListbox(canvas, /filter by category/i);
+    expect(categoryListbox).toHaveAttribute('role', 'listbox');
+    const allergenListbox = getListbox(canvas, /filter by allergen/i);
+    expect(allergenListbox).toHaveAttribute('role', 'listbox');
+
+    // --- DataGrid ARIA ---
+    const grid = canvasElement.querySelector('[role="grid"]');
+    expect(grid).toBeTruthy();
+    expect(grid!.getAttribute('aria-rowcount')).toBeTruthy();
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Keyboard navigation — tab into charts
+// ---------------------------------------------------------------------------
+
+export const KeyboardNavigationCharts: Story = {
+  render: () => <Example />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForGridToLoad(canvas);
+    await waitForChartContainers(canvasElement);
+
+    // Tab into the PieChart — a slice should receive focus
+    const focusedSliceEl = await tabIntoChart(canvasElement, '.redsift-piechart');
+    expect(focusedSliceEl).toBeTruthy();
+
+    // Tab into the BarChart — a bar should receive focus
+    const focusedBarEl = await tabIntoChart(canvasElement, '.redsift-barchart');
+    expect(focusedBarEl).toBeTruthy();
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Virtual Screen Reader — announcement sequence verification
+// ---------------------------------------------------------------------------
+
+export const ScreenReaderPieChart: Story = {
+  render: () => <Example />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForGridToLoad(canvas);
+    await waitForChartContainers(canvasElement);
+
+    const pieContainer = canvasElement.querySelector('.redsift-chart-container[aria-label*="Items"]');
+    expect(pieContainer).toBeTruthy();
+
+    await assertScreenReaderSequence(pieContainer as HTMLElement, [
+      'Items distribution',
+      'Interactive chart',
+      'Pie chart showing the number of items by product. Click a slice or press Enter to filter the grid by that item.',
+      'Click a slice or press Enter to filter the grid by that item.',
+    ]);
+  },
+};
+
+export const ScreenReaderBarChart: Story = {
+  render: () => <Example />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForGridToLoad(canvas);
+    await waitForChartContainers(canvasElement);
+
+    const barContainer = canvasElement.querySelector('.redsift-chart-container[aria-label*="Tags"]');
+    expect(barContainer).toBeTruthy();
+
+    await assertScreenReaderSequence(barContainer as HTMLElement, [
+      'Tags distribution',
+      'Interactive chart',
+      'Bar chart showing the number of items by tag. Click a bar or press Enter to filter the grid by that tag.',
+      'Click a bar or press Enter to filter the grid by that tag.',
+    ]);
+  },
+};
+
+export const ScreenReaderEmptyState: Story = {
+  render: () => <WithEmptyStateExample />,
+  play: async ({ canvasElement }) => {
+    await assertScreenReaderIncludes(canvasElement, [
+      'No records found',
+      'Try adjusting your filters or search criteria',
+    ]);
+  },
+};
+
+export const ScreenReaderErrorState: Story = {
+  render: () => <WithErrorExample />,
+  play: async ({ canvasElement }) => {
+    await assertScreenReaderIncludes(canvasElement, [
+      'Failed to load data. Please check your connection and try again.',
+      'Retry',
+    ]);
+  },
+};
+
+export const ScreenReaderLoadingState: Story = {
+  render: () => <WithLoadingExample />,
+  play: async ({ canvasElement }) => {
+    const root = canvasElement.querySelector('[aria-busy="true"]');
+    expect(root).toBeTruthy();
+    expect(root!.getAttribute('aria-label')).toContain('loading');
+  },
+};

package/data/demos/patterns/crossfiltered-datagrid-client-side/example.tsx

@@ -76,6 +76,10 @@ export default () => (
           >
             <PieChart
               title="Items"
+              aria-label="Items distribution"
+              descriptionForAssistiveTechnology="Pie chart showing the number of items by product. Click a slice or press Enter to filter the grid by that item."
+              interactionExplanation="Click a slice or press Enter to filter the grid by that item."
+              mode="interactive"
               size="medium"
               legendVariant="externalLabelValue"
               colorTheme={{
@@ -100,6 +104,10 @@ export default () => (
           >
             <BarChart
               title="Tags"
+              aria-label="Tags distribution"
+              descriptionForAssistiveTechnology="Bar chart showing the number of items by tag. Click a bar or press Enter to filter the grid by that tag."
+              interactionExplanation="Click a bar or press Enter to filter the grid by that tag."
+              mode="interactive"
               orientation="vertical"
               size="medium"
               colorTheme={{

package/data/demos/patterns/crossfiltered-datagrid-client-side/with-loading.tsx

@@ -7,7 +7,7 @@ import { columns, CATEGORY_OPTIONS } from '../_shared/columns';
 import { CustomToolbar } from '../_shared/helpers';
 
 export default () => (
-  <div style={{ width: '100%' }}>
+  <div style={{ width: '100%' }} aria-busy="true" aria-label="Crossfiltered datagrid loading">
     <Flexbox flexDirection="column" gap="16px">
       <Flexbox gap="12px" flexWrap="wrap">
         <DataCard color="warning" isLoading>