fix(datepicker): add role to date range input (#19717)

Adds a `group` role to the date range input since it groups two inputs.

Author: crisbeto

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

@@ -55,8 +55,6 @@ export interface MatDateRangeInputParent<D> {
   _startInput: MatDateRangeInputPartBase<D>;
   _endInput: MatDateRangeInputPartBase<D>;
   _groupDisabled: boolean;
-  _ariaDescribedBy: string | null;
-  _ariaLabelledBy: string | null;
   _handleChildValueChange: () => void;
   _openDatepicker: () => void;
 }
@@ -187,8 +185,6 @@ const _MatDateRangeInputBase:
     '(change)': '_onChange()',
     '(keydown)': '_onKeydown($event)',
     '[attr.id]': '_rangeInput.id',
-    '[attr.aria-labelledby]': '_rangeInput._ariaLabelledBy',
-    '[attr.aria-describedby]': '_rangeInput._ariaDescribedBy',
     '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
     '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
     '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
@@ -269,8 +265,6 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements CanUpd
     '(input)': '_onInput($event.target.value)',
     '(change)': '_onChange()',
     '(keydown)': '_onKeydown($event)',
-    '[attr.aria-labelledby]': '_rangeInput._ariaLabelledBy',
-    '[attr.aria-describedby]': '_rangeInput._ariaDescribedBy',
     '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
     '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
     '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',

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

@@ -89,6 +89,13 @@ describe('MatDateRangeInput', () => {
     expect(fixture.componentInstance.end.nativeElement.getAttribute('type')).toBe('text');
   });
 
+  it('should set the correct role on the range input', () => {
+    const fixture = createComponent(StandardRangePicker);
+    fixture.detectChanges();
+    const rangeInput = fixture.nativeElement.querySelector('.mat-date-range-input');
+    expect(rangeInput.getAttribute('role')).toBe('group');
+  });
+
   it('should mark the entire range input as disabled if both inputs are disabled', () => {
     const fixture = createComponent(StandardRangePicker);
     fixture.detectChanges();
@@ -151,26 +158,24 @@ describe('MatDateRangeInput', () => {
     expect(label.getAttribute('aria-owns')).toBe(start.id);
   });
 
-  it('should point the input aria-labelledby to the form field label', () => {
+  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 {start, end} = fixture.componentInstance;
+    const rangeInput = fixture.nativeElement.querySelector('.mat-date-range-input');
 
     expect(labelId).toBeTruthy();
-    expect(start.nativeElement.getAttribute('aria-labelledby')).toBe(labelId);
-    expect(end.nativeElement.getAttribute('aria-labelledby')).toBe(labelId);
+    expect(rangeInput.getAttribute('aria-labelledby')).toBe(labelId);
   });
 
-  it('should point the input aria-labelledby to the form field hint element', () => {
+  it('should point the range input aria-labelledby to the form field hint element', () => {
     const fixture = createComponent(StandardRangePicker);
     fixture.detectChanges();
     const labelId = fixture.nativeElement.querySelector('.mat-hint').id;
-    const {start, end} = fixture.componentInstance;
+    const rangeInput = fixture.nativeElement.querySelector('.mat-date-range-input');
 
     expect(labelId).toBeTruthy();
-    expect(start.nativeElement.getAttribute('aria-describedby')).toBe(labelId);
-    expect(end.nativeElement.getAttribute('aria-describedby')).toBe(labelId);
+    expect(rangeInput.getAttribute('aria-describedby')).toBe(labelId);
   });
 
   it('should float the form field label when either input is focused', () => {

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

@@ -48,6 +48,9 @@ let nextUniqueId = 0;
     'class': 'mat-date-range-input',
     '[class.mat-date-range-input-hide-placeholders]': '_shouldHidePlaceholders()',
     '[attr.id]': 'null',
+    'role': 'group',
+    '[attr.aria-labelledby]': '_ariaLabelledBy',
+    '[attr.aria-describedby]': '_ariaDescribedBy',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,