From 14544457424e107cf750a2bd9cb1789b2cb12a7c Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 20 Mar 2019 20:53:30 +0100
Subject: [PATCH] fix(datepicker): don't set aria-haspopup if no datepicker is
 set

Fixes the datepicker toggle and input setting `aria-haspopup`, even though they might not have a popup.
---
 src/material/datepicker/datepicker-input.ts   |  2 +-
 .../datepicker/datepicker-toggle.html         |  2 +-
 src/material/datepicker/datepicker.spec.ts    | 32 ++++++++++++++++++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/material/datepicker/datepicker-input.ts b/src/material/datepicker/datepicker-input.ts
index b0a5845f2329..796947971854 100644
--- a/src/material/datepicker/datepicker-input.ts
+++ b/src/material/datepicker/datepicker-input.ts
@@ -79,7 +79,7 @@ export class MatDatepickerInputEvent<D> {
     {provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput},
   ],
   host: {
-    'aria-haspopup': 'dialog',
+    '[attr.aria-haspopup]': '_datepicker ? "dialog" : null',
     '[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null',
     '[attr.min]': 'min ? _dateAdapter.toIso8601(min) : null',
     '[attr.max]': 'max ? _dateAdapter.toIso8601(max) : null',
diff --git a/src/material/datepicker/datepicker-toggle.html b/src/material/datepicker/datepicker-toggle.html
index 202f8bc2dc26..238f386ee492 100644
--- a/src/material/datepicker/datepicker-toggle.html
+++ b/src/material/datepicker/datepicker-toggle.html
@@ -2,7 +2,7 @@
   #button
   mat-icon-button
   type="button"
-  aria-haspopup="dialog"
+  [attr.aria-haspopup]="datepicker ? 'dialog' : null"
   [attr.aria-label]="_intl.openCalendarLabel"
   [attr.tabindex]="disabled ? -1 : tabIndex"
   [disabled]="disabled"
diff --git a/src/material/datepicker/datepicker.spec.ts b/src/material/datepicker/datepicker.spec.ts
index ab5bcedc18c8..12b8db67494f 100644
--- a/src/material/datepicker/datepicker.spec.ts
+++ b/src/material/datepicker/datepicker.spec.ts
@@ -1538,13 +1538,36 @@ describe('MatDatepicker', () => {
     });
   });
 
-  describe('datepicker toggle without a datepicker', () => {
+  describe('datepicker directives without a datepicker', () => {
     it('should not throw on init if toggle does not have a datepicker', () => {
       expect(() => {
         const fixture = createComponent(DatepickerToggleWithNoDatepicker, [MatNativeDateModule]);
         fixture.detectChanges();
       }).not.toThrow();
     });
+
+    it('should not set aria-haspopup if toggle does not have a datepicker', () => {
+      const fixture = createComponent(DatepickerToggleWithNoDatepicker, [MatNativeDateModule]);
+      fixture.detectChanges();
+      const toggle = fixture.nativeElement.querySelector('.mat-datepicker-toggle button');
+
+      expect(toggle.hasAttribute('aria-haspopup')).toBe(false);
+    });
+
+    it('should not throw on init if input does not have a datepicker', () => {
+      expect(() => {
+        const fixture = createComponent(DatepickerInputWithNoDatepicker, [MatNativeDateModule]);
+        fixture.detectChanges();
+      }).not.toThrow();
+    });
+
+    it('should not set aria-haspopup if input does not have a datepicker', () => {
+      const fixture = createComponent(DatepickerInputWithNoDatepicker, [MatNativeDateModule]);
+      fixture.detectChanges();
+      const toggle = fixture.nativeElement.querySelector('input');
+
+      expect(toggle.hasAttribute('aria-haspopup')).toBe(false);
+    });
   });
 
   describe('popup positioning', () => {
@@ -1990,3 +2013,10 @@ class DatepickerWithTabindexOnToggle {}
   `,
 })
 class DatepickerToggleWithNoDatepicker {}
+
+@Component({
+  template: `
+    <input [matDatepicker]="d">
+  `,
+})
+class DatepickerInputWithNoDatepicker {}