fix(matCalendar): make cell content button, #16356

Author: wnvko

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>

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;
   }