在 ag-grid 中切换到自定义单元格渲染器

Question

我有一个 ag-grid 的角度实现，其中有一些自定义单元格渲染器。它们呈现从按钮到切换状态到应用程序其他部分的链接等内容。

我最近遇到了一个问题，即仅使用键盘的用户无法通过选项卡进入这些单元格渲染器的内容来“单击”元素。我尝试过放置一个tabindex="0"和/或一个href="#"放在这些元素上，以便它们出现在页面的选项卡顺序中，但它们获得焦点的唯一方法是通过单击鼠标。

似乎 ag-grid 覆盖了键盘的默认行为，也许是用箭头键添加 addtl 功能等。但它似乎与这些自定义渲染器配合得不好......

下面是这些渲染器之一的简化​​版本的示例。

@Component({
  selector: 'fave-renderer',
  template: `
    <i class="icon fave"
       tabindex="0"
       (click)="toggleFave()"></i>
  `,
  styles: [``]
})
export class FaveRendererComponent implements ICellRendererAngularComp {
  public params: any;

  agInit(params: any): void {
    this.params = params;
  }

  constructor(private resultsService: ResultsService) {}

  refresh(): boolean {return false;}

  toggleFave() {/*implementation not important... */}
}

Answer 1

所以我最终采取了一种巧妙的解决方法来解决这个问题。正在发生的事情是 ag-grid 实现了自定义键盘事件。例如，Enter将开始编辑单元格，Arrow按键将在网格中导航，Tab导航到下一个单元格，等等。

由于 ag-grid 会覆盖默认键盘事件，因此任何具有可聚焦元素的嵌套单元格渲染器在 Tab 键切换时永远不会接收焦点，因为该Tab键由 ag-grid 处理。为了防止这种情况，我添加了抑制键盘事件处理程序的回调。

在回调中，我只允许 ag-grid 处理选项卡导航，当前被选项卡锁定的焦点元素是单元格的最后一个可聚焦子元素（或者在 shift-tab 的情况下是单元格本身）。

suppressKeyboardEvent(params: SuppressKeyboardEventParams) {
  const e = params.event;
  if (e.code == 'Tab' || e.key == 'Tab') {
    //get focusable children of parent cell
    let focusableChildrenOfParent = e.srcElement.closest(".ag-cell")
      .querySelectorAll('button, [href], :not(.ag-hidden) > input, select, textarea, [tabindex]:not([tabindex="-1"])');

    if (focusableChildrenOfParent.length == 0 ||
      (e.shiftKey == false && e.srcElement == focusableChildrenOfParent[focusableChildrenOfParent.length - 1]) ||
      (e.shiftKey == true && e.srcElement == focusableChildrenOfParent[0]) ||
      (e.shiftKey == true && e.srcElement.classList.contains("ag-cell")))
      return false; //do not suppress
    return true; //suppress
  }
  return false; //do not suppress by default
}