[pickers] DateRangeCalendar grid is missing it's accessible name

[kealjones-wk]

Steps to reproduce

Link to live example: https://mui.com/x/react-date-pickers/date-range-picker/#basic-usage

Steps:

1. on the above page open google chrome dev tools accessibility panel
2. open the DateRangePickers calendar
3. notice the grid missing a accessible name.

Current behavior

The grid in the calendar does not have an accessible name.

Expected behavior

The grid would have an accessible name of the current month/year.

DateRangePicker Today:

Compared to DatePicker Today:

Context

The grid lacking an accessible name is bad for accessibility. Additionally it makes it very hard to query for a day relative to the correct calendar. In order to query for a day on the calendar in the same way that a visual user would should be something like this:

within(screen.getByRole('grid', {name: "January 2024"})).getByRole('gridcell', {name: "18"});

Your environment

No response

Search keywords: DateRangePicker, DateRangeCalendar, accessibility, grid
Order ID: 82849

[LukasTy]

Thank you for reporting this problem! 🙏
This also helped surface not the most ideal testing method that we resorted to in the absence of this support. 🙈

mui-x/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx

Lines 27 to 28 in 6f68422

	const getPickerDay = (name: string, picker = 'January 2018') =>
	getByRole(screen.getByText(picker)?.parentElement?.parentElement!, 'gridcell', { name });

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@kealjones-wk: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.