fix(material/datepicker): adds aria-describedby value for comparison date range

Updates Angular Components Datepicker component calendar-body to check for a
comparison start and comparison end date value and implement aria-describedby
id values to correspond with hidden spans that describe a sub range start and
a sub range end date if it does exist so that it is read by the screenreader
and improves accessibility.

Fixes b/195600299

Author: essjay05

src/material/datepicker/calendar-body.html

@@ -90,3 +90,9 @@
 <span [id]="_endDateLabelId" class="mat-calendar-body-hidden-label">
   {{endDateAccessibleName}}
 </span>
+<span [id]="_comparisonStartLabelId" class="mat-calendar-body-hidden-label">
+  Sub range {{startDateAccessibleName}}
+</span>
+<span [id]="_comparisonEndLabelId" class="mat-calendar-body-hidden-label">
+  Sub range {{endDateAccessibleName}}
+</span>

src/material/datepicker/calendar-body.ts

@@ -451,12 +451,22 @@ export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterView
     }
 
     if (this.startValue === value && this.endValue === value) {
-      return `${this._startDateLabelId} ${this._endDateLabelId}`;
+      return `${this._startDateLabelId}-${this._endDateLabelId}`;
     } else if (this.startValue === value) {
       return this._startDateLabelId;
     } else if (this.endValue === value) {
       return this._endDateLabelId;
     }
+
+    if (this.comparisonStart !== null && this.comparisonEnd !== null) {
+      if (value === this.comparisonStart && value === this.comparisonEnd) {
+        return `${this._comparisonStartLabelId}-${this._comparisonEndLabelId}`;
+      } else if (value === this.comparisonStart) {
+        return this._comparisonStartLabelId;
+      } else if (value === this.comparisonEnd) {
+        return this._comparisonEndLabelId;
+      }
+    }
     return null;
   }
 
@@ -603,6 +613,10 @@ export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterView
   _startDateLabelId = `${this._id}-start-date`;
 
   _endDateLabelId = `${this._id}-end-date`;
+
+  _comparisonStartLabelId = `${this._id}-comparison-start-date`;
+
+  _comparisonEndLabelId = `${this._id}-comparison-end-date`;
 }
 
 /** Checks whether a node is a table cell element. */