fix(material/datepicker): replace labels not pointing to anything (#2…

…9755)

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.

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>

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">