From 7b2776f42c505065df2ec99562b1726a2f6ef4af Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 4 Nov 2024 19:00:38 +0000 Subject: [PATCH 1/4] refactor(material/datepicker): rebased and resolved changes Updates previous change to new datepicker changes. --- src/material/datepicker/calendar-body.html | 6 ++++++ src/material/datepicker/calendar-body.ts | 20 ++++++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html index 98b63b03410a..9c787374a854 100644 --- a/src/material/datepicker/calendar-body.html +++ b/src/material/datepicker/calendar-body.html @@ -90,3 +90,9 @@ {{endDateAccessibleName}} + + Sub range {{startDateAccessibleName}} + + + Sub range {{endDateAccessibleName}} + diff --git a/src/material/datepicker/calendar-body.ts b/src/material/datepicker/calendar-body.ts index 6e67911f0f1d..2e5378c6ad8c 100644 --- a/src/material/datepicker/calendar-body.ts +++ b/src/material/datepicker/calendar-body.ts @@ -467,6 +467,16 @@ 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._comparisonStartLabelId}-${this._comparisonEndLabelId}`; + } else if (value === this.comparisonStart) { + return this._comparisonStartLabelId; + } else if (value === this.comparisonEnd) { + return this._comparisonEndLabelId; + } + } return null; } @@ -607,6 +617,16 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterView return null; } + + private _id = `mat-calendar-body-${calendarBodyId++}`; + + _startDateLabelId = `${this._id}-start-date`; + + _endDateLabelId = `${this._id}-end-date`; + + _comparisonStartLabelId = `${this._id}-comparison-start-date`; + + _comparisonEndLabelId = `${this._id}-comparison-end-date`; } /** Checks whether a node is a table cell element. */ From 58e6836a6cd579de123c39bb7d5cf2db9e584d34 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 28 Oct 2024 23:48:53 +0000 Subject: [PATCH 2/4] 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 --- src/material/datepicker/calendar-body.html | 4 ++-- src/material/datepicker/calendar-body.ts | 4 ++++ src/material/datepicker/datepicker-intl.ts | 6 ++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html index 9c787374a854..101ca1c99e5a 100644 --- a/src/material/datepicker/calendar-body.html +++ b/src/material/datepicker/calendar-body.html @@ -91,8 +91,8 @@ {{endDateAccessibleName}} - Sub range {{startDateAccessibleName}} + {{comparisonDateAccessibleName}} {{startDateAccessibleName}} - Sub range {{endDateAccessibleName}} + {{comparisonDateAccessibleName}} {{endDateAccessibleName}} diff --git a/src/material/datepicker/calendar-body.ts b/src/material/datepicker/calendar-body.ts index 2e5378c6ad8c..1a35b9774871 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. @@ -204,6 +206,8 @@ export class MatCalendarBody 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 diff --git a/src/material/datepicker/datepicker-intl.ts b/src/material/datepicker/datepicker-intl.ts index a6b95dc93048..f1a448e1cfb5 100644 --- a/src/material/datepicker/datepicker-intl.ts +++ b/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}`; From e825b72edacb96194c10b41024d21c88cea90342 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Wed, 30 Oct 2024 17:05:51 +0000 Subject: [PATCH 3/4] refactor(material/datepicker): update comparisonDateLabel value Updates previous fix to remove - for Ids in calendar-body.ts and revises comparisonDateLabel value to be Comparison range as recommended. Fixes b/195600299 --- src/material/datepicker/calendar-body.ts | 2 +- src/material/datepicker/datepicker-intl.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/material/datepicker/calendar-body.ts b/src/material/datepicker/calendar-body.ts index 1a35b9774871..c014524a7f4f 100644 --- a/src/material/datepicker/calendar-body.ts +++ b/src/material/datepicker/calendar-body.ts @@ -474,7 +474,7 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterView if (this.comparisonStart !== null && this.comparisonEnd !== null) { if (value === this.comparisonStart && value === this.comparisonEnd) { - return `${this._comparisonStartLabelId}-${this._comparisonEndLabelId}`; + return `${this._comparisonStartLabelId} ${this._comparisonEndLabelId}`; } else if (value === this.comparisonStart) { return this._comparisonStartLabelId; } else if (value === this.comparisonEnd) { diff --git a/src/material/datepicker/datepicker-intl.ts b/src/material/datepicker/datepicker-intl.ts index f1a448e1cfb5..476b20be20b5 100644 --- a/src/material/datepicker/datepicker-intl.ts +++ b/src/material/datepicker/datepicker-intl.ts @@ -69,7 +69,7 @@ export class MatDatepickerIntl { * 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'; + comparisonDateLabel = 'Comparison range'; /** Formats a range of years (used for visuals). */ formatYearRange(start: string, end: string): string { From 38033c040ee3f99bc786b2c559770dc76d4b805f Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 4 Nov 2024 19:59:02 +0000 Subject: [PATCH 4/4] Revert "refactor(material/datepicker): update comparisonDateLabel value" This reverts commit 5eb3ff3c3f7bb11a5ae97d0bd22d56845892918b. --- src/material/datepicker/calendar-body.ts | 2 +- src/material/datepicker/datepicker-intl.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/material/datepicker/calendar-body.ts b/src/material/datepicker/calendar-body.ts index c014524a7f4f..1a35b9774871 100644 --- a/src/material/datepicker/calendar-body.ts +++ b/src/material/datepicker/calendar-body.ts @@ -474,7 +474,7 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterView if (this.comparisonStart !== null && this.comparisonEnd !== null) { if (value === this.comparisonStart && value === this.comparisonEnd) { - return `${this._comparisonStartLabelId} ${this._comparisonEndLabelId}`; + return `${this._comparisonStartLabelId}-${this._comparisonEndLabelId}`; } else if (value === this.comparisonStart) { return this._comparisonStartLabelId; } else if (value === this.comparisonEnd) { diff --git a/src/material/datepicker/datepicker-intl.ts b/src/material/datepicker/datepicker-intl.ts index 476b20be20b5..f1a448e1cfb5 100644 --- a/src/material/datepicker/datepicker-intl.ts +++ b/src/material/datepicker/datepicker-intl.ts @@ -69,7 +69,7 @@ export class MatDatepickerIntl { * A label used to indicate that the date is part of a selected comparison * sub range of dates (used by screen readers). */ - comparisonDateLabel = 'Comparison range'; + comparisonDateLabel = 'Sub range'; /** Formats a range of years (used for visuals). */ formatYearRange(start: string, end: string): string {