Code review: Flavien

Better support for custom calendar header components
mui · Jun 19, 2024 · db9bc95 · db9bc95
1 parent cf5c4e8
commit db9bc95
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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.