@angular/cdk 2.0.0-beta.10 → 2.0.0-beta.11

package/bundles/cdk-a11y.umd.js

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/coercion'), require('@angular/cdk/platform'), require('@angular/cdk/rxjs'), require('@angular/common'), require('rxjs/Subject'), require('@angular/cdk/keycodes')) :
-	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/cdk/coercion', '@angular/cdk/platform', '@angular/cdk/rxjs', '@angular/common', 'rxjs/Subject', '@angular/cdk/keycodes'], factory) :
-	(factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.a11y = global.ng.cdk.a11y || {}),global.ng.core,global.ng.cdk.coercion,global.ng.cdk.platform,global.ng.cdk.rxjs,global.ng.common,global.Rx,global.ng.cdk.keycodes));
-}(this, (function (exports,_angular_core,_angular_cdk_coercion,_angular_cdk_platform,_angular_cdk_rxjs,_angular_common,rxjs_Subject,_angular_cdk_keycodes) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/coercion'), require('@angular/cdk/platform'), require('@angular/cdk/rxjs'), require('@angular/common'), require('rxjs/Subject'), require('rxjs/observable/of'), require('rxjs/Subscription'), require('@angular/cdk/keycodes')) :
+	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/cdk/coercion', '@angular/cdk/platform', '@angular/cdk/rxjs', '@angular/common', 'rxjs/Subject', 'rxjs/observable/of', 'rxjs/Subscription', '@angular/cdk/keycodes'], factory) :
+	(factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.a11y = global.ng.cdk.a11y || {}),global.ng.core,global.ng.cdk.coercion,global.ng.cdk.platform,global.ng.cdk.rxjs,global.ng.common,global.Rx,global.Rx.Observable,global.Rx,global.ng.cdk.keycodes));
+}(this, (function (exports,_angular_core,_angular_cdk_coercion,_angular_cdk_platform,_angular_cdk_rxjs,_angular_common,rxjs_Subject,rxjs_observable_of,rxjs_Subscription,_angular_cdk_keycodes) { 'use strict';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -526,7 +526,7 @@ var FocusTrap = (function () {
             fn();
         }
         else {
-            _angular_cdk_rxjs.first.call(this._ngZone.onStable).subscribe(fn);
+            _angular_cdk_rxjs.first.call(this._ngZone.onStable.asObservable()).subscribe(fn);
         }
     };
     return FocusTrap;
@@ -772,17 +772,602 @@ var LIVE_ANNOUNCER_PROVIDER = {
     useFactory: LIVE_ANNOUNCER_PROVIDER_FACTORY
 };
 /**
- * Screenreaders will often fire fake mousedown events when a focusable element
- * is activated using the keyboard. We can typically distinguish between these faked
- * mousedown events and real mousedown events using the "buttons" property. While
- * real mousedowns will indicate the mouse button that was pressed (e.g. "1" for
- * the left mouse button), faked mousedowns will usually set the property value to 0.
- * @param {?} event
+ * IDs are deliminated by an empty space, as per the spec.
+ */
+var ID_DELIMINATOR = ' ';
+/**
+ * Adds the given ID to the specified ARIA attribute on an element.
+ * Used for attributes such as aria-labelledby, aria-owns, etc.
+ * @param {?} el
+ * @param {?} attr
+ * @param {?} id
  * @return {?}
  */
-function isFakeMousedownFromScreenReader(event) {
-    return event.buttons === 0;
+function addAriaReferencedId(el, attr, id) {
+    var /** @type {?} */ ids = getAriaReferenceIds(el, attr);
+    if (ids.some(function (existingId) { return existingId.trim() == id.trim(); })) {
+        return;
+    }
+    ids.push(id.trim());
+    el.setAttribute(attr, ids.join(ID_DELIMINATOR));
+}
+/**
+ * Removes the given ID from the specified ARIA attribute on an element.
+ * Used for attributes such as aria-labelledby, aria-owns, etc.
+ * @param {?} el
+ * @param {?} attr
+ * @param {?} id
+ * @return {?}
+ */
+function removeAriaReferencedId(el, attr, id) {
+    var /** @type {?} */ ids = getAriaReferenceIds(el, attr);
+    var /** @type {?} */ filteredIds = ids.filter(function (val) { return val != id.trim(); });
+    el.setAttribute(attr, filteredIds.join(ID_DELIMINATOR));
+}
+/**
+ * Gets the list of IDs referenced by the given ARIA attribute on an element.
+ * Used for attributes such as aria-labelledby, aria-owns, etc.
+ * @param {?} el
+ * @param {?} attr
+ * @return {?}
+ */
+function getAriaReferenceIds(el, attr) {
+    // Get string array of all individual ids (whitespace deliminated) in the attribute value
+    return (el.getAttribute(attr) || '').match(/\S+/g) || [];
 }
+/**
+ * ID used for the body container where all messages are appended.
+ */
+var MESSAGES_CONTAINER_ID = 'cdk-describedby-message-container';
+/**
+ * ID prefix used for each created message element.
+ */
+var CDK_DESCRIBEDBY_ID_PREFIX = 'cdk-describedby-message';
+/**
+ * Attribute given to each host element that is described by a message element.
+ */
+var CDK_DESCRIBEDBY_HOST_ATTRIBUTE = 'cdk-describedby-host';
+/**
+ * Global incremental identifier for each registered message element.
+ */
+var nextId = 0;
+/**
+ * Global map of all registered message elements that have been placed into the document.
+ */
+var messageRegistry = new Map();
+/**
+ * Container for all registered messages.
+ */
+var messagesContainer = null;
+/**
+ * Utility that creates visually hidden elements with a message content. Useful for elements that
+ * want to use aria-describedby to further describe themselves without adding additional visual
+ * content.
+ * \@docs-private
+ */
+var AriaDescriber = (function () {
+    /**
+     * @param {?} _platform
+     */
+    function AriaDescriber(_platform) {
+        this._platform = _platform;
+    }
+    /**
+     * Adds to the host element an aria-describedby reference to a hidden element that contains
+     * the message. If the same message has already been registered, then it will reuse the created
+     * message element.
+     * @param {?} hostElement
+     * @param {?} message
+     * @return {?}
+     */
+    AriaDescriber.prototype.describe = function (hostElement, message) {
+        if (!this._platform.isBrowser || !message.trim()) {
+            return;
+        }
+        if (!messageRegistry.has(message)) {
+            createMessageElement(message);
+        }
+        if (!isElementDescribedByMessage(hostElement, message)) {
+            addMessageReference(hostElement, message);
+        }
+    };
+    /**
+     * Removes the host element's aria-describedby reference to the message element.
+     * @param {?} hostElement
+     * @param {?} message
+     * @return {?}
+     */
+    AriaDescriber.prototype.removeDescription = function (hostElement, message) {
+        if (!this._platform.isBrowser || !message.trim()) {
+            return;
+        }
+        if (isElementDescribedByMessage(hostElement, message)) {
+            removeMessageReference(hostElement, message);
+        }
+        var /** @type {?} */ registeredMessage = messageRegistry.get(message);
+        if (registeredMessage && registeredMessage.referenceCount === 0) {
+            deleteMessageElement(message);
+        }
+        if (messagesContainer && messagesContainer.childNodes.length === 0) {
+            deleteMessagesContainer();
+        }
+    };
+    /**
+     * Unregisters all created message elements and removes the message container.
+     * @return {?}
+     */
+    AriaDescriber.prototype.ngOnDestroy = function () {
+        if (!this._platform.isBrowser) {
+            return;
+        }
+        var /** @type {?} */ describedElements = document.querySelectorAll("[" + CDK_DESCRIBEDBY_HOST_ATTRIBUTE + "]");
+        for (var /** @type {?} */ i = 0; i < describedElements.length; i++) {
+            removeCdkDescribedByReferenceIds(describedElements[i]);
+            describedElements[i].removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE);
+        }
+        if (messagesContainer) {
+            deleteMessagesContainer();
+        }
+        messageRegistry.clear();
+    };
+    return AriaDescriber;
+}());
+AriaDescriber.decorators = [
+    { type: _angular_core.Injectable },
+];
+/**
+ * @nocollapse
+ */
+AriaDescriber.ctorParameters = function () { return [
+    { type: _angular_cdk_platform.Platform, },
+]; };
+/**
+ * Creates a new element in the visually hidden message container element with the message
+ * as its content and adds it to the message registry.
+ * @param {?} message
+ * @return {?}
+ */
+function createMessageElement(message) {
+    var /** @type {?} */ messageElement = document.createElement('div');
+    messageElement.setAttribute('id', CDK_DESCRIBEDBY_ID_PREFIX + "-" + nextId++);
+    messageElement.appendChild(/** @type {?} */ ((document.createTextNode(message))));
+    if (!messagesContainer) {
+        createMessagesContainer();
+    } /** @type {?} */
+    ((messagesContainer)).appendChild(messageElement);
+    messageRegistry.set(message, { messageElement: messageElement, referenceCount: 0 });
+}
+/**
+ * Deletes the message element from the global messages container.
+ * @param {?} message
+ * @return {?}
+ */
+function deleteMessageElement(message) {
+    var /** @type {?} */ registeredMessage = messageRegistry.get(message);
+    var /** @type {?} */ messageElement = registeredMessage && registeredMessage.messageElement;
+    if (messagesContainer && messageElement) {
+        messagesContainer.removeChild(messageElement);
+    }
+    messageRegistry.delete(message);
+}
+/**
+ * Creates the global container for all aria-describedby messages.
+ * @return {?}
+ */
+function createMessagesContainer() {
+    messagesContainer = document.createElement('div');
+    messagesContainer.setAttribute('id', MESSAGES_CONTAINER_ID);
+    messagesContainer.setAttribute('aria-hidden', 'true');
+    messagesContainer.style.display = 'none';
+    document.body.appendChild(messagesContainer);
+}
+/**
+ * Deletes the global messages container.
+ * @return {?}
+ */
+function deleteMessagesContainer() {
+    document.body.removeChild(/** @type {?} */ ((messagesContainer)));
+    messagesContainer = null;
+}
+/**
+ * Removes all cdk-describedby messages that are hosted through the element.
+ * @param {?} element
+ * @return {?}
+ */
+function removeCdkDescribedByReferenceIds(element) {
+    // Remove all aria-describedby reference IDs that are prefixed by CDK_DESCRIBEDBY_ID_PREFIX
+    var /** @type {?} */ originalReferenceIds = getAriaReferenceIds(element, 'aria-describedby')
+        .filter(function (id) { return id.indexOf(CDK_DESCRIBEDBY_ID_PREFIX) != 0; });
+    element.setAttribute('aria-describedby', originalReferenceIds.join(' '));
+}
+/**
+ * Adds a message reference to the element using aria-describedby and increments the registered
+ * message's reference count.
+ * @param {?} element
+ * @param {?} message
+ * @return {?}
+ */
+function addMessageReference(element, message) {
+    var /** @type {?} */ registeredMessage = ((messageRegistry.get(message)));
+    // Add the aria-describedby reference and set the describedby_host attribute to mark the element.
+    addAriaReferencedId(element, 'aria-describedby', registeredMessage.messageElement.id);
+    element.setAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE, '');
+    registeredMessage.referenceCount++;
+}
+/**
+ * Removes a message reference from the element using aria-describedby and decrements the registered
+ * message's reference count.
+ * @param {?} element
+ * @param {?} message
+ * @return {?}
+ */
+function removeMessageReference(element, message) {
+    var /** @type {?} */ registeredMessage = ((messageRegistry.get(message)));
+    registeredMessage.referenceCount--;
+    removeAriaReferencedId(element, 'aria-describedby', registeredMessage.messageElement.id);
+    element.removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE);
+}
+/**
+ * Returns true if the element has been described by the provided message ID.
+ * @param {?} element
+ * @param {?} message
+ * @return {?}
+ */
+function isElementDescribedByMessage(element, message) {
+    var /** @type {?} */ referenceIds = getAriaReferenceIds(element, 'aria-describedby');
+    var /** @type {?} */ registeredMessage = messageRegistry.get(message);
+    var /** @type {?} */ messageId = registeredMessage && registeredMessage.messageElement.id;
+    return !!messageId && referenceIds.indexOf(messageId) != -1;
+}
+/**
+ * \@docs-private
+ * @param {?} parentDispatcher
+ * @param {?} platform
+ * @return {?}
+ */
+function ARIA_DESCRIBER_PROVIDER_FACTORY(parentDispatcher, platform) {
+    return parentDispatcher || new AriaDescriber(platform);
+}
+/**
+ * \@docs-private
+ */
+var ARIA_DESCRIBER_PROVIDER = {
+    // If there is already an AriaDescriber available, use that. Otherwise, provide a new one.
+    provide: AriaDescriber,
+    deps: [
+        [new _angular_core.Optional(), new _angular_core.SkipSelf(), AriaDescriber],
+        _angular_cdk_platform.Platform
+    ],
+    useFactory: ARIA_DESCRIBER_PROVIDER_FACTORY
+};
+// This is the value used by AngularJS Material. Through trial and error (on iPhone 6S) they found
+// that a value of around 650ms seems appropriate.
+var TOUCH_BUFFER_MS = 650;
+/**
+ * Monitors mouse and keyboard events to determine the cause of focus events.
+ */
+var FocusMonitor = (function () {
+    /**
+     * @param {?} _ngZone
+     * @param {?} _platform
+     */
+    function FocusMonitor(_ngZone, _platform) {
+        var _this = this;
+        this._ngZone = _ngZone;
+        this._platform = _platform;
+        /**
+         * The focus origin that the next focus event is a result of.
+         */
+        this._origin = null;
+        /**
+         * Whether the window has just been focused.
+         */
+        this._windowFocused = false;
+        /**
+         * Weak map of elements being monitored to their info.
+         */
+        this._elementInfo = new WeakMap();
+        this._ngZone.runOutsideAngular(function () { return _this._registerDocumentEvents(); });
+    }
+    /**
+     * Monitors focus on an element and applies appropriate CSS classes.
+     * @param {?} element The element to monitor
+     * @param {?} renderer The renderer to use to apply CSS classes to the element.
+     * @param {?} checkChildren Whether to count the element as focused when its children are focused.
+     * @return {?} An observable that emits when the focus state of the element changes.
+     *     When the element is blurred, null will be emitted.
+     */
+    FocusMonitor.prototype.monitor = function (element, renderer, checkChildren) {
+        var _this = this;
+        // Do nothing if we're not on the browser platform.
+        if (!this._platform.isBrowser) {
+            return rxjs_observable_of.of(null);
+        }
+        // Check if we're already monitoring this element.
+        if (this._elementInfo.has(element)) {
+            var /** @type {?} */ cachedInfo = this._elementInfo.get(element); /** @type {?} */
+            ((cachedInfo)).checkChildren = checkChildren;
+            return ((cachedInfo)).subject.asObservable();
+        }
+        // Create monitored element info.
+        var /** @type {?} */ info = {
+            unlisten: function () { },
+            checkChildren: checkChildren,
+            renderer: renderer,
+            subject: new rxjs_Subject.Subject()
+        };
+        this._elementInfo.set(element, info);
+        // Start listening. We need to listen in capture phase since focus events don't bubble.
+        var /** @type {?} */ focusListener = function (event) { return _this._onFocus(event, element); };
+        var /** @type {?} */ blurListener = function (event) { return _this._onBlur(event, element); };
+        this._ngZone.runOutsideAngular(function () {
+            element.addEventListener('focus', focusListener, true);
+            element.addEventListener('blur', blurListener, true);
+        });
+        // Create an unlisten function for later.
+        info.unlisten = function () {
+            element.removeEventListener('focus', focusListener, true);
+            element.removeEventListener('blur', blurListener, true);
+        };
+        return info.subject.asObservable();
+    };
+    /**
+     * Stops monitoring an element and removes all focus classes.
+     * @param {?} element The element to stop monitoring.
+     * @return {?}
+     */
+    FocusMonitor.prototype.stopMonitoring = function (element) {
+        var /** @type {?} */ elementInfo = this._elementInfo.get(element);
+        if (elementInfo) {
+            elementInfo.unlisten();
+            elementInfo.subject.complete();
+            this._setClasses(element);
+            this._elementInfo.delete(element);
+        }
+    };
+    /**
+     * Focuses the element via the specified focus origin.
+     * @param {?} element The element to focus.
+     * @param {?} origin The focus origin.
+     * @return {?}
+     */
+    FocusMonitor.prototype.focusVia = function (element, origin) {
+        this._setOriginForCurrentEventQueue(origin);
+        element.focus();
+    };
+    /**
+     * Register necessary event listeners on the document and window.
+     * @return {?}
+     */
+    FocusMonitor.prototype._registerDocumentEvents = function () {
+        var _this = this;
+        // Do nothing if we're not on the browser platform.
+        if (!this._platform.isBrowser) {
+            return;
+        }
+        // Note: we listen to events in the capture phase so we can detect them even if the user stops
+        // propagation.
+        // On keydown record the origin and clear any touch event that may be in progress.
+        document.addEventListener('keydown', function () {
+            _this._lastTouchTarget = null;
+            _this._setOriginForCurrentEventQueue('keyboard');
+        }, true);
+        // On mousedown record the origin only if there is not touch target, since a mousedown can
+        // happen as a result of a touch event.
+        document.addEventListener('mousedown', function () {
+            if (!_this._lastTouchTarget) {
+                _this._setOriginForCurrentEventQueue('mouse');
+            }
+        }, true);
+        // When the touchstart event fires the focus event is not yet in the event queue. This means
+        // we can't rely on the trick used above (setting timeout of 0ms). Instead we wait 650ms to
+        // see if a focus happens.
+        document.addEventListener('touchstart', function (event) {
+            if (_this._touchTimeout != null) {
+                clearTimeout(_this._touchTimeout);
+            }
+            _this._lastTouchTarget = event.target;
+            _this._touchTimeout = setTimeout(function () { return _this._lastTouchTarget = null; }, TOUCH_BUFFER_MS);
+        }, true);
+        // Make a note of when the window regains focus, so we can restore the origin info for the
+        // focused element.
+        window.addEventListener('focus', function () {
+            _this._windowFocused = true;
+            setTimeout(function () { return _this._windowFocused = false; }, 0);
+        });
+    };
+    /**
+     * Sets the focus classes on the element based on the given focus origin.
+     * @param {?} element The element to update the classes on.
+     * @param {?=} origin The focus origin.
+     * @return {?}
+     */
+    FocusMonitor.prototype._setClasses = function (element, origin) {
+        var /** @type {?} */ elementInfo = this._elementInfo.get(element);
+        if (elementInfo) {
+            var /** @type {?} */ toggleClass = function (className, shouldSet) {
+                shouldSet ? elementInfo.renderer.addClass(element, className) :
+                    elementInfo.renderer.removeClass(element, className);
+            };
+            toggleClass('cdk-focused', !!origin);
+            toggleClass('cdk-touch-focused', origin === 'touch');
+            toggleClass('cdk-keyboard-focused', origin === 'keyboard');
+            toggleClass('cdk-mouse-focused', origin === 'mouse');
+            toggleClass('cdk-program-focused', origin === 'program');
+        }
+    };
+    /**
+     * Sets the origin and schedules an async function to clear it at the end of the event queue.
+     * @param {?} origin The origin to set.
+     * @return {?}
+     */
+    FocusMonitor.prototype._setOriginForCurrentEventQueue = function (origin) {
+        var _this = this;
+        this._origin = origin;
+        setTimeout(function () { return _this._origin = null; }, 0);
+    };
+    /**
+     * Checks whether the given focus event was caused by a touchstart event.
+     * @param {?} event The focus event to check.
+     * @return {?} Whether the event was caused by a touch.
+     */
+    FocusMonitor.prototype._wasCausedByTouch = function (event) {
+        // Note(mmalerba): This implementation is not quite perfect, there is a small edge case.
+        // Consider the following dom structure:
+        //
+        // <div #parent tabindex="0" cdkFocusClasses>
+        //   <div #child (click)="#parent.focus()"></div>
+        // </div>
+        //
+        // If the user touches the #child element and the #parent is programmatically focused as a
+        // result, this code will still consider it to have been caused by the touch event and will
+        // apply the cdk-touch-focused class rather than the cdk-program-focused class. This is a
+        // relatively small edge-case that can be worked around by using
+        // focusVia(parentEl, renderer,  'program') to focus the parent element.
+        //
+        // If we decide that we absolutely must handle this case correctly, we can do so by listening
+        // for the first focus event after the touchstart, and then the first blur event after that
+        // focus event. When that blur event fires we know that whatever follows is not a result of the
+        // touchstart.
+        var /** @type {?} */ focusTarget = event.target;
+        return this._lastTouchTarget instanceof Node && focusTarget instanceof Node &&
+            (focusTarget === this._lastTouchTarget || focusTarget.contains(this._lastTouchTarget));
+    };
+    /**
+     * Handles focus events on a registered element.
+     * @param {?} event The focus event.
+     * @param {?} element The monitored element.
+     * @return {?}
+     */
+    FocusMonitor.prototype._onFocus = function (event, element) {
+        // NOTE(mmalerba): We currently set the classes based on the focus origin of the most recent
+        // focus event affecting the monitored element. If we want to use the origin of the first event
+        // instead we should check for the cdk-focused class here and return if the element already has
+        // it. (This only matters for elements that have includesChildren = true).
+        // If we are not counting child-element-focus as focused, make sure that the event target is the
+        // monitored element itself.
+        var /** @type {?} */ elementInfo = this._elementInfo.get(element);
+        if (!elementInfo || (!elementInfo.checkChildren && element !== event.target)) {
+            return;
+        }
+        // If we couldn't detect a cause for the focus event, it's due to one of three reasons:
+        // 1) The window has just regained focus, in which case we want to restore the focused state of
+        //    the element from before the window blurred.
+        // 2) It was caused by a touch event, in which case we mark the origin as 'touch'.
+        // 3) The element was programmatically focused, in which case we should mark the origin as
+        //    'program'.
+        if (!this._origin) {
+            if (this._windowFocused && this._lastFocusOrigin) {
+                this._origin = this._lastFocusOrigin;
+            }
+            else if (this._wasCausedByTouch(event)) {
+                this._origin = 'touch';
+            }
+            else {
+                this._origin = 'program';
+            }
+        }
+        this._setClasses(element, this._origin);
+        elementInfo.subject.next(this._origin);
+        this._lastFocusOrigin = this._origin;
+        this._origin = null;
+    };
+    /**
+     * Handles blur events on a registered element.
+     * @param {?} event The blur event.
+     * @param {?} element The monitored element.
+     * @return {?}
+     */
+    FocusMonitor.prototype._onBlur = function (event, element) {
+        // If we are counting child-element-focus as focused, make sure that we aren't just blurring in
+        // order to focus another child of the monitored element.
+        var /** @type {?} */ elementInfo = this._elementInfo.get(element);
+        if (!elementInfo || (elementInfo.checkChildren && event.relatedTarget instanceof Node &&
+            element.contains(event.relatedTarget))) {
+            return;
+        }
+        this._setClasses(element);
+        elementInfo.subject.next(null);
+    };
+    return FocusMonitor;
+}());
+FocusMonitor.decorators = [
+    { type: _angular_core.Injectable },
+];
+/**
+ * @nocollapse
+ */
+FocusMonitor.ctorParameters = function () { return [
+    { type: _angular_core.NgZone, },
+    { type: _angular_cdk_platform.Platform, },
+]; };
+/**
+ * Directive that determines how a particular element was focused (via keyboard, mouse, touch, or
+ * programmatically) and adds corresponding classes to the element.
+ *
+ * There are two variants of this directive:
+ * 1) cdkMonitorElementFocus: does not consider an element to be focused if one of its children is
+ *    focused.
+ * 2) cdkMonitorSubtreeFocus: considers an element focused if it or any of its children are focused.
+ */
+var CdkMonitorFocus = (function () {
+    /**
+     * @param {?} _elementRef
+     * @param {?} _focusMonitor
+     * @param {?} renderer
+     */
+    function CdkMonitorFocus(_elementRef, _focusMonitor, renderer) {
+        var _this = this;
+        this._elementRef = _elementRef;
+        this._focusMonitor = _focusMonitor;
+        this.cdkFocusChange = new _angular_core.EventEmitter();
+        this._monitorSubscription = this._focusMonitor.monitor(this._elementRef.nativeElement, renderer, this._elementRef.nativeElement.hasAttribute('cdkMonitorSubtreeFocus'))
+            .subscribe(function (origin) { return _this.cdkFocusChange.emit(origin); });
+    }
+    /**
+     * @return {?}
+     */
+    CdkMonitorFocus.prototype.ngOnDestroy = function () {
+        this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
+        this._monitorSubscription.unsubscribe();
+    };
+    return CdkMonitorFocus;
+}());
+CdkMonitorFocus.decorators = [
+    { type: _angular_core.Directive, args: [{
+                selector: '[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]',
+            },] },
+];
+/**
+ * @nocollapse
+ */
+CdkMonitorFocus.ctorParameters = function () { return [
+    { type: _angular_core.ElementRef, },
+    { type: FocusMonitor, },
+    { type: _angular_core.Renderer2, },
+]; };
+CdkMonitorFocus.propDecorators = {
+    'cdkFocusChange': [{ type: _angular_core.Output },],
+};
+/**
+ * \@docs-private
+ * @param {?} parentDispatcher
+ * @param {?} ngZone
+ * @param {?} platform
+ * @return {?}
+ */
+function FOCUS_MONITOR_PROVIDER_FACTORY(parentDispatcher, ngZone, platform) {
+    return parentDispatcher || new FocusMonitor(ngZone, platform);
+}
+/**
+ * \@docs-private
+ */
+var FOCUS_MONITOR_PROVIDER = {
+    // If there is already a FocusMonitor available, use that. Otherwise, provide a new one.
+    provide: FocusMonitor,
+    deps: [[new _angular_core.Optional(), new _angular_core.SkipSelf(), FocusMonitor], _angular_core.NgZone, _angular_cdk_platform.Platform],
+    useFactory: FOCUS_MONITOR_PROVIDER_FACTORY
+};
 /**
  * This class manages keyboard events for selectable lists. If you pass it a query list
  * of items, it will set the active item correctly when arrow events occur.
@@ -796,6 +1381,7 @@ var ListKeyManager = (function () {
         this._activeItemIndex = -1;
         this._wrap = false;
         this._letterKeyStream = new rxjs_Subject.Subject();
+        this._typeaheadSubscription = rxjs_Subscription.Subscription.EMPTY;
         this._pressedLetters = [];
         /**
          * Stream that emits any time the TAB key is pressed, so components can react
@@ -823,9 +1409,7 @@ var ListKeyManager = (function () {
         if (this._items.length && this._items.some(function (item) { return typeof item.getLabel !== 'function'; })) {
             throw Error('ListKeyManager items in typeahead mode must implement the `getLabel` method.');
         }
-        if (this._typeaheadSubscription) {
-            this._typeaheadSubscription.unsubscribe();
-        }
+        this._typeaheadSubscription.unsubscribe();
         // Debounce the presses of non-navigational keys, collect the ones that correspond to letters
         // and convert those letters back into a string. Afterwards find the first item that starts
         // with that string and select it.
@@ -1041,6 +1625,18 @@ var ActiveDescendantKeyManager = (function (_super) {
     };
     return ActiveDescendantKeyManager;
 }(ListKeyManager));
+/**
+ * Screenreaders will often fire fake mousedown events when a focusable element
+ * is activated using the keyboard. We can typically distinguish between these faked
+ * mousedown events and real mousedown events using the "buttons" property. While
+ * real mousedowns will indicate the mouse button that was pressed (e.g. "1" for
+ * the left mouse button), faked mousedowns will usually set the property value to 0.
+ * @param {?} event
+ * @return {?}
+ */
+function isFakeMousedownFromScreenReader(event) {
+    return event.buttons === 0;
+}
 var FocusKeyManager = (function (_super) {
     __extends(FocusKeyManager, _super);
     function FocusKeyManager() {
@@ -1068,9 +1664,16 @@ var A11yModule = (function () {
 A11yModule.decorators = [
     { type: _angular_core.NgModule, args: [{
                 imports: [_angular_common.CommonModule, _angular_cdk_platform.PlatformModule],
-                declarations: [FocusTrapDirective, FocusTrapDeprecatedDirective],
-                exports: [FocusTrapDirective, FocusTrapDeprecatedDirective],
-                providers: [InteractivityChecker, FocusTrapFactory, LIVE_ANNOUNCER_PROVIDER]
+                declarations: [FocusTrapDirective, FocusTrapDeprecatedDirective, CdkMonitorFocus],
+                exports: [FocusTrapDirective, FocusTrapDeprecatedDirective, CdkMonitorFocus],
+                providers: [
+                    InteractivityChecker,
+                    FocusTrapFactory,
+                    AriaDescriber,
+                    LIVE_ANNOUNCER_PROVIDER,
+                    ARIA_DESCRIBER_PROVIDER,
+                    FOCUS_MONITOR_PROVIDER,
+                ]
             },] },
 ];
 /**
@@ -1079,19 +1682,30 @@ A11yModule.decorators = [
 A11yModule.ctorParameters = function () { return []; };
 
 exports.A11yModule = A11yModule;
-exports.LIVE_ANNOUNCER_ELEMENT_TOKEN = LIVE_ANNOUNCER_ELEMENT_TOKEN;
-exports.LiveAnnouncer = LiveAnnouncer;
-exports.LIVE_ANNOUNCER_PROVIDER_FACTORY = LIVE_ANNOUNCER_PROVIDER_FACTORY;
-exports.LIVE_ANNOUNCER_PROVIDER = LIVE_ANNOUNCER_PROVIDER;
+exports.ActiveDescendantKeyManager = ActiveDescendantKeyManager;
+exports.MESSAGES_CONTAINER_ID = MESSAGES_CONTAINER_ID;
+exports.CDK_DESCRIBEDBY_ID_PREFIX = CDK_DESCRIBEDBY_ID_PREFIX;
+exports.CDK_DESCRIBEDBY_HOST_ATTRIBUTE = CDK_DESCRIBEDBY_HOST_ATTRIBUTE;
+exports.AriaDescriber = AriaDescriber;
+exports.ARIA_DESCRIBER_PROVIDER_FACTORY = ARIA_DESCRIBER_PROVIDER_FACTORY;
+exports.ARIA_DESCRIBER_PROVIDER = ARIA_DESCRIBER_PROVIDER;
 exports.isFakeMousedownFromScreenReader = isFakeMousedownFromScreenReader;
+exports.FocusKeyManager = FocusKeyManager;
 exports.FocusTrap = FocusTrap;
 exports.FocusTrapFactory = FocusTrapFactory;
 exports.FocusTrapDeprecatedDirective = FocusTrapDeprecatedDirective;
 exports.FocusTrapDirective = FocusTrapDirective;
 exports.InteractivityChecker = InteractivityChecker;
 exports.ListKeyManager = ListKeyManager;
-exports.ActiveDescendantKeyManager = ActiveDescendantKeyManager;
-exports.FocusKeyManager = FocusKeyManager;
+exports.LIVE_ANNOUNCER_ELEMENT_TOKEN = LIVE_ANNOUNCER_ELEMENT_TOKEN;
+exports.LiveAnnouncer = LiveAnnouncer;
+exports.LIVE_ANNOUNCER_PROVIDER_FACTORY = LIVE_ANNOUNCER_PROVIDER_FACTORY;
+exports.LIVE_ANNOUNCER_PROVIDER = LIVE_ANNOUNCER_PROVIDER;
+exports.TOUCH_BUFFER_MS = TOUCH_BUFFER_MS;
+exports.FocusMonitor = FocusMonitor;
+exports.CdkMonitorFocus = CdkMonitorFocus;
+exports.FOCUS_MONITOR_PROVIDER_FACTORY = FOCUS_MONITOR_PROVIDER_FACTORY;
+exports.FOCUS_MONITOR_PROVIDER = FOCUS_MONITOR_PROVIDER;
 
 Object.defineProperty(exports, '__esModule', { value: true });