Skip to content

Commit a30631e

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 64b6506 commit a30631e

File tree

5 files changed

+65
-28
lines changed

5 files changed

+65
-28
lines changed

src/material/datepicker/calendar-header.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
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 [attr.id]="_buttonDescriptionId" aria-hidden="true">
7+
{{periodButtonText}}
8+
</span>
89
<svg class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView !== 'month'"
9-
viewBox="0 0 10 5" focusable="false">
10+
viewBox="0 0 10 5" focusable="false" aria-hidden="true">
1011
<polygon points="0,0 5,5 10,0"/>
1112
</svg>
1213
</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 & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export class MatCalendarHeader<D> {
7171
this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());
7272
}
7373

74-
/** The label for the current calendar view. */
74+
/** The display text for the current calendar view. */
7575
get periodButtonText(): string {
7676
if (this.calendar.currentView == 'month') {
7777
return this._dateAdapter
@@ -82,28 +82,25 @@ export class MatCalendarHeader<D> {
8282
return this._dateAdapter.getYearName(this.calendar.activeDate);
8383
}
8484

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-
);
85+
const [minYearName, maxYearName] = this._getMinMaxYearNames();
10486
return this._intl.formatYearRange(minYearName, maxYearName);
10587
}
10688

89+
/* The aria desciprtion of the current calendar view. */
90+
get periodButtonDescription(): string {
91+
if (this.calendar.currentView == 'month') {
92+
return this._dateAdapter
93+
.format(this.calendar.activeDate, this._dateFormats.display.monthYearLabel)
94+
.toLocaleUpperCase();
95+
}
96+
if (this.calendar.currentView == 'year') {
97+
return this._dateAdapter.getYearName(this.calendar.activeDate);
98+
}
99+
100+
const [minYearName, maxYearName] = this._getMinMaxYearNames();
101+
return this._intl.formatYearRangeLabel(minYearName, maxYearName);
102+
}
103+
107104
get periodButtonLabel(): string {
108105
return this.calendar.currentView == 'month'
109106
? this._intl.switchToMultiYearViewLabel
@@ -192,6 +189,30 @@ export class MatCalendarHeader<D> {
192189
this.calendar.maxDate,
193190
);
194191
}
192+
193+
private _getMinMaxYearNames(): [string, string] {
194+
// The offset from the active year to the "slot" for the starting year is the
195+
// *actual* first rendered year in the multi-year view, and the last year is
196+
// just yearsPerPage - 1 away.
197+
const activeYear = this._dateAdapter.getYear(this.calendar.activeDate);
198+
const minYearOfPage =
199+
activeYear -
200+
getActiveOffset(
201+
this._dateAdapter,
202+
this.calendar.activeDate,
203+
this.calendar.minDate,
204+
this.calendar.maxDate,
205+
);
206+
const maxYearOfPage = minYearOfPage + yearsPerPage - 1;
207+
const minYearName = this._dateAdapter.getYearName(
208+
this._dateAdapter.createDate(minYearOfPage, 0, 1),
209+
);
210+
const maxYearName = this._dateAdapter.getYearName(
211+
this._dateAdapter.createDate(maxYearOfPage, 0, 1),
212+
);
213+
214+
return [minYearName, maxYearName];
215+
}
195216
}
196217

197218
/** 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: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,8 @@ export class MatCalendarHeader<D> {
290290
nextClicked(): void;
291291
nextEnabled(): boolean;
292292
// (undocumented)
293+
get periodButtonDescription(): string;
294+
// (undocumented)
293295
get periodButtonLabel(): string;
294296
get periodButtonText(): string;
295297
get prevButtonLabel(): string;
@@ -525,7 +527,9 @@ export class MatDatepickerIntl {
525527
calendarLabel: string;
526528
readonly changes: Subject<void>;
527529
closeCalendarLabel: string;
530+
// (undocumented)
528531
formatYearRange(start: string, end: string): string;
532+
formatYearRangeLabel(start: string, end: string): string;
529533
nextMonthLabel: string;
530534
nextMultiYearLabel: string;
531535
nextYearLabel: string;

0 commit comments

Comments
 (0)