fix(expansion-panel): only highlight keyboard-focused panel headers (#…

…6148)

Previously the expansion panel header would be focused if it was toggled by mouse, which makes it appear stuck. These changes switch to only highlighting it if focus came programmatically or through the keyboard.

src/lib/expansion/_expansion-theme.scss

@@ -15,19 +15,19 @@
     border-top-color: mat-color($foreground, divider);
   }
 
-  .mat-expansion-panel-header:focus,
-  .mat-expansion-panel-header:hover {
-    background: mat-color($background, hover);
+  .mat-expansion-panel-header {
+    &.cdk-keyboard-focused,
+    &.cdk-program-focused,
+    &:hover {
+      background: mat-color($background, hover);
+    }
   }
 
   .mat-expansion-panel-header-title {
     color: mat-color($foreground, text);
   }
 
-  .mat-expansion-panel-header-description {
-    color: mat-color($foreground, secondary-text);
-  }
-
+  .mat-expansion-panel-header-description,
   .mat-expansion-indicator::after {
     color: mat-color($foreground, secondary-text);
   }

src/lib/expansion/expansion-panel-header.ts

@@ -14,6 +14,8 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   OnDestroy,
+  Renderer2,
+  ElementRef,
 } from '@angular/core';
 import {
   trigger,
@@ -25,6 +27,7 @@ import {
 import {SPACE, ENTER} from '../core/keyboard/keycodes';
 import {MdExpansionPanel, EXPANSION_PANEL_ANIMATION_TIMING} from './expansion-panel';
 import {filter} from '../core/rxjs/index';
+import {FocusOriginMonitor} from '../core/style/index';
 import {merge} from 'rxjs/observable/merge';
 import {Subscription} from 'rxjs/Subscription';
 
@@ -72,6 +75,9 @@ export class MdExpansionPanelHeader implements OnDestroy {
 
   constructor(
     @Host() public panel: MdExpansionPanel,
+    private _renderer: Renderer2,
+    private _element: ElementRef,
+    private _focusOriginMonitor: FocusOriginMonitor,
     private _changeDetectorRef: ChangeDetectorRef) {
 
     // Since the toggle state depends on an @Input on the panel, we
@@ -82,6 +88,8 @@ export class MdExpansionPanelHeader implements OnDestroy {
       filter.call(panel._inputChanges, changes => !!changes.hideToggle)
     )
     .subscribe(() => this._changeDetectorRef.markForCheck());
+
+    _focusOriginMonitor.monitor(_element.nativeElement, _renderer, false);
   }
 
   /** Toggles the expanded state of the panel. */
@@ -128,6 +136,8 @@ export class MdExpansionPanelHeader implements OnDestroy {
       this._parentChangeSubscription.unsubscribe();
       this._parentChangeSubscription = null;
     }
+
+    this._focusOriginMonitor.stopMonitoring(this._element.nativeElement);
   }
 }
 

src/lib/expansion/index.ts

@@ -8,7 +8,7 @@
 
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {CompatibilityModule, UNIQUE_SELECTION_DISPATCHER_PROVIDER} from '../core';
+import {CompatibilityModule, StyleModule, UNIQUE_SELECTION_DISPATCHER_PROVIDER} from '../core';
 import {
   MdExpansionPanelHeader,
   MdExpansionPanelDescription,
@@ -24,7 +24,7 @@ import {
 } from './accordion';
 
 @NgModule({
-  imports: [CompatibilityModule, CommonModule],
+  imports: [CompatibilityModule, CommonModule, StyleModule],
   exports: [
     CdkAccordion,
     MdAccordion,