fix(button): focus styles not applied to programmatically focused buttons

Currently the tint that is added on top of focused buttons won't show up if the button is focused programmatically, which means that the button won't appear focused in cases like the dialog closing and restoring focus to its trigger. This seems to have been introduced by 5d6920d.

Author: crisbeto

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

@@ -73,11 +73,12 @@
       <button mat-raised-button (click)="button1.focus()">Focus 1</button>
       <button mat-raised-button (click)="button2.focus()">Focus 2</button>
       <button mat-raised-button (click)="button3.focus()">Focus 3</button>
+      <button mat-raised-button (click)="button4.focus()">Focus 4</button>
     </div>
     <button mat-button #button1 [disabled]="isDisabled" (click)="clickCounter=clickCounter+1">off</button>
-    <button mat-button color="primary" [disabled]="isDisabled">off</button>
-    <a href="http://www.google.com" #button2 mat-button color="accent" [disabled]="isDisabled">off</a>
-    <button mat-raised-button #button3 color="primary" [disabled]="isDisabled">off</button>
+    <button mat-button #button2 color="primary" [disabled]="isDisabled">off</button>
+    <a href="http://www.google.com" #button3 mat-button color="accent" [disabled]="isDisabled">off</a>
+    <button mat-raised-button #button4 color="primary" [disabled]="isDisabled">off</button>
     <button mat-mini-fab [disabled]="isDisabled">
       <mat-icon>check</mat-icon>
     </button>

src/lib/button/_button-base.scss

@@ -51,7 +51,7 @@ $mat-mini-fab-padding: 8px !default;
     cursor: default;
   }
 
-  &.cdk-keyboard-focused {
+  &.cdk-keyboard-focused, &.cdk-program-focused {
     .mat-button-focus-overlay {
       opacity: 1;
     }