fix(tabs): focus wrapping back to selected label when using shift + tab

Currently the `tabindex` of each of the tab labels is determined by the selected index. This means that if the user tabbed into the header, pressed the right arrow and then pressed shift + tab, their focus would end up on the selected tab. These changes switch to basing the `tabindex` on the focused index which is tied both to the selected index and the user's keyboard navigation.

Author: crisbeto

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

@@ -1,4 +1,4 @@
-import {LEFT_ARROW} from '@angular/cdk/keycodes';
+import {LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
 import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
@@ -277,6 +277,22 @@ describe('MatTabGroup', () => {
         .toHaveBeenCalledWith(jasmine.objectContaining({index: 0}));
     });
 
+    it('should update the tabindex of the labels when navigating via keyboard', () => {
+      fixture.detectChanges();
+
+      const tabLabels = fixture.debugElement.queryAll(By.css('.mat-tab-label'))
+        .map(label => label.nativeElement);
+      const tabLabelContainer = fixture.debugElement
+        .query(By.css('.mat-tab-label-container')).nativeElement as HTMLElement;
+
+      expect(tabLabels.map(label => label.getAttribute('tabindex'))).toEqual(['0', '-1', '-1']);
+
+      dispatchKeyboardEvent(tabLabelContainer, 'keydown', RIGHT_ARROW);
+      fixture.detectChanges();
+
+      expect(tabLabels.map(label => label.getAttribute('tabindex'))).toEqual(['-1', '0', '-1']);
+    });
+
   });
 
   describe('aria labelling', () => {

src/lib/tabs/tab-group.ts

@@ -342,10 +342,11 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
   }
 
   /** Retrieves the tabindex for the tab. */
-  _getTabIndex(tab: MatTab, idx: number): number | null {
-    if (tab.disabled) {
+  _getTabIndex(tab: MatTab, index: number): number | null {
+    if (tab.disabled || !this._tabHeader) {
       return null;
     }
-    return this.selectedIndex === idx ? 0 : -1;
+
+    return this._tabHeader.focusIndex === index ? 0 : -1;
   }
 }