From d0caac1058649e2cbd9ec0dbcc696d836233b16f Mon Sep 17 00:00:00 2001
From: masuP9 <masuP9@gmail.com>
Date: Thu, 14 May 2026 02:25:03 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat(treegrid):=20=E3=83=9E=E3=82=A6?=
 =?UTF-8?q?=E3=82=B9=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=81=AB=E3=82=88?=
 =?UTF-8?q?=E3=82=8B=E3=82=BB=E3=83=AB=E3=83=95=E3=82=A9=E3=83=BC=E3=82=AB?=
 =?UTF-8?q?=E3=82=B9=E3=81=A8=E5=B1=95=E9=96=8B/=E6=8A=98=E3=82=8A?=
 =?UTF-8?q?=E3=81=9F=E3=81=9F=E3=81=BF=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

任意のセルクリックでそのセルにフォーカスを移動し、rowheader クリックで親行の
展開/折りたたみをトグルする。行選択 (aria-selected) は Space キー専用のまま
維持し、APG の cell-only focus model とキーボードのセマンティクスを保つ。
4 フレームワーク (React / Vue / Svelte / Astro Web Component) と
ドキュメント (treegrid.md, accessibility-docs MDX) を更新。
package version は 0.3.8 にバンプ。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 .../accessibility-docs/treegrid/en.mdx        |  14 ++
 .../accessibility-docs/treegrid/ja.mdx        |  14 ++
 src/patterns/treegrid/TreeGrid.astro          |  35 +++++
 src/patterns/treegrid/TreeGrid.svelte         |  34 +++++
 src/patterns/treegrid/TreeGrid.test.tsx       | 137 ++++++++++++++++++
 src/patterns/treegrid/TreeGrid.tsx            |  41 ++++++
 src/patterns/treegrid/TreeGrid.vue            |  34 +++++
 src/patterns/treegrid/treegrid.ja.md          |  14 ++
 src/patterns/treegrid/treegrid.md             |  14 ++
 11 files changed, 340 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a5f52250..be0c85a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "apg-patterns-examples",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "apg-patterns-examples",
-      "version": "0.3.7",
+      "version": "0.3.8",
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler-rs": "^0.1.10",
diff --git a/package.json b/package.json
index af0e0d50..bd14f73e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "apg-patterns-examples",
   "type": "module",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "private": false,
   "description": "Accessible UI components following WAI-ARIA APG patterns. Multi-framework implementations in React, Vue, Svelte, and Astro with documentation and tests.",
   "author": "masuP9",
diff --git a/src/content/accessibility-docs/treegrid/en.mdx b/src/content/accessibility-docs/treegrid/en.mdx
index 28d928cc..adcbed8d 100644
--- a/src/content/accessibility-docs/treegrid/en.mdx
+++ b/src/content/accessibility-docs/treegrid/en.mdx
@@ -158,6 +158,20 @@ Total columns (for virtualization)
 - Tree operations (expand/collapse) only work at the rowheader column
 - Rows have aria-level to indicate hierarchy depth
 
+### Mouse Support (non-APG extension)
+
+APG does not specify mouse behavior for the treegrid pattern. This implementation adds a minimal mouse layer that preserves the cell-only focus model and keyboard semantics defined above.
+
+| Action                                                                                   | Behavior                                                                                       |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| Click any cell                                                                           | Move focus to the cell (updates roving tabindex). Row selection (`aria-selected`) is unchanged |
+| Click a rowheader of an expandable, non-disabled row                                     | Above, plus toggle expand/collapse                                                             |
+| Click on a row with `aria-disabled="true"`                                               | Focus may move, but expansion is not toggled (matches arrow-key behavior on disabled rows)     |
+| Click on an interactive descendant (`<button>`, `<a>`, `<input>`, `<select>`, `<textarea>`) | The treegrid mouse handler defers to the descendant; no focus shuffle or expansion toggle      |
+| Double-click                                                                             | No additional behavior. Cell activation remains <kbd>Enter</kbd>-only                          |
+
+Row selection is intentionally kept as a <kbd>Space</kbd>-only operation so that the APG cell-only focus model is preserved.
+
 ### Focus Management
 
 | Event              | Behavior                                           |
diff --git a/src/content/accessibility-docs/treegrid/ja.mdx b/src/content/accessibility-docs/treegrid/ja.mdx
index cfa14315..8bde58cc 100644
--- a/src/content/accessibility-docs/treegrid/ja.mdx
+++ b/src/content/accessibility-docs/treegrid/ja.mdx
@@ -158,6 +158,20 @@ aria-labelの代替
 - ツリー操作（展開/折りたたみ）はrowheader列でのみ機能します
 - 行には階層の深さを示すaria-levelがあります
 
+### マウスサポート（APG仕様外の拡張）
+
+APG は treegrid パターンのマウス挙動を規定していません。本実装は、上記の cell-only focus model とキーボードのセマンティクスを保ったまま、最小限のマウス操作を加えています。
+
+| 操作                                                                                       | 振る舞い                                                                                          |
+| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
+| 任意のセルをクリック                                                                       | そのセルにフォーカスを移動（roving tabindex を更新）。行選択 (`aria-selected`) は**変更されない** |
+| 展開可能な非 disabled 行の rowheader をクリック                                            | 上記に加え、展開/折りたたみをトグル                                                               |
+| `aria-disabled="true"` の行のセルをクリック                                                | フォーカスは移動するが、展開トグルは**起きない**（矢印キーの挙動と整合）                          |
+| セル内のインタラクティブな子要素（`<button>` / `<a>` / `<input>` / `<select>` / `<textarea>`）をクリック | treegrid 側のハンドリングはスキップされ、子要素のデフォルト挙動に任せる                           |
+| ダブルクリック                                                                             | 追加挙動なし。セルのアクティベートは引き続き <kbd>Enter</kbd> キー専用                            |
+
+行選択（`aria-selected`）は引き続き <kbd>Space</kbd> キー専用とし、APG の cell-only focus model を保持します。
+
 ### フォーカス管理
 
 | イベント         | 振る舞い                                                           |
diff --git a/src/patterns/treegrid/TreeGrid.astro b/src/patterns/treegrid/TreeGrid.astro
index 131f4dfa..d17f2079 100644
--- a/src/patterns/treegrid/TreeGrid.astro
+++ b/src/patterns/treegrid/TreeGrid.astro
@@ -293,6 +293,7 @@ function getRowAriaSelected(flatRow: FlatRow): 'true' | 'false' | undefined {
         (cell) => {
           cell.addEventListener('keydown', this.handleKeyDown.bind(this) as EventListener);
           cell.addEventListener('focusin', this.handleFocus.bind(this) as EventListener);
+          cell.addEventListener('click', this.handleCellClick.bind(this) as EventListener);
         }
       );
     }
@@ -302,6 +303,7 @@ function getRowAriaSelected(flatRow: FlatRow): 'true' | 'false' | undefined {
         (cell) => {
           cell.removeEventListener('keydown', this.handleKeyDown.bind(this) as EventListener);
           cell.removeEventListener('focusin', this.handleFocus.bind(this) as EventListener);
+          cell.removeEventListener('click', this.handleCellClick.bind(this) as EventListener);
         }
       );
     }
@@ -355,6 +357,39 @@ function getRowAriaSelected(flatRow: FlatRow): 'true' | 'false' | undefined {
       this.focusedCellId = cell.dataset.cellId ?? null;
     }
 
+    // Non-APG extension: mouse click moves cell focus; clicking a rowheader of
+    // an expandable, non-disabled row toggles its expansion. Row selection
+    // (aria-selected) is intentionally not changed — that remains a Space-only
+    // operation, matching the APG cell-only focus model.
+    private handleCellClick(event: MouseEvent) {
+      const target = event.target;
+      if (target instanceof Element && target.closest('button, a, input, select, textarea')) {
+        return;
+      }
+
+      const cell = event.currentTarget as HTMLElement;
+      const { rowId, isRowHeader, disabled, colIndex: colIndexStr } = cell.dataset;
+      if (!rowId) return;
+
+      const row = this.querySelector<HTMLElement>(`[role="row"][data-row-id="${rowId}"]`);
+      const rowDisabled = row?.getAttribute('aria-disabled') === 'true';
+
+      // Focus moves regardless of disabled state, matching arrow-key navigation.
+      this.focusCell(cell);
+
+      // Expansion toggle is suppressed for disabled rows/cells.
+      if (disabled === 'true' || rowDisabled) return;
+
+      if (isRowHeader === 'true' && row?.dataset.hasChildren === 'true') {
+        const colIndex = Number(colIndexStr ?? 0);
+        if (this.expandedIds.has(rowId)) {
+          this.collapseRow(rowId, colIndex);
+        } else {
+          this.expandRow(rowId);
+        }
+      }
+    }
+
     private expandRow(rowId: string) {
       const row = this.querySelector<HTMLElement>(`[role="row"][data-row-id="${rowId}"]`);
       if (!row) return;
diff --git a/src/patterns/treegrid/TreeGrid.svelte b/src/patterns/treegrid/TreeGrid.svelte
index f6ac3b28..f9d16ef0 100644
--- a/src/patterns/treegrid/TreeGrid.svelte
+++ b/src/patterns/treegrid/TreeGrid.svelte
@@ -490,6 +490,39 @@
     }
   }
 
+  // Non-APG extension: mouse click moves cell focus; clicking a rowheader of an
+  // expandable, non-disabled row toggles its expansion. Row selection
+  // (aria-selected) is intentionally not changed — that remains a Space-only
+  // operation, matching the APG cell-only focus model.
+  function handleCellClick(event: MouseEvent, cell: TreeGridCellData, rowId: string) {
+    if (
+      event.target instanceof Element &&
+      event.target.closest('button, a, input, select, textarea')
+    ) {
+      return;
+    }
+
+    const pos = cellPositionMap.get(cell.id);
+    if (!pos) return;
+
+    const flatRow = visibleRows[pos.rowIndex];
+    if (!flatRow) return;
+
+    // Focus moves regardless of disabled state, matching arrow-key navigation.
+    focusCell(cell.id);
+
+    // Expansion toggle is suppressed for disabled rows/cells.
+    if (cell.disabled || flatRow.node.disabled) return;
+
+    if (pos.isRowHeader && flatRow.hasChildren) {
+      if (expandedIds.has(rowId)) {
+        collapseRow(rowId, cell.id);
+      } else {
+        expandRow(rowId);
+      }
+    }
+  }
+
   // =============================================================================
   // Helper Functions
   // =============================================================================
@@ -561,6 +594,7 @@
           class:disabled={cell.disabled || flatRow.node.disabled}
           style:padding-left={getCellPaddingLeft(flatRow, colIndex)}
           onkeydown={(e) => handleKeyDown(e, cell, flatRow.node.id)}
+          onclick={(e) => handleCellClick(e, cell, flatRow.node.id)}
           onfocusin={() => setFocusedCellId(cell.id)}
           use:registerCell={cell.id}
         >
diff --git a/src/patterns/treegrid/TreeGrid.test.tsx b/src/patterns/treegrid/TreeGrid.test.tsx
index 6fce6b40..8222fb47 100644
--- a/src/patterns/treegrid/TreeGrid.test.tsx
+++ b/src/patterns/treegrid/TreeGrid.test.tsx
@@ -1165,4 +1165,141 @@ describe('TreeGrid', () => {
       expect(onFocusChange).toHaveBeenCalled();
     });
   });
+
+  // ===========================================================================
+  // Mouse (non-APG extension)
+  // ===========================================================================
+  describe('Mouse interactions', () => {
+    it('clicking a rowheader of a collapsed parent expands it', async () => {
+      const user = userEvent.setup();
+      render(
+        <TreeGrid columns={createBasicColumns()} nodes={createBasicNodes()} ariaLabel="Files" />
+      );
+
+      const docsRowheader = screen.getByRole('rowheader', { name: 'Documents' });
+      expect(docsRowheader.closest('[role="row"]')).toHaveAttribute('aria-expanded', 'false');
+
+      await user.click(docsRowheader);
+
+      expect(docsRowheader.closest('[role="row"]')).toHaveAttribute('aria-expanded', 'true');
+      expect(screen.getByRole('rowheader', { name: 'report.pdf' })).toBeInTheDocument();
+    });
+
+    it('clicking a rowheader of an expanded parent collapses it', async () => {
+      const user = userEvent.setup();
+      render(
+        <TreeGrid
+          columns={createBasicColumns()}
+          nodes={createBasicNodes()}
+          ariaLabel="Files"
+          defaultExpandedIds={['docs']}
+        />
+      );
+
+      const docsRowheader = screen.getByRole('rowheader', { name: 'Documents' });
+      expect(docsRowheader.closest('[role="row"]')).toHaveAttribute('aria-expanded', 'true');
+
+      await user.click(docsRowheader);
+
+      expect(docsRowheader.closest('[role="row"]')).toHaveAttribute('aria-expanded', 'false');
+      expect(screen.queryByRole('rowheader', { name: 'report.pdf' })).not.toBeInTheDocument();
+    });
+
+    it('clicking a non-rowheader cell does not toggle expansion', async () => {
+      const user = userEvent.setup();
+      render(
+        <TreeGrid columns={createBasicColumns()} nodes={createBasicNodes()} ariaLabel="Files" />
+      );
+
+      const sizeCell = screen
+        .getAllByRole('gridcell')
+        .find(
+          (el) =>
+            el.textContent === '--' &&
+            el.closest('[role="row"]')?.getAttribute('aria-level') === '1'
+        );
+      expect(sizeCell).toBeDefined();
+
+      await user.click(sizeCell!);
+
+      expect(sizeCell!.closest('[role="row"]')).toHaveAttribute('aria-expanded', 'false');
+      // Focus moves to the clicked cell
+      expect(sizeCell).toHaveAttribute('tabindex', '0');
+    });
+
+    it('clicking a cell moves focus and roving tabindex to it', async () => {
+      const user = userEvent.setup();
+      render(
+        <TreeGrid columns={createBasicColumns()} nodes={createBasicNodes()} ariaLabel="Files" />
+      );
+
+      const readmeRowheader = screen.getByRole('rowheader', { name: 'README.md' });
+      await user.click(readmeRowheader);
+
+      expect(readmeRowheader).toHaveAttribute('tabindex', '0');
+      expect(document.activeElement).toBe(readmeRowheader);
+      // The previously focusable cell should now be tabindex="-1"
+      const docsRowheader = screen.getByRole('rowheader', { name: 'Documents' });
+      expect(docsRowheader).toHaveAttribute('tabindex', '-1');
+    });
+
+    it('clicking a rowheader of a disabled row does not toggle expansion', async () => {
+      // Focus IS allowed to move into a disabled cell (matches arrow-key
+      // navigation: disabled cells are focusable per APG). Only the
+      // expansion toggle is suppressed.
+      const user = userEvent.setup();
+      const onExpandedChange = vi.fn();
+      render(
+        <TreeGrid
+          columns={createBasicColumns()}
+          nodes={createNodesWithDisabled()}
+          ariaLabel="Files"
+          onExpandedChange={onExpandedChange}
+        />
+      );
+
+      const docsRowheader = screen.getByRole('rowheader', { name: 'Documents' });
+      expect(docsRowheader.closest('[role="row"]')).toHaveAttribute('aria-expanded', 'false');
+
+      await user.click(docsRowheader);
+
+      expect(docsRowheader.closest('[role="row"]')).toHaveAttribute('aria-expanded', 'false');
+      expect(onExpandedChange).not.toHaveBeenCalled();
+    });
+
+    it('clicking the chevron icon inside a rowheader also toggles expansion', async () => {
+      const user = userEvent.setup();
+      render(
+        <TreeGrid columns={createBasicColumns()} nodes={createBasicNodes()} ariaLabel="Files" />
+      );
+
+      const docsRowheader = screen.getByRole('rowheader', { name: 'Documents' });
+      const chevron = docsRowheader.querySelector('.apg-treegrid-expand-icon');
+      expect(chevron).not.toBeNull();
+
+      await user.click(chevron as Element);
+
+      expect(docsRowheader.closest('[role="row"]')).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('clicking does not change row selection (aria-selected)', async () => {
+      const user = userEvent.setup();
+      render(
+        <TreeGrid
+          columns={createBasicColumns()}
+          nodes={createBasicNodes()}
+          ariaLabel="Files"
+          selectable
+        />
+      );
+
+      const docsRowheader = screen.getByRole('rowheader', { name: 'Documents' });
+      const row = docsRowheader.closest('[role="row"]')!;
+      expect(row).toHaveAttribute('aria-selected', 'false');
+
+      await user.click(docsRowheader);
+
+      expect(row).toHaveAttribute('aria-selected', 'false');
+    });
+  });
 });
diff --git a/src/patterns/treegrid/TreeGrid.tsx b/src/patterns/treegrid/TreeGrid.tsx
index 6c20ea66..807b85e0 100644
--- a/src/patterns/treegrid/TreeGrid.tsx
+++ b/src/patterns/treegrid/TreeGrid.tsx
@@ -557,6 +557,46 @@ export function TreeGrid({
     ]
   );
 
+  // ==========================================================================
+  // Mouse Handling
+  // ==========================================================================
+  // Non-APG extension: mouse click moves cell focus; clicking a rowheader of an
+  // expandable, non-disabled row toggles its expansion. Row selection
+  // (aria-selected) is intentionally not changed — that remains a Space-only
+  // operation, matching the APG cell-only focus model.
+
+  const handleCellClick = useCallback(
+    (event: React.MouseEvent, cell: TreeGridCellData, rowId: string, colIndex: number) => {
+      // Let interactive descendants (links, buttons, form controls) handle their own clicks.
+      if (
+        event.target instanceof Element &&
+        event.target.closest('button, a, input, select, textarea')
+      ) {
+        return;
+      }
+
+      const flatRow = rowMap.get(rowId);
+      if (!flatRow) return;
+
+      // Focus moves regardless of disabled state, matching arrow-key navigation
+      // (disabled cells are focusable per APG).
+      focusCell(cell.id);
+
+      // Expansion toggle is suppressed for disabled rows/cells.
+      if (cell.disabled || flatRow.node.disabled) return;
+
+      const rowHeaderColIndex = getRowHeaderColumnIndex();
+      if (colIndex === rowHeaderColIndex && flatRow.hasChildren) {
+        if (expandedSet.has(rowId)) {
+          collapseNode(rowId);
+        } else {
+          expandNode(rowId);
+        }
+      }
+    },
+    [rowMap, focusCell, getRowHeaderColumnIndex, expandedSet, expandNode, collapseNode]
+  );
+
   // ==========================================================================
   // Effects
   // ==========================================================================
@@ -640,6 +680,7 @@ export function TreeGrid({
                   aria-colindex={totalColumns ? startColIndex + colIndex : undefined}
                   aria-colspan={cell.colspan}
                   onKeyDown={(e) => handleKeyDown(e, cell, node.id, colIndex)}
+                  onClick={(e) => handleCellClick(e, cell, node.id, colIndex)}
                   onFocus={() => setFocusedCellId(cell.id)}
                   className={`apg-treegrid-cell ${isFocused ? 'focused' : ''} ${cell.disabled ? 'disabled' : ''}`}
                 >
diff --git a/src/patterns/treegrid/TreeGrid.vue b/src/patterns/treegrid/TreeGrid.vue
index 2d5c7619..a413263a 100644
--- a/src/patterns/treegrid/TreeGrid.vue
+++ b/src/patterns/treegrid/TreeGrid.vue
@@ -476,6 +476,39 @@ function handleKeyDown(event: KeyboardEvent, cell: TreeGridCellData, rowId: stri
   }
 }
 
+// Non-APG extension: mouse click moves cell focus; clicking a rowheader of an
+// expandable, non-disabled row toggles its expansion. Row selection
+// (aria-selected) is intentionally not changed — that remains a Space-only
+// operation, matching the APG cell-only focus model.
+function handleCellClick(event: MouseEvent, cell: TreeGridCellData, rowId: string) {
+  if (
+    event.target instanceof Element &&
+    event.target.closest('button, a, input, select, textarea')
+  ) {
+    return;
+  }
+
+  const pos = cellPositionMap.value.get(cell.id);
+  if (!pos) return;
+
+  const flatRow = visibleRows.value[pos.rowIndex];
+  if (!flatRow) return;
+
+  // Focus moves regardless of disabled state, matching arrow-key navigation.
+  focusCell(cell.id);
+
+  // Expansion toggle is suppressed for disabled rows/cells.
+  if (cell.disabled || flatRow.node.disabled) return;
+
+  if (pos.isRowHeader && flatRow.hasChildren) {
+    if (expandedIds.value.has(rowId)) {
+      collapseRow(rowId, cell.id);
+    } else {
+      expandRow(rowId);
+    }
+  }
+}
+
 function setCellRef(cellId: string, el: HTMLDivElement | null) {
   if (el) {
     cellRefs.value.set(cellId, el);
@@ -558,6 +591,7 @@ function getCellRole(colIndex: number): 'rowheader' | 'gridcell' {
             : undefined,
         }"
         @keydown="handleKeyDown($event, cell, flatRow.node.id)"
+        @click="handleCellClick($event, cell, flatRow.node.id)"
         @focusin="setFocusedCellId(cell.id)"
       >
         <span
diff --git a/src/patterns/treegrid/treegrid.ja.md b/src/patterns/treegrid/treegrid.ja.md
index 7ca9515c..4a492178 100644
--- a/src/patterns/treegrid/treegrid.ja.md
+++ b/src/patterns/treegrid/treegrid.ja.md
@@ -69,6 +69,20 @@ TreeGridは、Gridの2Dキーボードナビゲーションと、TreeViewの階
 | `Enter` | フォーカスされたセルをアクティブ化（展開/折りたたみはしない） |
 | `Ctrl + A` | すべての表示行を選択（複数選択可能な場合） |
 
+## マウスサポート（APG仕様外の拡張）
+
+APGはtreegridのマウス挙動を規定していない。本実装はcell-only focus modelとキーボードのセマンティクスを変えずに、最小限のマウス操作を加えている:
+
+| 操作 | 挙動 |
+| --- | --- |
+| 任意のセルをクリック | そのセルへフォーカス移動（roving tabindex を更新）。行選択 (`aria-selected`) は**変更しない** |
+| 展開可能な非disabled行のrowheaderをクリック | 上記に加えて展開/折りたたみをトグル |
+| `aria-disabled="true"` の行のセルをクリック | フォーカスは移動するが、展開トグルは**起きない**（矢印キーの挙動と整合） |
+| セル内のインタラクティブな子要素（`<button>` / `<a>` / `<input>` / `<select>` / `<textarea>`）をクリック | treegrid側はハンドリングをスキップし、子要素のデフォルト挙動に任せる（展開トグルもフォーカス移動も行わない） |
+| ダブルクリック | 追加挙動なし（セルのアクティベートは引き続き `Enter` キー専用） |
+
+行選択（`aria-selected`）は引き続き `Space` キー専用とし、APGのcell-only focus modelを保持する。
+
 ## フォーカス管理
 
 - フォーカスモデル: ローヴィングタブインデックス - 1つのセルのみがtabindex="0"を持つ
diff --git a/src/patterns/treegrid/treegrid.md b/src/patterns/treegrid/treegrid.md
index 83ad2f64..14ba4700 100644
--- a/src/patterns/treegrid/treegrid.md
+++ b/src/patterns/treegrid/treegrid.md
@@ -69,6 +69,20 @@ A treegrid combines Grid 2D keyboard navigation with TreeView hierarchical expan
 | `Enter` | Activate focused cell (does NOT expand/collapse) |
 | `Ctrl + A` | Select all visible rows (when multiselectable) |
 
+## Mouse Support (non-APG extension)
+
+APG does not specify mouse behavior for treegrid. This implementation adds a minimal mouse layer that does NOT alter the cell-only focus model or the keyboard semantics:
+
+| Action | Behavior |
+| --- | --- |
+| Click any cell | Move focus to that cell (updates roving tabindex). Row selection (`aria-selected`) is NOT changed |
+| Click a rowheader of an expandable, non-disabled row | Above, plus toggle expand/collapse |
+| Click on a row whose `aria-disabled="true"` | Focus may move, but expansion is NOT toggled (matches arrow-key behavior on disabled rows) |
+| Click on an interactive descendant inside a cell (`<button>`, `<a>`, `<input>`, `<select>`, `<textarea>`) | Treegrid mouse handler defers to the descendant; no focus shuffle or expansion toggle |
+| Double-click | No additional behavior (cell activation remains `Enter`-only) |
+
+Row selection is intentionally kept as a `Space`-only operation to preserve the APG cell-only focus model.
+
 ## Focus Management
 
 - Focus model: Roving tabindex - only one cell has tabindex="0"

From 6a6eb7514752e4c087c73418c5e434b77c2791f0 Mon Sep 17 00:00:00 2001
From: masuP9 <masuP9@gmail.com>
Date: Thu, 14 May 2026 02:38:41 +0900
Subject: [PATCH 2/2] =?UTF-8?q?test(treegrid=20e2e):=20focusCell=20helper?=
 =?UTF-8?q?=20=E3=82=92=20programmatic=20focus=20=E3=81=AB=E5=88=87?=
 =?UTF-8?q?=E3=82=8A=E6=9B=BF=E3=81=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

クリックで rowheader の展開トグルが起きるようになったため、テストの
focus 取得が副作用を起こさないよう el.focus() で直接 focus を当てる。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 e2e/treegrid.spec.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/e2e/treegrid.spec.ts b/e2e/treegrid.spec.ts
index f0f39d3d..de279968 100644
--- a/e2e/treegrid.spec.ts
+++ b/e2e/treegrid.spec.ts
@@ -51,9 +51,13 @@ async function expectCellOrChildFocused(_page: Page, cell: Locator): Promise<voi
 /**
  * Helper to focus a cell, handling cells that contain links/buttons.
  * Returns the focused element (either the cell or a focusable child).
+ *
+ * Uses programmatic focus (HTMLElement.focus()) rather than a mouse click so
+ * that click-side effects (e.g., the rowheader click handler toggling row
+ * expansion) do not fire just because a test wants to seed focus.
  */
 async function focusCell(_page: Page, cell: Locator): Promise<Locator> {
-  await cell.click({ position: { x: 5, y: 5 } });
+  await cell.evaluate((el: HTMLElement) => el.focus());
 
   // Check if focus is on the cell or a child element
   const cellIsFocused = await cell.evaluate((el) => document.activeElement === el);