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

package/{@angular/cdk → esm2015}/a11y.js

@@ -5,12 +5,14 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { Directive, ElementRef, Inject, Injectable, InjectionToken, Input, NgModule, NgZone, Optional, SkipSelf } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, Inject, Injectable, InjectionToken, Input, NgModule, NgZone, Optional, Output, Renderer2, SkipSelf } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Platform, PlatformModule } from '@angular/cdk/platform';
 import { RxChain, debounceTime, doOperator, filter, first, map } from '@angular/cdk/rxjs';
 import { CommonModule } from '@angular/common';
 import { Subject } from 'rxjs/Subject';
+import { of } from 'rxjs/observable/of';
+import { Subscription } from 'rxjs/Subscription';
 import { A, DOWN_ARROW, NINE, TAB, UP_ARROW, Z, ZERO } from '@angular/cdk/keycodes';
 
 /**
@@ -493,7 +495,7 @@ class FocusTrap {
             fn();
         }
         else {
-            first.call(this._ngZone.onStable).subscribe(fn);
+            first.call(this._ngZone.onStable.asObservable()).subscribe(fn);
         }
     }
 }
@@ -725,17 +727,596 @@ const LIVE_ANNOUNCER_PROVIDER = {
 };
 
 /**
- * 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.
+ */
+const 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) {
+    const /** @type {?} */ ids = getAriaReferenceIds(el, attr);
+    if (ids.some(existingId => 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) {
+    const /** @type {?} */ ids = getAriaReferenceIds(el, attr);
+    const /** @type {?} */ filteredIds = ids.filter(val => 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.
+ */
+const MESSAGES_CONTAINER_ID = 'cdk-describedby-message-container';
+/**
+ * ID prefix used for each created message element.
+ */
+const CDK_DESCRIBEDBY_ID_PREFIX = 'cdk-describedby-message';
+/**
+ * Attribute given to each host element that is described by a message element.
+ */
+const CDK_DESCRIBEDBY_HOST_ATTRIBUTE = 'cdk-describedby-host';
+/**
+ * Global incremental identifier for each registered message element.
+ */
+let nextId = 0;
+/**
+ * Global map of all registered message elements that have been placed into the document.
+ */
+const messageRegistry = new Map();
+/**
+ * Container for all registered messages.
+ */
+let 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
+ */
+class AriaDescriber {
+    /**
+     * @param {?} _platform
+     */
+    constructor(_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 {?}
+     */
+    describe(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 {?}
+     */
+    removeDescription(hostElement, message) {
+        if (!this._platform.isBrowser || !message.trim()) {
+            return;
+        }
+        if (isElementDescribedByMessage(hostElement, message)) {
+            removeMessageReference(hostElement, message);
+        }
+        const /** @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 {?}
+     */
+    ngOnDestroy() {
+        if (!this._platform.isBrowser) {
+            return;
+        }
+        const /** @type {?} */ describedElements = document.querySelectorAll(`[${CDK_DESCRIBEDBY_HOST_ATTRIBUTE}]`);
+        for (let /** @type {?} */ i = 0; i < describedElements.length; i++) {
+            removeCdkDescribedByReferenceIds(describedElements[i]);
+            describedElements[i].removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE);
+        }
+        if (messagesContainer) {
+            deleteMessagesContainer();
+        }
+        messageRegistry.clear();
+    }
+}
+AriaDescriber.decorators = [
+    { type: Injectable },
+];
+/**
+ * @nocollapse
+ */
+AriaDescriber.ctorParameters = () => [
+    { type: 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) {
+    const /** @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, referenceCount: 0 });
+}
+/**
+ * Deletes the message element from the global messages container.
+ * @param {?} message
+ * @return {?}
+ */
+function deleteMessageElement(message) {
+    const /** @type {?} */ registeredMessage = messageRegistry.get(message);
+    const /** @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
+    const /** @type {?} */ originalReferenceIds = getAriaReferenceIds(element, 'aria-describedby')
+        .filter(id => 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) {
+    const /** @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) {
+    const /** @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) {
+    const /** @type {?} */ referenceIds = getAriaReferenceIds(element, 'aria-describedby');
+    const /** @type {?} */ registeredMessage = messageRegistry.get(message);
+    const /** @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
+ */
+const ARIA_DESCRIBER_PROVIDER = {
+    // If there is already an AriaDescriber available, use that. Otherwise, provide a new one.
+    provide: AriaDescriber,
+    deps: [
+        [new Optional(), new SkipSelf(), AriaDescriber],
+        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.
+const TOUCH_BUFFER_MS = 650;
+/**
+ * Monitors mouse and keyboard events to determine the cause of focus events.
+ */
+class FocusMonitor {
+    /**
+     * @param {?} _ngZone
+     * @param {?} _platform
+     */
+    constructor(_ngZone, _platform) {
+        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(() => 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.
+     */
+    monitor(element, renderer, checkChildren) {
+        // Do nothing if we're not on the browser platform.
+        if (!this._platform.isBrowser) {
+            return of(null);
+        }
+        // Check if we're already monitoring this element.
+        if (this._elementInfo.has(element)) {
+            let /** @type {?} */ cachedInfo = this._elementInfo.get(element); /** @type {?} */
+            ((cachedInfo)).checkChildren = checkChildren;
+            return ((cachedInfo)).subject.asObservable();
+        }
+        // Create monitored element info.
+        let /** @type {?} */ info = {
+            unlisten: () => { },
+            checkChildren: checkChildren,
+            renderer: renderer,
+            subject: new Subject()
+        };
+        this._elementInfo.set(element, info);
+        // Start listening. We need to listen in capture phase since focus events don't bubble.
+        let /** @type {?} */ focusListener = (event) => this._onFocus(event, element);
+        let /** @type {?} */ blurListener = (event) => this._onBlur(event, element);
+        this._ngZone.runOutsideAngular(() => {
+            element.addEventListener('focus', focusListener, true);
+            element.addEventListener('blur', blurListener, true);
+        });
+        // Create an unlisten function for later.
+        info.unlisten = () => {
+            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 {?}
+     */
+    stopMonitoring(element) {
+        let /** @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 {?}
+     */
+    focusVia(element, origin) {
+        this._setOriginForCurrentEventQueue(origin);
+        element.focus();
+    }
+    /**
+     * Register necessary event listeners on the document and window.
+     * @return {?}
+     */
+    _registerDocumentEvents() {
+        // 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', () => {
+            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', () => {
+            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', (event) => {
+            if (this._touchTimeout != null) {
+                clearTimeout(this._touchTimeout);
+            }
+            this._lastTouchTarget = event.target;
+            this._touchTimeout = setTimeout(() => 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', () => {
+            this._windowFocused = true;
+            setTimeout(() => 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 {?}
+     */
+    _setClasses(element, origin) {
+        const /** @type {?} */ elementInfo = this._elementInfo.get(element);
+        if (elementInfo) {
+            const /** @type {?} */ toggleClass = (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 {?}
+     */
+    _setOriginForCurrentEventQueue(origin) {
+        this._origin = origin;
+        setTimeout(() => 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.
+     */
+    _wasCausedByTouch(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.
+        let /** @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 {?}
+     */
+    _onFocus(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.
+        const /** @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 {?}
+     */
+    _onBlur(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.
+        const /** @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);
+    }
+}
+FocusMonitor.decorators = [
+    { type: Injectable },
+];
+/**
+ * @nocollapse
+ */
+FocusMonitor.ctorParameters = () => [
+    { type: NgZone, },
+    { type: 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.
+ */
+class CdkMonitorFocus {
+    /**
+     * @param {?} _elementRef
+     * @param {?} _focusMonitor
+     * @param {?} renderer
+     */
+    constructor(_elementRef, _focusMonitor, renderer) {
+        this._elementRef = _elementRef;
+        this._focusMonitor = _focusMonitor;
+        this.cdkFocusChange = new EventEmitter();
+        this._monitorSubscription = this._focusMonitor.monitor(this._elementRef.nativeElement, renderer, this._elementRef.nativeElement.hasAttribute('cdkMonitorSubtreeFocus'))
+            .subscribe(origin => this.cdkFocusChange.emit(origin));
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
+        this._monitorSubscription.unsubscribe();
+    }
 }
+CdkMonitorFocus.decorators = [
+    { type: Directive, args: [{
+                selector: '[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]',
+            },] },
+];
+/**
+ * @nocollapse
+ */
+CdkMonitorFocus.ctorParameters = () => [
+    { type: ElementRef, },
+    { type: FocusMonitor, },
+    { type: Renderer2, },
+];
+CdkMonitorFocus.propDecorators = {
+    'cdkFocusChange': [{ type: 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
+ */
+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
+};
 
 /**
  * This class manages keyboard events for selectable lists. If you pass it a query list
@@ -750,6 +1331,7 @@ class ListKeyManager {
         this._activeItemIndex = -1;
         this._wrap = false;
         this._letterKeyStream = new Subject();
+        this._typeaheadSubscription = Subscription.EMPTY;
         this._pressedLetters = [];
         /**
          * Stream that emits any time the TAB key is pressed, so components can react
@@ -775,9 +1357,7 @@ class ListKeyManager {
         if (this._items.length && this._items.some(item => 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.
@@ -978,6 +1558,19 @@ class ActiveDescendantKeyManager extends 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;
+}
+
 class FocusKeyManager extends ListKeyManager {
     /**
      * This method sets the active item to the item at the specified index.
@@ -998,9 +1591,16 @@ class A11yModule {
 A11yModule.decorators = [
     { type: NgModule, args: [{
                 imports: [CommonModule, 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,
+                ]
             },] },
 ];
 /**
@@ -1012,5 +1612,5 @@ A11yModule.ctorParameters = () => [];
  * Generated bundle index. Do not edit.
  */
 
-export { A11yModule, LIVE_ANNOUNCER_ELEMENT_TOKEN, LiveAnnouncer, LIVE_ANNOUNCER_PROVIDER_FACTORY, LIVE_ANNOUNCER_PROVIDER, isFakeMousedownFromScreenReader, FocusTrap, FocusTrapFactory, FocusTrapDeprecatedDirective, FocusTrapDirective, InteractivityChecker, ListKeyManager, ActiveDescendantKeyManager, FocusKeyManager };
+export { A11yModule, ActiveDescendantKeyManager, MESSAGES_CONTAINER_ID, CDK_DESCRIBEDBY_ID_PREFIX, CDK_DESCRIBEDBY_HOST_ATTRIBUTE, AriaDescriber, ARIA_DESCRIBER_PROVIDER_FACTORY, ARIA_DESCRIBER_PROVIDER, isFakeMousedownFromScreenReader, FocusKeyManager, FocusTrap, FocusTrapFactory, FocusTrapDeprecatedDirective, FocusTrapDirective, InteractivityChecker, ListKeyManager, LIVE_ANNOUNCER_ELEMENT_TOKEN, LiveAnnouncer, LIVE_ANNOUNCER_PROVIDER_FACTORY, LIVE_ANNOUNCER_PROVIDER, TOUCH_BUFFER_MS, FocusMonitor, CdkMonitorFocus, FOCUS_MONITOR_PROVIDER_FACTORY, FOCUS_MONITOR_PROVIDER };
 //# sourceMappingURL=a11y.js.map