如何为Material-Table的选择复选框设置标签或aria-label？

方案1：通过selectionProps传递aria-label #

Material-Table的selectionProps会将属性透传给底层的Checkbox组件，而Checkbox支持aria-label属性为屏幕阅读器提供识别标签。替换你之前的label为aria-label即可，还可以结合行数据生成更具语义的标签：

options={{
    selection: true,
    selectionProps: rowData => ({
      'aria-label': `选择行：${rowData.id || rowData.name}` // 用行内唯一标识字段优化标签语义
    })
 }}

方案2：自定义复选框组件（更灵活） #

如果需要完全控制复选框的渲染逻辑，可以通过components属性自定义表头和行内的复选框，手动添加aria-label：

import { Checkbox, TableCell, TableHeadCell } from '@material-ui/core';

<MaterialTable
  // 其他配置项...
  options={{ selection: true }}
  components={{
    // 自定义表头的全选复选框
    TableHeadCell: props => {
      if (props.columnDef.field === 'selection') {
        return (
          <TableHeadCell {...props}>
            <Checkbox
              {...props.tableData.selectionProps}
              aria-label="选择所有行"
            />
          </TableHeadCell>
        );
      }
      return <TableHeadCell {...props} />;
    },
    // 自定义每行的选择复选框
    TableCell: props => {
      if (props.columnDef.field === 'selection') {
        return (
          <TableCell {...props}>
            <Checkbox
              {...props.tableData.selectionProps}
              aria-label={`选择行：${props.rowData.id}`}
            />
          </TableCell>
        );
      }
      return <TableCell {...props} />;
    }
  }}
/>

方案3：通过inputProps传递标签（适配部分版本） #

部分Material-Table版本中，需要将aria-label放在inputProps内才能正确传递到底层的input元素：

options={{
    selection: true,
    selectionProps: rowData => ({
      inputProps: {
        'aria-label': `选择行：${rowData.id}`
      }
    })
 }}

为什么之前的label属性无效？ #

Material-Table默认使用的Checkbox组件，其label属性并非用于设置可访问性标签，而是控制组件内部的可见标签元素（默认不渲染）。axe-core检测的是表单元素的关联标签或aria-label，因此直接传label无法被识别。

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