feat(fab): Add tabIndex property (#216)

Author: trimox

src/demo-app/components/fab-demo/fab-demo.component.html

@@ -28,7 +28,11 @@ <h1 mdc-typography-display1>Floating Action Button</h1>
       <tbody>
         <tr>
           <td>mini: boolean</td>
-          <td>Makes the fab smaller (40 x 40 pixels).</td>
+          <td>Make the fab smaller (40 x 40 pixels).</td>
+        </tr>
+        <tr>
+          <td>tabIndex: number</td>
+          <td>Set the tabindex of the button. (Default: 0).</td>
         </tr>
         <tr>
           <td>disableRipple: boolean</td>

src/demo-app/components/fab-demo/fab-demo.component.ts

@@ -5,6 +5,6 @@ import { Component } from '@angular/core';
   templateUrl: './fab-demo.component.html'
 })
 export class FabDemoComponent {
-  isMini: boolean;
-  isRippleDisabled: boolean;
+  isMini: boolean = false;
+  isRippleDisabled: boolean = false;
 }

src/lib/fab/fab.component.ts

@@ -30,6 +30,7 @@ export class MdcFabIconDirective {
 })
 export class MdcFabComponent {
   @Input() mini: boolean;
+  @Input('attr.tabindex') tabIndex: number = 0;
   @Input()
   get disableRipple() { return this._ripple.disabled; }
   set disableRipple(value) {

test/unit/fab/fab.test.ts

@@ -55,6 +55,10 @@ describe('MdcFabComponent', () => {
       buttonDebugElement.nativeElement.click();
       expect(testComponent.clickCount).toBe(1);
     });
+
+    it('#should preserve any given tabIndex', () => {
+      expect(buttonDebugElement.nativeElement.tabIndex).toBe(2);
+    });
   });
 });
 
@@ -63,6 +67,7 @@ describe('MdcFabComponent', () => {
   template: `
     <button mdc-fab
       (click)="increment()"
+      [tabIndex]="customTabIndex"
       [disableRipple]="isRippleDisabled"
       [mini]="isMini">
       <mdc-fab-icon>search</mdc-fab-icon>
@@ -73,6 +78,7 @@ class SimpleButton {
   isMini: boolean = false;
   isRippleDisabled: boolean = false;
   clickCount: number = 0;
+  customTabIndex: number = 2;
 
   increment() {
     this.clickCount++;