[TablePagination-MUI]：Wave 工具中缺少表单标签可访问性问题

Question

使用表格分页时 Wave 工具中的“缺少表单标签”可访问性问题。我该如何解决。

<TablePagination
      ref={paginationComponentRef}
      ActionsComponent={PaginationActionsComponent}
      component='div'
      page={page}
      rowsPerPageOptions={5, 10, 25]}
      rowsPerPage={0}
      intl={props.intl}
      count={props.count || 0}
      onChangePage={props.onChangePage || handleChangePage}
      onChangeRowsPerPage={props.onChangeRowsPerPage || handleChangeRowsPerPage}
      backIconButtonProps={{
        'aria-label': props.intl.formatMessage(messages.prev, props.customTexts),
      }}
      nextIconButtonProps={{
        'aria-label': props.intl.formatMessage(messages.next, props.customTexts),
      }}
    />

输出呈现的html：

<div class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot">
<div class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiSelect-selectMenu MuiInputBase-input" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="mui-8736 mui-43" id="mui-43">5</div><input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" value="5"><svg class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5z"></path>
</svg></div>

Answer 1

尝试在您的<TablePagination /> 标签中添加以下代码。

SelectProps={{
            inputProps: { 'aria-label': 'rows per page' },
            native: true,
            }}

Answer 2

如果您不想更改分页选择设计，请使用此

SelectProps={{
  inputProps: {
    'aria-label': 'rows per page',
    'aria-labelledby': 'rowsPage',
  },
  id: 'rowsPage',
}}