@angular/cdk 9.2.0 → 9.2.4

package/fesm5/a11y.js

@@ -5,7 +5,7 @@ import { Subject, Subscription, of } from 'rxjs';
 import { hasModifierKey, A, Z, ZERO, NINE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW, TAB } from '@angular/cdk/keycodes';
 import { tap, debounceTime, filter, map, take } from 'rxjs/operators';
 import { coerceBooleanProperty, coerceElement } from '@angular/cdk/coercion';
-import { Platform, normalizePassiveListenerOptions, PlatformModule } from '@angular/cdk/platform';
+import { Platform, normalizePassiveListenerOptions, _getShadowRoot, PlatformModule } from '@angular/cdk/platform';
 import { ContentObserver, ObserversModule } from '@angular/cdk/observers';
 
 /**
@@ -15,8 +15,8 @@ import { ContentObserver, ObserversModule } from '@angular/cdk/observers';
  * 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
  */
-/** IDs are deliminated by an empty space, as per the spec. */
-var ID_DELIMINATOR = ' ';
+/** IDs are delimited by an empty space, as per the spec. */
+var ID_DELIMITER = ' ';
 /**
  * Adds the given ID to the specified ARIA attribute on an element.
  * Used for attributes such as aria-labelledby, aria-owns, etc.
@@ -27,7 +27,7 @@ function addAriaReferencedId(el, attr, id) {
         return;
     }
     ids.push(id.trim());
-    el.setAttribute(attr, ids.join(ID_DELIMINATOR));
+    el.setAttribute(attr, ids.join(ID_DELIMITER));
 }
 /**
  * Removes the given ID from the specified ARIA attribute on an element.
@@ -37,7 +37,7 @@ function removeAriaReferencedId(el, attr, id) {
     var ids = getAriaReferenceIds(el, attr);
     var filteredIds = ids.filter(function (val) { return val != id.trim(); });
     if (filteredIds.length) {
-        el.setAttribute(attr, filteredIds.join(ID_DELIMINATOR));
+        el.setAttribute(attr, filteredIds.join(ID_DELIMITER));
     }
     else {
         el.removeAttribute(attr);
@@ -48,7 +48,7 @@ function removeAriaReferencedId(el, attr, id) {
  * Used for attributes such as aria-labelledby, aria-owns, etc.
  */
 function getAriaReferenceIds(el, attr) {
-    // Get string array of all individual ids (whitespace deliminated) in the attribute value
+    // Get string array of all individual ids (whitespace delimited) in the attribute value
     return (el.getAttribute(attr) || '').match(/\S+/g) || [];
 }
 
@@ -1688,6 +1688,24 @@ var CdkAriaLive = /** @class */ (function () {
     return CdkAriaLive;
 }());
 
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+/**
+ * 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.
+ */
+function isFakeMousedownFromScreenReader(event) {
+    return event.buttons === 0;
+}
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -1724,6 +1742,13 @@ var FocusMonitor = /** @class */ (function () {
         this._elementInfo = new Map();
         /** The number of elements currently being monitored. */
         this._monitoredElementCount = 0;
+        /**
+         * Keeps track of the root nodes to which we've currently bound a focus/blur handler,
+         * as well as the number of monitored elements that they contain. We have to treat focus/blur
+         * handlers differently from the rest of the events, because the browser won't emit events
+         * to the document when focus moves inside of a shadow root.
+         */
+        this._rootNodeFocusListenerCount = new Map();
         /**
          * Event listener for `keydown` events on the document.
          * Needs to be an arrow function in order to preserve the context when it gets bound.
@@ -1737,11 +1762,14 @@ var FocusMonitor = /** @class */ (function () {
          * Event listener for `mousedown` events on the document.
          * Needs to be an arrow function in order to preserve the context when it gets bound.
          */
-        this._documentMousedownListener = function () {
+        this._documentMousedownListener = function (event) {
             // On mousedown record the origin only if there is not touch
             // target, since a mousedown can happen as a result of a touch event.
             if (!_this._lastTouchTarget) {
-                _this._setOriginForCurrentEventQueue('mouse');
+                // In some cases screen readers fire fake `mousedown` events instead of `keydown`.
+                // Resolve the focus source to `keyboard` if we detect one of them.
+                var source = isFakeMousedownFromScreenReader(event) ? 'keyboard' : 'mouse';
+                _this._setOriginForCurrentEventQueue(source);
             }
         };
         /**
@@ -1755,10 +1783,7 @@ var FocusMonitor = /** @class */ (function () {
             if (_this._touchTimeoutId != null) {
                 clearTimeout(_this._touchTimeoutId);
             }
-            // Since this listener is bound on the `document` level, any events coming from the shadow DOM
-            // will have their `target` set to the shadow root. If available, use `composedPath` to
-            // figure out the event target.
-            _this._lastTouchTarget = event.composedPath ? event.composedPath()[0] : event.target;
+            _this._lastTouchTarget = getTarget(event);
             _this._touchTimeoutId = setTimeout(function () { return _this._lastTouchTarget = null; }, TOUCH_BUFFER_MS);
         };
         /**
@@ -1771,54 +1796,61 @@ var FocusMonitor = /** @class */ (function () {
             _this._windowFocused = true;
             _this._windowFocusTimeoutId = setTimeout(function () { return _this._windowFocused = false; });
         };
+        /**
+         * Event listener for `focus` and 'blur' events on the document.
+         * Needs to be an arrow function in order to preserve the context when it gets bound.
+         */
+        this._rootNodeFocusAndBlurListener = function (event) {
+            var target = getTarget(event);
+            var handler = event.type === 'focus' ? _this._onFocus : _this._onBlur;
+            // We need to walk up the ancestor chain in order to support `checkChildren`.
+            for (var element = target; element; element = element.parentElement) {
+                handler.call(_this, event, element);
+            }
+        };
         this._document = document;
         this._detectionMode = (options === null || options === void 0 ? void 0 : options.detectionMode) || 0 /* IMMEDIATE */;
     }
     FocusMonitor.prototype.monitor = function (element, checkChildren) {
-        var _this = this;
         if (checkChildren === void 0) { checkChildren = false; }
         // Do nothing if we're not on the browser platform.
         if (!this._platform.isBrowser) {
             return of(null);
         }
         var nativeElement = coerceElement(element);
+        // If the element is inside the shadow DOM, we need to bind our focus/blur listeners to
+        // the shadow root, rather than the `document`, because the browser won't emit focus events
+        // to the `document`, if focus is moving within the same shadow root.
+        var rootNode = _getShadowRoot(nativeElement) || this._getDocument();
+        var cachedInfo = this._elementInfo.get(nativeElement);
         // Check if we're already monitoring this element.
-        if (this._elementInfo.has(nativeElement)) {
-            var cachedInfo = this._elementInfo.get(nativeElement);
-            cachedInfo.checkChildren = checkChildren;
+        if (cachedInfo) {
+            if (checkChildren) {
+                // TODO(COMP-318): this can be problematic, because it'll turn all non-checkChildren
+                // observers into ones that behave as if `checkChildren` was turned on. We need a more
+                // robust solution.
+                cachedInfo.checkChildren = true;
+            }
             return cachedInfo.subject.asObservable();
         }
         // Create monitored element info.
         var info = {
-            unlisten: function () { },
             checkChildren: checkChildren,
-            subject: new Subject()
+            subject: new Subject(),
+            rootNode: rootNode
         };
         this._elementInfo.set(nativeElement, info);
-        this._incrementMonitoredElementCount();
-        // Start listening. We need to listen in capture phase since focus events don't bubble.
-        var focusListener = function (event) { return _this._onFocus(event, nativeElement); };
-        var blurListener = function (event) { return _this._onBlur(event, nativeElement); };
-        this._ngZone.runOutsideAngular(function () {
-            nativeElement.addEventListener('focus', focusListener, true);
-            nativeElement.addEventListener('blur', blurListener, true);
-        });
-        // Create an unlisten function for later.
-        info.unlisten = function () {
-            nativeElement.removeEventListener('focus', focusListener, true);
-            nativeElement.removeEventListener('blur', blurListener, true);
-        };
+        this._registerGlobalListeners(info);
         return info.subject.asObservable();
     };
     FocusMonitor.prototype.stopMonitoring = function (element) {
         var nativeElement = coerceElement(element);
         var elementInfo = this._elementInfo.get(nativeElement);
         if (elementInfo) {
-            elementInfo.unlisten();
             elementInfo.subject.complete();
             this._setClasses(nativeElement);
             this._elementInfo.delete(nativeElement);
-            this._decrementMonitoredElementCount();
+            this._removeGlobalListeners(elementInfo);
         }
     };
     FocusMonitor.prototype.focusVia = function (element, origin, options) {
@@ -1851,20 +1883,37 @@ var FocusMonitor = /** @class */ (function () {
             element.classList.remove(className);
         }
     };
+    FocusMonitor.prototype._getFocusOrigin = function (event) {
+        // 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) {
+            return this._origin;
+        }
+        if (this._windowFocused && this._lastFocusOrigin) {
+            return this._lastFocusOrigin;
+        }
+        else if (this._wasCausedByTouch(event)) {
+            return 'touch';
+        }
+        else {
+            return 'program';
+        }
+    };
     /**
      * 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.
      */
     FocusMonitor.prototype._setClasses = function (element, origin) {
-        var elementInfo = this._elementInfo.get(element);
-        if (elementInfo) {
-            this._toggleClass(element, 'cdk-focused', !!origin);
-            this._toggleClass(element, 'cdk-touch-focused', origin === 'touch');
-            this._toggleClass(element, 'cdk-keyboard-focused', origin === 'keyboard');
-            this._toggleClass(element, 'cdk-mouse-focused', origin === 'mouse');
-            this._toggleClass(element, 'cdk-program-focused', origin === 'program');
-        }
+        this._toggleClass(element, 'cdk-focused', !!origin);
+        this._toggleClass(element, 'cdk-touch-focused', origin === 'touch');
+        this._toggleClass(element, 'cdk-keyboard-focused', origin === 'keyboard');
+        this._toggleClass(element, 'cdk-mouse-focused', origin === 'mouse');
+        this._toggleClass(element, 'cdk-program-focused', origin === 'program');
     };
     /**
      * Sets the origin and schedules an async function to clear it at the end of the event queue.
@@ -1906,7 +1955,7 @@ var FocusMonitor = /** @class */ (function () {
         // 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 focusTarget = event.target;
+        var focusTarget = getTarget(event);
         return this._lastTouchTarget instanceof Node && focusTarget instanceof Node &&
             (focusTarget === this._lastTouchTarget || focusTarget.contains(this._lastTouchTarget));
     };
@@ -1923,27 +1972,10 @@ var FocusMonitor = /** @class */ (function () {
         // If we are not counting child-element-focus as focused, make sure that the event target is the
         // monitored element itself.
         var elementInfo = this._elementInfo.get(element);
-        if (!elementInfo || (!elementInfo.checkChildren && element !== event.target)) {
+        if (!elementInfo || (!elementInfo.checkChildren && element !== getTarget(event))) {
             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'.
-        var origin = this._origin;
-        if (!origin) {
-            if (this._windowFocused && this._lastFocusOrigin) {
-                origin = this._lastFocusOrigin;
-            }
-            else if (this._wasCausedByTouch(event)) {
-                origin = 'touch';
-            }
-            else {
-                origin = 'program';
-            }
-        }
+        var origin = this._getFocusOrigin(event);
         this._setClasses(element, origin);
         this._emitOrigin(elementInfo.subject, origin);
         this._lastFocusOrigin = origin;
@@ -1967,10 +1999,22 @@ var FocusMonitor = /** @class */ (function () {
     FocusMonitor.prototype._emitOrigin = function (subject, origin) {
         this._ngZone.run(function () { return subject.next(origin); });
     };
-    FocusMonitor.prototype._incrementMonitoredElementCount = function () {
+    FocusMonitor.prototype._registerGlobalListeners = function (elementInfo) {
         var _this = this;
+        if (!this._platform.isBrowser) {
+            return;
+        }
+        var rootNode = elementInfo.rootNode;
+        var rootNodeFocusListeners = this._rootNodeFocusListenerCount.get(rootNode) || 0;
+        if (!rootNodeFocusListeners) {
+            this._ngZone.runOutsideAngular(function () {
+                rootNode.addEventListener('focus', _this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
+                rootNode.addEventListener('blur', _this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
+            });
+        }
+        this._rootNodeFocusListenerCount.set(rootNode, rootNodeFocusListeners + 1);
         // Register global listeners when first element is monitored.
-        if (++this._monitoredElementCount == 1 && this._platform.isBrowser) {
+        if (++this._monitoredElementCount === 1) {
             // Note: we listen to events in the capture phase so we
             // can detect them even if the user stops propagation.
             this._ngZone.runOutsideAngular(function () {
@@ -1983,7 +2027,19 @@ var FocusMonitor = /** @class */ (function () {
             });
         }
     };
-    FocusMonitor.prototype._decrementMonitoredElementCount = function () {
+    FocusMonitor.prototype._removeGlobalListeners = function (elementInfo) {
+        var rootNode = elementInfo.rootNode;
+        if (this._rootNodeFocusListenerCount.has(rootNode)) {
+            var rootNodeFocusListeners = this._rootNodeFocusListenerCount.get(rootNode);
+            if (rootNodeFocusListeners > 1) {
+                this._rootNodeFocusListenerCount.set(rootNode, rootNodeFocusListeners - 1);
+            }
+            else {
+                rootNode.removeEventListener('focus', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
+                rootNode.removeEventListener('blur', this._rootNodeFocusAndBlurListener, captureEventListenerOptions);
+                this._rootNodeFocusListenerCount.delete(rootNode);
+            }
+        }
         // Unregister global listeners when last element is unmonitored.
         if (!--this._monitoredElementCount) {
             var document_1 = this._getDocument();
@@ -2011,6 +2067,12 @@ var FocusMonitor = /** @class */ (function () {
     FocusMonitor.ɵprov = ɵɵdefineInjectable({ factory: function FocusMonitor_Factory() { return new FocusMonitor(ɵɵinject(NgZone), ɵɵinject(Platform), ɵɵinject(DOCUMENT, 8), ɵɵinject(FOCUS_MONITOR_DEFAULT_OPTIONS, 8)); }, token: FocusMonitor, providedIn: "root" });
     return FocusMonitor;
 }());
+/** Gets the target of an event, accounting for Shadow DOM. */
+function getTarget(event) {
+    // If an event is bound outside the Shadow DOM, the `event.target` will
+    // point to the shadow root so we have to use `composedPath` instead.
+    return (event.composedPath ? event.composedPath()[0] : event.target);
+}
 /**
  * Directive that determines how a particular element was focused (via keyboard, mouse, touch, or
  * programmatically) and adds corresponding classes to the element.
@@ -2049,24 +2111,6 @@ var CdkMonitorFocus = /** @class */ (function () {
     return CdkMonitorFocus;
 }());
 
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * 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
- */
-/**
- * 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.
- */
-function isFakeMousedownFromScreenReader(event) {
-    return event.buttons === 0;
-}
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -2081,7 +2125,7 @@ var WHITE_ON_BLACK_CSS_CLASS = 'cdk-high-contrast-white-on-black';
 /** CSS class applied to the document body when in high-contrast mode. */
 var HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS = 'cdk-high-contrast-active';
 /**
- * Service to determine whether the browser is currently in a high-constrast-mode environment.
+ * Service to determine whether the browser is currently in a high-contrast-mode environment.
  *
  * Microsoft Windows supports an accessibility feature called "High Contrast Mode". This mode
  * changes the appearance of all applications, including web applications, to dramatically increase
@@ -2096,7 +2140,7 @@ var HighContrastModeDetector = /** @class */ (function () {
         this._platform = _platform;
         this._document = document;
     }
-    /** Gets the current high-constrast-mode for the page. */
+    /** Gets the current high-contrast-mode for the page. */
     HighContrastModeDetector.prototype.getHighContrastMode = function () {
         if (!this._platform.isBrowser) {
             return 0 /* NONE */;
@@ -2110,9 +2154,12 @@ var HighContrastModeDetector = /** @class */ (function () {
         this._document.body.appendChild(testElement);
         // Get the computed style for the background color, collapsing spaces to normalize between
         // browsers. Once we get this color, we no longer need the test element. Access the `window`
-        // via the document so we can fake it in tests.
-        var documentWindow = this._document.defaultView;
-        var computedColor = (documentWindow.getComputedStyle(testElement).backgroundColor || '').replace(/ /g, '');
+        // via the document so we can fake it in tests. Note that we have extra null checks, because
+        // this logic will likely run during app bootstrap and throwing can break the entire app.
+        var documentWindow = this._document.defaultView || window;
+        var computedStyle = (documentWindow && documentWindow.getComputedStyle) ?
+            documentWindow.getComputedStyle(testElement) : null;
+        var computedColor = (computedStyle && computedStyle.backgroundColor || '').replace(/ /g, '');
         this._document.body.removeChild(testElement);
         switch (computedColor) {
             case 'rgb(0,0,0)': return 2 /* WHITE_ON_BLACK */;