fix(material/datepicker): internationalize comparison date label

Updates previous fix by creating a comparisonDateLabel value in
MatDatePickerIntl to allow for further accessibility in allowing
the text to be converted and translated.

Fixes b/195600299

Author: essjay05

src/material/datepicker/calendar-body.html

@@ -91,8 +91,8 @@
   {{endDateAccessibleName}}
 </span>
 <span [id]="_comparisonStartLabelId" class="mat-calendar-body-hidden-label">
-  Sub range {{startDateAccessibleName}}
+  {{comparisonDateAccessibleName}} {{startDateAccessibleName}}
 </span>
 <span [id]="_comparisonEndLabelId" class="mat-calendar-body-hidden-label">
-  Sub range {{endDateAccessibleName}}
+  {{comparisonDateAccessibleName}} {{endDateAccessibleName}}
 </span>

src/material/datepicker/calendar-body.ts

@@ -28,6 +28,7 @@ import {_IdGenerator} from '@angular/cdk/a11y';
 import {NgClass} from '@angular/common';
 import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 import {_StructuralStylesLoader} from '@angular/material/core';
+import {MatDatepickerIntl} from './datepicker-intl';
 
 /** Extra CSS classes that can be associated with a calendar cell. */
 export type MatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any};
@@ -99,6 +100,7 @@ export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterView
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   private _ngZone = inject(NgZone);
   private _platform = inject(Platform);
+  private _intl = inject(MatDatepickerIntl);
 
   /**
    * Used to skip the next focus event when rendering the preview range.
@@ -204,6 +206,8 @@ export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterView
 
   private _injector = inject(Injector);
 
+  comparisonDateAccessibleName = this._intl.comparisonDateLabel;
+
   /**
    * Tracking function for rows based on their identity. Ideally we would use some sort of
    * key on the row, but that would require a breaking change for the `rows` input. We don't

src/material/datepicker/datepicker-intl.ts

@@ -65,6 +65,12 @@ export class MatDatepickerIntl {
    */
   endDateLabel = 'End date';
 
+  /**
+   * A label used to indicate that the date is part of a selected comparison
+   * sub range of dates (used by screen readers).
+   */
+  comparisonDateLabel = 'Sub range';
+
   /** Formats a range of years (used for visuals). */
   formatYearRange(start: string, end: string): string {
     return `${start} \u2013 ${end}`;