feat: move FocusMonitor into cdk (#6921)

Moves the `FocusOriginMonitor` into `@angular/cdk/a11y`, renames it to `FocusMonitor`, deprecates the `StyleModule` and updates all the references.

BREAKING CHANGE: `FocusOriginMonitor` has been renamed to `FocusMonitor`.

src/cdk/a11y/focus-monitor.spec.ts

@@ -1,38 +1,38 @@
 import {ComponentFixture, inject, TestBed, fakeAsync, tick} from '@angular/core/testing';
 import {Component, Renderer2} from '@angular/core';
-import {StyleModule} from './index';
+import {A11yModule} from './index';
 import {By} from '@angular/platform-browser';
-import {TAB} from '../keyboard/keycodes';
-import {FocusOrigin, FocusOriginMonitor, TOUCH_BUFFER_MS} from './focus-origin-monitor';
+import {TAB} from '@angular/cdk/keycodes';
+import {FocusOrigin, FocusMonitor, TOUCH_BUFFER_MS} from './focus-monitor';
 import {dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing';
 
 
-describe('FocusOriginMonitor', () => {
+describe('FocusMonitor', () => {
   let fixture: ComponentFixture<PlainButton>;
   let buttonElement: HTMLElement;
   let buttonRenderer: Renderer2;
-  let focusOriginMonitor: FocusOriginMonitor;
+  let focusMonitor: FocusMonitor;
   let changeHandler: (origin: FocusOrigin) => void;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [StyleModule],
+      imports: [A11yModule],
       declarations: [
         PlainButton,
       ],
     }).compileComponents();
   });
 
-  beforeEach(inject([FocusOriginMonitor], (fom: FocusOriginMonitor) => {
+  beforeEach(inject([FocusMonitor], (fm: FocusMonitor) => {
     fixture = TestBed.createComponent(PlainButton);
     fixture.detectChanges();
 
     buttonElement = fixture.debugElement.query(By.css('button')).nativeElement;
     buttonRenderer = fixture.componentInstance.renderer;
-    focusOriginMonitor = fom;
+    focusMonitor = fm;
 
     changeHandler = jasmine.createSpy('focus origin change handler');
-    focusOriginMonitor.monitor(buttonElement, buttonRenderer, false).subscribe(changeHandler);
+    focusMonitor.monitor(buttonElement, buttonRenderer, false).subscribe(changeHandler);
     patchElementFocus(buttonElement);
   }));
 
@@ -110,7 +110,7 @@ describe('FocusOriginMonitor', () => {
   }));
 
   it('focusVia keyboard should simulate keyboard focus', fakeAsync(() => {
-    focusOriginMonitor.focusVia(buttonElement, 'keyboard');
+    focusMonitor.focusVia(buttonElement, 'keyboard');
     tick();
 
     expect(buttonElement.classList.length)
@@ -123,7 +123,7 @@ describe('FocusOriginMonitor', () => {
   }));
 
   it('focusVia mouse should simulate mouse focus', fakeAsync(() => {
-    focusOriginMonitor.focusVia(buttonElement, 'mouse');
+    focusMonitor.focusVia(buttonElement, 'mouse');
     fixture.detectChanges();
     tick();
 
@@ -137,7 +137,7 @@ describe('FocusOriginMonitor', () => {
   }));
 
   it('focusVia mouse should simulate mouse focus', fakeAsync(() => {
-    focusOriginMonitor.focusVia(buttonElement, 'touch');
+    focusMonitor.focusVia(buttonElement, 'touch');
     fixture.detectChanges();
     tick();
 
@@ -151,7 +151,7 @@ describe('FocusOriginMonitor', () => {
   }));
 
   it('focusVia program should simulate programmatic focus', fakeAsync(() => {
-    focusOriginMonitor.focusVia(buttonElement, 'program');
+    focusMonitor.focusVia(buttonElement, 'program');
     fixture.detectChanges();
     tick();
 
@@ -175,7 +175,7 @@ describe('FocusOriginMonitor', () => {
 
     // Call `blur` directly because invoking `buttonElement.blur()` does not always trigger the
     // handler on IE11 on SauceLabs.
-    focusOriginMonitor._onBlur({} as any, buttonElement);
+    focusMonitor._onBlur({} as any, buttonElement);
     fixture.detectChanges();
 
     expect(buttonElement.classList.length)
@@ -191,7 +191,7 @@ describe('FocusOriginMonitor', () => {
     expect(buttonElement.classList.length)
         .toBe(2, 'button should have exactly 2 focus classes');
 
-    focusOriginMonitor.stopMonitoring(buttonElement);
+    focusMonitor.stopMonitoring(buttonElement);
     fixture.detectChanges();
 
     expect(buttonElement.classList.length).toBe(0, 'button should not have any focus classes');
@@ -202,7 +202,7 @@ describe('FocusOriginMonitor', () => {
 describe('cdkMonitorFocus', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [StyleModule],
+      imports: [A11yModule],
       declarations: [
         ButtonWithFocusClasses,
         ComplexComponentWithMonitorElementFocus,

src/cdk/a11y/focus-monitor.ts

@@ -18,10 +18,10 @@ import {
   Renderer2,
   SkipSelf,
 } from '@angular/core';
+import {Platform} from '@angular/cdk/platform';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {Subscription} from 'rxjs/Subscription';
-import {Platform} from '../platform/platform';
 import {of as observableOf} from 'rxjs/observable/of';
 
 
@@ -43,11 +43,11 @@ type MonitoredElementInfo = {
 
 /** Monitors mouse and keyboard events to determine the cause of focus events. */
 @Injectable()
-export class FocusOriginMonitor {
+export class FocusMonitor {
   /** The focus origin that the next focus event is a result of. */
   private _origin: FocusOrigin = null;
 
-  /** The FocusOrigin of the last focus event tracked by the FocusOriginMonitor. */
+  /** The FocusOrigin of the last focus event tracked by the FocusMonitor. */
   private _lastFocusOrigin: FocusOrigin;
 
   /** Whether the window has just been focused. */
@@ -320,30 +320,30 @@ export class CdkMonitorFocus implements OnDestroy {
   private _monitorSubscription: Subscription;
   @Output() cdkFocusChange = new EventEmitter<FocusOrigin>();
 
-  constructor(private _elementRef: ElementRef, private _focusOriginMonitor: FocusOriginMonitor,
+  constructor(private _elementRef: ElementRef, private _focusMonitor: FocusMonitor,
               renderer: Renderer2) {
-    this._monitorSubscription = this._focusOriginMonitor.monitor(
+    this._monitorSubscription = this._focusMonitor.monitor(
         this._elementRef.nativeElement, renderer,
         this._elementRef.nativeElement.hasAttribute('cdkMonitorSubtreeFocus'))
         .subscribe(origin => this.cdkFocusChange.emit(origin));
   }
 
   ngOnDestroy() {
-    this._focusOriginMonitor.stopMonitoring(this._elementRef.nativeElement);
+    this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
     this._monitorSubscription.unsubscribe();
   }
 }
 
 /** @docs-private */
-export function FOCUS_ORIGIN_MONITOR_PROVIDER_FACTORY(
-    parentDispatcher: FocusOriginMonitor, ngZone: NgZone, platform: Platform) {
-  return parentDispatcher || new FocusOriginMonitor(ngZone, platform);
+export function FOCUS_MONITOR_PROVIDER_FACTORY(
+    parentDispatcher: FocusMonitor, ngZone: NgZone, platform: Platform) {
+  return parentDispatcher || new FocusMonitor(ngZone, platform);
 }
 
 /** @docs-private */
-export const FOCUS_ORIGIN_MONITOR_PROVIDER = {
-  // If there is already a FocusOriginMonitor available, use that. Otherwise, provide a new one.
-  provide: FocusOriginMonitor,
-  deps: [[new Optional(), new SkipSelf(), FocusOriginMonitor], NgZone, Platform],
-  useFactory: FOCUS_ORIGIN_MONITOR_PROVIDER_FACTORY
+export const FOCUS_MONITOR_PROVIDER = {
+  // If there is already a FocusMonitor available, use that. Otherwise, provide a new one.
+  provide: FocusMonitor,
+  deps: [[new Optional(), new SkipSelf(), FocusMonitor], NgZone, Platform],
+  useFactory: FOCUS_MONITOR_PROVIDER_FACTORY
 };

src/cdk/a11y/public_api.ts

@@ -13,17 +13,19 @@ import {InteractivityChecker} from './interactivity-checker';
 import {CommonModule} from '@angular/common';
 import {PlatformModule} from '@angular/cdk/platform';
 import {AriaDescriber, ARIA_DESCRIBER_PROVIDER} from './aria-describer';
+import {CdkMonitorFocus, FOCUS_MONITOR_PROVIDER} from './focus-monitor';
 
 @NgModule({
   imports: [CommonModule, PlatformModule],
-  declarations: [FocusTrapDirective, FocusTrapDeprecatedDirective],
-  exports: [FocusTrapDirective, FocusTrapDeprecatedDirective],
+  declarations: [FocusTrapDirective, FocusTrapDeprecatedDirective, CdkMonitorFocus],
+  exports: [FocusTrapDirective, FocusTrapDeprecatedDirective, CdkMonitorFocus],
   providers: [
     InteractivityChecker,
     FocusTrapFactory,
     AriaDescriber,
     LIVE_ANNOUNCER_PROVIDER,
-    ARIA_DESCRIBER_PROVIDER
+    ARIA_DESCRIBER_PROVIDER,
+    FOCUS_MONITOR_PROVIDER,
   ]
 })
 export class A11yModule {}
@@ -36,3 +38,4 @@ export * from './focus-trap';
 export * from './interactivity-checker';
 export * from './list-key-manager';
 export * from './live-announcer';
+export * from './focus-monitor';

src/demo-app/demo-app/demo-app.ts

@@ -78,7 +78,7 @@ export class DemoApp {
     {name: 'Toolbar', route: '/toolbar'},
     {name: 'Tooltip', route: '/tooltip'},
     {name: 'Platform', route: '/platform'},
-    {name: 'Style', route: '/style'},
+    {name: 'Focus Origin', route: '/focus-origin'},
     {name: 'Typography', route: '/typography'}
   ];
 

src/demo-app/demo-app/demo-module.ts

@@ -34,7 +34,7 @@ import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../ta
 import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputDemo} from '../input/input-demo';
-import {StyleDemo} from '../style/style-demo';
+import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
 import {TableDemo} from '../table/table-demo';
 import {PeopleDatabase} from '../table/people-database';
 import {DatepickerDemo} from '../datepicker/datepicker-demo';
@@ -94,7 +94,7 @@ import {TableHeaderDemo} from '../table/table-header-demo';
     SlideToggleDemo,
     SpagettiPanel,
     StepperDemo,
-    StyleDemo,
+    FocusOriginDemo,
     TableHeaderDemo,
     ToolbarDemo,
     TooltipDemo,

src/demo-app/demo-app/routes.ts

@@ -31,7 +31,7 @@ import {TABS_DEMO_ROUTES} from '../tabs/routes';
 import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputDemo} from '../input/input-demo';
-import {StyleDemo} from '../style/style-demo';
+import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
 import {DatepickerDemo} from '../datepicker/datepicker-demo';
 import {TableDemo} from '../table/table-demo';
 import {TypographyDemo} from '../typography/typography-demo';
@@ -76,7 +76,7 @@ export const DEMO_APP_ROUTES: Routes = [
     {path: 'tooltip', component: TooltipDemo},
     {path: 'snack-bar', component: SnackBarDemo},
     {path: 'platform', component: PlatformDemo},
-    {path: 'style', component: StyleDemo},
+    {path: 'focus-origin', component: FocusOriginDemo},
     {path: 'typography', component: TypographyDemo},
     {path: 'expansion', component: ExpansionDemo},
     {path: 'stepper', component: StepperDemo}

src/demo-app/demo-material-module.ts

@@ -31,7 +31,7 @@ import {
   MdTooltipModule,
   MdStepperModule,
 } from '@angular/material';
-import {StyleModule, MdNativeDateModule, MdRippleModule} from '@angular/material';
+import {MdNativeDateModule, MdRippleModule} from '@angular/material';
 import {CdkTableModule} from '@angular/cdk/table';
 import {A11yModule} from '@angular/cdk/a11y';
 import {BidiModule} from '@angular/cdk/bidi';
@@ -78,7 +78,6 @@ import {PortalModule} from '@angular/cdk/portal';
     MdTooltipModule,
     MdNativeDateModule,
     CdkTableModule,
-    StyleModule,
     A11yModule,
     BidiModule,
     ObserversModule,

src/demo-app/focus-origin/focus-origin-demo.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {FocusMonitor} from '@angular/cdk/a11y';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'focus-origin-demo',
+  templateUrl: 'focus-origin-demo.html',
+  styleUrls: ['focus-origin-demo.css'],
+})
+export class FocusOriginDemo {
+  constructor(public fom: FocusMonitor) {}
+}

src/demo-app/style/style-demo.ts

@@ -1,13 +0,0 @@
-import {Component} from '@angular/core';
-import {FocusOriginMonitor} from '@angular/material';
-
-
-@Component({
-  moduleId: module.id,
-  selector: 'style-demo',
-  templateUrl: 'style-demo.html',
-  styleUrls: ['style-demo.css'],
-})
-export class StyleDemo {
-  constructor(public fom: FocusOriginMonitor) {}
-}

src/lib/button-toggle/button-toggle.ts

@@ -27,8 +27,9 @@ import {
 } from '@angular/core';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {UniqueSelectionDispatcher, FocusOriginMonitor} from '@angular/material/core';
+import {UniqueSelectionDispatcher} from '@angular/material/core';
 import {CanDisable, mixinDisabled} from '@angular/material/core';
+import {FocusMonitor} from '@angular/cdk/a11y';
 
 /** Acceptable types for a button toggle. */
 export type ToggleType = 'checkbox' | 'radio';
@@ -371,7 +372,7 @@ export class MdButtonToggle implements OnInit, OnDestroy {
               private _buttonToggleDispatcher: UniqueSelectionDispatcher,
               private _renderer: Renderer2,
               private _elementRef: ElementRef,
-              private _focusOriginMonitor: FocusOriginMonitor) {
+              private _focusMonitor: FocusMonitor) {
 
     this.buttonToggleGroup = toggleGroup;
     this.buttonToggleGroupMultiple = toggleGroupMultiple;
@@ -404,7 +405,7 @@ export class MdButtonToggle implements OnInit, OnDestroy {
     if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {
       this._checked = true;
     }
-    this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
+    this._focusMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
   }
 
   /** Focuses the button. */

src/lib/button-toggle/public_api.ts

@@ -8,15 +8,12 @@
 
 import {NgModule} from '@angular/core';
 import {MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle} from './button-toggle';
-import {
-  UNIQUE_SELECTION_DISPATCHER_PROVIDER,
-  MdCommonModule,
-  StyleModule,
-} from '@angular/material/core';
+import {UNIQUE_SELECTION_DISPATCHER_PROVIDER, MdCommonModule} from '@angular/material/core';
+import {A11yModule} from '@angular/cdk/a11y';
 
 
 @NgModule({
-  imports: [MdCommonModule, StyleModule],
+  imports: [MdCommonModule, A11yModule],
   exports: [
     MdButtonToggleGroup,
     MdButtonToggleGroupMultiple,

src/lib/button/button.ts

@@ -24,11 +24,11 @@ import {
   CanColor,
   CanDisable,
   CanDisableRipple,
-  FocusOriginMonitor,
   mixinColor,
   mixinDisabled,
   mixinDisableRipple
 } from '@angular/material/core';
+import {FocusMonitor} from '@angular/cdk/a11y';
 
 
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
@@ -142,13 +142,13 @@ export class MdButton extends _MdButtonMixinBase
   constructor(renderer: Renderer2,
               elementRef: ElementRef,
               private _platform: Platform,
-              private _focusOriginMonitor: FocusOriginMonitor) {
+              private _focusMonitor: FocusMonitor) {
     super(renderer, elementRef);
-    this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
+    this._focusMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
   }
 
   ngOnDestroy() {
-    this._focusOriginMonitor.stopMonitoring(this._elementRef.nativeElement);
+    this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
   }
 
   /** Focuses the button. */
@@ -206,10 +206,10 @@ export class MdButton extends _MdButtonMixinBase
 export class MdAnchor extends MdButton {
   constructor(
       platform: Platform,
-      focusOriginMonitor: FocusOriginMonitor,
+      focusMonitor: FocusMonitor,
       elementRef: ElementRef,
       renderer: Renderer2) {
-    super(renderer, elementRef, platform, focusOriginMonitor);
+    super(renderer, elementRef, platform, focusMonitor);
   }
 
   _haltDisabledEvents(event: Event) {

src/lib/button/public_api.ts

@@ -8,7 +8,8 @@
 
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MdCommonModule, MdRippleModule, StyleModule} from '@angular/material/core';
+import {MdCommonModule, MdRippleModule} from '@angular/material/core';
+import {A11yModule} from '@angular/cdk/a11y';
 import {
   MdAnchor,
   MdButton,
@@ -28,7 +29,7 @@ export * from './button';
     CommonModule,
     MdRippleModule,
     MdCommonModule,
-    StyleModule,
+    A11yModule,
   ],
   exports: [
     MdButton,

src/lib/checkbox/checkbox.ts

@@ -27,14 +27,13 @@ import {
   CanColor,
   CanDisable,
   CanDisableRipple,
-  FocusOrigin,
-  FocusOriginMonitor,
   MdRipple,
   mixinColor,
   mixinDisabled,
   mixinDisableRipple,
   RippleRef,
 } from '@angular/material/core';
+import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 
 
 // Increasing integer for generating unique ids for checkbox components.
@@ -199,18 +198,18 @@ export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAcce
   constructor(renderer: Renderer2,
               elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef,
-              private _focusOriginMonitor: FocusOriginMonitor) {
+              private _focusMonitor: FocusMonitor) {
     super(renderer, elementRef);
   }
 
   ngAfterViewInit() {
-    this._focusOriginMonitor
+    this._focusMonitor
       .monitor(this._inputElement.nativeElement, this._renderer, false)
       .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
   }
 
   ngOnDestroy() {
-    this._focusOriginMonitor.stopMonitoring(this._inputElement.nativeElement);
+    this._focusMonitor.stopMonitoring(this._inputElement.nativeElement);
   }
 
   /**
@@ -385,7 +384,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAcce
 
   /** Focuses the checkbox. */
   focus(): void {
-    this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
+    this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
   }
 
   _onInteractionEvent(event: Event) {

src/lib/checkbox/public_api.ts

@@ -9,15 +9,15 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ObserversModule} from '@angular/cdk/observers';
-import {MdRippleModule, MdCommonModule, FocusOriginMonitor} from '@angular/material/core';
+import {MdRippleModule, MdCommonModule} from '@angular/material/core';
 import {MdCheckbox} from './checkbox';
 import {MdCheckboxRequiredValidator} from './checkbox-required-validator';
+import {A11yModule} from '@angular/cdk/a11y';
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule, MdCommonModule, ObserversModule],
+  imports: [CommonModule, MdRippleModule, MdCommonModule, ObserversModule, A11yModule],
   exports: [MdCheckbox, MdCheckboxRequiredValidator, MdCommonModule],
   declarations: [MdCheckbox, MdCheckboxRequiredValidator],
-  providers: [FocusOriginMonitor]
 })
 export class MdCheckboxModule {}
 

src/lib/core/style/index.ts

@@ -7,18 +7,19 @@
  */
 
 import {NgModule} from '@angular/core';
-import {CdkMonitorFocus, FOCUS_ORIGIN_MONITOR_PROVIDER} from './focus-origin-monitor';
-import {PlatformModule} from '../platform/index';
-
+import {A11yModule} from '@angular/cdk/a11y';
 
+/** @deprecated */
 @NgModule({
-  imports: [PlatformModule],
-  declarations: [CdkMonitorFocus],
-  exports: [CdkMonitorFocus],
-  providers: [FOCUS_ORIGIN_MONITOR_PROVIDER],
+  imports: [A11yModule],
+  exports: [A11yModule],
 })
 export class StyleModule {}
 
-
-export * from './focus-origin-monitor';
+export {
+  CdkMonitorFocus,
+  FocusMonitor,
+  FOCUS_MONITOR_PROVIDER,
+  FocusOrigin,
+} from '@angular/cdk/a11y';
 export * from './apply-transform';

src/lib/datepicker/public_api.ts

@@ -11,7 +11,6 @@ import {OverlayModule} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MdButtonModule} from '@angular/material/button';
-import {StyleModule} from '@angular/material/core';
 import {MdDialogModule} from '@angular/material/dialog';
 import {MdIconModule} from '@angular/material/icon';
 import {MdCalendar} from './calendar';
@@ -45,7 +44,6 @@ export * from './year-view';
     MdDialogModule,
     MdIconModule,
     OverlayModule,
-    StyleModule,
     A11yModule,
   ],
   exports: [

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

@@ -28,7 +28,7 @@ import {
 import {SPACE, ENTER} from '@angular/material/core';
 import {MdExpansionPanel, EXPANSION_PANEL_ANIMATION_TIMING} from './expansion-panel';
 import {filter} from '@angular/material/core';
-import {FocusOriginMonitor} from '@angular/material/core';
+import {FocusMonitor} from '@angular/cdk/a11y';
 import {merge} from 'rxjs/observable/merge';
 import {Subscription} from 'rxjs/Subscription';
 
@@ -93,7 +93,7 @@ export class MdExpansionPanelHeader implements OnDestroy {
     renderer: Renderer2,
     @Host() public panel: MdExpansionPanel,
     private _element: ElementRef,
-    private _focusOriginMonitor: FocusOriginMonitor,
+    private _focusMonitor: FocusMonitor,
     private _changeDetectorRef: ChangeDetectorRef) {
 
     // Since the toggle state depends on an @Input on the panel, we
@@ -105,7 +105,7 @@ export class MdExpansionPanelHeader implements OnDestroy {
     )
     .subscribe(() => this._changeDetectorRef.markForCheck());
 
-    _focusOriginMonitor.monitor(_element.nativeElement, renderer, false);
+    _focusMonitor.monitor(_element.nativeElement, renderer, false);
   }
 
   /** Height of the header while the panel is expanded. */
@@ -157,7 +157,7 @@ export class MdExpansionPanelHeader implements OnDestroy {
 
   ngOnDestroy() {
     this._parentChangeSubscription.unsubscribe();
-    this._focusOriginMonitor.stopMonitoring(this._element.nativeElement);
+    this._focusMonitor.stopMonitoring(this._element.nativeElement);
   }
 }
 

src/lib/expansion/public_api.ts

@@ -8,11 +8,8 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {
-  CompatibilityModule,
-  StyleModule,
-  UNIQUE_SELECTION_DISPATCHER_PROVIDER,
-} from '@angular/material/core';
+import {CompatibilityModule, UNIQUE_SELECTION_DISPATCHER_PROVIDER} from '@angular/material/core';
+import {A11yModule} from '@angular/cdk/a11y';
 import {CdkAccordion, MdAccordion} from './accordion';
 import {MdExpansionPanel, MdExpansionPanelActionRow} from './expansion-panel';
 import {
@@ -23,7 +20,7 @@ import {
 
 
 @NgModule({
-  imports: [CompatibilityModule, CommonModule, StyleModule],
+  imports: [CompatibilityModule, CommonModule, A11yModule],
   exports: [
     CdkAccordion,
     MdAccordion,

src/lib/radio/public_api.ts

@@ -13,15 +13,14 @@ import {
   MdRippleModule,
   MdCommonModule,
   UNIQUE_SELECTION_DISPATCHER_PROVIDER,
-  FocusOriginMonitor,
 } from '@angular/material/core';
 import {MdRadioGroup, MdRadioButton} from './radio';
-
+import {A11yModule} from '@angular/cdk/a11y';
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule, MdCommonModule],
+  imports: [CommonModule, MdRippleModule, MdCommonModule, A11yModule],
   exports: [MdRadioGroup, MdRadioButton, MdCommonModule],
-  providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, VIEWPORT_RULER_PROVIDER, FocusOriginMonitor],
+  providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, VIEWPORT_RULER_PROVIDER],
   declarations: [MdRadioGroup, MdRadioButton],
 })
 export class MdRadioModule {}

src/lib/radio/radio.ts

@@ -32,13 +32,12 @@ import {
   RippleRef,
   UniqueSelectionDispatcher,
   MdRipple,
-  FocusOriginMonitor,
-  FocusOrigin,
 } from '@angular/material/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {mixinDisabled, CanDisable} from '@angular/material/core';
 import {CanColor, mixinColor} from '@angular/material/core';
 import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
+import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 
 // Increasing integer for generating unique ids for radio components.
 let nextUniqueId = 0;
@@ -489,7 +488,7 @@ export class MdRadioButton extends _MdRadioButtonMixinBase
               elementRef: ElementRef,
               renderer: Renderer2,
               private _changeDetector: ChangeDetectorRef,
-              private _focusOriginMonitor: FocusOriginMonitor,
+              private _focusMonitor: FocusMonitor,
               private _radioDispatcher: UniqueSelectionDispatcher) {
     super(renderer, elementRef);
 
@@ -507,7 +506,7 @@ export class MdRadioButton extends _MdRadioButtonMixinBase
 
   /** Focuses the radio button. */
   focus(): void {
-    this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
+    this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
   }
 
   /**
@@ -531,13 +530,13 @@ export class MdRadioButton extends _MdRadioButtonMixinBase
   }
 
   ngAfterViewInit() {
-    this._focusOriginMonitor
+    this._focusMonitor
       .monitor(this._inputElement.nativeElement, this._renderer, false)
       .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
   }
 
   ngOnDestroy() {
-    this._focusOriginMonitor.stopMonitoring(this._inputElement.nativeElement);
+    this._focusMonitor.stopMonitoring(this._inputElement.nativeElement);
     this._removeUniqueSelectionListener();
   }
 

src/lib/slide-toggle/public_api.ts

@@ -10,21 +10,20 @@ import {ObserversModule} from '@angular/cdk/observers';
 import {PlatformModule} from '@angular/cdk/platform';
 import {NgModule} from '@angular/core';
 import {
-  FOCUS_ORIGIN_MONITOR_PROVIDER,
   GestureConfig,
   MdCommonModule,
   MdRippleModule,
 } from '@angular/material/core';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+import {A11yModule} from '@angular/cdk/a11y';
 import {MdSlideToggle} from './slide-toggle';
 
 
 @NgModule({
-  imports: [MdRippleModule, MdCommonModule, PlatformModule, ObserversModule],
+  imports: [MdRippleModule, MdCommonModule, PlatformModule, ObserversModule, A11yModule],
   exports: [MdSlideToggle, MdCommonModule],
   declarations: [MdSlideToggle],
   providers: [
-    FOCUS_ORIGIN_MONITOR_PROVIDER,
     {provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}
   ],
 })

src/lib/slide-toggle/slide-toggle.ts

@@ -26,8 +26,6 @@ import {Platform} from '@angular/cdk/platform';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   applyCssTransform,
-  FocusOrigin,
-  FocusOriginMonitor,
   HammerInput,
   MdRipple,
   RippleRef,
@@ -37,6 +35,7 @@ import {mixinDisabled, CanDisable} from '@angular/material/core';
 import {CanColor, mixinColor} from '@angular/material/core';
 import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
 import {HasTabIndex, mixinTabIndex} from '@angular/material/core';
+import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 
 // Increasing integer for generating unique ids for slide-toggle components.
 let nextUniqueId = 0;
@@ -137,7 +136,7 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy,
   constructor(elementRef: ElementRef,
               renderer: Renderer2,
               private _platform: Platform,
-              private _focusOriginMonitor: FocusOriginMonitor,
+              private _focusMonitor: FocusMonitor,
               private _changeDetectorRef: ChangeDetectorRef,
               @Attribute('tabindex') tabIndex: string) {
     super(renderer, elementRef);
@@ -148,13 +147,13 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy,
   ngAfterContentInit() {
     this._slideRenderer = new SlideToggleRenderer(this._elementRef, this._platform);
 
-    this._focusOriginMonitor
+    this._focusMonitor
       .monitor(this._inputElement.nativeElement, this._renderer, false)
       .subscribe(focusOrigin => this._onInputFocusChange(focusOrigin));
   }
 
   ngOnDestroy() {
-    this._focusOriginMonitor.stopMonitoring(this._inputElement.nativeElement);
+    this._focusMonitor.stopMonitoring(this._inputElement.nativeElement);
   }
 
   /**
@@ -216,7 +215,7 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy,
 
   /** Focuses the slide-toggle. */
   focus() {
-    this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
+    this._focusMonitor.focusVia(this._inputElement.nativeElement, 'keyboard');
   }
 
   /** Toggles the checked state of the slide-toggle. */

src/lib/slider/public_api.ts

@@ -9,13 +9,14 @@
 import {NgModule} from '@angular/core';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {CommonModule} from '@angular/common';
-import {MdCommonModule, GestureConfig, StyleModule} from '@angular/material/core';
+import {MdCommonModule, GestureConfig} from '@angular/material/core';
 import {MdSlider} from './slider';
 import {BidiModule} from '@angular/material/core';
+import {A11yModule} from '@angular/cdk/a11y';
 
 
 @NgModule({
-  imports: [CommonModule, MdCommonModule, StyleModule, BidiModule],
+  imports: [CommonModule, MdCommonModule, BidiModule, A11yModule],
   exports: [MdSlider, MdCommonModule],
   declarations: [MdSlider],
   providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}]

src/lib/slider/slider.ts

@@ -38,12 +38,11 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
   CanColor,
   CanDisable,
-  FocusOrigin,
-  FocusOriginMonitor,
   HammerInput,
   mixinColor,
   mixinDisabled,
 } from '@angular/material/core';
+import {FocusOrigin, FocusMonitor} from '@angular/cdk/a11y';
 import {Subscription} from 'rxjs/Subscription';
 
 /**
@@ -415,14 +414,14 @@ export class MdSlider extends _MdSliderMixinBase
 
   constructor(renderer: Renderer2,
               elementRef: ElementRef,
-              private _focusOriginMonitor: FocusOriginMonitor,
+              private _focusMonitor: FocusMonitor,
               private _changeDetectorRef: ChangeDetectorRef,
               @Optional() private _dir: Directionality) {
     super(renderer, elementRef);
   }
 
   ngOnInit() {
-    this._focusOriginMonitor
+    this._focusMonitor
         .monitor(this._elementRef.nativeElement, this._renderer, true)
         .subscribe((origin: FocusOrigin) => {
           this._isActive = !!origin && origin !== 'keyboard';
@@ -436,7 +435,7 @@ export class MdSlider extends _MdSliderMixinBase
   }
 
   ngOnDestroy() {
-    this._focusOriginMonitor.stopMonitoring(this._elementRef.nativeElement);
+    this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
     this._dirChangeSubscription.unsubscribe();
   }