feat(datepicker): remove mat-button and add only role button, #16406

Author: wnvko

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>

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

src/material/datepicker/calendar.spec.ts

@@ -70,19 +70,15 @@ 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();
       fixture.detectChanges();
 
       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', () => {