From b5f4caf1fab6890e2b2188aef2bea718995950f1 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 15 Aug 2017 23:48:29 +0200
Subject: [PATCH] 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.
---
 src/lib/tabs/tab-header.spec.ts | 12 ++++++++++--
 src/lib/tabs/tab-header.ts      |  4 +++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib/tabs/tab-header.spec.ts b/src/lib/tabs/tab-header.spec.ts
index 46ba2a4b90d3..45af10e36c40 100644
--- a/src/lib/tabs/tab-header.spec.ts
+++ b/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);
     });
   });
 
diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts
index f21ea0d92df2..e57d9840050e 100644
--- a/src/lib/tabs/tab-header.ts
+++ b/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;
     }
   }