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

…uttons

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.html

@@ -1,19 +1,19 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
-    <button mat-button class="mat-calendar-period-button"
+    <button type="button" mat-button class="mat-calendar-period-button"
             (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">
       {{_periodButtonText}}
       <div class="mat-calendar-arrow" [class.mat-calendar-invert]="_currentView != 'month'"></div>
     </button>
 
     <div class="mat-calendar-spacer"></div>
 
-    <button mat-icon-button class="mat-calendar-previous-button"
+    <button type="button" mat-icon-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 type="button" mat-icon-button class="mat-calendar-next-button"
             [disabled]="!_nextEnabled()" (click)="_nextClicked()"
             [attr.aria-label]="_nextButtonLabel">
     </button>

src/lib/datepicker/calendar.spec.ts

@@ -220,9 +220,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', () => {