Skip to content

Commit

Permalink
fix(material/datepicker): add i18n strings
Browse files Browse the repository at this point in the history
Add i18n strings for "Start Date" and "End Date". Add `formatYearRangeLabel` to format a year of
dates in a screen reader friendly way (e.g. "2019 to 2020"). The existing method, `formatYearRange`,
uses a dash character which does not read well on screen readers.

These three new strings are not used in this commit. They will be used in future commits as aria
labels and descriptions to fix accessibility bugs.
  • Loading branch information
zarend committed Jun 3, 2022
1 parent 2740e98 commit bc2587d
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 1 deletion.
13 changes: 12 additions & 1 deletion src/material/datepicker/datepicker-intl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,19 @@ export class MatDatepickerIntl {
/** A label for the 'switch to year view' button (used by screen readers). */
switchToMultiYearViewLabel: string = 'Choose month and year';

/** Formats a range of years. */
/** A label for the first date of a range of dates (used by screen readers). */
startDateLabel: string = 'Start date';

/** A label for the last date of a range of dates (used by screen readers). */
endDateLabel: string = 'End date';

/** Formats a range of years (used for visuals). */
formatYearRange(start: string, end: string): string {
return `${start} \u2013 ${end}`;
}

/** Formats a label for a range of years (used by screen readers). */
formatYearRangeLabel(start: string, end: string): string {
return `${start} to ${end}`;
}
}
3 changes: 3 additions & 0 deletions tools/public_api_guard/material/datepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -525,14 +525,17 @@ export class MatDatepickerIntl {
calendarLabel: string;
readonly changes: Subject<void>;
closeCalendarLabel: string;
endDateLabel: string;
formatYearRange(start: string, end: string): string;
formatYearRangeLabel(start: string, end: string): string;
nextMonthLabel: string;
nextMultiYearLabel: string;
nextYearLabel: string;
openCalendarLabel: string;
prevMonthLabel: string;
prevMultiYearLabel: string;
prevYearLabel: string;
startDateLabel: string;
switchToMonthViewLabel: string;
switchToMultiYearViewLabel: string;
// (undocumented)
Expand Down

0 comments on commit bc2587d

Please sign in to comment.