@angular/cdk 11.0.2 → 11.1.0

package/fesm2015/a11y.js

@@ -1,10 +1,10 @@
 import { DOCUMENT } from '@angular/common';
 import { ɵɵdefineInjectable, ɵɵinject, Injectable, Inject, QueryList, NgZone, Directive, ElementRef, Input, InjectionToken, Optional, EventEmitter, Output, NgModule } from '@angular/core';
-import { Platform, normalizePassiveListenerOptions, _getShadowRoot, PlatformModule } from '@angular/cdk/platform';
 import { Subject, Subscription, of } from 'rxjs';
 import { hasModifierKey, A, Z, ZERO, NINE, END, HOME, 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, _getShadowRoot, PlatformModule } from '@angular/cdk/platform';
 import { ContentObserver, ObserversModule } from '@angular/cdk/observers';
 
 /**
@@ -76,49 +76,40 @@ let messagesContainer = null;
  * content.
  */
 class AriaDescriber {
-    constructor(_document, 
-    /**
-     * @breaking-change 8.0.0 `_platform` parameter to be made required.
-     */
-    _platform) {
-        this._platform = _platform;
+    constructor(_document) {
         this._document = _document;
     }
-    /**
-     * 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.
-     */
-    describe(hostElement, message) {
+    describe(hostElement, message, role) {
         if (!this._canBeDescribed(hostElement, message)) {
             return;
         }
+        const key = getKey(message, role);
         if (typeof message !== 'string') {
             // We need to ensure that the element has an ID.
-            this._setMessageId(message);
-            messageRegistry.set(message, { messageElement: message, referenceCount: 0 });
+            setMessageId(message);
+            messageRegistry.set(key, { messageElement: message, referenceCount: 0 });
         }
-        else if (!messageRegistry.has(message)) {
-            this._createMessageElement(message);
+        else if (!messageRegistry.has(key)) {
+            this._createMessageElement(message, role);
         }
-        if (!this._isElementDescribedByMessage(hostElement, message)) {
-            this._addMessageReference(hostElement, message);
+        if (!this._isElementDescribedByMessage(hostElement, key)) {
+            this._addMessageReference(hostElement, key);
         }
     }
-    /** Removes the host element's aria-describedby reference to the message element. */
-    removeDescription(hostElement, message) {
+    removeDescription(hostElement, message, role) {
         if (!message || !this._isElementNode(hostElement)) {
             return;
         }
-        if (this._isElementDescribedByMessage(hostElement, message)) {
-            this._removeMessageReference(hostElement, message);
+        const key = getKey(message, role);
+        if (this._isElementDescribedByMessage(hostElement, key)) {
+            this._removeMessageReference(hostElement, key);
         }
         // If the message is a string, it means that it's one that we created for the
         // consumer so we can remove it safely, otherwise we should leave it in place.
         if (typeof message === 'string') {
-            const registeredMessage = messageRegistry.get(message);
+            const registeredMessage = messageRegistry.get(key);
             if (registeredMessage && registeredMessage.referenceCount === 0) {
-                this._deleteMessageElement(message);
+                this._deleteMessageElement(key);
             }
         }
         if (messagesContainer && messagesContainer.childNodes.length === 0) {
@@ -141,34 +132,29 @@ class AriaDescriber {
      * Creates a new element in the visually hidden message container element with the message
      * as its content and adds it to the message registry.
      */
-    _createMessageElement(message) {
+    _createMessageElement(message, role) {
         const messageElement = this._document.createElement('div');
-        this._setMessageId(messageElement);
+        setMessageId(messageElement);
         messageElement.textContent = message;
+        if (role) {
+            messageElement.setAttribute('role', role);
+        }
         this._createMessagesContainer();
         messagesContainer.appendChild(messageElement);
-        messageRegistry.set(message, { messageElement, referenceCount: 0 });
-    }
-    /** Assigns a unique ID to an element, if it doesn't have one already. */
-    _setMessageId(element) {
-        if (!element.id) {
-            element.id = `${CDK_DESCRIBEDBY_ID_PREFIX}-${nextId++}`;
-        }
+        messageRegistry.set(getKey(message, role), { messageElement, referenceCount: 0 });
     }
     /** Deletes the message element from the global messages container. */
-    _deleteMessageElement(message) {
-        const registeredMessage = messageRegistry.get(message);
+    _deleteMessageElement(key) {
+        const registeredMessage = messageRegistry.get(key);
         const messageElement = registeredMessage && registeredMessage.messageElement;
         if (messagesContainer && messageElement) {
             messagesContainer.removeChild(messageElement);
         }
-        messageRegistry.delete(message);
+        messageRegistry.delete(key);
     }
     /** Creates the global container for all aria-describedby messages. */
     _createMessagesContainer() {
         if (!messagesContainer) {
-            // @breaking-change 8.0.0 `_platform` null check can be removed once the parameter is required
-            const canBeAriaHidden = !this._platform || (!this._platform.EDGE && !this._platform.TRIDENT);
             const preExistingContainer = this._document.getElementById(MESSAGES_CONTAINER_ID);
             // When going from the server to the client, we may end up in a situation where there's
             // already a container on the page, but we don't have a reference to it. Clear the
@@ -179,12 +165,14 @@ class AriaDescriber {
             }
             messagesContainer = this._document.createElement('div');
             messagesContainer.id = MESSAGES_CONTAINER_ID;
+            // We add `visibility: hidden` in order to prevent text in this container from
+            // being searchable by the browser's Ctrl + F functionality.
+            // Screen-readers will still read the description for elements with aria-describedby even
+            // when the description element is not visible.
+            messagesContainer.style.visibility = 'hidden';
+            // Even though we use `visibility: hidden`, we still apply `cdk-visually-hidden` so that
+            // the description element doesn't impact page layout.
             messagesContainer.classList.add('cdk-visually-hidden');
-            // IE and Edge won't read out the messages if they're in an `aria-hidden` container.
-            // We only disable `aria-hidden` for these platforms, because it comes with the
-            // disadvantage that people might hit the messages when they've navigated past
-            // the end of the document using the arrow keys.
-            messagesContainer.setAttribute('aria-hidden', canBeAriaHidden + '');
             this._document.body.appendChild(messagesContainer);
         }
     }
@@ -206,8 +194,8 @@ class AriaDescriber {
      * Adds a message reference to the element using aria-describedby and increments the registered
      * message's reference count.
      */
-    _addMessageReference(element, message) {
-        const registeredMessage = messageRegistry.get(message);
+    _addMessageReference(element, key) {
+        const registeredMessage = messageRegistry.get(key);
         // Add the aria-describedby reference and set the
         // describedby_host attribute to mark the element.
         addAriaReferencedId(element, 'aria-describedby', registeredMessage.messageElement.id);
@@ -218,16 +206,16 @@ class AriaDescriber {
      * Removes a message reference from the element using aria-describedby
      * and decrements the registered message's reference count.
      */
-    _removeMessageReference(element, message) {
-        const registeredMessage = messageRegistry.get(message);
+    _removeMessageReference(element, key) {
+        const registeredMessage = messageRegistry.get(key);
         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. */
-    _isElementDescribedByMessage(element, message) {
+    _isElementDescribedByMessage(element, key) {
         const referenceIds = getAriaReferenceIds(element, 'aria-describedby');
-        const registeredMessage = messageRegistry.get(message);
+        const registeredMessage = messageRegistry.get(key);
         const messageId = registeredMessage && registeredMessage.messageElement.id;
         return !!messageId && referenceIds.indexOf(messageId) != -1;
     }
@@ -253,14 +241,23 @@ class AriaDescriber {
         return element.nodeType === this._document.ELEMENT_NODE;
     }
 }
-AriaDescriber.ɵprov = ɵɵdefineInjectable({ factory: function AriaDescriber_Factory() { return new AriaDescriber(ɵɵinject(DOCUMENT), ɵɵinject(Platform)); }, token: AriaDescriber, providedIn: "root" });
+AriaDescriber.ɵprov = ɵɵdefineInjectable({ factory: function AriaDescriber_Factory() { return new AriaDescriber(ɵɵinject(DOCUMENT)); }, token: AriaDescriber, providedIn: "root" });
 AriaDescriber.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 AriaDescriber.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: Platform }
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
 ];
+/** Gets a key that can be used to look messages up in the registry. */
+function getKey(message, role) {
+    return typeof message === 'string' ? `${role || ''}/${message}` : message;
+}
+/** Assigns a unique ID to an element, if it doesn't have one already. */
+function setMessageId(element) {
+    if (!element.id) {
+        element.id = `${CDK_DESCRIBEDBY_ID_PREFIX}-${nextId++}`;
+    }
+}
 
 /**
  * @license
@@ -1852,8 +1849,9 @@ class FocusMonitor {
         // If the element is focused already, calling `focus` again won't trigger the event listener
         // which means that the focus classes won't be updated. If that's the case, update the classes
         // directly without waiting for an event.
-        if (nativeElement === focusedElement && this._elementInfo.has(nativeElement)) {
-            this._originChanged(nativeElement, origin, this._elementInfo.get(nativeElement));
+        if (nativeElement === focusedElement) {
+            this._getClosestElementsInfo(nativeElement)
+                .forEach(([currentElement, info]) => this._originChanged(currentElement, origin, info));
         }
         else {
             this._setOriginForCurrentEventQueue(origin);
@@ -2055,6 +2053,20 @@ class FocusMonitor {
         this._emitOrigin(elementInfo.subject, origin);
         this._lastFocusOrigin = origin;
     }
+    /**
+     * Collects the `MonitoredElementInfo` of a particular element and
+     * all of its ancestors that have enabled `checkChildren`.
+     * @param element Element from which to start the search.
+     */
+    _getClosestElementsInfo(element) {
+        const results = [];
+        this._elementInfo.forEach((info, currentElement) => {
+            if (currentElement === element || (info.checkChildren && currentElement.contains(element))) {
+                results.push([currentElement, info]);
+            }
+        });
+        return results;
+    }
 }
 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" });
 FocusMonitor.decorators = [