AG Grid（Angular）：如何仅通过键盘触发表格单元格内按钮？

核心问题：AG Grid默认拦截单元格内的键盘事件，且焦点默认落在单元格而非按钮上 #

• 让按钮真正接管焦点
  AG Grid默认会把焦点给到单元格本身，而非内部的按钮元素，导致空格/回车事件被网格处理而非按钮。解决方法：

  1. 在列配置中给操作列添加自定义类，移除单元格的可聚焦性：

     columnDefs = [
       // 其他列...
       {
         headerName: '操作',
         colId: 'actionColumn',
         cellRenderer: ActionCellRendererComponent,
         cellClass: 'ag-action-cell',
         // 阻止网格拦截按钮的空格/回车事件
         suppressKeyboardEvent: (params) => {
           const key = params.event.key;
           if ((key === 'Enter' || key === ' ') && params.event.target.tagName === 'BUTTON') {
             return false; // 允许事件传递给按钮
           }
           return true;
         }
       }
     ];
     

  2. 给自定义类添加CSS，移除单元格焦点：

     .ag-action-cell {
       tabindex: -1;
       outline: none;
     }
     

  3. 在按钮组件中显式设置可聚焦，并绑定键盘事件：

     <button 
       tabindex="0"
       (click)="handleAction()"
       (keydown.enter)="handleAction()"
       (keydown.space)="handleAction()"
       aria-label="执行当前行操作"
     >
       执行
     </button>
     

• 精准处理单元格键盘事件
  如果用cellKeyDown事件，需要定位到按钮元素再触发点击，同时阻止网格的默认行为：

  onCellKeyDown(event: CellKeyDownEvent) {
    const { key, target } = event.event;
    if (event.column.colId !== 'actionColumn') return;
    
    if (key === 'Enter' || key === ' ') {
      const button = target.closest('button') as HTMLButtonElement;
      if (button) {
        button.click();
        event.event.preventDefault(); // 阻止网格默认处理
        event.event.stopPropagation();
      }
    }
  }
  

  绑定到AG Grid组件：

  <ag-grid-angular
    [columnDefs]="columnDefs"
    [rowData]="rowData"
    (cellKeyDown)="onCellKeyDown($event)"
    <!-- 其他配置 -->
  ></ag-grid-angular>
  

• 确认AG Grid无障碍配置
  确保网格启用了无障碍支持（默认开启，可显式配置兜底）：

  gridOptions = {
    enableAccessibility: true,
    // 避免使用suppressFocus等影响焦点的配置
  };
  

内容的提问来源于stack exchange，提问作者Kolega Pikola