diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts index 524ca4dea34b..263e44862586 100644 --- a/src/lib/datepicker/datepicker-input.ts +++ b/src/lib/datepicker/datepicker-input.ts @@ -57,9 +57,8 @@ export const MD_DATEPICKER_VALIDATORS: any = { selector: 'input[mdDatepicker], input[matDatepicker]', providers: [MD_DATEPICKER_VALUE_ACCESSOR, MD_DATEPICKER_VALIDATORS], host: { - '[attr.aria-expanded]': '_datepicker?.opened || "false"', '[attr.aria-haspopup]': 'true', - '[attr.aria-owns]': '_datepicker?.id', + '[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null', '[attr.min]': 'min ? _dateAdapter.getISODateString(min) : null', '[attr.max]': 'max ? _dateAdapter.getISODateString(max) : null', '[disabled]': 'disabled', diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index eef61cfab790..34c1ed03a16b 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/src/lib/datepicker/datepicker.spec.ts @@ -189,6 +189,39 @@ describe('MdDatepicker', () => { expect(attachToRef.nativeElement.tagName.toLowerCase()) .toBe('input', 'popup should be attached to native input'); }); + + it('input should aria-owns calendar after opened in non-touch mode', () => { + let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; + expect(inputEl.getAttribute('aria-owns')).toBeNull(); + + testComponent.datepicker.open(); + fixture.detectChanges(); + + let ownedElementId = inputEl.getAttribute('aria-owns'); + expect(ownedElementId).not.toBeNull(); + + let ownedElement = document.getElementById(ownedElementId); + expect(ownedElement).not.toBeNull(); + expect((ownedElement as Element).tagName.toLowerCase()).toBe('md-calendar'); + }); + + it('input should aria-owns calendar after opened in touch mode', () => { + testComponent.touch = true; + fixture.detectChanges(); + + let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; + expect(inputEl.getAttribute('aria-owns')).toBeNull(); + + testComponent.datepicker.open(); + fixture.detectChanges(); + + let ownedElementId = inputEl.getAttribute('aria-owns'); + expect(ownedElementId).not.toBeNull(); + + let ownedElement = document.getElementById(ownedElementId); + expect(ownedElement).not.toBeNull(); + expect((ownedElement as Element).tagName.toLowerCase()).toBe('md-calendar'); + }); }); describe('datepicker with too many inputs', () => {