From 043818dd0ad8c947e86334b23ecae3b9fb81d7fc Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 13 Jul 2017 15:26:04 -0700 Subject: [PATCH 1/2] fix(datepicker): remove aira-expanded on datepicker input since the attribute is not supported for text inputs. also only set aria-owns attribute when the datepicker is open and therefore actually in the DOM. --- src/lib/datepicker/datepicker-input.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts index 524ca4dea34b..3cb0e3f5c255 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', '[attr.min]': 'min ? _dateAdapter.getISODateString(min) : null', '[attr.max]': 'max ? _dateAdapter.getISODateString(max) : null', '[disabled]': 'disabled', From 5bbf235f48158dc6de7484d4c3cdf826fb21c682 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Fri, 14 Jul 2017 11:40:01 -0700 Subject: [PATCH 2/2] add tests --- src/lib/datepicker/datepicker-input.ts | 2 +- src/lib/datepicker/datepicker.spec.ts | 33 ++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts index 3cb0e3f5c255..263e44862586 100644 --- a/src/lib/datepicker/datepicker-input.ts +++ b/src/lib/datepicker/datepicker-input.ts @@ -58,7 +58,7 @@ export const MD_DATEPICKER_VALIDATORS: any = { providers: [MD_DATEPICKER_VALUE_ACCESSOR, MD_DATEPICKER_VALIDATORS], host: { '[attr.aria-haspopup]': 'true', - '[attr.aria-owns]': '_datepicker?.opened && _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', () => {