Skip to content

Commit

Permalink
fix(datepicker): range input label pointing to non-existent id (#19031)
Browse files Browse the repository at this point in the history
This is something that I put the code in for in the beginning, but forgot to wire up. The `aria-owns` of the `label` in the `mat-form-field` needs to point to the id of the start input, but it didn't have an id.
  • Loading branch information
crisbeto committed Apr 14, 2020
1 parent ef54582 commit 9f01912
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 2 deletions.
1 change: 1 addition & 0 deletions src/material/datepicker/date-range-input-parts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@ const _MatDateRangeInputBase:
'(input)': '_onInput($event.target.value)',
'(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',
Expand Down
10 changes: 10 additions & 0 deletions src/material/datepicker/date-range-input.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,16 @@ describe('MatDatepicker', () => {
expect(rangeInput.classList).toContain(hideClass);
});

it('should point the label aria-owns to the id of the start input', () => {
const fixture = createComponent(StandardRangePicker);
fixture.detectChanges();
const label = fixture.nativeElement.querySelector('label');
const start = fixture.componentInstance.start.nativeElement;

expect(start.id).toBeTruthy();
expect(label.getAttribute('aria-owns')).toBe(start.id);
});

it('should point the input aria-labelledby to the form field label', () => {
const fixture = createComponent(StandardRangePicker);
fixture.detectChanges();
Expand Down
2 changes: 0 additions & 2 deletions src/material/datepicker/datepicker-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ import {
Inject,
Input,
Optional,
Output,
AfterViewInit,
} from '@angular/core';
import {
NG_VALIDATORS,
Expand Down

0 comments on commit 9f01912

Please sign in to comment.