fix(datepicker): set role on datepicker popup and aria-haspopup on the datepicker toggle (#12008)

Currently the datepicker in touch UI mode has `role="dialog"` which is inherited from `MatDialog`, however it doesn't have a role in popup mode. These changes add the proper role for the popup element, in addition to `aria-haspopup` which was missing from the datepicker toggle button.

Author: crisbeto

src/lib/datepicker/datepicker-toggle.html

@@ -1,5 +1,10 @@
-<button mat-icon-button type="button" [attr.aria-label]="_intl.openCalendarLabel"
-        [disabled]="disabled" (click)="_open($event)">
+<button
+  mat-icon-button
+  type="button"
+  aria-haspopup="true"
+  [attr.aria-label]="_intl.openCalendarLabel"
+  [disabled]="disabled"
+  (click)="_open($event)">
 
   <svg
     *ngIf="!_customIcon"

src/lib/datepicker/datepicker.md

@@ -65,7 +65,7 @@ set to something like `new Date(2017, MM, dd)` when the calendar was opened (the
 irrelevant in this case).
 
 Notice that the emitted value does not affect the current value in the connected `<input>`, which
-is only bound to the selection made in the `month` view. So if the end user closes the calendar 
+is only bound to the selection made in the `month` view. So if the end user closes the calendar
 after choosing a year in `multi-view` mode (by pressing the `ESC` key, for example), the selected
 year, emitted by `yearSelected` output, will not cause any change in the value of the date in the
 associated `<input>`.
@@ -330,8 +330,9 @@ export class MyApp {}
 
 ### Accessibility
 
-The `MatDatepickerInput` directive adds `aria-haspopup` attribute to the native input element, and it
-triggers a calendar dialog with `role="dialog"`.
+The `MatDatepickerInput` and `MatDatepickerToggle` directives add the `aria-haspopup` attribute to
+the native input and toggle button elements respectively, and they trigger a calendar dialog with
+`role="dialog"`.
 
 `MatDatepickerIntl` includes strings that are used for `aria-label`s. The datepicker input
 should have a placeholder or be given a meaningful label via `aria-label`, `aria-labelledby` or

src/lib/datepicker/datepicker.spec.ts

@@ -185,6 +185,16 @@ describe('MatDatepicker', () => {
         expect(testComponent.datepicker.opened).toBe(false, 'Expected datepicker to be closed.');
       }));
 
+      it('should set the proper role on the popup', fakeAsync(() => {
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+        flush();
+
+        const popup = document.querySelector('.cdk-overlay-pane')!;
+        expect(popup).toBeTruthy();
+        expect(popup.getAttribute('role')).toBe('dialog');
+      }));
+
       it('close should close dialog', fakeAsync(() => {
         testComponent.touch = true;
         fixture.detectChanges();
@@ -800,6 +810,13 @@ describe('MatDatepicker', () => {
         flush();
       }));
 
+      it('should set `aria-haspopup` on the toggle button', () => {
+        const button = fixture.debugElement.query(By.css('button'));
+
+        expect(button).toBeTruthy();
+        expect(button.nativeElement.getAttribute('aria-haspopup')).toBe('true');
+      });
+
       it('should open calendar when toggle clicked', () => {
         expect(document.querySelector('mat-dialog-container')).toBeNull();
 

src/lib/datepicker/datepicker.ts

@@ -426,6 +426,7 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
     });
 
     this._popupRef = this._overlay.create(overlayConfig);
+    this._popupRef.overlayElement.setAttribute('role', 'dialog');
 
     merge(
       this._popupRef.backdropClick(),