diff --git a/src/material/datepicker/calendar-header.html b/src/material/datepicker/calendar-header.html
index 8302fc166bef..d6cc038e68ed 100644
--- a/src/material/datepicker/calendar-header.html
+++ b/src/material/datepicker/calendar-header.html
@@ -1,12 +1,12 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
-    <!-- [Firefox Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1880533] 
+    <!-- [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>
+    <label [id]="_periodButtonLabelId" class="cdk-visually-hidden" aria-live="polite">{{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">
+            [attr.aria-describedby]="_periodButtonLabelId">
       <span aria-hidden="true">{{periodButtonText}}</span>
       <svg class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView !== 'month'"
            viewBox="0 0 10 5" focusable="false" aria-hidden="true">