将辅助功能道具传递给 Material-ui-pickers 日历中的嵌套按钮

Question

我在我的应用程序中使用 material-ui-pickers 日历，用于在月份之间导航的左右图标箭头按钮缺少 aria-labels，这是一个关键的可访问性失败：https://dequeuniversity.com/rules/axe/3.5/button-name?application=axeAPI

有人建议我如何将 aria-label 传递到此组件，或附加 aria-labelledby 吗？

谢谢。

Answer 1

普通 JS 解决方案是：

document.querySelectorAll(".MuiPickersCalendarHeader-iconButton")[0].setAttribute("aria-label", "go to the previous month");
document.querySelectorAll(".MuiPickersCalendarHeader-iconButton")[1].setAttribute("aria-label", "go to the next month");

Answer 2

使用 KeyboardDatePicker 给出的 KeyboardButtonProps:

示例：

<KeyboardDatePicker
    label={'DateText'}
    KeyboardButtonProps={{
        'aria-label': 'target date',
    }}
    leftArrowButtonProps={{
        'aria-label': 'Go to the previous month',
    }}
    rightArrowButtonProps={{
        'aria-label': 'Go to the next month',
    }}
/>

有关详细信息，请参阅 https://material-ui-pickers.dev/api/KeyboardDatePicker

将辅助功能道具传递给 Material-ui-pickers 日历中的嵌套按钮

Passing Accessibility props to a nested button in Material-ui-pickers Calendar

accessibility

reactjs

material-ui

web-accessibility