fix(tabs): don't handle keyboard events with modifier keys (#14234)

Doesn't `preventDefault` or react to any of the keyboard shortcuts, if the user is holding a modifier key, in order to avoid interfering with other OS-level shortcuts.

Author: crisbeto

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

@@ -2,7 +2,12 @@ import {Direction, Directionality} from '@angular/cdk/bidi';
 import {END, ENTER, HOME, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
 import {PortalModule} from '@angular/cdk/portal';
 import {ScrollingModule, ViewportRuler} from '@angular/cdk/scrolling';
-import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing';
+import {
+  dispatchFakeEvent,
+  dispatchKeyboardEvent,
+  createKeyboardEvent,
+  dispatchEvent,
+} from '@angular/cdk/testing';
 import {CommonModule} from '@angular/common';
 import {Component, ViewChild} from '@angular/core';
 import {
@@ -193,6 +198,30 @@ describe('MatTabHeader', () => {
       expect(appComponent.tabHeader.focusIndex).toBe(2);
     });
 
+    it('should not do anything if a modifier key is pressed', () => {
+      const rightArrowEvent = createKeyboardEvent('keydown', RIGHT_ARROW);
+      const enterEvent = createKeyboardEvent('keydown', ENTER);
+
+      [rightArrowEvent, enterEvent].forEach(event => {
+        Object.defineProperty(event, 'shiftKey', {get: () => true});
+      });
+
+      appComponent.tabHeader.focusIndex = 0;
+      fixture.detectChanges();
+      expect(appComponent.tabHeader.focusIndex).toBe(0);
+
+      dispatchEvent(tabListContainer, rightArrowEvent);
+      fixture.detectChanges();
+      expect(appComponent.tabHeader.focusIndex).toBe(0);
+      expect(rightArrowEvent.defaultPrevented).toBe(false);
+
+      expect(appComponent.selectedIndex).toBe(0);
+      dispatchEvent(tabListContainer, enterEvent);
+      fixture.detectChanges();
+      expect(appComponent.selectedIndex).toBe(0);
+      expect(enterEvent.defaultPrevented).toBe(false);
+    });
+
   });
 
   describe('pagination', () => {

src/lib/tabs/tab-header.ts

@@ -8,7 +8,7 @@
 
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {coerceNumberProperty} from '@angular/cdk/coercion';
-import {END, ENTER, HOME, SPACE} from '@angular/cdk/keycodes';
+import {END, ENTER, HOME, SPACE, hasModifierKey} from '@angular/cdk/keycodes';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {
   AfterContentChecked,
@@ -176,6 +176,11 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
   }
 
   _handleKeydown(event: KeyboardEvent) {
+    // We don't handle any key bindings with a modifier key.
+    if (hasModifierKey(event)) {
+      return;
+    }
+
     switch (event.keyCode) {
       case HOME:
         this._keyManager.setFirstItemActive();