fix(stepper): align appearance with spec (#7279)

Aligns the stepper appearance closer to the spec by:
* Removing the focused background when focused by mouse. Now it only shows up for programmatic and keyboard focus.
* Adding ripples to the step header.
* Using a slightly heavier font font the active step.
* Using `cursor: pointer` to show that the step is clickable.

Fixes #7260.

Author: crisbeto

src/lib/stepper/_stepper-theme.scss

@@ -8,7 +8,8 @@
   $primary: map-get($theme, primary);
 
   .mat-step-header {
-    &:focus,
+    &.cdk-keyboard-focused,
+    &.cdk-program-focused,
     &:hover {
       background-color: mat-color($background, hover);
     }
@@ -50,4 +51,18 @@
   .mat-stepper-vertical, .mat-stepper-horizontal {
     font-family: mat-font-family($config);
   }
+
+  .mat-step-label {
+    font: {
+      size: mat-font-size($config, body-1);
+      weight: mat-font-weight($config, body-1);
+    };
+  }
+
+  .mat-step-label-selected {
+    font: {
+      size: mat-font-size($config, body-2);
+      weight: mat-font-weight($config, body-2);
+    };
+  }
 }

src/lib/stepper/step-header.html

@@ -1,3 +1,4 @@
+<div class="mat-step-header-ripple" mat-ripple [matRippleTrigger]="_getHostElement()"></div>
 <div [class.mat-step-icon]="icon !== 'number' || selected"
      [class.mat-step-icon-not-touched]="icon == 'number' && !selected"
      [ngSwitch]="icon">
@@ -6,7 +7,8 @@
   <mat-icon *ngSwitchCase="'done'">done</mat-icon>
 </div>
 <div class="mat-step-label"
-     [class.mat-step-label-active]="active">
+     [class.mat-step-label-active]="active"
+     [class.mat-step-label-selected]="selected">
   <!-- If there is a label template, use it. -->
   <ng-container *ngIf="_templateLabel()" [ngTemplateOutlet]="label.template">
   </ng-container>

src/lib/stepper/step-header.scss

@@ -1,3 +1,5 @@
+@import '../core/style/layout-common';
+
 $mat-stepper-label-header-height: 24px !default;
 $mat-stepper-label-min-width: 50px !default;
 $mat-stepper-side-gap: 24px !default;
@@ -6,6 +8,13 @@ $mat-stepper-line-gap: 8px !default;
 $mat-step-optional-font-size: 12px;
 $mat-step-header-icon-size: 16px !default;
 
+.mat-step-header {
+  overflow: hidden;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+}
+
 .mat-step-optional {
   font-size: $mat-step-optional-font-size;
 }
@@ -39,3 +48,8 @@ $mat-step-header-icon-size: 16px !default;
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+.mat-step-header-ripple {
+  @include mat-fill;
+  pointer-events: none;
+}

src/lib/stepper/step-header.ts

@@ -6,8 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {FocusMonitor} from '@angular/cdk/a11y';
 import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
-import {Component, Input, ViewEncapsulation} from '@angular/core';
+import {Component, Input, ViewEncapsulation, ElementRef, OnDestroy, Renderer2} from '@angular/core';
+import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core';
 import {MatStepLabel} from './step-label';
 
 
@@ -23,7 +25,7 @@ import {MatStepLabel} from './step-label';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
 })
-export class MatStepHeader {
+export class MatStepHeader implements OnDestroy {
   /** Icon for the given step. */
   @Input() icon: string;
 
@@ -62,6 +64,17 @@ export class MatStepHeader {
   }
   private _optional: boolean;
 
+  constructor(
+    private _focusMonitor: FocusMonitor,
+    private _element: ElementRef,
+    renderer: Renderer2) {
+    _focusMonitor.monitor(_element.nativeElement, renderer, true);
+  }
+
+  ngOnDestroy() {
+    this._focusMonitor.stopMonitoring(this._element.nativeElement);
+  }
+
   /** Returns string label of given step if it is a text label. */
   _stringLabel(): string | null {
     return this.label instanceof MatStepLabel ? null : this.label;
@@ -71,4 +84,9 @@ export class MatStepHeader {
   _templateLabel(): MatStepLabel | null {
     return this.label instanceof MatStepLabel ? this.label : null;
   }
+
+  /** Returns the host HTML element. */
+  _getHostElement() {
+    return this._element.nativeElement;
+  }
 }

src/lib/stepper/stepper-module.ts

@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {A11yModule} from '@angular/cdk/a11y';
 import {PortalModule} from '@angular/cdk/portal';
 import {CdkStepperModule} from '@angular/cdk/stepper';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
-import {MatCommonModule} from '@angular/material/core';
+import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatStepHeader} from './step-header';
 import {MatStepLabel} from './step-label';
@@ -26,7 +27,9 @@ import {MatStepperNext, MatStepperPrevious} from './stepper-button';
     PortalModule,
     MatButtonModule,
     CdkStepperModule,
-    MatIconModule
+    MatIconModule,
+    A11yModule,
+    MatRippleModule,
   ],
   exports: [
     MatCommonModule,

src/lib/stepper/stepper.scss

@@ -12,11 +12,6 @@ $mat-stepper-line-gap: 8px !default;
   display: block;
 }
 
-.mat-step-header {
-  overflow: hidden;
-  outline: none;
-}
-
 .mat-horizontal-stepper-header-container {
   white-space: nowrap;
   display: flex;