Disable tabs using changes to response to events rather than pointer-events: none (#7364)

Author: josephperrott

src/lib/tabs/_tabs-common.scss

@@ -24,7 +24,6 @@ $mat-tab-animation-duration: 500ms !default;
 
   &.mat-tab-disabled {
     cursor: default;
-    pointer-events: none;
   }
 }
 

src/lib/tabs/tab-group.html

@@ -6,15 +6,15 @@
   <div class="mat-tab-label" role="tab" matTabLabelWrapper mat-ripple
        *ngFor="let tab of _tabs; let i = index"
        [id]="_getTabLabelId(i)"
-       [tabIndex]="selectedIndex == i ? 0 : -1"
+       [attr.tabIndex]="_getTabIndex(tab, i)"
        [attr.aria-controls]="_getTabContentId(i)"
        [attr.aria-selected]="selectedIndex == i"
        [class.mat-tab-label-active]="selectedIndex == i"
        [disabled]="tab.disabled"
-       [matRippleDisabled]="disableRipple"
-       (click)="tabHeader.focusIndex = selectedIndex = i">
+       [matRippleDisabled]="tab.disabled || disableRipple"
+       (click)="_handleClick(tab, tabHeader, i)">
 
-    <!-- If there is a label template, use it. -->
+       <!-- If there is a label template, use it. -->
     <ng-template [ngIf]="tab.templateLabel">
       <ng-template [cdkPortalHost]="tab.templateLabel"></ng-template>
     </ng-template>

src/lib/tabs/tab-group.ts

@@ -26,6 +26,7 @@ import {
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Subscription} from 'rxjs/Subscription';
 import {MatTab} from './tab';
+import {MatTabHeader} from './tab-header';
 import {merge} from 'rxjs/observable/merge';
 import {
   CanColor,
@@ -278,4 +279,19 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
     this._tabBodyWrapperHeight = this._tabBodyWrapper.nativeElement.clientHeight;
     this._renderer.setStyle(this._tabBodyWrapper.nativeElement, 'height', '');
   }
+
+  /** Handle click events, setting new selected index if appropriate. */
+  _handleClick(tab: MatTab, tabHeader: MatTabHeader, idx: number) {
+    if (!tab.disabled) {
+      this.selectedIndex = tabHeader.focusIndex = idx;
+    }
+  }
+
+  /** Retrieves the tabindex for the tab. */
+  _getTabIndex(tab: MatTab, idx: number): number | null {
+    if (tab.disabled) {
+      return null;
+    }
+    return this.selectedIndex === idx ? 0 : -1;
+  }
 }

src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -119,7 +119,9 @@ describe('MatTabNavBar', () => {
       fixture.componentInstance.disabled = true;
       fixture.detectChanges();
 
-      expect(tabLinkElements.every(tabLink => tabLink.tabIndex === -1))
+      expect(tabLinkElements.every(tabLink => {
+        return tabLink.getAttribute('tabIndex') === null;
+      }))
         .toBe(true, 'Expected element to no longer be keyboard focusable if disabled.');
     });
 

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -183,7 +183,7 @@ export const _MatTabLinkMixinBase = mixinDisabled(MatTabLinkBase);
   host: {
     'class': 'mat-tab-link',
     '[attr.aria-disabled]': 'disabled.toString()',
-    '[attr.tabindex]': 'tabIndex',
+    '[attr.tabIndex]': 'tabIndex',
     '[class.mat-tab-disabled]': 'disabled',
     '[class.mat-tab-label-active]': 'active',
   }
@@ -209,16 +209,16 @@ export class MatTabLink extends _MatTabLinkMixinBase implements OnDestroy, CanDi
   }
 
   /** Whether ripples should be disabled or not. */
-  get disableRipple(): boolean { return this._disableRipple; }
+  get disableRipple(): boolean { return this.disabled || this._disableRipple; }
   set disableRipple(value: boolean) {
     this._disableRipple = value;
     this._tabLinkRipple.disabled = this.disableRipple;
     this._tabLinkRipple._updateRippleRenderer();
   }
 
   /** @docs-private */
-  get tabIndex(): number {
-    return this.disabled ? -1 : 0;
+  get tabIndex(): number | null {
+    return this.disabled ? null : 0;
   }
 
   constructor(private _tabNavBar: MatTabNav,