[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

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

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

Answer 2

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

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