feat: DH-21829: add invisible accessibility layer to Grid for e2e testing

README.md

@@ -177,6 +177,48 @@ See [this guide](https://deephaven.io/core/docs/how-to-guides/authentication/aut
 - `npm run e2e:headed`: Runs end-to-end tests in headed debug mode. Also ignores snapshots since a test suite will stop once 1 snapshot comparison fails. Useful if you need to debug why a particular test isn't working. For example, to debug the `table.spec.ts` test directly, you could run `npm run e2e:headed -- ./tests/table.spec.ts`.
 - `npm run e2e:codegen`: Runs Playwright in codegen mode which can help with creating tests. See [Playwright Codegen](https://playwright.dev/docs/codegen/) for more details.
 - `npm run e2e:update-snapshots`: Updates the E2E snapshots for your local OS.
+- `npm run e2e:performance`: Runs grid performance benchmark tests against the main app (requires a Deephaven server). Skipped by default in CI due to resource constraints.
+
+### Grid Performance Testing
+
+For performance-sensitive changes to the Grid component, there are two ways to benchmark:
+
+**1. Main App Tests** (`grid-performance.spec.ts`)
+
+Tests scroll performance with real table data from a Deephaven server:
+
+```bash
+npm run e2e:performance
+```
+
+**2. Standalone Perf App** (`grid-perf-app.spec.ts`)
+
+A lightweight test app in `tests/grid-perf-app/` that uses mock data. This is useful for:
+
+- Testing without a Deephaven server
+- Comparing performance with different Grid props (e.g., accessibility layer on/off)
+- Iterating on Grid changes quickly
+
+To use the perf app:
+
+```bash
+# Install dependencies (one time)
+cd tests/grid-perf-app && npm install
+
+# Start the app
+npm run dev
+
+# In another terminal (from the repo root), run the perf app tests
+npm run e2e:grid-performance
+```
+
+The perf app supports query params to configure the grid:
+
+- `rows`: Number of rows (default: 1000000)
+- `cols`: Number of columns (default: 100)
+- `a11y`: Enable accessibility layer (default: true, set to "false" to disable)
+
+Example: `http://localhost:4020/?rows=100000&cols=50&a11y=false`
 
 ### Docker
 

package.json

@@ -50,6 +50,8 @@
     "e2e": "playwright test",
     "e2e:codegen": "playwright codegen http://localhost:4000",
     "e2e:headed": "playwright test --project=chromium --debug --ignore-snapshots",
+    "e2e:performance": "RUN_PERF_TESTS=1 playwright test grid-performance.spec.ts",
+    "e2e:grid-performance": "RUN_PERF_TESTS=1 playwright test grid-perf-app.spec.ts",
     "e2e:update-snapshots": "playwright test --update-snapshots=changed",
     "e2e:docker": "./tests/docker-scripts/run.sh web-ui-tests",
     "e2e:update-ci-snapshots": "./tests/docker-scripts/run.sh web-ui-update-snapshots"

packages/dashboard-core-plugins/src/GridWidgetPlugin.tsx

@@ -171,6 +171,7 @@ export function GridWidgetPlugin({
       onContextMenu={onContextMenu}
       inputFilters={inputFilters}
       customFilters={customFilters}
+      enableAccessibilityLayer
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...linkerProps}
       alwaysFetchColumns={alwaysFetchColumns}

packages/dashboard-core-plugins/src/panels/IrisGridPanel.tsx

@@ -1245,6 +1245,7 @@ export class IrisGridPanel extends PureComponent<
             columnAlignmentMap={columnAlignmentMap}
             columnSelectionValidator={this.isColumnSelectionValid}
             conditionalFormats={conditionalFormats}
+            enableAccessibilityLayer
             inputFilters={this.getGridInputFilters(model.columns, inputFilters)}
             applyInputFiltersOnInit={panelState == null}
             isFilterBarShown={isFilterBarShown}

packages/grid/src/Grid.tsx

@@ -79,6 +79,7 @@ import {
   type GridRenderState,
   type EditingCellTextSelectionRange,
 } from './GridRendererTypes';
+import GridAccessibilityLayer from './GridAccessibilityLayer';
 
 type LegacyCanvasRenderingContext2D = CanvasRenderingContext2D & {
   webkitBackingStorePixelRatio?: number;
@@ -147,6 +148,9 @@ export type GridProps = typeof Grid.defaultProps & {
   stateOverride?: Record<string, unknown>;
 
   theme?: Partial<GridThemeType>;
+
+  // Whether to render an invisible accessibility layer for e2e testing and screen readers
+  enableAccessibilityLayer?: boolean;
 };
 
 export type GridState = {
@@ -2298,6 +2302,21 @@ class Grid extends PureComponent<GridProps, GridState> {
     );
   }
 
+  /**
+   * Renders the accessibility layer for e2e testing and screen readers
+   * @returns The accessibility layer or null if disabled
+   */
+  renderAccessibilityLayer(): ReactNode {
+    const { enableAccessibilityLayer, model } = this.props;
+    const { metrics } = this;
+
+    if (enableAccessibilityLayer !== true) {
+      return null;
+    }
+
+    return <GridAccessibilityLayer metrics={metrics} model={model} />;
+  }
+
   /**
    * Gets the render state
    * @returns The render state
@@ -2379,7 +2398,7 @@ class Grid extends PureComponent<GridProps, GridState> {
           onMouseLeave={this.handleMouseLeave}
           tabIndex={0}
         >
-          Your browser does not support HTML canvas. Update your browser?
+          {this.renderAccessibilityLayer()}
         </canvas>
         {this.renderInputField()}
         {children}