From 2cf2f5321e724bced1b9c43eeca2503a7fe2fdc4 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 18 Sep 2024 18:39:56 +0200
Subject: [PATCH] fix(material/datepicker): replace labels not pointing to
 anything (#29755)

Fixes that the datepicker had some `<label>` elements that weren't pointing to anything via the `for` attribute which was being flagged by Chrome.

Fixes #29749.

(cherry picked from commit 602bef1cd6a4e11c89105ec3cd2f1410eea9cb50)
---
 src/material/datepicker/calendar-body.html   | 8 ++++----
 src/material/datepicker/calendar-header.html | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index ef944f636dff..98b63b03410a 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -84,9 +84,9 @@
   </tr>
 }
 
-<label [id]="_startDateLabelId" class="mat-calendar-body-hidden-label">
+<span [id]="_startDateLabelId" class="mat-calendar-body-hidden-label">
   {{startDateAccessibleName}}
-</label>
-<label [id]="_endDateLabelId" class="mat-calendar-body-hidden-label">
+</span>
+<span [id]="_endDateLabelId" class="mat-calendar-body-hidden-label">
   {{endDateAccessibleName}}
-</label>
+</span>
diff --git a/src/material/datepicker/calendar-header.html b/src/material/datepicker/calendar-header.html
index d6cc038e68ed..02f826cbb227 100644
--- a/src/material/datepicker/calendar-header.html
+++ b/src/material/datepicker/calendar-header.html
@@ -3,7 +3,7 @@
     <!-- [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" aria-live="polite">{{periodButtonDescription}}</label>
+    <span [id]="_periodButtonLabelId" class="cdk-visually-hidden" aria-live="polite">{{periodButtonDescription}}</span>
     <button mat-button type="button" class="mat-calendar-period-button"
             (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
             [attr.aria-describedby]="_periodButtonLabelId">