fix(datepicker): don't set aria-labelledby if form field does not have a label (#19639)

Currently we always set the `aria-labelledby` on the range inputs which will be invalid if the form field doesn't have a label. These changes add an extra check around it.

Author: crisbeto

src/dev-app/datepicker/datepicker-demo.html

@@ -173,7 +173,8 @@ <h2>Datepicker with custom header extending the default header</h2>
 <h2>Range picker</h2>
 
 <div class="demo-range-group">
-  <mat-form-field appearance="legacy">
+  <mat-form-field>
+    <mat-label>Enter a date range</mat-label>
     <mat-date-range-input
       [formGroup]="range1"
       [rangePicker]="range1Picker"
@@ -183,8 +184,8 @@ <h2>Range picker</h2>
       [comparisonStart]="comparisonStart"
       [comparisonEnd]="comparisonEnd"
       [dateFilter]="filterOdd ? dateFilter : undefined">
-      <input matStartDate formControlName="start"/>
-      <input matEndDate formControlName="end"/>
+      <input matStartDate formControlName="start" placeholder="Start date"/>
+      <input matEndDate formControlName="end" placeholder="End date"/>
     </mat-date-range-input>
     <mat-datepicker-toggle [for]="range1Picker" matSuffix></mat-datepicker-toggle>
     <mat-date-range-picker

src/material/datepicker/date-range-input-parts.ts

@@ -55,8 +55,8 @@ export interface MatDateRangeInputParent<D> {
   _startInput: MatDateRangeInputPartBase<D>;
   _endInput: MatDateRangeInputPartBase<D>;
   _groupDisabled: boolean;
-  _handleChildValueChange: () => void;
-  _openDatepicker: () => void;
+  _handleChildValueChange(): void;
+  _openDatepicker(): void;
 }
 
 /**

src/material/datepicker/date-range-input.spec.ts

@@ -178,6 +178,15 @@ describe('MatDateRangeInput', () => {
     expect(rangeInput.getAttribute('aria-describedby')).toBe(labelId);
   });
 
+  it('should not set aria-labelledby if the form field does not have a label', () => {
+    const fixture = createComponent(RangePickerNoLabel);
+    fixture.detectChanges();
+    const {start, end} = fixture.componentInstance;
+
+    expect(start.nativeElement.getAttribute('aria-labelledby')).toBeFalsy();
+    expect(end.nativeElement.getAttribute('aria-labelledby')).toBeFalsy();
+  });
+
   it('should float the form field label when either input is focused', () => {
     const fixture = createComponent(StandardRangePicker);
     fixture.detectChanges();
@@ -606,6 +615,7 @@ class StandardRangePicker {
 })
 class RangePickerNoStart {}
 
+
 @Component({
   template: `
     <mat-form-field>
@@ -637,3 +647,20 @@ class RangePickerNgModel {
   end: Date | null = null;
 }
 
+
+@Component({
+  template: `
+    <mat-form-field>
+      <mat-date-range-input [rangePicker]="rangePicker">
+        <input #start matStartDate/>
+        <input #end matEndDate/>
+      </mat-date-range-input>
+
+      <mat-date-range-picker #rangePicker></mat-date-range-picker>
+    </mat-form-field>
+  `
+})
+class RangePickerNoLabel {
+  @ViewChild('start') start: ElementRef<HTMLInputElement>;
+  @ViewChild('end') end: ElementRef<HTMLInputElement>;
+}

src/material/datepicker/date-range-input.ts

@@ -49,7 +49,7 @@ let nextUniqueId = 0;
     '[class.mat-date-range-input-hide-placeholders]': '_shouldHidePlaceholders()',
     '[attr.id]': 'null',
     'role': 'group',
-    '[attr.aria-labelledby]': '_ariaLabelledBy',
+    '[attr.aria-labelledby]': '_getAriaLabelledby()',
     '[attr.aria-describedby]': '_ariaDescribedBy',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -177,9 +177,6 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
   /** Value for the `aria-describedby` attribute of the inputs. */
   _ariaDescribedBy: string | null = null;
 
-  /** Value for the `aria-labelledby` attribute of the inputs. */
-  _ariaLabelledBy: string | null = null;
-
   /** Date selection model currently registered with the input. */
   private _model: MatDateSelectionModel<DateRange<D>> | undefined;
 
@@ -218,7 +215,6 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
 
     // TODO(crisbeto): remove `as any` after #18206 lands.
     this.ngControl = control as any;
-    this._ariaLabelledBy = _formField ? _formField._labelId : null;
   }
 
   /**
@@ -311,6 +307,12 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
     return (!this._formField || this._formField._hideControlPlaceholder()) && this.empty;
   }
 
+  /** Gets the value for the `aria-labelledby` attribute of the inputs. */
+  _getAriaLabelledby() {
+    const formField = this._formField;
+    return formField && formField._hasFloatingLabel() ? formField._labelId : null;
+  }
+
   /**
    * @param obj The object to check.
    * @returns The given object if it is both a date instance and valid, otherwise null.

tools/public_api_guard/material/datepicker.d.ts

@@ -287,7 +287,6 @@ export declare class MatDatepickerToggleIcon {
 
 export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>, MatDatepickerControl<D>, MatDateRangeInputParent<D>, AfterContentInit, OnDestroy {
     _ariaDescribedBy: string | null;
-    _ariaLabelledBy: string | null;
     _disabledChange: Subject<boolean>;
     _endInput: MatEndDate<D>;
     _groupDisabled: boolean;
@@ -318,6 +317,7 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     stateChanges: Subject<void>;
     get value(): DateRange<D> | null;
     constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, control: ControlContainer, _dateAdapter: DateAdapter<D>, _formField?: MatFormField | undefined);
+    _getAriaLabelledby(): string | null;
     _getInputMirrorValue(): string;
     _handleChildValueChange(): void;
     _openDatepicker(): void;