[pickers] Fix aria-labelledby assignment to dialog

packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx

@@ -136,6 +136,7 @@ DateRangePickerToolbar.propTypes = {
   onRangePositionChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   readOnly: PropTypes.bool,
+  titleId: PropTypes.string,
   /**
    * Toolbar date format.
    */

packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx

@@ -13,7 +13,10 @@ import {
   PickersModalDialog,
   InferError,
   ExportedBaseToolbarProps,
+  useLocaleText,
 } from '@mui/x-date-pickers/internals';
+import useId from '@mui/utils/useId';
+import { buildWarning } from '@mui/x-date-pickers/internals/utils/warning';
 import {
   MobileRangePickerAdditionalViewProps,
   UseMobileRangePickerParams,
@@ -24,6 +27,12 @@ import { getReleaseInfo } from '../../utils/releaseInfo';
 import { DateRange, RangePosition } from '../../models/range';
 import { BaseMultiInputFieldProps } from '../../models/fields';
 
+const ariaLabelledByCantBeResolvedWarning = buildWarning([
+  'MUI: `aria-labelledby` can not be resolved.',
+  'Make sure that the picker has `start` or `end` fields  in `localeText` or the toolbar is not hidden.',
+  'Alternatively you can provide a custom `aria-labelledby` to the `mobilePaper` slot props.',
+]);
+
 const releaseInfo = getReleaseInfo();
 
 export const useMobileRangePicker = <
@@ -39,7 +48,7 @@ export const useMobileRangePicker = <
 
   const {
     slots,
-    slotProps,
+    slotProps: innerSlotProps,
     className,
     sx,
     format,
@@ -50,6 +59,8 @@ export const useMobileRangePicker = <
   } = props;
 
   const [rangePosition, setRangePosition] = React.useState<RangePosition>('start');
+  const labelId = useId();
+  const contextLocaleText = useLocaleText();
 
   const {
     open,
@@ -93,7 +104,7 @@ export const useMobileRangePicker = <
     InferError<TExternalProps>
   > = useSlotProps({
     elementType: Field,
-    externalSlotProps: slotProps?.field,
+    externalSlotProps: innerSlotProps?.field,
     additionalProps: {
       ...pickerFieldProps,
       readOnly: readOnly ?? true,
@@ -110,10 +121,12 @@ export const useMobileRangePicker = <
     ...fieldProps.slots,
   };
 
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
+
   const slotPropsForField: BaseMultiInputFieldProps<DateRange<TDate>, unknown>['slotProps'] = {
     ...fieldProps.slotProps,
     textField: (ownerState) => {
-      const externalInputProps = resolveComponentProps(slotProps?.textField, ownerState);
+      const externalInputProps = resolveComponentProps(innerSlotProps?.textField, ownerState);
       const inputPropsPassedByField = resolveComponentProps(
         fieldProps.slotProps?.textField,
         ownerState,
@@ -122,6 +135,7 @@ export const useMobileRangePicker = <
         ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput;
 
       return {
+        ...(isToolbarHidden && { id: `${labelId}-${ownerState.position}` }),
         ...externalInputProps,
         ...inputPropsPassedByField,
         ...inputPropsPassedByPicker,
@@ -132,7 +146,7 @@ export const useMobileRangePicker = <
       };
     },
     root: (ownerState) => {
-      const externalRootProps = resolveComponentProps(slotProps?.fieldRoot, ownerState);
+      const externalRootProps = resolveComponentProps(innerSlotProps?.fieldRoot, ownerState);
       const rootPropsPassedByField = resolveComponentProps(fieldProps.slotProps?.root, ownerState);
       return {
         ...externalRootProps,
@@ -141,7 +155,10 @@ export const useMobileRangePicker = <
       };
     },
     separator: (ownerState) => {
-      const externalSeparatorProps = resolveComponentProps(slotProps?.fieldSeparator, ownerState);
+      const externalSeparatorProps = resolveComponentProps(
+        innerSlotProps?.fieldSeparator,
+        ownerState,
+      );
       const separatorPropsPassedByField = resolveComponentProps(
         fieldProps.slotProps?.separator,
         ownerState,
@@ -155,16 +172,47 @@ export const useMobileRangePicker = <
   };
 
   const slotPropsForLayout: PickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView> = {
-    ...slotProps,
+    ...innerSlotProps,
     toolbar: {
-      ...slotProps?.toolbar,
+      ...innerSlotProps?.toolbar,
+      titleId: labelId,
       rangePosition,
       onRangePositionChange: setRangePosition,
     } as ExportedBaseToolbarProps,
   };
 
   const Layout = slots?.layout ?? PickersLayout;
 
+  const finalLocaleText = {
+    ...contextLocaleText,
+    ...localeText,
+  };
+  let labelledById = labelId;
+  if (isToolbarHidden) {
+    if (!finalLocaleText?.start && !finalLocaleText?.end) {
+      labelledById = undefined;
+    } else {
+      if (finalLocaleText.start) {
+        labelledById = `${labelId}-start-label`;
+      }
+      if (finalLocaleText.end) {
+        labelledById += ` ${labelId}-end-label`;
+      }
+    }
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    if (!labelledById && !innerSlotProps?.mobilePaper?.['aria-labelledby']) {
+      ariaLabelledByCantBeResolvedWarning();
+    }
+  }
+  const slotProps = {
+    ...innerSlotProps,
+    mobilePaper: {
+      'aria-labelledby': labelledById,
+      ...innerSlotProps?.mobilePaper,
+    },
+  };
+
   const renderPicker = () => (
     <LocalizationProvider localeText={localeText}>
       <WrapperVariantContext.Provider value="mobile">

packages/x-date-pickers/src/AdapterDateFns/localization.test.tsx

@@ -35,13 +35,13 @@ describe('<AdapterDateFns />', () => {
       });
 
       it('should have correct placeholder', () => {
-        render(<DateTimePicker />);
+        render(<DateTimePicker label="test" />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].placeholder, true);
       });
 
       it('should have well formatted value', () => {
-        render(<DateTimePicker value={adapter.date(testDate)} />);
+        render(<DateTimePicker label="test" value={adapter.date(testDate)} />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].value, true);
       });

packages/x-date-pickers/src/AdapterDateFnsJalali/localization.test.tsx

@@ -45,13 +45,13 @@ describe('<AdapterDateFnsJalali />', () => {
       });
 
       it('should have correct placeholder', () => {
-        render(<DateTimePicker />);
+        render(<DateTimePicker label="test" />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].placeholder, true);
       });
 
       it('should have well formatted value', () => {
-        render(<DateTimePicker value={adapter.date(testDate)} />);
+        render(<DateTimePicker label="test" value={adapter.date(testDate)} />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].value, true);
       });

packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx

@@ -49,7 +49,7 @@ describe('<AdapterDayjs />', () => {
         });
 
         it('should have correct placeholder', () => {
-          render(<DateTimePicker />);
+          render(<DateTimePicker label="test" />);
 
           expectInputValue(
             screen.getByRole('textbox'),
@@ -59,7 +59,7 @@ describe('<AdapterDayjs />', () => {
         });
 
         it('should have well formatted value', () => {
-          render(<DateTimePicker value={adapter.date(testDate)} />);
+          render(<DateTimePicker label="test" value={adapter.date(testDate)} />);
 
           expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].value, true);
         });

packages/x-date-pickers/src/AdapterLuxon/localization.test.tsx

@@ -33,13 +33,13 @@ describe('<AdapterLuxon />', () => {
       });
 
       it('should have correct placeholder', () => {
-        render(<DateTimePicker />);
+        render(<DateTimePicker label="test" />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].placeholder, true);
       });
 
       it('should have well formatted value', () => {
-        render(<DateTimePicker value={adapter.date(testDate)} />);
+        render(<DateTimePicker label="test" value={adapter.date(testDate)} />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].value, true);
       });

packages/x-date-pickers/src/AdapterMoment/localization.test.tsx

@@ -34,13 +34,13 @@ describe('<AdapterMoment />', () => {
       });
 
       it('should have correct placeholder', () => {
-        render(<DateTimePicker />);
+        render(<DateTimePicker label="test" />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].placeholder, true);
       });
 
       it('should have well formatted value', () => {
-        render(<DateTimePicker value={adapter.date(testDate)} />);
+        render(<DateTimePicker label="test" value={adapter.date(testDate)} />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].value, true);
       });

packages/x-date-pickers/src/AdapterMomentHijri/localization.test.tsx

@@ -26,13 +26,13 @@ describe('<AdapterMomentHijri />', () => {
       });
 
       it('should have correct placeholder', () => {
-        render(<DateTimePicker />);
+        render(<DateTimePicker label="test" />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].placeholder, true);
       });
 
       it('should have well formatted value', () => {
-        render(<DateTimePicker value={adapter.date(testDate)} />);
+        render(<DateTimePicker label="test" value={adapter.date(testDate)} />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].value, true);
       });

packages/x-date-pickers/src/AdapterMomentJalaali/localization.test.tsx

@@ -26,13 +26,13 @@ describe('<AdapterMomentJalaali />', () => {
       });
 
       it('should have correct placeholder', () => {
-        render(<DateTimePicker />);
+        render(<DateTimePicker label="test" />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].placeholder, true);
       });
 
       it('should have well formatted value', () => {
-        render(<DateTimePicker value={adapter.date(testDate)} />);
+        render(<DateTimePicker label="test" value={adapter.date(testDate)} />);
 
         expectInputValue(screen.getByRole('textbox'), localizedTexts[localeKey].value, true);
       });

packages/x-date-pickers/src/DatePicker/DatePicker.test.tsx

@@ -17,15 +17,15 @@ describe('<DatePicker />', () => {
   describe('prop: inputRef', () => {
     it('should forward ref to the text box', () => {
       const inputRef = React.createRef<HTMLInputElement>();
-      render(<DatePicker inputRef={inputRef} />);
+      render(<DatePicker label="test" inputRef={inputRef} />);
 
       expect(inputRef.current).to.have.tagName('input');
     });
   });
 
   describe('rendering', () => {
     it('should handle controlled `onChange` in desktop mode', () => {
-      render(<DatePicker />);
+      render(<DatePicker label="test" />);
       const input: HTMLInputElement = screen.getByRole('textbox');
 
       fireEvent.change(input, { target: { value: '02/22/2022' } });
@@ -36,7 +36,7 @@ describe('<DatePicker />', () => {
       const originalMatchMedia = window.matchMedia;
       window.matchMedia = stubMatchMedia(false);
 
-      render(<DatePicker />);
+      render(<DatePicker label="test" />);
 
       expect(screen.getByLabelText(/Choose date/)).to.have.tagName('input');
 
@@ -47,7 +47,7 @@ describe('<DatePicker />', () => {
       if (isJSDOM) {
         this.skip();
       }
-      render(<DatePicker defaultValue={new Date(2019, 5, 5)} openTo="year" />);
+      render(<DatePicker label="test" defaultValue={new Date(2019, 5, 5)} openTo="year" />);
 
       openPicker({ type: 'date', variant: 'desktop' });
       expect(document.activeElement).to.have.text('2019');

packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx

@@ -149,6 +149,7 @@ DatePickerToolbar.propTypes = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  titleId: PropTypes.string,
   /**
    * Toolbar date format.
    */

packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -269,6 +269,7 @@ DateTimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  titleId: PropTypes.string,
   /**
    * Toolbar date format.
    */