From 0fe02d88ee771c3b4f9451d1e57922a3add4cbab Mon Sep 17 00:00:00 2001
From: wnvko <milko.venkov@gmail.com>
Date: Fri, 28 Jun 2019 12:46:29 +0300
Subject: [PATCH 1/4] fix(matCalendar): make cell content button, #16356

---
 src/material/datepicker/calendar-body.html | 11 ++++++-----
 src/material/datepicker/calendar-body.scss |  4 ++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index 04d4c1667577..bb162ac81aec 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -41,10 +41,11 @@
       [style.width]="_cellWidth"
       [style.paddingTop]="_cellPadding"
       [style.paddingBottom]="_cellPadding">
-    <div class="mat-calendar-body-cell-content"
-         [class.mat-calendar-body-selected]="selectedValue === item.value"
-         [class.mat-calendar-body-today]="todayValue === item.value">
-      {{item.displayValue}}
-    </div>
+      <button class="mat-calendar-body-cell-content"
+        mat-button
+        [class.mat-calendar-body-selected]="selectedValue === item.value"
+        [class.mat-calendar-body-today]="todayValue === item.value">
+        {{item.displayValue}}
+      </button>
   </td>
 </tr>
diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
index 2002566454ab..5373e947e9ce 100644
--- a/src/material/datepicker/calendar-body.scss
+++ b/src/material/datepicker/calendar-body.scss
@@ -61,6 +61,10 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
   // Choosing a value clearly larger than the height ensures we get the correct capsule shape.
   border-radius: 999px;
 
+  // Override mat-button defaults
+  min-width: initial;
+  border-color: transparent;
+
   @include cdk-high-contrast {
     border: none;
   }

From dc465980d122ae1b5e1110e34a4ee0b742840aed Mon Sep 17 00:00:00 2001
From: wnvko <milko.venkov@gmail.com>
Date: Fri, 28 Jun 2019 13:59:04 +0300
Subject: [PATCH 2/4] test(navDatePicker): fix failing tests, #16356

---
 src/material/datepicker/calendar-body.html | 3 ++-
 src/material/datepicker/calendar.spec.ts   | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index bb162ac81aec..79af13225ddd 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -42,7 +42,8 @@
       [style.paddingTop]="_cellPadding"
       [style.paddingBottom]="_cellPadding">
       <button class="mat-calendar-body-cell-content"
-        mat-button
+        mat-button type="button"
+        [attr.aria-label]="item.displayValue"
         [class.mat-calendar-body-selected]="selectedValue === item.value"
         [class.mat-calendar-body-today]="todayValue === item.value">
         {{item.displayValue}}
diff --git a/src/material/datepicker/calendar.spec.ts b/src/material/datepicker/calendar.spec.ts
index 56a8184ab03e..f8b5cc172988 100644
--- a/src/material/datepicker/calendar.spec.ts
+++ b/src/material/datepicker/calendar.spec.ts
@@ -70,7 +70,9 @@ describe('MatCalendar', () => {
 
       let todayCell = calendarElement.querySelector('.mat-calendar-body-today')!;
       expect(todayCell).not.toBeNull();
-      expect(todayCell.innerHTML.trim()).toBe('1');
+      let todayCellSpan = todayCell.querySelector('span')!;
+      expect(todayCellSpan).not.toBeNull();
+      expect(todayCellSpan.innerHTML.trim()).toBe('1');
 
       fakeToday = new Date(2018, 0, 10);
       calendarInstance.updateTodaysDate();
@@ -78,7 +80,9 @@ describe('MatCalendar', () => {
 
       todayCell = calendarElement.querySelector('.mat-calendar-body-today')!;
       expect(todayCell).not.toBeNull();
-      expect(todayCell.innerHTML.trim()).toBe('10');
+      todayCellSpan = todayCell.querySelector('span')!;
+      expect(todayCellSpan).not.toBeNull();
+      expect(todayCellSpan.innerHTML.trim()).toBe('10');
     }));
 
     it('should be in month view with specified month active', () => {

From 7f20b3e80b406710e672e4f0019d8884d5bc2491 Mon Sep 17 00:00:00 2001
From: wnvko <milko.venkov@gmail.com>
Date: Fri, 28 Jun 2019 13:59:52 +0300
Subject: [PATCH 3/4] chore(navDatePicker): change initial to 0 for IE, #16356

---
 src/material/datepicker/calendar-body.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
index 5373e947e9ce..90aab671c85f 100644
--- a/src/material/datepicker/calendar-body.scss
+++ b/src/material/datepicker/calendar-body.scss
@@ -62,7 +62,7 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
   border-radius: 999px;
 
   // Override mat-button defaults
-  min-width: initial;
+  min-width: 0;
   border-color: transparent;
 
   @include cdk-high-contrast {

From 62a04508e5b80ab2cbd8a8026213b5ab214f1697 Mon Sep 17 00:00:00 2001
From: wnvko <milko.venkov@gmail.com>
Date: Wed, 3 Jul 2019 17:19:44 +0300
Subject: [PATCH 4/4] feat(datepicker): remove mat-button and add only role
 button, #16406

---
 src/material/datepicker/calendar-body.html | 7 +++----
 src/material/datepicker/calendar-body.scss | 4 ----
 src/material/datepicker/calendar.spec.ts   | 8 ++------
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index 79af13225ddd..be23605f4274 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -40,13 +40,12 @@
       (click)="_cellClicked(item)"
       [style.width]="_cellWidth"
       [style.paddingTop]="_cellPadding"
+      role="button"
       [style.paddingBottom]="_cellPadding">
-      <button class="mat-calendar-body-cell-content"
-        mat-button type="button"
-        [attr.aria-label]="item.displayValue"
+      <div class="mat-calendar-body-cell-content"
         [class.mat-calendar-body-selected]="selectedValue === item.value"
         [class.mat-calendar-body-today]="todayValue === item.value">
         {{item.displayValue}}
-      </button>
+      </div>
   </td>
 </tr>
diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
index 90aab671c85f..2002566454ab 100644
--- a/src/material/datepicker/calendar-body.scss
+++ b/src/material/datepicker/calendar-body.scss
@@ -61,10 +61,6 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
   // Choosing a value clearly larger than the height ensures we get the correct capsule shape.
   border-radius: 999px;
 
-  // Override mat-button defaults
-  min-width: 0;
-  border-color: transparent;
-
   @include cdk-high-contrast {
     border: none;
   }
diff --git a/src/material/datepicker/calendar.spec.ts b/src/material/datepicker/calendar.spec.ts
index f8b5cc172988..56a8184ab03e 100644
--- a/src/material/datepicker/calendar.spec.ts
+++ b/src/material/datepicker/calendar.spec.ts
@@ -70,9 +70,7 @@ describe('MatCalendar', () => {
 
       let todayCell = calendarElement.querySelector('.mat-calendar-body-today')!;
       expect(todayCell).not.toBeNull();
-      let todayCellSpan = todayCell.querySelector('span')!;
-      expect(todayCellSpan).not.toBeNull();
-      expect(todayCellSpan.innerHTML.trim()).toBe('1');
+      expect(todayCell.innerHTML.trim()).toBe('1');
 
       fakeToday = new Date(2018, 0, 10);
       calendarInstance.updateTodaysDate();
@@ -80,9 +78,7 @@ describe('MatCalendar', () => {
 
       todayCell = calendarElement.querySelector('.mat-calendar-body-today')!;
       expect(todayCell).not.toBeNull();
-      todayCellSpan = todayCell.querySelector('span')!;
-      expect(todayCellSpan).not.toBeNull();
-      expect(todayCellSpan.innerHTML.trim()).toBe('10');
+      expect(todayCell.innerHTML.trim()).toBe('10');
     }));
 
     it('should be in month view with specified month active', () => {