[MobileDatePicker] Broken ARIA reference

[212817]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When scanning for accessibility issues using the app Wave. The MobileDatePicker generate the follow issue:
"Broken ARIA reference "

Expected behavior 🤔

The MobileDatePicker should not generate any accessibility issues.

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/responsivedatepickers-demo-mui-x-forked-wuwiu7?file=/demo.tsx

Steps:

1. Install the Wave extension in a chrome browser.
2. Click on the MobileDatePicker or DatePiker with props desktopModeMediaQuery='never' to open a selection window
3. Scan the page with a Date Picker on.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 💳 (optional)

No response

[cherniavskii]

Thanks @212817
There's missing aria-labelledby prop passed to Dialog here:

mui-x/packages/x-date-pickers/src/internals/components/PickersModalDialog.tsx

Line 69 in bc263d5

<PickersModalDialogRoot open={open} onClose={onDismiss} {...DialogProps}>

that should point to the id of the title component in here:

mui-x/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx

Lines 111 to 112 in bc263d5

	<Typography data-mui-test="picker-toolbar-title" color="text.secondary" variant="overline">
	{toolbarTitle}