Skip to content

Commit 811fd8b

Browse files
committed
fix(material/datepicker): announce the "to" when reading year range
For the period button, announce the "to" when reading year range. When in multi-year view, some screen readers would announce the period button as "2019 2020". Add `formatYearRangeLabel` intl method to announce period button description as "2019 to 2020". Fixes #23467.
1 parent 25dcb36 commit 811fd8b

File tree

5 files changed

+62
-35
lines changed

5 files changed

+62
-35
lines changed

src/material/datepicker/calendar-header.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@
22
<div class="mat-calendar-controls">
33
<button mat-button type="button" class="mat-calendar-period-button"
44
(click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
5-
[attr.aria-describedby]="_buttonDescriptionId"
6-
aria-live="polite">
7-
<span [attr.id]="_buttonDescriptionId">{{periodButtonText}}</span>
5+
[attr.aria-description]="periodButtonDescription" aria-live="polite">
6+
<span aria-hidden="true">{{periodButtonText}}</span>
87
<svg class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView !== 'month'"
9-
viewBox="0 0 10 5" focusable="false">
8+
viewBox="0 0 10 5" focusable="false" aria-hidden="true">
109
<polygon points="0,0 5,5 10,0"/>
1110
</svg>
1211
</button>

src/material/datepicker/calendar-header.spec.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -191,10 +191,16 @@ describe('MatCalendarHeader', () => {
191191
});
192192

193193
it('should label and describe period button for assistive technology', () => {
194-
const description = periodButton.querySelector('span[id]');
194+
expect(calendarInstance.currentView).toBe('month');
195+
196+
periodButton.click();
197+
fixture.detectChanges();
198+
199+
expect(calendarInstance.currentView).toBe('multi-year');
195200
expect(periodButton.hasAttribute('aria-label')).toBe(true);
196-
expect(periodButton.hasAttribute('aria-describedby')).toBe(true);
197-
expect(periodButton.getAttribute('aria-describedby')).toBe(description?.getAttribute('id')!);
201+
expect(periodButton.getAttribute('aria-label')).toMatch(/^[a-z0-9\s]+$/i);
202+
expect(periodButton.hasAttribute('aria-description')).toBe(true);
203+
expect(periodButton.getAttribute('aria-description')).toMatch(/^[a-z0-9\s]+$/i);
198204
});
199205
});
200206

src/material/datepicker/calendar.ts

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,6 @@ import {MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, DateRange} from './date-select
4747
*/
4848
export type MatCalendarView = 'month' | 'year' | 'multi-year';
4949

50-
/** Counter used to generate unique IDs. */
51-
let uniqueId = 0;
52-
5350
/** Default header for MatCalendar */
5451
@Component({
5552
selector: 'mat-calendar-header',
@@ -59,8 +56,6 @@ let uniqueId = 0;
5956
changeDetection: ChangeDetectionStrategy.OnPush,
6057
})
6158
export class MatCalendarHeader<D> {
62-
_buttonDescriptionId = `mat-calendar-button-${uniqueId++}`;
63-
6459
constructor(
6560
private _intl: MatDatepickerIntl,
6661
@Inject(forwardRef(() => MatCalendar)) public calendar: MatCalendar<D>,
@@ -71,7 +66,7 @@ export class MatCalendarHeader<D> {
7166
this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());
7267
}
7368

74-
/** The label for the current calendar view. */
69+
/** The display text for the current calendar view. */
7570
get periodButtonText(): string {
7671
if (this.calendar.currentView == 'month') {
7772
return this._dateAdapter
@@ -82,28 +77,25 @@ export class MatCalendarHeader<D> {
8277
return this._dateAdapter.getYearName(this.calendar.activeDate);
8378
}
8479

85-
// The offset from the active year to the "slot" for the starting year is the
86-
// *actual* first rendered year in the multi-year view, and the last year is
87-
// just yearsPerPage - 1 away.
88-
const activeYear = this._dateAdapter.getYear(this.calendar.activeDate);
89-
const minYearOfPage =
90-
activeYear -
91-
getActiveOffset(
92-
this._dateAdapter,
93-
this.calendar.activeDate,
94-
this.calendar.minDate,
95-
this.calendar.maxDate,
96-
);
97-
const maxYearOfPage = minYearOfPage + yearsPerPage - 1;
98-
const minYearName = this._dateAdapter.getYearName(
99-
this._dateAdapter.createDate(minYearOfPage, 0, 1),
100-
);
101-
const maxYearName = this._dateAdapter.getYearName(
102-
this._dateAdapter.createDate(maxYearOfPage, 0, 1),
103-
);
80+
const [minYearName, maxYearName] = this._getMinMaxYearNames();
10481
return this._intl.formatYearRange(minYearName, maxYearName);
10582
}
10683

84+
/* The aria desciprtion of the current calendar view. */
85+
get periodButtonDescription(): string {
86+
if (this.calendar.currentView == 'month') {
87+
return this._dateAdapter
88+
.format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel)
89+
.toLocaleUpperCase();
90+
}
91+
if (this.calendar.currentView == 'year') {
92+
return this._dateAdapter.getYearName(this.calendar.activeDate);
93+
}
94+
95+
const [minYearName, maxYearName] = this._getMinMaxYearNames();
96+
return this._intl.formatYearRangeLabel(minYearName, maxYearName);
97+
}
98+
10799
get periodButtonLabel(): string {
108100
return this.calendar.currentView == 'month'
109101
? this._intl.switchToMultiYearViewLabel
@@ -192,6 +184,30 @@ export class MatCalendarHeader<D> {
192184
this.calendar.maxDate,
193185
);
194186
}
187+
188+
private _getMinMaxYearNames(): [string, string] {
189+
// The offset from the active year to the "slot" for the starting year is the
190+
// *actual* first rendered year in the multi-year view, and the last year is
191+
// just yearsPerPage - 1 away.
192+
const activeYear = this._dateAdapter.getYear(this.calendar.activeDate);
193+
const minYearOfPage =
194+
activeYear -
195+
getActiveOffset(
196+
this._dateAdapter,
197+
this.calendar.activeDate,
198+
this.calendar.minDate,
199+
this.calendar.maxDate,
200+
);
201+
const maxYearOfPage = minYearOfPage + yearsPerPage - 1;
202+
const minYearName = this._dateAdapter.getYearName(
203+
this._dateAdapter.createDate(minYearOfPage, 0, 1),
204+
);
205+
const maxYearName = this._dateAdapter.getYearName(
206+
this._dateAdapter.createDate(maxYearOfPage, 0, 1),
207+
);
208+
209+
return [minYearName, maxYearName];
210+
}
195211
}
196212

197213
/** A calendar that is used as part of the datepicker. */

src/material/datepicker/datepicker-intl.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,13 @@ export class MatDatepickerIntl {
5151
/** A label for the 'switch to year view' button (used by screen readers). */
5252
switchToMultiYearViewLabel: string = 'Choose month and year';
5353

54-
/** Formats a range of years. */
54+
/** Formats a range of years (used only for visuals). */
5555
formatYearRange(start: string, end: string): string {
5656
return `${start} \u2013 ${end}`;
5757
}
58+
59+
/** Formats a range of years (used by screen readers). */
60+
formatYearRangeLabel(start: string, end: string): string {
61+
return `${start} to ${end}`;
62+
}
5863
}

tools/public_api_guard/material/datepicker.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -282,14 +282,14 @@ export type MatCalendarCellCssClasses = string | string[] | Set<string> | {
282282
export class MatCalendarHeader<D> {
283283
constructor(_intl: MatDatepickerIntl, calendar: MatCalendar<D>, _dateAdapter: DateAdapter<D>, _dateFormats: MatDateFormats, changeDetectorRef: ChangeDetectorRef);
284284
// (undocumented)
285-
_buttonDescriptionId: string;
286-
// (undocumented)
287285
calendar: MatCalendar<D>;
288286
currentPeriodClicked(): void;
289287
get nextButtonLabel(): string;
290288
nextClicked(): void;
291289
nextEnabled(): boolean;
292290
// (undocumented)
291+
get periodButtonDescription(): string;
292+
// (undocumented)
293293
get periodButtonLabel(): string;
294294
get periodButtonText(): string;
295295
get prevButtonLabel(): string;
@@ -526,6 +526,7 @@ export class MatDatepickerIntl {
526526
readonly changes: Subject<void>;
527527
closeCalendarLabel: string;
528528
formatYearRange(start: string, end: string): string;
529+
formatYearRangeLabel(start: string, end: string): string;
529530
nextMonthLabel: string;
530531
nextMultiYearLabel: string;
531532
nextYearLabel: string;

0 commit comments

Comments
 (0)