From 2227150bcb2c5440d56ad0bb56d1486eb22c5efb Mon Sep 17 00:00:00 2001
From: Joy S <stepjoyous@gmail.com>
Date: Fri, 2 Feb 2024 13:29:46 -0800
Subject: [PATCH 1/2] 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
---
 src/material/datepicker/calendar-header.html | 2 +-
 src/material/datepicker/calendar.scss        | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/material/datepicker/calendar-header.html b/src/material/datepicker/calendar-header.html
index c520c6507346..450e00db1071 100644
--- a/src/material/datepicker/calendar-header.html
+++ b/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>
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;
-}

From 62f5a680c501a2725165a04cbff693f854f78a36 Mon Sep 17 00:00:00 2001
From: Joy S <stepjoyous@gmail.com>
Date: Thu, 15 Feb 2024 10:48:08 -0800
Subject: [PATCH 2/2] !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 | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/material/datepicker/calendar-header.html b/src/material/datepicker/calendar-header.html
index 450e00db1071..8302fc166bef 100644
--- a/src/material/datepicker/calendar-header.html
+++ b/src/material/datepicker/calendar-header.html
@@ -1,5 +1,8 @@
 <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"