From c72add69a3877f1b805881aa1de1dbfb3b8f5cea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joy=20Serqui=C3=B1a?=
 <44146839+essjay05@users.noreply.github.com>
Date: Mon, 4 Mar 2024 16:42:15 -0800
Subject: [PATCH] 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 | 5 ++++-
 src/material/datepicker/calendar.scss        | 4 ----
 2 files changed, 4 insertions(+), 5 deletions(-)

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;
-}