Disable tabs using changes to response to events rather than pointer-events: none

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]="selectedIndex == i ? 0 : null"
        [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

@@ -27,6 +27,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,
@@ -290,4 +291,12 @@ 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) {
+      tabHeader.focusIndex = idx;
+      this.selectedIndex = idx;
+    }
+  }
 }

src/lib/tabs/tab-label-wrapper.ts

@@ -32,7 +32,9 @@ export class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase implements
 
   /** Sets focus on the wrapper element */
   focus(): void {
-    this.elementRef.nativeElement.focus();
+    if (!this.disabled) {
+      this.elementRef.nativeElement.focus();
+    }
   }
 
   getOffsetLeft(): number {

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

@@ -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,