fix(datepicker): calendar keyboard controls not working if the user c…

…licks on blank area (#9494)

Fixes the user not being able to use the keyboard controls on a calendar, if they click on one of the blank areas next to a cell. The issue comes from the calendar body not being focusable which ends up returning focus back to the body.

src/lib/datepicker/calendar.html

@@ -21,7 +21,7 @@
 </div>
 
 <div class="mat-calendar-content" (keydown)="_handleCalendarBodyKeydown($event)"
-    [ngSwitch]="_currentView" cdkMonitorSubtreeFocus>
+    [ngSwitch]="_currentView" cdkMonitorSubtreeFocus tabindex="-1">
   <mat-month-view
       *ngSwitchCase="'month'"
       [activeDate]="_activeDate"

src/lib/datepicker/calendar.spec.ts

@@ -220,6 +220,10 @@ describe('MatCalendar', () => {
           expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
         });
 
+        it('should make the calendar body focusable', () => {
+          expect(calendarBodyEl.getAttribute('tabindex')).toBe('-1');
+        });
+
         describe('month view', () => {
           it('should decrement date on left arrow press', () => {
             dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);