fix(datepicker): allow calendar cell selection via the space key (#13098)

Fixes not being able to select items in the calendar using the spacebar. This consistent both with the native buttons that are in the calendar header, as well as the [datepicker by cms.gov](https://assets.cms.gov/resources/framework/2.0/Pages/datepicker.html).

Author: crisbeto

src/lib/datepicker/calendar.spec.ts

@@ -1,5 +1,5 @@
 import {Direction, Directionality} from '@angular/cdk/bidi';
-import {ENTER, RIGHT_ARROW} from '@angular/cdk/keycodes';
+import {ENTER, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
 import {
   dispatchFakeEvent,
   dispatchKeyboardEvent,
@@ -230,6 +230,20 @@ describe('MatCalendar', () => {
             expect(calendarInstance.activeDate).toEqual(new Date(2017, FEB, 28));
             expect(testComponent.selected).toBeUndefined();
           });
+
+          it('should return to month view on space', () => {
+            const tableBodyEl = calendarBodyEl.querySelector('.mat-calendar-body') as HTMLElement;
+
+            dispatchKeyboardEvent(tableBodyEl, 'keydown', RIGHT_ARROW);
+            fixture.detectChanges();
+
+            dispatchKeyboardEvent(tableBodyEl, 'keydown', SPACE);
+            fixture.detectChanges();
+
+            expect(calendarInstance.currentView).toBe('month');
+            expect(calendarInstance.activeDate).toEqual(new Date(2017, FEB, 28));
+            expect(testComponent.selected).toBeUndefined();
+          });
         });
 
         describe('multi-year view', () => {
@@ -253,6 +267,21 @@ describe('MatCalendar', () => {
             expect(calendarInstance.activeDate).toEqual(new Date(2018, JAN, 31));
             expect(testComponent.selected).toBeUndefined();
           });
+
+          it('should go to year view on space', () => {
+            const tableBodyEl = calendarBodyEl.querySelector('.mat-calendar-body') as HTMLElement;
+
+            dispatchKeyboardEvent(tableBodyEl, 'keydown', RIGHT_ARROW);
+            fixture.detectChanges();
+
+            dispatchKeyboardEvent(tableBodyEl, 'keydown', SPACE);
+            fixture.detectChanges();
+
+            expect(calendarInstance.currentView).toBe('year');
+            expect(calendarInstance.activeDate).toEqual(new Date(2018, JAN, 31));
+            expect(testComponent.selected).toBeUndefined();
+          });
+
         });
 
       });

src/lib/datepicker/month-view.spec.ts

@@ -9,6 +9,7 @@ import {
   PAGE_UP,
   RIGHT_ARROW,
   UP_ARROW,
+  SPACE,
 } from '@angular/cdk/keycodes';
 import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {Component} from '@angular/core';
@@ -256,6 +257,18 @@ describe('MatMonthView', () => {
 
           expect(testComponent.selected).toEqual(new Date(2017, JAN, 4));
         });
+
+        it('should select active date on space', () => {
+          dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);
+          fixture.detectChanges();
+
+          expect(testComponent.selected).toEqual(new Date(2017, JAN, 10));
+
+          dispatchKeyboardEvent(calendarBodyEl, 'keydown', SPACE);
+          fixture.detectChanges();
+
+          expect(testComponent.selected).toEqual(new Date(2017, JAN, 4));
+        });
       });
     });
   });

src/lib/datepicker/month-view.ts

@@ -16,6 +16,7 @@ import {
   PAGE_UP,
   RIGHT_ARROW,
   UP_ARROW,
+  SPACE,
 } from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
@@ -212,6 +213,7 @@ export class MatMonthView<D> implements AfterContentInit {
             this._dateAdapter.addCalendarMonths(this._activeDate, 1);
         break;
       case ENTER:
+      case SPACE:
         if (!this.dateFilter || this.dateFilter(this._activeDate)) {
           this._dateSelected(this._dateAdapter.getDate(this._activeDate));
           this._userSelection.emit();

src/lib/datepicker/multi-year-view.ts

@@ -16,6 +16,7 @@ import {
   PAGE_UP,
   RIGHT_ARROW,
   UP_ARROW,
+  SPACE,
 } from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
@@ -197,6 +198,7 @@ export class MatMultiYearView<D> implements AfterContentInit {
                 this._activeDate, event.altKey ? yearsPerPage * 10 : yearsPerPage);
         break;
       case ENTER:
+      case SPACE:
         this._yearSelected(this._dateAdapter.getYear(this._activeDate));
         break;
       default:

src/lib/datepicker/year-view.ts

@@ -16,6 +16,7 @@ import {
   PAGE_UP,
   RIGHT_ARROW,
   UP_ARROW,
+  SPACE,
 } from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
@@ -188,6 +189,7 @@ export class MatYearView<D> implements AfterContentInit {
             this._dateAdapter.addCalendarYears(this._activeDate, event.altKey ? 10 : 1);
         break;
       case ENTER:
+      case SPACE:
         this._monthSelected(this._dateAdapter.getMonth(this._activeDate));
         break;
       default: