diff --git a/src/material/datepicker/calendar-header.html b/src/material/datepicker/calendar-header.html
index c520c6507346..8302fc166bef 100644
--- a/src/material/datepicker/calendar-header.html
+++ b/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>
diff --git a/src/material/datepicker/calendar.scss b/src/material/datepicker/calendar.scss
index cd91457f08d4..627b4c2c5b1e 100644
--- a/src/material/datepicker/calendar.scss
+++ b/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;
-}