@@ -71,7 +71,7 @@ export class MatCalendarHeader<D> {
71
71
this . calendar . stateChanges . subscribe ( ( ) => changeDetectorRef . markForCheck ( ) ) ;
72
72
}
73
73
74
- /** The label for the current calendar view. */
74
+ /** The display text for the current calendar view. */
75
75
get periodButtonText ( ) : string {
76
76
if ( this . calendar . currentView == 'month' ) {
77
77
return this . _dateAdapter
@@ -82,28 +82,25 @@ export class MatCalendarHeader<D> {
82
82
return this . _dateAdapter . getYearName ( this . calendar . activeDate ) ;
83
83
}
84
84
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 ( ) ;
104
86
return this . _intl . formatYearRange ( minYearName , maxYearName ) ;
105
87
}
106
88
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
+
107
104
get periodButtonLabel ( ) : string {
108
105
return this . calendar . currentView == 'month'
109
106
? this . _intl . switchToMultiYearViewLabel
@@ -192,6 +189,30 @@ export class MatCalendarHeader<D> {
192
189
this . calendar . maxDate ,
193
190
) ;
194
191
}
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
+ }
195
216
}
196
217
197
218
/** A calendar that is used as part of the datepicker. */
0 commit comments