fix(material/datepicker): multi-year view changes in datepicker doesn't announce selected year range

Fixes a bug in the Angular Material  component where when the selected year range is
updated by moving foward to the next range or by moving to the previous range the screenreader
announces the original date range rather than the newly selected date range. This because the
 class was removing the new value from the Firefox accessibility tree.

Fixes #28360

Author: essjay05

src/material/datepicker/calendar-header.html

@@ -1,5 +1,6 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
+    <label [id]="_periodButtonLabelId" class="cdk-visually-hidden">{{periodButtonDescription}}</label>
     <button mat-button type="button" class="mat-calendar-period-button"
             (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
             [attr.aria-describedby]="_periodButtonLabelId" aria-live="polite">
@@ -25,4 +26,3 @@
     </button>
   </div>
 </div>
-<label [id]="_periodButtonLabelId" class="mat-calendar-hidden-label">{{periodButtonDescription}}</label>

src/material/datepicker/calendar.scss

@@ -174,7 +174,3 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots()
   content: '';
 }
 
-// Label that is not rendered and removed from the accessibility tree.
-.mat-calendar-hidden-label {
-  display: none;
-}