From db9bc95658619553abeb35bad984e456bae03e27 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Wed, 19 Jun 2024 11:51:22 +0300
Subject: [PATCH] Code review: Flavien

Better support for custom calendar header components
---
 .../src/DateRangeCalendar/DateRangeCalendar.tsx       | 11 ++++++++---
 .../PickersRangeCalendarHeader.tsx                    |  6 ++----
 .../PickersCalendarHeader.types.ts                    |  4 ++++
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
index 933a32dd37da..4d4e418bea87 100644
--- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
@@ -370,7 +370,6 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<
       timezone,
       slots,
       slotProps,
-      labelId: `${id}-grid`,
     },
     ownerState: props,
   });
@@ -551,10 +550,16 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<
       <Watermark packageName="x-date-pickers-pro" releaseInfo={releaseInfo} />
       {calendarMonths.map((monthIndex) => {
         const month = visibleMonths[monthIndex];
+        const labelId = `${id}-grid-${monthIndex}-label`;
 
         return (
           <DateRangeCalendarMonthContainer key={monthIndex} className={classes.monthContainer}>
-            <CalendarHeader<TDate> {...calendarHeaderProps} month={month} monthIndex={monthIndex} />
+            <CalendarHeader<TDate>
+              {...calendarHeaderProps}
+              month={month}
+              monthIndex={monthIndex}
+              labelId={labelId}
+            />
             <DayCalendarForRange<TDate>
               className={classes.dayCalendar}
               {...calendarState}
@@ -578,7 +583,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<
               fixedWeekNumber={fixedWeekNumber}
               displayWeekNumber={displayWeekNumber}
               timezone={timezone}
-              gridLabelId={`${id}-grid-${monthIndex}-label`}
+              gridLabelId={labelId}
             />
           </DateRangeCalendarMonthContainer>
         );
diff --git a/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx b/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx
index 3fad4b2c4d97..8ad7ab368873 100644
--- a/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx
+++ b/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx
@@ -56,9 +56,7 @@ const PickersRangeCalendarHeader = React.forwardRef(function PickersRangeCalenda
   });
 
   if (calendars === 1) {
-    return (
-      <PickersCalendarHeader {...other} labelId={`${labelId}-${monthIndex}-label`} ref={ref} />
-    );
+    return <PickersCalendarHeader {...other} labelId={labelId} ref={ref} />;
   }
 
   const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1), 'left');
@@ -78,7 +76,7 @@ const PickersRangeCalendarHeader = React.forwardRef(function PickersRangeCalenda
       nextLabel={localeText.nextMonth}
       slots={slots}
       slotProps={slotProps}
-      labelId={`${labelId}-${monthIndex}-label`}
+      labelId={labelId}
     >
       {utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)}
     </PickersRangeCalendarHeaderContentMultipleCalendars>
diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts
index 06cbb152849a..a679a4fe9b6f 100644
--- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts
+++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.types.ts
@@ -67,6 +67,10 @@ export interface PickersCalendarHeaderProps<TDate extends PickerValidDate>
   view: DateView;
   reduceAnimations: boolean;
   onViewChange?: (view: DateView) => void;
+  /**
+   * Id of the calendar text element.
+   * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
+   */
   labelId?: string;
   /**
    * Override or extend the styles applied to the component.