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

Question

I'm using a material-ui-pickers calendar in my app and the left and right icon arrow buttons for navigating between months are lacking aria-labels, which is a critical accessibility failure: https://dequeuniversity.com/rules/axe/3.5/button-name?application=axeAPI

Does anyone have suggestions about how I might pass down an aria-label into this component, or attach an aria-labelledby?

Answer 1

A vanilla JS solution would be:

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");