From 67212ba4f4f0af4520ff7b3cf74521a5c429f5b6 Mon Sep 17 00:00:00 2001
From: Zach Arend <zarend@users.noreply.github.com>
Date: Fri, 26 Aug 2022 16:39:52 -0700
Subject: [PATCH] fix(material/datepicker): calendar aria-descriptions
 start/end date (#25457)

For date ranges, add aria-descriptions to the cell of the current start
date and also for end date.

Popuplate aria descriptions with the expected value of the ARIA accessible name of the
`matStartDate` and `matEndDate` inputs. Introduces `_computeAriaAccessibleName` function to
implement ARIA acc-name-1.2 specificiation.

Fixes angular#23442 and angular#23445
---
 .../datepicker/aria-accessible-name.spec.ts   | 159 ++++++++++++++++
 .../datepicker/aria-accessible-name.ts        | 179 ++++++++++++++++++
 src/material/datepicker/calendar-body.html    |   8 +
 src/material/datepicker/calendar-body.scss    |   5 +
 src/material/datepicker/calendar-body.ts      |  30 +++
 src/material/datepicker/calendar.html         |   2 +
 src/material/datepicker/calendar.ts           |   6 +
 .../datepicker/date-range-input-parts.ts      |   7 +-
 .../datepicker/date-range-input.spec.ts       |  85 +++++++--
 src/material/datepicker/date-range-input.ts   |  12 +-
 src/material/datepicker/date-range-picker.ts  |   4 +
 src/material/datepicker/datepicker-base.ts    |   6 +
 .../datepicker/datepicker-content.html        |   2 +
 src/material/datepicker/month-view.html       |   2 +
 src/material/datepicker/month-view.ts         |   6 +
 tools/public_api_guard/material/datepicker.md |  27 ++-
 16 files changed, 523 insertions(+), 17 deletions(-)
 create mode 100644 src/material/datepicker/aria-accessible-name.spec.ts
 create mode 100644 src/material/datepicker/aria-accessible-name.ts

diff --git a/src/material/datepicker/aria-accessible-name.spec.ts b/src/material/datepicker/aria-accessible-name.spec.ts
new file mode 100644
index 000000000000..260164b2cddc
--- /dev/null
+++ b/src/material/datepicker/aria-accessible-name.spec.ts
@@ -0,0 +1,159 @@
+import {_computeAriaAccessibleName} from './aria-accessible-name';
+
+describe('_computeAriaAccessibleName', () => {
+  let rootElement: HTMLSpanElement;
+
+  beforeEach(() => {
+    rootElement = document.createElement('span');
+    document.body.appendChild(rootElement);
+  });
+
+  afterEach(() => {
+    rootElement.remove();
+  });
+
+  it('uses aria-labelledby over aria-label', () => {
+    rootElement.innerHTML = `
+      <label id='test-label'>Aria Labelledby</label>
+      <input id='test-el' aria-labelledby='test-label' aria-label='Aria Label'/>
+    `;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('Aria Labelledby');
+  });
+
+  it('uses aria-label over for/id', () => {
+    rootElement.innerHTML = `
+      <label for='test-el'>For</label>
+      <input id='test-el' aria-label='Aria Label'/>
+    `;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('Aria Label');
+  });
+
+  it('uses a label with for/id over a title attribute', () => {
+    rootElement.innerHTML = `
+      <label for='test-el'>For</label>
+      <input id='test-el' title='Title'/>
+    `;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('For');
+  });
+
+  it('returns title when argument has a specified title', () => {
+    rootElement.innerHTML = `<input id="test-el" title='Title'/>`;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('Title');
+  });
+
+  // match browser behavior of giving placeholder attribute preference over title attribute
+  it('uses placeholder over title', () => {
+    rootElement.innerHTML = `<input id="test-el" title='Title' placeholder='Placeholder'/>`;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('Placeholder');
+  });
+
+  it('uses aria-label over title and placeholder', () => {
+    rootElement.innerHTML = `<input id="test-el" title='Title' placeholder='Placeholder'
+      aria-label="Aria Label"/>`;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('Aria Label');
+  });
+
+  it('includes both textnode and element children of label with for/id', () => {
+    rootElement.innerHTML = `
+    <label for="test-el">
+        Hello
+        <span>
+          Wo
+          <span><span>r</span></span>
+          <span>  ld </span>
+        </span>
+        !
+      </label>
+      <input id='test-el'/>
+    `;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('Hello Wo r ld !');
+  });
+
+  it('return computed name of hidden label which has for/id', () => {
+    rootElement.innerHTML = `
+    <label for="test-el" aria-hidden="true" style="display: none;">For</label>
+    <input id='test-el'/>
+    `;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('For');
+  });
+
+  it('returns computed names of existing elements when 2 of 3 targets of aria-labelledby exist', () => {
+    rootElement.innerHTML = `
+      <label id="label-1-of-2" aria-hidden="true" style="display: none;">Label1</label>
+      <label id="label-2-of-2" aria-hidden="true" style="display: none;">Label2</label>
+      <input id="test-el" aria-labelledby="label-1-of-2 label-2-of-2 non-existant-label"/>
+    `;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('Label1 Label2');
+  });
+
+  it('returns repeated label when there are duplicate ids in aria-labelledby', () => {
+    rootElement.innerHTML = `
+      <label id="label-1-of-1" aria-hidden="true" style="display: none;">Label1</label>
+      <input id="test-el" aria-labelledby="label-1-of-1 label-1-of-1"/>
+    `;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('Label1 Label1');
+  });
+
+  it('returns empty string when passed `<input id="test-el"/>`', () => {
+    rootElement.innerHTML = `<input id="test-el"/>`;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('');
+  });
+
+  it('ignores the aria-labelledby of an aria-labelledby', () => {
+    rootElement.innerHTML = `
+      <label id="label" aria-labelledby="transitive-label">Label</label>
+      <label id="transitive-label" aria-labelled-by="transitive-label">Transitive Label</div>
+      <input id="test-el" aria-labelledby="label"/>
+    `;
+
+    const input = rootElement.querySelector('#test-el')!;
+    const label = rootElement.querySelector('#label')!;
+    expect(_computeAriaAccessibleName(label as any)).toBe('Transitive Label');
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('Label');
+  });
+
+  it('ignores the aria-labelledby on a label with for/id', () => {
+    rootElement.innerHTML = `
+      <label for="transitive2-label" aria-labelledby="transitive2-div"></label>
+      <div id="transitive2-div">Div</div>
+      <input id="test-el" aria-labelled-by="transitive2-label"/>
+    `;
+
+    const input = rootElement.querySelector('#test-el')!;
+    expect(_computeAriaAccessibleName(input as HTMLInputElement)).toBe('');
+  });
+
+  it('returns empty string when argument input is aria-labelledby itself', () => {
+    rootElement.innerHTML = `
+      <input id="test-el" aria-labelled-by="test-el"/>
+    `;
+
+    const input = rootElement.querySelector('#test-el')!;
+    const computedName = _computeAriaAccessibleName(input as HTMLInputElement);
+    expect(typeof computedName)
+      .withContext('should return value of type string')
+      .toBe('string');
+  });
+});
diff --git a/src/material/datepicker/aria-accessible-name.ts b/src/material/datepicker/aria-accessible-name.ts
new file mode 100644
index 000000000000..c6488c997bab
--- /dev/null
+++ b/src/material/datepicker/aria-accessible-name.ts
@@ -0,0 +1,179 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// This file contains the `_computeAriaAccessibleName` function, which computes what the *expected*
+// ARIA accessible name would be for a given element. Implements a subset of ARIA specification
+// [Accessible Name and Description Computation 1.2](https://www.w3.org/TR/accname-1.2/).
+//
+// Specification accname-1.2 can be summarized by returning the result of the first method
+// available.
+//
+//  1. `aria-labelledby` attribute
+//     ```
+//       <!-- example using aria-labelledby-->
+//       <label id='label-id'>Start Date</label>
+//       <input aria-labelledby='label-id'/>
+//     ```
+//  2. `aria-label` attribute (e.g. `<input aria-label="Departure"/>`)
+//  3. Label with `for`/`id`
+//     ```
+//       <!-- example using for/id -->
+//       <label for="current-node">Label</label>
+//       <input id="current-node"/>
+//     ```
+//  4. `placeholder` attribute (e.g. `<input placeholder="06/03/1990"/>`)
+//  5. `title` attribute (e.g. `<input title="Check-In"/>`)
+//  6. text content
+//     ```
+//       <!-- example using text content -->
+//       <label for="current-node"><span>Departure</span> Date</label>
+//       <input id="current-node"/>
+//     ```
+
+/**
+ * Computes the *expected* ARIA accessible name for argument element based on [accname-1.2
+ * specification](https://www.w3.org/TR/accname-1.2/). Implements a subset of accname-1.2,
+ * and should only be used for the Datepicker's specific use case.
+ *
+ * Intended use:
+ * This is not a general use implementation. Only implements the parts of accname-1.2 that are
+ * required for the Datepicker's specific use case. This function is not intended for any other
+ * use.
+ *
+ * Limitations:
+ *  - Only covers the needs of `matStartDate` and `matEndDate`. Does not support other use cases.
+ *  - See NOTES's in implementation for specific details on what parts of the accname-1.2
+ *  specification are not implemented.
+ *
+ *  @param element {HTMLInputElement} native &lt;input/&gt; element of `matStartDate` or
+ *  `matEndDate` component. Corresponds to the 'Root Element' from accname-1.2
+ *
+ *  @return expected ARIA accessible name of argument &lt;input/&gt;
+ */
+export function _computeAriaAccessibleName(
+  element: HTMLInputElement | HTMLTextAreaElement,
+): string {
+  return _computeAriaAccessibleNameInternal(element, true);
+}
+
+/**
+ * Determine if argument node is an Element based on `nodeType` property. This function is safe to
+ * use with server-side rendering.
+ */
+function ssrSafeIsElement(node: Node): node is Element {
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+
+/**
+ * Determine if argument node is an HTMLInputElement based on `nodeName` property. This funciton is
+ * safe to use with server-side rendering.
+ */
+function ssrSafeIsHTMLInputElement(node: Node): node is HTMLInputElement {
+  return node.nodeName === 'INPUT';
+}
+
+/**
+ * Determine if argument node is an HTMLTextAreaElement based on `nodeName` property. This
+ * funciton is safe to use with server-side rendering.
+ */
+function ssrSafeIsHTMLTextAreaElement(node: Node): node is HTMLTextAreaElement {
+  return node.nodeName === 'TEXTAREA';
+}
+
+/**
+ * Calculate the expected ARIA accessible name for given DOM Node. Given DOM Node may be either the
+ * "Root node" passed to `_computeAriaAccessibleName` or "Current node" as result of recursion.
+ *
+ * @return the accessible name of argument DOM Node
+ *
+ * @param currentNode node to determine accessible name of
+ * @param isDirectlyReferenced true if `currentNode` is the root node to calculate ARIA accessible
+ * name of. False if it is a result of recursion.
+ */
+function _computeAriaAccessibleNameInternal(
+  currentNode: Node,
+  isDirectlyReferenced: boolean,
+): string {
+  // NOTE: this differs from accname-1.2 specification.
+  //  - Does not implement Step 1. of accname-1.2: '''If `currentNode`'s role prohibits naming,
+  //    return the empty string ("")'''.
+  //  - Does not implement Step 2.A. of accname-1.2: '''if current node is hidden and not directly
+  //    referenced by aria-labelledby... return the empty string.'''
+
+  // acc-name-1.2 Step 2.B.: aria-labelledby
+  if (ssrSafeIsElement(currentNode) && isDirectlyReferenced) {
+    const labelledbyIds: string[] =
+      currentNode.getAttribute?.('aria-labelledby')?.split(/\s+/g) || [];
+    const validIdRefs: HTMLElement[] = labelledbyIds.reduce((validIds, id) => {
+      const elem = document.getElementById(id);
+      if (elem) {
+        validIds.push(elem);
+      }
+      return validIds;
+    }, [] as HTMLElement[]);
+
+    if (validIdRefs.length) {
+      return validIdRefs
+        .map(idRef => {
+          return _computeAriaAccessibleNameInternal(idRef, false);
+        })
+        .join(' ');
+    }
+  }
+
+  // acc-name-1.2 Step 2.C.: aria-label
+  if (ssrSafeIsElement(currentNode)) {
+    const ariaLabel = currentNode.getAttribute('aria-label')?.trim();
+
+    if (ariaLabel) {
+      return ariaLabel;
+    }
+  }
+
+  // acc-name-1.2 Step 2.D. attribute or element that defines a text alternative
+  //
+  // NOTE: this differs from accname-1.2 specification.
+  // Only implements Step 2.D. for `<label>`,`<input/>`, and `<textarea/>` element. Does not
+  // implement other elements that have an attribute or element that defines a text alternative.
+  if (ssrSafeIsHTMLInputElement(currentNode) || ssrSafeIsHTMLTextAreaElement(currentNode)) {
+    // use label with a `for` attribute referencing the current node
+    if (currentNode.labels?.length) {
+      return Array.from(currentNode.labels)
+        .map(x => _computeAriaAccessibleNameInternal(x, false))
+        .join(' ');
+    }
+
+    // use placeholder if available
+    const placeholder = currentNode.getAttribute('placeholder')?.trim();
+    if (placeholder) {
+      return placeholder;
+    }
+
+    // use title if available
+    const title = currentNode.getAttribute('title')?.trim();
+    if (title) {
+      return title;
+    }
+  }
+
+  // NOTE: this differs from accname-1.2 specification.
+  //  - does not implement acc-name-1.2 Step 2.E.: '''if the current node is a control embedded
+  //     within the label... then include the embedded control as part of the text alternative in
+  //     the following manner...'''. Step 2E applies to embedded controls such as textbox, listbox,
+  //     range, etc.
+  //  - does not implement acc-name-1.2 step 2.F.: check that '''role allows name from content''',
+  //    which applies to `currentNode` and its children.
+  //  - does not implement acc-name-1.2 Step 2.F.ii.: '''Check for CSS generated textual content'''
+  //    (e.g. :before and :after).
+  //  - does not implement acc-name-1.2 Step 2.I.: '''if the current node has a Tooltip attribute,
+  //    return its value'''
+
+  // Return text content with whitespace collapsed into a single space character. Accomplish
+  // acc-name-1.2 steps 2F, 2G, and 2H.
+  return (currentNode.textContent || '').replace(/\s+/g, ' ').trim();
+}
diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index 25db33ecbee5..f66fc480740f 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -63,6 +63,7 @@
         [attr.aria-disabled]="!item.enabled || null"
         [attr.aria-pressed]="_isSelected(item.compareValue)"
         [attr.aria-current]="todayValue === item.compareValue ? 'date' : null"
+        [attr.aria-describedby]="_getDescribedby(item.compareValue)"
         (click)="_cellClicked(item, $event)"
         (focus)="_emitActiveDateChange(item, $event)">
         <div class="mat-calendar-body-cell-content mat-focus-indicator"
@@ -75,3 +76,10 @@
     </button>
   </td>
 </tr>
+
+<label [id]="_startDateLabelId" class="mat-calendar-body-hidden-label">
+  {{startDateAccessibleName}}
+</label>
+<label [id]="_endDateLabelId" class="mat-calendar-body-hidden-label">
+  {{endDateAccessibleName}}
+</label>
diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
index 9dce40071d02..2a4135dea210 100644
--- a/src/material/datepicker/calendar-body.scss
+++ b/src/material/datepicker/calendar-body.scss
@@ -33,6 +33,11 @@ $calendar-range-end-body-cell-size:
   padding-right: $calendar-body-label-side-padding;
 }
 
+// Label that is not rendered and removed from the accessibility tree.
+.mat-calendar-body-hidden-label {
+  display: none;
+}
+
 .mat-calendar-body-cell-container {
   position: relative;
   height: 0;
diff --git a/src/material/datepicker/calendar-body.ts b/src/material/datepicker/calendar-body.ts
index 39bdc4101822..ceeaef2516c9 100644
--- a/src/material/datepicker/calendar-body.ts
+++ b/src/material/datepicker/calendar-body.ts
@@ -53,6 +53,8 @@ export interface MatCalendarUserEvent<D> {
   event: Event;
 }
 
+let calendarBodyId = 1;
+
 /**
  * An internal component used to display calendar data in a table.
  * @docs-private
@@ -132,6 +134,12 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
   /** End of the preview range. */
   @Input() previewEnd: number | null = null;
 
+  /** ARIA Accessible name of the `<input matStartDate/>` */
+  @Input() startDateAccessibleName: string | null;
+
+  /** ARIA Accessible name of the `<input matEndDate/>` */
+  @Input() endDateAccessibleName: string | null;
+
   /** Emits when a new value is selected. */
   @Output() readonly selectedValueChange = new EventEmitter<MatCalendarUserEvent<number>>();
 
@@ -356,6 +364,22 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
     return isInRange(value, this.previewStart, this.previewEnd, this.isRange);
   }
 
+  /** Gets ids of aria descriptions for the start and end of a date range. */
+  _getDescribedby(value: number): string | null {
+    if (!this.isRange) {
+      return null;
+    }
+
+    if (this.startValue === value && this.endValue === value) {
+      return `${this._startDateLabelId} ${this._endDateLabelId}`;
+    } else if (this.startValue === value) {
+      return this._startDateLabelId;
+    } else if (this.endValue === value) {
+      return this._endDateLabelId;
+    }
+    return null;
+  }
+
   /**
    * Event handler for when the user enters an element
    * inside the calendar body (e.g. by hovering in or focus).
@@ -413,6 +437,12 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
 
     return null;
   }
+
+  private _id = `mat-calendar-body-${calendarBodyId++}`;
+
+  _startDateLabelId = `${this._id}-start-date`;
+
+  _endDateLabelId = `${this._id}-end-date`;
 }
 
 /** Checks whether a node is a table cell element. */
diff --git a/src/material/datepicker/calendar.html b/src/material/datepicker/calendar.html
index 42f5a91c66b1..1072d92384cc 100644
--- a/src/material/datepicker/calendar.html
+++ b/src/material/datepicker/calendar.html
@@ -11,6 +11,8 @@
       [dateClass]="dateClass"
       [comparisonStart]="comparisonStart"
       [comparisonEnd]="comparisonEnd"
+      [startDateAccessibleName]="startDateAccessibleName"
+      [endDateAccessibleName]="endDateAccessibleName"
       (_userSelection)="_dateSelected($event)">
   </mat-month-view>
 
diff --git a/src/material/datepicker/calendar.ts b/src/material/datepicker/calendar.ts
index 1dc5c263d3a8..1bf1423d5394 100644
--- a/src/material/datepicker/calendar.ts
+++ b/src/material/datepicker/calendar.ts
@@ -282,6 +282,12 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   /** End of the comparison range. */
   @Input() comparisonEnd: D | null;
 
+  /** ARIA Accessible name of the `<input matStartDate/>` */
+  @Input() startDateAccessibleName: string | null;
+
+  /** ARIA Accessible name of the `<input matEndDate/>` */
+  @Input() endDateAccessibleName: string | null;
+
   /** Emits when the currently selected date changes. */
   @Output() readonly selectedChange: EventEmitter<D | null> = new EventEmitter<D | null>();
 
diff --git a/src/material/datepicker/date-range-input-parts.ts b/src/material/datepicker/date-range-input-parts.ts
index 9f7f460e2a37..d0cc54b49334 100644
--- a/src/material/datepicker/date-range-input-parts.ts
+++ b/src/material/datepicker/date-range-input-parts.ts
@@ -41,6 +41,7 @@ import {Directionality} from '@angular/cdk/bidi';
 import {BACKSPACE, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
 import {MatDatepickerInputBase, DateFilterFn} from './datepicker-input-base';
 import {DateRange, DateSelectionModelChange} from './date-selection-model';
+import {_computeAriaAccessibleName} from './aria-accessible-name';
 
 /** Parent component that should be wrapped around `MatStartDate` and `MatEndDate`. */
 export interface MatDateRangeInputParent<D> {
@@ -185,6 +186,11 @@ abstract class MatDateRangeInputPartBase<D>
     ) as MatDateRangeInputPartBase<D> | undefined;
     opposite?._validatorOnChange();
   }
+
+  /** return the ARIA accessible name of the input element */
+  _getAccessibleName(): string {
+    return _computeAriaAccessibleName(this._elementRef.nativeElement);
+  }
 }
 
 const _MatDateRangeInputBase = mixinErrorState(MatDateRangeInputPartBase);
@@ -198,7 +204,6 @@ const _MatDateRangeInputBase = mixinErrorState(MatDateRangeInputPartBase);
     '(input)': '_onInput($event.target.value)',
     '(change)': '_onChange()',
     '(keydown)': '_onKeydown($event)',
-    '[attr.id]': '_rangeInput.id',
     '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
     '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
     '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
diff --git a/src/material/datepicker/date-range-input.spec.ts b/src/material/datepicker/date-range-input.spec.ts
index 6993d2a6d3da..4418b27fb2e7 100644
--- a/src/material/datepicker/date-range-input.spec.ts
+++ b/src/material/datepicker/date-range-input.spec.ts
@@ -53,7 +53,7 @@ describe('MatDateRangeInput', () => {
     const mirror = fixture.nativeElement.querySelector('.mat-date-range-input-mirror');
     const startInput = fixture.componentInstance.start.nativeElement;
 
-    expect(mirror.textContent).toBe('Start date');
+    expect(mirror.textContent).toBe('Start Date');
 
     startInput.value = 'hello';
     dispatchFakeEvent(startInput, 'input');
@@ -69,7 +69,7 @@ describe('MatDateRangeInput', () => {
     dispatchFakeEvent(startInput, 'input');
     fixture.detectChanges();
 
-    expect(mirror.textContent).toBe('Start date');
+    expect(mirror.textContent).toBe('Start Date');
   });
 
   it('should hide the mirror value from assistive technology', () => {
@@ -160,20 +160,20 @@ describe('MatDateRangeInput', () => {
     expect(rangeInput.classList).toContain(hideClass);
   });
 
-  it('should point the label aria-owns to the id of the start input', () => {
+  it('should point the label aria-owns to the <mat-date-range-input/>', () => {
     const fixture = createComponent(StandardRangePicker);
     fixture.detectChanges();
-    const label = fixture.nativeElement.querySelector('label');
-    const start = fixture.componentInstance.start.nativeElement;
+    const label = fixture.nativeElement.querySelector('label.mat-form-field-label');
+    const rangeInput = fixture.componentInstance.rangeInput;
 
-    expect(start.id).toBeTruthy();
-    expect(label.getAttribute('aria-owns')).toBe(start.id);
+    expect(rangeInput.id).toBeTruthy();
+    expect(label.getAttribute('aria-owns')).toBe(rangeInput.id);
   });
 
   it('should point the range input aria-labelledby to the form field label', () => {
     const fixture = createComponent(StandardRangePicker);
     fixture.detectChanges();
-    const labelId = fixture.nativeElement.querySelector('label').id;
+    const labelId = fixture.nativeElement.querySelector('label.mat-form-field-label').id;
     const rangeInput = fixture.nativeElement.querySelector('.mat-date-range-input');
 
     expect(labelId).toBeTruthy();
@@ -544,6 +544,65 @@ describe('MatDateRangeInput', () => {
     expect(rangeTexts).toEqual(['2', '3', '4', '5']);
   }));
 
+  it("should have aria-desciredby on start and end date cells that point to the <input/>'s accessible name", fakeAsync(() => {
+    const fixture = createComponent(StandardRangePicker);
+    const {start, end} = fixture.componentInstance.range.controls;
+    let overlayContainerElement: HTMLElement;
+    start.setValue(new Date(2020, 1, 2));
+    end.setValue(new Date(2020, 1, 5));
+    inject([OverlayContainer], (overlayContainer: OverlayContainer) => {
+      overlayContainerElement = overlayContainer.getContainerElement();
+    })();
+    fixture.detectChanges();
+    tick();
+
+    fixture.componentInstance.rangePicker.open();
+    fixture.detectChanges();
+    tick();
+
+    const rangeStart = overlayContainerElement!.querySelector('.mat-calendar-body-range-start');
+    const rangeEnd = overlayContainerElement!.querySelector('.mat-calendar-body-range-end');
+
+    // query for targets of `aria-describedby`. Query from document instead of fixture.nativeElement as calendar UI is rendered in an overlay.
+    const rangeStartDescriptions = Array.from(
+      document.querySelectorAll(
+        rangeStart!
+          .getAttribute('aria-describedby')!
+          .split(/\s+/g)
+          .map(x => `#${x}`)
+          .join(' '),
+      ),
+    );
+    const rangeEndDescriptions = Array.from(
+      document.querySelectorAll(
+        rangeEnd!
+          .getAttribute('aria-describedby')!
+          .split(/\s+/g)
+          .map(x => `#${x}`)
+          .join(' '),
+      ),
+    );
+
+    expect(rangeStartDescriptions)
+      .withContext('target of aria-descriedby should exist')
+      .not.toBeNull();
+    expect(rangeEndDescriptions)
+      .withContext('target of aria-descriedby should exist')
+      .not.toBeNull();
+    expect(
+      rangeStartDescriptions
+        .map(x => x.textContent)
+        .join(' ')
+        .trim(),
+    ).toEqual('Start date');
+    expect(
+      rangeEndDescriptions
+        .map(x => x.textContent)
+        .join(' ')
+        .trim(),
+    ).toEqual('End date');
+  }));
+
   it('should pass the comparison range through to the calendar', fakeAsync(() => {
     const fixture = createComponent(StandardRangePicker);
     let overlayContainerElement: HTMLElement;
@@ -819,7 +878,7 @@ describe('MatDateRangeInput', () => {
   it('should be able to get the input placeholder', () => {
     const fixture = createComponent(StandardRangePicker);
     fixture.detectChanges();
-    expect(fixture.componentInstance.rangeInput.placeholder).toBe('Start date – End date');
+    expect(fixture.componentInstance.rangeInput.placeholder).toBe('Start Date – End Date');
   });
 
   it('should emit to the stateChanges stream when typing a value into an input', () => {
@@ -1068,9 +1127,13 @@ describe('MatDateRangeInput', () => {
         [dateFilter]="dateFilter"
         [comparisonStart]="comparisonStart"
         [comparisonEnd]="comparisonEnd">
-        <input #start formControlName="start" matStartDate placeholder="Start date"/>
-        <input #end formControlName="end" matEndDate placeholder="End date"/>
+        <input #start formControlName="start" matStartDate aria-label="Start date"
+          placeholder="Start Date"/>
+        <input #end formControlName="end" matEndDate aria-labelledby="end-date-label-1 end-date-label-2"
+          placeholder="End Date"/>
       </mat-date-range-input>
+      <label id='end-date-label-1' class="cdk-visually-hidden">End</label>
+      <label id='end-date-label-2' class="cdk-visually-hidden">date</label>
 
       <mat-date-range-picker
         [startAt]="startAt"
diff --git a/src/material/datepicker/date-range-input.ts b/src/material/datepicker/date-range-input.ts
index f2162c377008..1ccec90e10dd 100644
--- a/src/material/datepicker/date-range-input.ts
+++ b/src/material/datepicker/date-range-input.ts
@@ -55,7 +55,7 @@ let nextUniqueId = 0;
     'class': 'mat-date-range-input',
     '[class.mat-date-range-input-hide-placeholders]': '_shouldHidePlaceholders()',
     '[class.mat-date-range-input-required]': 'required',
-    '[attr.id]': 'null',
+    '[attr.id]': 'id',
     'role': 'group',
     '[attr.aria-labelledby]': '_getAriaLabelledby()',
     '[attr.aria-describedby]': '_ariaDescribedBy',
@@ -87,7 +87,7 @@ export class MatDateRangeInput<D>
     return this._model ? this._model.selection : null;
   }
 
-  /** Unique ID for the input. */
+  /** Unique ID for the group. */
   id = `mat-date-range-input-${nextUniqueId++}`;
 
   /** Whether the control is focused. */
@@ -390,6 +390,14 @@ export class MatDateRangeInput<D>
     return formField && formField._hasFloatingLabel() ? formField._labelId : null;
   }
 
+  _getStartDateAccessibleName(): string {
+    return this._startInput._getAccessibleName();
+  }
+
+  _getEndDateAccessibleName(): string {
+    return this._endInput._getAccessibleName();
+  }
+
   /** Updates the focused state of the range input. */
   _updateFocus(origin: FocusOrigin) {
     this.focused = origin !== null;
diff --git a/src/material/datepicker/date-range-picker.ts b/src/material/datepicker/date-range-picker.ts
index 365b7abd0d93..d13fd65d13db 100644
--- a/src/material/datepicker/date-range-picker.ts
+++ b/src/material/datepicker/date-range-picker.ts
@@ -16,6 +16,8 @@ import {MAT_CALENDAR_RANGE_STRATEGY_PROVIDER} from './date-range-selection-strat
  * @docs-private
  */
 export interface MatDateRangePickerInput<D> extends MatDatepickerControl<D> {
+  _getEndDateAccessibleName(): string | null;
+  _getStartDateAccessibleName(): string | null;
   comparisonStart: D | null;
   comparisonEnd: D | null;
 }
@@ -49,6 +51,8 @@ export class MatDateRangePicker<D> extends MatDatepickerBase<
     if (input) {
       instance.comparisonStart = input.comparisonStart;
       instance.comparisonEnd = input.comparisonEnd;
+      instance.startDateAccessibleName = input._getStartDateAccessibleName();
+      instance.endDateAccessibleName = input._getEndDateAccessibleName();
     }
   }
 }
diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts
index 1f47a696c96f..2e4b5813d185 100644
--- a/src/material/datepicker/datepicker-base.ts
+++ b/src/material/datepicker/datepicker-base.ts
@@ -144,6 +144,12 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
   /** End of the comparison range. */
   comparisonEnd: D | null;
 
+  /** ARIA Accessible name of the `<input matStartDate/>` */
+  startDateAccessibleName: string | null;
+
+  /** ARIA Accessible name of the `<input matEndDate/>` */
+  endDateAccessibleName: string | null;
+
   /** Whether the datepicker is above or below the input. */
   _isAbove: boolean;
 
diff --git a/src/material/datepicker/datepicker-content.html b/src/material/datepicker/datepicker-content.html
index 2c4b931305fd..fa280568e767 100644
--- a/src/material/datepicker/datepicker-content.html
+++ b/src/material/datepicker/datepicker-content.html
@@ -20,6 +20,8 @@
     [comparisonStart]="comparisonStart"
     [comparisonEnd]="comparisonEnd"
     [@fadeInCalendar]="'enter'"
+    [startDateAccessibleName]="startDateAccessibleName"
+    [endDateAccessibleName]="endDateAccessibleName"
     (yearSelected)="datepicker._selectYear($event)"
     (monthSelected)="datepicker._selectMonth($event)"
     (viewChanged)="datepicker._viewChanged($event)"
diff --git a/src/material/datepicker/month-view.html b/src/material/datepicker/month-view.html
index d002f925afbc..ef727c191e6a 100644
--- a/src/material/datepicker/month-view.html
+++ b/src/material/datepicker/month-view.html
@@ -21,6 +21,8 @@
          [isRange]="_isRange"
          [labelMinRequiredCells]="3"
          [activeCell]="_dateAdapter.getDate(activeDate) - 1"
+         [startDateAccessibleName]="startDateAccessibleName"
+         [endDateAccessibleName]="endDateAccessibleName"
          (selectedValueChange)="_dateSelected($event)"
          (activeDateChange)="_updateActiveDate($event)"
          (previewChange)="_previewChanged($event)"
diff --git a/src/material/datepicker/month-view.ts b/src/material/datepicker/month-view.ts
index 5cf3a745d087..95487a0a0d56 100644
--- a/src/material/datepicker/month-view.ts
+++ b/src/material/datepicker/month-view.ts
@@ -139,6 +139,12 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
   /** End of the comparison range. */
   @Input() comparisonEnd: D | null;
 
+  /** ARIA Accessible name of the `<input matStartDate/>` */
+  @Input() startDateAccessibleName: string | null;
+
+  /** ARIA Accessible name of the `<input matEndDate/>` */
+  @Input() endDateAccessibleName: string | null;
+
   /** Emits when a new date is selected. */
   @Output() readonly selectedChange: EventEmitter<D | null> = new EventEmitter<D | null>();
 
diff --git a/tools/public_api_guard/material/datepicker.md b/tools/public_api_guard/material/datepicker.md
index b0eb5c7ff909..d09ddc30d8d2 100644
--- a/tools/public_api_guard/material/datepicker.md
+++ b/tools/public_api_guard/material/datepicker.md
@@ -158,6 +158,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
     dateClass: MatCalendarCellClassFunction<D>;
     dateFilter: (date: D) => boolean;
     _dateSelected(event: MatCalendarUserEvent<D | null>): void;
+    endDateAccessibleName: string | null;
     focusActiveCell(): void;
     _goToDateInView(date: D, view: 'month' | 'year' | 'multi-year'): void;
     headerComponent: ComponentType<any>;
@@ -182,6 +183,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
     readonly selectedChange: EventEmitter<D | null>;
     get startAt(): D | null;
     set startAt(value: D | null);
+    startDateAccessibleName: string | null;
     startView: MatCalendarView;
     readonly stateChanges: Subject<void>;
     updateTodaysDate(): void;
@@ -191,7 +193,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
     _yearSelectedInMultiYearView(normalizedYear: D): void;
     yearView: MatYearView<D>;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendar<any>, "mat-calendar", ["matCalendar"], { "headerComponent": "headerComponent"; "startAt": "startAt"; "startView": "startView"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendar<any>, "mat-calendar", ["matCalendar"], { "headerComponent": "headerComponent"; "startAt": "startAt"; "startView": "startView"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; "startDateAccessibleName": "startDateAccessibleName"; "endDateAccessibleName": "endDateAccessibleName"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; }, never, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCalendar<any>, [null, { optional: true; }, { optional: true; }, null]>;
 }
@@ -210,9 +212,13 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
     comparisonStart: number | null;
     // (undocumented)
     _emitActiveDateChange(cell: MatCalendarCell, event: FocusEvent): void;
+    endDateAccessibleName: string | null;
+    // (undocumented)
+    _endDateLabelId: string;
     endValue: number;
     _firstRowOffset: number;
     _focusActiveCell(movePreview?: boolean): void;
+    _getDescribedby(value: number): string | null;
     _isActiveCell(rowIndex: number, colIndex: number): boolean;
     _isComparisonBridgeEnd(value: number, rowIndex: number, colIndex: number): boolean;
     _isComparisonBridgeStart(value: number, rowIndex: number, colIndex: number): boolean;
@@ -243,10 +249,13 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
     rows: MatCalendarCell[][];
     _scheduleFocusActiveCellAfterViewChecked(): void;
     readonly selectedValueChange: EventEmitter<MatCalendarUserEvent<number>>;
+    startDateAccessibleName: string | null;
+    // (undocumented)
+    _startDateLabelId: string;
     startValue: number;
     todayValue: number;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarBody, "[mat-calendar-body]", ["matCalendarBody"], { "label": "label"; "rows": "rows"; "todayValue": "todayValue"; "startValue": "startValue"; "endValue": "endValue"; "labelMinRequiredCells": "labelMinRequiredCells"; "numCols": "numCols"; "activeCell": "activeCell"; "isRange": "isRange"; "cellAspectRatio": "cellAspectRatio"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; "previewStart": "previewStart"; "previewEnd": "previewEnd"; }, { "selectedValueChange": "selectedValueChange"; "previewChange": "previewChange"; "activeDateChange": "activeDateChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarBody, "[mat-calendar-body]", ["matCalendarBody"], { "label": "label"; "rows": "rows"; "todayValue": "todayValue"; "startValue": "startValue"; "endValue": "endValue"; "labelMinRequiredCells": "labelMinRequiredCells"; "numCols": "numCols"; "activeCell": "activeCell"; "isRange": "isRange"; "cellAspectRatio": "cellAspectRatio"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; "previewStart": "previewStart"; "previewEnd": "previewEnd"; "startDateAccessibleName": "startDateAccessibleName"; "endDateAccessibleName": "endDateAccessibleName"; }, { "selectedValueChange": "selectedValueChange"; "previewChange": "previewChange"; "activeDateChange": "activeDateChange"; }, never, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCalendarBody, never>;
 }
@@ -435,6 +444,7 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>> extend
     comparisonStart: D | null;
     datepicker: MatDatepickerBase<any, S, D>;
     _dialogLabelId: string | null;
+    endDateAccessibleName: string | null;
     // (undocumented)
     _getSelected(): D | DateRange<D> | null;
     // (undocumented)
@@ -446,6 +456,7 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>> extend
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
+    startDateAccessibleName: string | null;
     // (undocumented)
     _startExitAnimation(): void;
     // (undocumented)
@@ -622,8 +633,12 @@ export class MatDateRangeInput<D> implements MatLegacyFormFieldControl<DateRange
     focused: boolean;
     _getAriaLabelledby(): string | null;
     getConnectedOverlayOrigin(): ElementRef;
+    // (undocumented)
+    _getEndDateAccessibleName(): string;
     _getInputMirrorValue(): string;
     getOverlayLabelId(): string | null;
+    // (undocumented)
+    _getStartDateAccessibleName(): string;
     getStartValue(): D | null;
     getThemePalette(): ThemePalette;
     // (undocumented)
@@ -707,6 +722,10 @@ interface MatDateRangePickerInput<D> extends MatDatepickerControl<D> {
     comparisonEnd: D | null;
     // (undocumented)
     comparisonStart: D | null;
+    // (undocumented)
+    _getEndDateAccessibleName(): string | null;
+    // (undocumented)
+    _getStartDateAccessibleName(): string | null;
 }
 
 // @public
@@ -774,6 +793,7 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
     dateClass: MatCalendarCellClassFunction<D>;
     dateFilter: (date: D) => boolean;
     _dateSelected(event: MatCalendarUserEvent<number>): void;
+    endDateAccessibleName: string | null;
     _firstWeekOffset: number;
     _focusActiveCell(movePreview?: boolean): void;
     _focusActiveCellAfterViewChecked(): void;
@@ -801,6 +821,7 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
     get selected(): DateRange<D> | D | null;
     set selected(value: DateRange<D> | D | null);
     readonly selectedChange: EventEmitter<D | null>;
+    startDateAccessibleName: string | null;
     _todayDate: number | null;
     _updateActiveDate(event: MatCalendarUserEvent<number>): void;
     readonly _userSelection: EventEmitter<MatCalendarUserEvent<D | null>>;
@@ -810,7 +831,7 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
     }[];
     _weeks: MatCalendarCell[][];
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMonthView<any>, "mat-month-view", ["matMonthView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "activeDateChange": "activeDateChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMonthView<any>, "mat-month-view", ["matMonthView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; "startDateAccessibleName": "startDateAccessibleName"; "endDateAccessibleName": "endDateAccessibleName"; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "activeDateChange": "activeDateChange"; }, never, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMonthView<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
 }