fix(tabs): allow for tabs to be selected using the space key (#6426)

* Allows for the user to select a tab using the space key, in addition to enter. This seems to be consistent with the M1 implementation of tabs.
* Prevents the default action for space and enter in order to prevent the page from scrolling by accident.

Fixes #6406.

Author: crisbeto

src/lib/tabs/tab-header.spec.ts

@@ -4,7 +4,7 @@ import {
 import {Component, ViewChild, ViewContainerRef} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {By} from '@angular/platform-browser';
-import {ENTER, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
+import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
 import {PortalModule} from '@angular/cdk/portal';
 import {ViewportRuler} from '@angular/cdk/overlay';
 import {Direction, Directionality} from '@angular/cdk/bidi';
@@ -120,14 +120,22 @@ describe('MdTabHeader', () => {
 
       // Select the focused index 2
       expect(appComponent.selectedIndex).toBe(0);
-      dispatchKeyboardEvent(tabListContainer, 'keydown', ENTER);
+      const enterEvent = dispatchKeyboardEvent(tabListContainer, 'keydown', ENTER);
       fixture.detectChanges();
       expect(appComponent.selectedIndex).toBe(2);
+      expect(enterEvent.defaultPrevented).toBe(true);
 
       // Move focus right to 0
       dispatchKeyboardEvent(tabListContainer, 'keydown', LEFT_ARROW);
       fixture.detectChanges();
       expect(appComponent.mdTabHeader.focusIndex).toBe(0);
+
+      // Select the focused 0 using space.
+      expect(appComponent.selectedIndex).toBe(2);
+      const spaceEvent = dispatchKeyboardEvent(tabListContainer, 'keydown', SPACE);
+      fixture.detectChanges();
+      expect(appComponent.selectedIndex).toBe(0);
+      expect(spaceEvent.defaultPrevented).toBe(true);
     });
   });
 

src/lib/tabs/tab-header.ts

@@ -25,7 +25,7 @@ import {
   ChangeDetectorRef,
 } from '@angular/core';
 import {Directionality, Direction} from '@angular/cdk/bidi';
-import {RIGHT_ARROW, LEFT_ARROW, ENTER} from '@angular/cdk/keycodes';
+import {RIGHT_ARROW, LEFT_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes';
 import {auditTime, startWith} from '@angular/cdk/rxjs';
 import {Subscription} from 'rxjs/Subscription';
 import {of as observableOf} from 'rxjs/observable/of';
@@ -172,7 +172,9 @@ export class MdTabHeader extends _MdTabHeaderMixinBase
         this._focusPreviousTab();
         break;
       case ENTER:
+      case SPACE:
         this.selectFocusedIndex.emit(this.focusIndex);
+        event.preventDefault();
         break;
     }
   }