fix(datepicker): avoid accidental form submissions through calendar b…

…uttons (angular#10515)

Sets all internal calendar buttons to be `type="button"` in order to avoid accidental submissions if the calendar is placed inside a form.

Fixes angular#10514.

src/lib/datepicker/calendar-header.html

@@ -1,19 +1,19 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
-    <button mat-button class="mat-calendar-period-button"
+    <button mat-button type="button" class="mat-calendar-period-button"
             (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel">
       {{periodButtonText}}
       <div class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView != 'month'"></div>
     </button>
 
     <div class="mat-calendar-spacer"></div>
 
-    <button mat-icon-button class="mat-calendar-previous-button"
+    <button mat-icon-button type="button" class="mat-calendar-previous-button"
             [disabled]="!previousEnabled()" (click)="previousClicked()"
             [attr.aria-label]="prevButtonLabel">
     </button>
 
-    <button mat-icon-button class="mat-calendar-next-button"
+    <button mat-icon-button type="button" class="mat-calendar-next-button"
             [disabled]="!nextEnabled()" (click)="nextClicked()"
             [attr.aria-label]="nextButtonLabel">
     </button>

src/lib/datepicker/calendar.spec.ts

@@ -113,9 +113,12 @@ describe('MatCalendar', () => {
         fixture.detectChanges();
 
         expect(button.getAttribute('aria-label')).toBe('Go to multi-year view?');
-      })
-    );
+      }));
 
+    it('should set all buttons to be `type="button"`', () => {
+      const invalidButtons = calendarElement.querySelectorAll('button:not([type="button"])');
+      expect(invalidButtons.length).toBe(0);
+    });
 
     describe('a11y', () => {
       describe('calendar body', () => {