Revert "Forward events from the accessibility layer"

This reverts commit 28c9186.

Author: mofojed

packages/grid/src/Grid.tsx

@@ -2318,7 +2318,6 @@ class Grid extends PureComponent<GridProps, GridState> {
       <GridAccessibilityLayer
         metrics={metrics}
         model={model}
-        canvasRef={this.canvas}
       />
     );
   }
@@ -2389,7 +2388,6 @@ 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 => {
@@ -2408,6 +2406,7 @@ 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,7 +150,6 @@ function renderAccessibilityLayer(
     <GridAccessibilityLayer
       metrics={metrics}
       model={model}
-      canvasRef={null}
       {...propsOverrides}
     />
   );
@@ -252,11 +251,11 @@ describe('GridAccessibilityLayer', () => {
     });
   });
 
-  it('cells have pointer-events: auto to receive clicks for forwarding', () => {
+  it('cells have pointer-events: none to allow clicks through to canvas', () => {
     renderAccessibilityLayer();
 
     const cell = screen.getByTestId('grid-cell-0-0');
-    expect(cell).toHaveStyle({ pointerEvents: 'auto' });
+    expect(cell).toHaveStyle({ pointerEvents: 'none' });
   });
 
   it('includes aria-rowcount and aria-colcount on the container', () => {

packages/grid/src/GridAccessibilityLayer.tsx

@@ -1,4 +1,4 @@
-import React, { type CSSProperties, memo, useCallback } from 'react';
+import React, { type CSSProperties, memo } from 'react';
 import type GridMetrics from './GridMetrics';
 import type GridModel from './GridModel';
 
@@ -7,8 +7,6 @@ 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 = {
@@ -22,7 +20,7 @@ const cellStyle: CSSProperties = {
   position: 'absolute',
   opacity: 0,
   overflow: 'hidden',
-  pointerEvents: 'auto',
+  pointerEvents: 'none',
 };
 
 /**
@@ -35,77 +33,12 @@ const cellStyle: CSSProperties = {
  * - Column headers with `data-testid="grid-column-header-{column}-{depth}"`
  * - Row headers with `data-testid="grid-row-header-{row}"`
  *
- * Clicks on accessibility elements are forwarded to the underlying canvas at the
- * corresponding coordinates, triggering normal grid mouse handling.
+ * All elements have pointer-events: none so clicks pass through to the underlying canvas.
  */
 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;
   }
@@ -166,11 +99,6 @@ function GridAccessibilityLayer({
             width,
             height,
           }}
-          onClick={handleClick}
-          onDoubleClick={handleDoubleClick}
-          onContextMenu={handleContextMenu}
-          onMouseDown={handleMouseDown}
-          onMouseUp={handleMouseUp}
         >
           {text}
         </div>
@@ -206,11 +134,6 @@ function GridAccessibilityLayer({
             width,
             height: columnHeaderHeight,
           }}
-          onClick={handleClick}
-          onDoubleClick={handleDoubleClick}
-          onContextMenu={handleContextMenu}
-          onMouseDown={handleMouseDown}
-          onMouseUp={handleMouseUp}
         >
           {text ?? ''}
         </div>
@@ -244,11 +167,6 @@ 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 forwards clicks to canvas', async ({
+  test('accessibility layer does not block canvas interactions', async ({
     page,
   }) => {
     const grid = page.locator('.iris-grid-panel .iris-grid');
     const canvas = grid.locator('canvas.grid-canvas');
 
-    // Click on an accessibility cell - it should forward the click to the canvas
-    const cell = page.getByTestId('grid-cell-0-0');
-    await cell.click();
+    // Click on the grid - should select a cell
+    await grid.click({ position: { x: 50, y: 50 } });
 
-    // The canvas should receive focus through the forwarded click
+    // The canvas should receive focus, not blocked by the accessibility layer
+    // The accessibility layer has pointer-events: none
     await expect(canvas).toBeFocused();
   });
 
@@ -109,15 +109,23 @@ test.describe('grid accessibility layer', () => {
     await expect(rowHeader0).not.toBeAttached();
   });
 
-  test('can click on third row cell using accessibility layer', async ({
+  test('can click on third row cell using accessibility layer position', 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();
 
-    // Click directly on the accessibility element - it forwards to the canvas
-    await thirdRowCell.click();
+    // 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
+    );
 
     // Take a screenshot to verify the third row is selected
     await expect(page.locator('.iris-grid-panel .iris-grid')).toHaveScreenshot(