fix(button): unable to set a custom tabindex on a link button (#12042)

Fixes the consumer's `tabIndex` being overwritten to always be 0 on button links.

Fixes #12041.

Author: crisbeto

src/lib/button/button.spec.ts

@@ -182,6 +182,24 @@ describe('MatButton', () => {
       expect(buttonDebugElement.nativeElement.getAttribute('disabled'))
         .toBeNull('Expect no disabled');
     });
+
+    it('should be able to set a custom tabindex', () => {
+      let fixture = TestBed.createComponent(TestApp);
+      let testComponent = fixture.debugElement.componentInstance;
+      let buttonElement = fixture.debugElement.query(By.css('a')).nativeElement;
+
+      fixture.componentInstance.tabIndex = 3;
+      fixture.detectChanges();
+
+      expect(buttonElement.getAttribute('tabIndex'))
+          .toBe('3', 'Expected custom tabindex to be set');
+
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
+
+      expect(buttonElement.getAttribute('tabIndex'))
+          .toBe('-1', 'Expected custom tabindex to be overwritten when disabled.');
+    });
   });
 
   // Ripple tests.
@@ -244,11 +262,12 @@ describe('MatButton', () => {
 @Component({
   selector: 'test-app',
   template: `
-    <button mat-button type="button" (click)="increment()"
+    <button [tabIndex]="tabIndex" mat-button type="button" (click)="increment()"
       [disabled]="isDisabled" [color]="buttonColor" [disableRipple]="rippleDisabled">
       Go
     </button>
-    <a href="http://www.google.com" mat-button [disabled]="isDisabled" [color]="buttonColor">
+    <a [tabIndex]="tabIndex" href="http://www.google.com" mat-button [disabled]="isDisabled"
+      [color]="buttonColor">
       Link
     </a>
     <button mat-fab>Fab Button</button>
@@ -260,6 +279,7 @@ class TestApp {
   isDisabled: boolean = false;
   rippleDisabled: boolean = false;
   buttonColor: ThemePalette;
+  tabIndex: number;
 
   increment() {
     this.clickCount++;

src/lib/button/button.ts

@@ -17,6 +17,7 @@ import {
   ViewEncapsulation,
   Optional,
   Inject,
+  Input,
 } from '@angular/core';
 import {
   CanColor,
@@ -149,7 +150,10 @@ export class MatButton extends _MatButtonMixinBase
              a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]`,
   exportAs: 'matButton, matAnchor',
   host: {
-    '[attr.tabindex]': 'disabled ? -1 : 0',
+    // Note that we ignore the user-specified tabindex when it's disabled for
+    // consistency with the `mat-button` applied on native buttons where even
+    // though they have an index, they're not tabbable.
+    '[attr.tabindex]': 'disabled ? -1 : (tabIndex || 0)',
     '[attr.disabled]': 'disabled || null',
     '[attr.aria-disabled]': 'disabled.toString()',
     '(click)': '_haltDisabledEvents($event)',
@@ -162,6 +166,8 @@ export class MatButton extends _MatButtonMixinBase
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatAnchor extends MatButton {
+  /** Tabindex of the button. */
+  @Input() tabIndex: number;
 
   constructor(
     platform: Platform,