Forward events from the accessibility layer

- Works by just calling .click() on that cell
- Put the accessibility layer behind the canvas so that it doesn't take any pointer events from real clicking

Author: mofojed

packages/grid/src/Grid.tsx

@@ -2318,6 +2318,7 @@ class Grid extends PureComponent<GridProps, GridState> {
       <GridAccessibilityLayer
         metrics={metrics}
         model={model}
+        canvasRef={this.canvas}
       />
     );
   }
@@ -2388,6 +2389,7 @@ class Grid extends PureComponent<GridProps, GridState> {
 
     return (
       <div className="grid-wrapper" ref={this.canvasWrapper}>
+        {this.renderAccessibilityLayer()}
         <canvas
           className={classNames('grid-canvas', Grid.getCursorClassName(cursor))}
           ref={canvas => {
@@ -2406,7 +2408,6 @@ class Grid extends PureComponent<GridProps, GridState> {
           Your browser does not support HTML canvas. Update your browser?
         </canvas>
         {this.renderInputField()}
-        {this.renderAccessibilityLayer()}
         {children}
       </div>
     );

packages/grid/src/GridAccessibilityLayer.test.tsx

@@ -150,6 +150,7 @@ function renderAccessibilityLayer(
     <GridAccessibilityLayer
       metrics={metrics}
       model={model}
+      canvasRef={null}
       {...propsOverrides}
     />
   );
@@ -251,11 +252,11 @@ describe('GridAccessibilityLayer', () => {
     });
   });
 
-  it('cells have pointer-events: none to allow clicks through to canvas', () => {
+  it('cells have pointer-events: auto to receive clicks for forwarding', () => {
     renderAccessibilityLayer();
 
     const cell = screen.getByTestId('grid-cell-0-0');
-    expect(cell).toHaveStyle({ pointerEvents: 'none' });
+    expect(cell).toHaveStyle({ pointerEvents: 'auto' });
   });
 
   it('includes aria-rowcount and aria-colcount on the container', () => {

packages/grid/src/GridAccessibilityLayer.tsx

@@ -1,4 +1,4 @@
-import React, { type CSSProperties, memo } from 'react';
+import React, { type CSSProperties, memo, useCallback } from 'react';
 import type GridMetrics from './GridMetrics';
 import type GridModel from './GridModel';
 
@@ -7,6 +7,8 @@ export interface GridAccessibilityLayerProps {
   metrics: GridMetrics | null;
   /** The model providing cell data */
   model: GridModel;
+  /** Reference to the canvas element for dispatching click events */
+  canvasRef: HTMLCanvasElement | null;
 }
 
 const containerStyle: CSSProperties = {
@@ -20,7 +22,7 @@ const cellStyle: CSSProperties = {
   position: 'absolute',
   opacity: 0,
   overflow: 'hidden',
-  pointerEvents: 'none',
+  pointerEvents: 'auto',
 };
 
 /**
@@ -33,12 +35,77 @@ const cellStyle: CSSProperties = {
  * - Column headers with `data-testid="grid-column-header-{column}-{depth}"`
  * - Row headers with `data-testid="grid-row-header-{row}"`
  *
- * All elements have pointer-events: none so clicks pass through to the underlying canvas.
+ * Clicks on accessibility elements are forwarded to the underlying canvas at the
+ * corresponding coordinates, triggering normal grid mouse handling.
  */
 function GridAccessibilityLayer({
   metrics,
   model,
+  canvasRef,
 }: GridAccessibilityLayerProps): JSX.Element | null {
+  const forwardMouseEvent = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>, eventType: string) => {
+      if (!canvasRef) return;
+
+      // Get the center of the clicked element
+      const rect = event.currentTarget.getBoundingClientRect();
+      const clientX = rect.left + rect.width / 2;
+      const clientY = rect.top + rect.height / 2;
+
+      // Dispatch a synthetic mouse event to the canvas at the cell's position
+      const syntheticEvent = new MouseEvent(eventType, {
+        bubbles: true,
+        cancelable: true,
+        clientX,
+        clientY,
+        button: event.button,
+        buttons: event.buttons,
+        ctrlKey: event.ctrlKey,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey,
+      });
+
+      canvasRef.dispatchEvent(syntheticEvent);
+    },
+    [canvasRef]
+  );
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      forwardMouseEvent(event, 'click');
+    },
+    [forwardMouseEvent]
+  );
+
+  const handleDoubleClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      forwardMouseEvent(event, 'dblclick');
+    },
+    [forwardMouseEvent]
+  );
+
+  const handleContextMenu = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      forwardMouseEvent(event, 'contextmenu');
+    },
+    [forwardMouseEvent]
+  );
+
+  const handleMouseDown = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      forwardMouseEvent(event, 'mousedown');
+    },
+    [forwardMouseEvent]
+  );
+
+  const handleMouseUp = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      forwardMouseEvent(event, 'mouseup');
+    },
+    [forwardMouseEvent]
+  );
+
   if (!metrics) {
     return null;
   }
@@ -99,6 +166,11 @@ function GridAccessibilityLayer({
             width,
             height,
           }}
+          onClick={handleClick}
+          onDoubleClick={handleDoubleClick}
+          onContextMenu={handleContextMenu}
+          onMouseDown={handleMouseDown}
+          onMouseUp={handleMouseUp}
         >
           {text}
         </div>
@@ -134,6 +206,11 @@ function GridAccessibilityLayer({
             width,
             height: columnHeaderHeight,
           }}
+          onClick={handleClick}
+          onDoubleClick={handleDoubleClick}
+          onContextMenu={handleContextMenu}
+          onMouseDown={handleMouseDown}
+          onMouseUp={handleMouseUp}
         >
           {text ?? ''}
         </div>
@@ -167,6 +244,11 @@ function GridAccessibilityLayer({
             width: rowHeaderWidth,
             height,
           }}
+          onClick={handleClick}
+          onDoubleClick={handleDoubleClick}
+          onContextMenu={handleContextMenu}
+          onMouseDown={handleMouseDown}
+          onMouseUp={handleMouseUp}
         >
           {text}
         </div>

tests/grid-accessibility.spec.ts

@@ -84,17 +84,17 @@ test.describe('grid accessibility layer', () => {
     await expect(xHeader).toBeAttached();
   });
 
-  test('accessibility layer does not block canvas interactions', async ({
+  test('accessibility layer forwards clicks to canvas', async ({
     page,
   }) => {
     const grid = page.locator('.iris-grid-panel .iris-grid');
     const canvas = grid.locator('canvas.grid-canvas');
 
-    // Click on the grid - should select a cell
-    await grid.click({ position: { x: 50, y: 50 } });
+    // Click on an accessibility cell - it should forward the click to the canvas
+    const cell = page.getByTestId('grid-cell-0-0');
+    await cell.click();
 
-    // The canvas should receive focus, not blocked by the accessibility layer
-    // The accessibility layer has pointer-events: none
+    // The canvas should receive focus through the forwarded click
     await expect(canvas).toBeFocused();
   });
 
@@ -109,23 +109,15 @@ test.describe('grid accessibility layer', () => {
     await expect(rowHeader0).not.toBeAttached();
   });
 
-  test('can click on third row cell using accessibility layer position', async ({
+  test('can click on third row cell using accessibility layer', async ({
     page,
   }) => {
     // Get the cell in the third row (row index 2, zero-based)
     const thirdRowCell = page.getByTestId('grid-cell-0-2');
     await expect(thirdRowCell).toBeAttached();
 
-    // Get the bounding box of the accessibility element to find its position
-    const boundingBox = await thirdRowCell.boundingBox();
-    expect(boundingBox).not.toBeNull();
-    if (boundingBox === null) return;
-
-    // Click at the center of the cell position on the canvas
-    await page.mouse.click(
-      boundingBox.x + boundingBox.width / 2,
-      boundingBox.y + boundingBox.height / 2
-    );
+    // Click directly on the accessibility element - it forwards to the canvas
+    await thirdRowCell.click();
 
     // Take a screenshot to verify the third row is selected
     await expect(page.locator('.iris-grid-panel .iris-grid')).toHaveScreenshot(