fix(datepicker): remove aria-expanded on datepicker input ... (#5746)

angular · Jul 20, 2017 · 4ea4baa · 4ea4baa
1 parent 69c9dac
commit 4ea4baa
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git 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
@@ -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', () => {