fix(datepicker): use narrower value for aria-haspopup (#15666)

Sets the value of `aria-haspopup` to `dialog` in order to indicate what kind of popup will be opened.

Author: crisbeto

src/material/datepicker/datepicker-input.ts

@@ -79,7 +79,7 @@ export class MatDatepickerInputEvent<D> {
     {provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput},
   ],
   host: {
-    '[attr.aria-haspopup]': 'true',
+    'aria-haspopup': 'dialog',
     '[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="true"
+  aria-haspopup="dialog"
   [attr.aria-label]="_intl.openCalendarLabel"
   [attr.tabindex]="disabled ? -1 : tabIndex"
   [disabled]="disabled"

src/material/datepicker/datepicker.spec.ts

@@ -898,7 +898,7 @@ describe('MatDatepicker', () => {
         const button = fixture.debugElement.query(By.css('button'));
 
         expect(button).toBeTruthy();
-        expect(button.nativeElement.getAttribute('aria-haspopup')).toBe('true');
+        expect(button.nativeElement.getAttribute('aria-haspopup')).toBe('dialog');
       });
 
       it('should open calendar when toggle clicked', () => {