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/material/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/private';
 import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
@@ -291,6 +291,22 @@ describe('MatTabGroup', () => {
       subscription.unsubscribe();
     });
 
+    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/material/tabs/tab-group.ts

@@ -369,11 +369,12 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
   }
 
   /** 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;
   }
 }
 

tools/public_api_guard/material/tabs.d.ts

@@ -49,7 +49,7 @@ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase imp
     constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig, _animationMode?: string | undefined);
     _focusChanged(index: number): void;
     _getTabContentId(i: number): string;
-    _getTabIndex(tab: MatTab, idx: number): number | null;
+    _getTabIndex(tab: MatTab, index: number): number | null;
     _getTabLabelId(i: number): string;
     _handleClick(tab: MatTab, tabHeader: MatTabGroupBaseHeader, index: number): void;
     _removeTabBodyWrapperHeight(): void;