diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html index 98b63b03410a..4bd24d90fa83 100644 --- a/src/material/datepicker/calendar-body.html +++ b/src/material/datepicker/calendar-body.html @@ -90,3 +90,9 @@ {{endDateAccessibleName}} + + {{comparisonDateAccessibleName}} {{startDateAccessibleName}} + + + {{comparisonDateAccessibleName}} {{endDateAccessibleName}} + diff --git a/src/material/datepicker/calendar-body.ts b/src/material/datepicker/calendar-body.ts index 6e67911f0f1d..7de7a8125adb 100644 --- a/src/material/datepicker/calendar-body.ts +++ b/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 | {[key: string]: any}; @@ -99,6 +100,7 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterView private _elementRef = inject>(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. @@ -200,10 +202,18 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterView /** ID for the end date label. */ _endDateLabelId: string; + /** ID for the comparison start date label. */ + _comparisonStartDateLabelId: string; + + /** ID for the comparison end date label. */ + _comparisonEndDateLabelId: string; + private _didDragSinceMouseDown = false; 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 @@ -216,7 +226,9 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterView constructor() { const idGenerator = inject(_IdGenerator); this._startDateLabelId = idGenerator.getId('mat-calendar-body-start-'); - this._endDateLabelId = idGenerator.getId('mat-calendar-body-start-'); + this._endDateLabelId = idGenerator.getId('mat-calendar-body-end-'); + this._comparisonStartDateLabelId = idGenerator.getId('mat-calendar-body-comparison-start-'); + this._comparisonEndDateLabelId = idGenerator.getId('mat-calendar-body-comparison-end-'); inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader); @@ -467,6 +479,17 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterView } else if (this.endValue === value) { return this._endDateLabelId; } + + if (this.comparisonStart !== null && this.comparisonEnd !== null) { + if (value === this.comparisonStart && value === this.comparisonEnd) { + return `${this._comparisonStartDateLabelId} ${this._comparisonEndDateLabelId}`; + } else if (value === this.comparisonStart) { + return this._comparisonStartDateLabelId; + } else if (value === this.comparisonEnd) { + return this._comparisonEndDateLabelId; + } + } + return null; } diff --git a/src/material/datepicker/datepicker-intl.ts b/src/material/datepicker/datepicker-intl.ts index a6b95dc93048..3faeafff9838 100644 --- a/src/material/datepicker/datepicker-intl.ts +++ b/src/material/datepicker/datepicker-intl.ts @@ -65,6 +65,11 @@ export class MatDatepickerIntl { */ endDateLabel = 'End date'; + /** + * A label for the Comparison date of a range of dates (used by screen readers). + */ + comparisonDateLabel = 'Comparison range'; + /** Formats a range of years (used for visuals). */ formatYearRange(start: string, end: string): string { return `${start} \u2013 ${end}`; diff --git a/tools/public_api_guard/material/datepicker.md b/tools/public_api_guard/material/datepicker.md index a0c8a859fdad..3123e6584977 100644 --- a/tools/public_api_guard/material/datepicker.md +++ b/tools/public_api_guard/material/datepicker.md @@ -196,8 +196,12 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterView _cellClicked(cell: MatCalendarCell, event: MouseEvent): void; _cellPadding: string; _cellWidth: string; + // (undocumented) + comparisonDateAccessibleName: string; comparisonEnd: number | null; + _comparisonEndDateLabelId: string; comparisonStart: number | null; + _comparisonStartDateLabelId: string; readonly dragEnded: EventEmitter>; readonly dragStarted: EventEmitter>; // (undocumented) @@ -480,6 +484,7 @@ export class MatDatepickerIntl { calendarLabel: string; readonly changes: Subject; closeCalendarLabel: string; + comparisonDateLabel: string; // @deprecated endDateLabel: string; formatYearRange(start: string, end: string): string;