Inovua ReactDataGrid中如何让复选框获得焦点？

在Inovua ReactDataGrid里开启行选中（enableSelection={true}）后，你会发现那些复选框其实是套着SVG的div元素，这就导致Shift键没法把它纳入焦点路径，键盘操作无法聚焦到它上面。这里给你两种实用的解决办法：

方法一：通过组件属性直接配置焦点属性 #

Inovua ReactDataGrid支持用checkboxProps给复选框传递自定义属性，直接添加tabIndex和role就能让div具备可聚焦能力：

<ReactDataGrid
  enableSelection={true}
  checkboxProps={{
    tabIndex: 0,
    role: 'checkbox',
    'aria-checked': false // 记得根据实际选中状态动态切换true/false
  }}
  // 其他表格配置项...
/>

• tabIndex: 0：让元素能被键盘聚焦，且遵循页面自然的焦点顺序
• role: 'checkbox'：告诉屏幕阅读器这是一个复选框，兼顾可访问性
• aria-checked：用于标记复选框的选中状态，需要和表格的选中状态绑定动态更新

方法二：用样式+自定义渲染补全焦点能力 #

如果没法通过组件属性配置，就用CSS给目标div添加焦点样式，再通过自定义行渲染给元素补上tabIndex：

先写CSS样式：

.InovuaReactDataGrid__checkbox {
  tab-index: 0;
  cursor: pointer;
}

.InovuaReactDataGrid__checkbox:focus {
  outline: 2px solid #005fcc; /* 可根据设计需求调整焦点样式 */
  outline-offset: 2px;
}

然后自定义行渲染逻辑，给复选框添加焦点相关属性：

const renderRow = ({ row, rowProps }) => {
  // 定位行内的复选框元素
  const checkbox = rowProps.children.find(child => 
    child.props.className?.includes('InovuaReactDataGrid__checkbox')
  );
  if (checkbox) {
    // 克隆元素并添加焦点属性
    return React.cloneElement(checkbox, {
      tabIndex: 0,
      role: 'checkbox'
    });
  }
  return rowProps.children;
};

<ReactDataGrid
  enableSelection={true}
  rowRender={renderRow}
  // 其他表格配置项...
/>

验证效果 #

配置完成后可以通过以下方式测试：

• 按Tab键，复选框应能获得焦点并显示自定义的焦点样式
• 按住Shift+Tab，能反向聚焦到该复选框
• 按空格键可切换复选框的选中状态（添加role="checkbox"后，浏览器会自动处理该键盘交互）

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