fix(button): add the focus() method to buttons. (#643)

Fixes #510.

Author: hansl

src/components/button/button.ts

@@ -80,6 +80,11 @@ export class MdButton {
   removeKeyboardFocus() {
     this.isKeyboardFocused = false;
   }
+
+  /** TODO(hansl): e2e test this function. */
+  focus() {
+    this.elementRef.nativeElement.focus();
+  }
 }
 
 @Component({

src/demo-app/button/button-demo.html

@@ -63,11 +63,14 @@
     <div>
       <p>isDisabled: {{isDisabled}}, clickCounter: <span id="clickCounter">{{clickCounter}}</span></p>
       <button md-raised-button (click)="isDisabled=!isDisabled" id="disableToggle">Disable buttons</button>
+      <button md-raised-button (click)="button1.focus()" id="disableToggle">Focus 1</button>
+      <button md-raised-button (click)="button2.focus()" id="disableToggle">Focus 2</button>
+      <button md-raised-button (click)="button3.focus()" id="disableToggle">Focus 3</button>
     </div>
-    <button md-button [disabled]="isDisabled" (click)="clickCounter=clickCounter+1" id="testButton">off</button>
+    <button md-button #button1 [disabled]="isDisabled" (click)="clickCounter=clickCounter+1" id="testButton">off</button>
     <button md-button color="primary" [disabled]="isDisabled">off</button>
-    <a href="http://www.google.com" md-button color="accent" [disabled]="isDisabled">off</a>
-    <button md-raised-button color="primary" [disabled]="isDisabled">off</button>
+    <a href="http://www.google.com" #button2 md-button color="accent" [disabled]="isDisabled">off</a>
+    <button md-raised-button #button3 color="primary" [disabled]="isDisabled">off</button>
     <button md-mini-fab [disabled]="isDisabled">
       <md-icon class="md-24">check</md-icon>
     </button>