fix(material/datepicker): datepicker doesn't announce newly selected …

…range in firefox (#28529)

* 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

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

Adds comment in html file to connect the filed Firefox issue with the workaround.

Fixes #28360

src/material/datepicker/calendar-header.html

@@ -1,5 +1,9 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
+    <!-- [Firefox Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1880533] 
+      Relocated label next to related button and made visually hidden via cdk-visually-hidden
+      to enable label to appear in a11y tree for SR when using Firefox -->
+    <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 +29,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;
-}