fix(datepicker): don't set aria-haspopup if no datepicker is set (#15554)

Fixes the datepicker toggle and input setting `aria-haspopup`, even though they might not have a popup.

Author: crisbeto

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',

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"

src/material/datepicker/datepicker.spec.ts

@@ -1539,13 +1539,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', () => {
@@ -1991,3 +2014,10 @@ class DatepickerWithTabindexOnToggle {}
   `,
 })
 class DatepickerToggleWithNoDatepicker {}
+
+@Component({
+  template: `
+    <input [matDatepicker]="d">
+  `,
+})
+class DatepickerInputWithNoDatepicker {}