accessibility - 如何仅使用键盘访问 ag-grid 单元格内容中的按钮和链接？

Question

我正在尝试使屏幕阅读器和仅使用键盘的用户可以访问 ag-grid 中单元格的交互式内容。

ag-grid 中是否有配置设置或技术允许仅键盘导航与单元格内的按钮和链接进行交互？标题和过滤器允许 CONTROL + RETURN 键将焦点更改为其内容，但不能更改正文单元格。

我在 Plnkr 上创建了一个示例网格，其中包含一个链接和一个按钮的列。任何提示或建议都会很棒！

我们正在使用 ag-grid-community 25.1.0 和 ag-grid-react 25.1.0。

https://plnkr.co/edit/8qDxw4GYnqdvjtAU

```
<div style={{ width: '100%', height: '100%' }}>
  <div
    id="myGrid"
    style={{
      height: '100%',
      width: '100%',
    }}
    className="ag-theme-alpine"
  >
    <AgGridReact
      modules={AllCommunityModules}
      frameworkComponents={{
        medalCellRenderer: MedalCellRenderer,
        totalValueRenderer: TotalValueRenderer,
        linkCellRenderer: LinkCellRenderer,
      }}
      defaultColDef={{
        editable: false,
        sortable: true,
        flex: 1,
        minWidth: 100,
        filter: true,
        resizable: true,
      }}
      onGridReady={onGridReady}
      rowData={rowData}
    >
      <AgGridColumn field="athlete" />
      <AgGridColumn field="year" cellRenderer="linkCellRenderer" />
      <AgGridColumn field="gold" cellRenderer="medalCellRenderer" />
      <AgGridColumn field="silver" cellRenderer="medalCellRenderer" />
      <AgGridColumn field="bronze" cellRenderer="medalCellRenderer" />
      <AgGridColumn
        field="total"
        minWidth={175}
        cellRenderer="totalValueRenderer"
      />
    </AgGridReact>
  </div>
</div>
```

标签： accessibilityag-gridag-grid-react

Answer 1

您可以通过使用自定义单元格渲染器并利用它的刷新生命周期方法以及网格的 onCellFocus 回调来完成此操作。

https://codesandbox.io/s/focus-links-7b6yz