AG Grid（Angular）中cellRendererSelector组件的无障碍聚焦问题

问题核心 #

AG Grid默认会拦截单元格的焦点事件，将焦点锁定在单元格容器上，导致内部的锚点(<a>)无法通过Tab键获取焦点，同时原生键盘触发逻辑也被Grid的事件处理覆盖。

解决方案 #

1. 放行Tab与触发类键盘事件 #

在列定义中通过suppressKeyboardEvent配置，让Grid不拦截Tab、Enter等与焦点和触发相关的事件，允许内部元素处理：

columnDefs = [
  {
    headerName: '首列',
    cellRendererSelector: () => ({ component: FirstcellComponent }),
    suppressKeyboardEvent: (params) => {
      const event = params.event;
      // 放行Tab键（焦点切换）、Enter键（锚点触发）事件
      return !(event.key === 'Tab' || (event.key === 'Enter' && event.target.tagName === 'A'));
    }
  }
];

2. 优化锚点组件的键盘可访问性 #

在firstcell.component中完善锚点的焦点与键盘触发逻辑，确保符合无障碍标准：

模板代码

<a 
  #anchorRef
  href="javascript:void(0)"
  (click)="onAnchorClick()"
  (keydown.space)="onSpaceTrigger($event)"
  tabindex="0"
>
  {{ cellValue }}
</a>

组件类代码

import { Component, ViewChild, ElementRef, Input } from '@angular/core';

@Component({
  selector: 'app-firstcell',
  templateUrl: './firstcell.component.html'
})
export class FirstcellComponent {
  @Input() data: any;
  @ViewChild('anchorRef') anchorRef: ElementRef<HTMLAnchorElement>;

  onAnchorClick() {
    // 此处编写锚点点击的业务逻辑
    console.log('锚点被触发', this.data);
  }

  onSpaceTrigger(event: KeyboardEvent) {
    // 阻止Space键的默认滚动行为，触发点击逻辑
    event.preventDefault();
    this.onAnchorClick();
  }

  // 可选：组件渲染后自动将焦点设置到锚点
  ngAfterViewInit() {
    this.anchorRef.nativeElement.focus();
  }
}

3. 自定义Grid焦点导航逻辑 #

通过gridOptions的navigateToNextCell配置，确保Tab键在锚点与其他单元格之间能正确切换：

gridOptions = {
  navigateToNextCell: (params) => {
    const activeElement = document.activeElement;
    // 如果当前焦点在单元格内的锚点上，按Tab时跳转到下一个单元格
    if (activeElement.tagName === 'A' && activeElement.closest('.ag-cell')) {
      return params.nextCellPosition;
    }
    // 其他情况沿用Grid默认导航逻辑
    return params.defaultNavigateToNextCell(params);
  }
};

说明 #

以上配置组合后，Tab键可以聚焦到单元格内的锚点，按Enter或Space键均可触发锚点的点击逻辑，同时保持Grid原有导航行为不受影响。

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