From 57b066a0a29e0df46af2db92404e076b1a4e1dfa Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 11 Jul 2018 17:12:39 +0200
Subject: [PATCH] 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.
---
 src/lib/datepicker/datepicker-toggle.html |  9 +++++++--
 src/lib/datepicker/datepicker.md          |  7 ++++---
 src/lib/datepicker/datepicker.spec.ts     | 17 +++++++++++++++++
 src/lib/datepicker/datepicker.ts          |  1 +
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/lib/datepicker/datepicker-toggle.html b/src/lib/datepicker/datepicker-toggle.html
index c2d27e824b7..da7e836f750 100644
--- a/src/lib/datepicker/datepicker-toggle.html
+++ b/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"
diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md
index 33f4d3fd8bb..51faa38ee84 100644
--- a/src/lib/datepicker/datepicker.md
+++ b/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
diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
index 824b50d2f9b..d72646bb1c4 100644
--- a/src/lib/datepicker/datepicker.spec.ts
+++ b/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();
 
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
index b16df369224..3ea51260165 100644
--- a/src/lib/datepicker/datepicker.ts
+++ b/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(),