@angular/cdk 10.0.2 → 10.1.3

package/fesm2015/a11y.js

@@ -1,10 +1,10 @@
 import { DOCUMENT } from '@angular/common';
 import { ɵɵdefineInjectable, ɵɵinject, Injectable, Inject, QueryList, isDevMode, 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, LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW, TAB } from '@angular/cdk/keycodes';
+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,7 +76,12 @@ let messagesContainer = null;
  * content.
  */
 class AriaDescriber {
-    constructor(_document) {
+    constructor(_document, 
+    /**
+     * @breaking-change 8.0.0 `_platform` parameter to be made required.
+     */
+    _platform) {
+        this._platform = _platform;
         this._document = _document;
     }
     /**
@@ -102,7 +107,7 @@ class AriaDescriber {
     }
     /** Removes the host element's aria-describedby reference to the message element. */
     removeDescription(hostElement, message) {
-        if (!this._isElementNode(hostElement)) {
+        if (!message || !this._isElementNode(hostElement)) {
             return;
         }
         if (this._isElementDescribedByMessage(hostElement, message)) {
@@ -162,6 +167,8 @@ class AriaDescriber {
     /** 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
@@ -172,8 +179,12 @@ class AriaDescriber {
             }
             messagesContainer = this._document.createElement('div');
             messagesContainer.id = MESSAGES_CONTAINER_ID;
-            messagesContainer.setAttribute('aria-hidden', 'true');
-            messagesContainer.style.display = 'none';
+            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);
         }
     }
@@ -242,12 +253,13 @@ class AriaDescriber {
         return element.nodeType === this._document.ELEMENT_NODE;
     }
 }
-AriaDescriber.ɵprov = ɵɵdefineInjectable({ factory: function AriaDescriber_Factory() { return new AriaDescriber(ɵɵinject(DOCUMENT)); }, token: AriaDescriber, providedIn: "root" });
+AriaDescriber.ɵprov = ɵɵdefineInjectable({ factory: function AriaDescriber_Factory() { return new AriaDescriber(ɵɵinject(DOCUMENT), ɵɵinject(Platform)); }, token: AriaDescriber, providedIn: "root" });
 AriaDescriber.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 AriaDescriber.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
+    { type: Platform }
 ];
 
 /**
@@ -271,6 +283,7 @@ class ListKeyManager {
         this._typeaheadSubscription = Subscription.EMPTY;
         this._vertical = true;
         this._allowedModifierKeys = [];
+        this._homeAndEnd = false;
         /**
          * Predicate function that can be used to check whether an item should be skipped
          * by the key manager. By default, disabled items are skipped.
@@ -372,6 +385,14 @@ class ListKeyManager {
         });
         return this;
     }
+    /**
+     * Configures the key manager to focus the first and last items
+     * respectively when the Home key and End Key are pressed.
+     */
+    withHomeAndEnd() {
+        this._homeAndEnd = true;
+        return this;
+    }
     setActiveItem(item) {
         const previousActiveItem = this._activeItem;
         this.updateActiveItem(item);
@@ -425,6 +446,22 @@ class ListKeyManager {
                 else {
                     return;
                 }
+            case HOME:
+                if (this._homeAndEnd && isModifierAllowed) {
+                    this.setFirstItemActive();
+                    break;
+                }
+                else {
+                    return;
+                }
+            case END:
+                if (this._homeAndEnd && isModifierAllowed) {
+                    this.setLastItemActive();
+                    break;
+                }
+                else {
+                    return;
+                }
             default:
                 if (isModifierAllowed || hasModifierKey(event, 'shiftKey')) {
                     // Attempt to use the `event.key` which also maps it to the user's keyboard language,
@@ -590,6 +627,17 @@ class FocusKeyManager extends ListKeyManager {
  * 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
  */
+/**
+ * Configuration for the isFocusable method.
+ */
+class IsFocusableConfig {
+    constructor() {
+        /**
+         * Whether to count an element as focusable even if it is not currently visible.
+         */
+        this.ignoreVisibility = false;
+    }
+}
 // The InteractivityChecker leans heavily on the ally.js accessibility utilities.
 // Methods like `isTabbable` are only covering specific edge-cases for the browsers which are
 // supported.
@@ -637,17 +685,12 @@ class InteractivityChecker {
         }
         const frameElement = getFrameElement(getWindow(element));
         if (frameElement) {
-            const frameType = frameElement && frameElement.nodeName.toLowerCase();
             // Frame elements inherit their tabindex onto all child elements.
             if (getTabIndexValue(frameElement) === -1) {
                 return false;
             }
-            // Webkit and Blink consider anything inside of an <object> element as non-tabbable.
-            if ((this._platform.BLINK || this._platform.WEBKIT) && frameType === 'object') {
-                return false;
-            }
-            // Webkit and Blink disable tabbing to an element inside of an invisible frame.
-            if ((this._platform.BLINK || this._platform.WEBKIT) && !this.isVisible(frameElement)) {
+            // Browsers disable tabbing to an element inside of an invisible frame.
+            if (!this.isVisible(frameElement)) {
                 return false;
             }
         }
@@ -656,38 +699,43 @@ class InteractivityChecker {
         if (element.hasAttribute('contenteditable')) {
             return tabIndexValue !== -1;
         }
-        if (nodeName === 'iframe') {
-            // The frames may be tabbable depending on content, but it's not possibly to reliably
-            // investigate the content of the frames.
+        if (nodeName === 'iframe' || nodeName === 'object') {
+            // The frame or object's content may be tabbable depending on the content, but it's
+            // not possibly to reliably detect the content of the frames. We always consider such
+            // elements as non-tabbable.
+            return false;
+        }
+        // In iOS, the browser only considers some specific elements as tabbable.
+        if (this._platform.WEBKIT && this._platform.IOS && !isPotentiallyTabbableIOS(element)) {
             return false;
         }
         if (nodeName === 'audio') {
+            // Audio elements without controls enabled are never tabbable, regardless
+            // of the tabindex attribute explicitly being set.
             if (!element.hasAttribute('controls')) {
-                // By default an <audio> element without the controls enabled is not tabbable.
                 return false;
             }
-            else if (this._platform.BLINK) {
-                // In Blink <audio controls> elements are always tabbable.
-                return true;
-            }
+            // Audio elements with controls are by default tabbable unless the
+            // tabindex attribute is set to `-1` explicitly.
+            return tabIndexValue !== -1;
         }
         if (nodeName === 'video') {
-            if (!element.hasAttribute('controls') && this._platform.TRIDENT) {
-                // In Trident a <video> element without the controls enabled is not tabbable.
+            // For all video elements, if the tabindex attribute is set to `-1`, the video
+            // is not tabbable. Note: We cannot rely on the default `HTMLElement.tabIndex`
+            // property as that one is set to `-1` in Chrome, Edge and Safari v13.1. The
+            // tabindex attribute is the source of truth here.
+            if (tabIndexValue === -1) {
                 return false;
             }
-            else if (this._platform.BLINK || this._platform.FIREFOX) {
-                // In Chrome and Firefox <video controls> elements are always tabbable.
+            // If the tabindex is explicitly set, and not `-1` (as per check before), the
+            // video element is always tabbable (regardless of whether it has controls or not).
+            if (tabIndexValue !== null) {
                 return true;
             }
-        }
-        if (nodeName === 'object' && (this._platform.BLINK || this._platform.WEBKIT)) {
-            // In all Blink and WebKit based browsers <object> elements are never tabbable.
-            return false;
-        }
-        // In iOS the browser only considers some specific elements as tabbable.
-        if (this._platform.WEBKIT && this._platform.IOS && !isPotentiallyTabbableIOS(element)) {
-            return false;
+            // Otherwise (when no explicit tabindex is set), a video is only tabbable if it
+            // has controls enabled. Firefox is special as videos are always tabbable regardless
+            // of whether there are controls or not.
+            return this._platform.FIREFOX || element.hasAttribute('controls');
         }
         return element.tabIndex >= 0;
     }
@@ -695,12 +743,14 @@ class InteractivityChecker {
      * Gets whether an element can be focused by the user.
      *
      * @param element Element to be checked.
+     * @param config The config object with options to customize this method's behavior
      * @returns Whether the element is focusable.
      */
-    isFocusable(element) {
+    isFocusable(element, config) {
         // Perform checks in order of left to most expensive.
         // Again, naive approach that does not capture many edge cases and browser quirks.
-        return isPotentiallyFocusable(element) && !this.isDisabled(element) && this.isVisible(element);
+        return isPotentiallyFocusable(element) && !this.isDisabled(element) &&
+            ((config === null || config === void 0 ? void 0 : config.ignoreVisibility) || this.isVisible(element));
     }
 }
 InteractivityChecker.ɵprov = ɵɵdefineInjectable({ factory: function InteractivityChecker_Factory() { return new InteractivityChecker(ɵɵinject(Platform)); }, token: InteractivityChecker, providedIn: "root" });
@@ -2162,5 +2212,5 @@ A11yModule.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { A11yModule, ActiveDescendantKeyManager, AriaDescriber, CDK_DESCRIBEDBY_HOST_ATTRIBUTE, CDK_DESCRIBEDBY_ID_PREFIX, CdkAriaLive, CdkMonitorFocus, CdkTrapFocus, ConfigurableFocusTrap, ConfigurableFocusTrapFactory, EventListenerFocusTrapInertStrategy, FOCUS_MONITOR_DEFAULT_OPTIONS, FOCUS_TRAP_INERT_STRATEGY, FocusKeyManager, FocusMonitor, FocusTrap, FocusTrapFactory, HighContrastModeDetector, InteractivityChecker, LIVE_ANNOUNCER_DEFAULT_OPTIONS, LIVE_ANNOUNCER_ELEMENT_TOKEN, LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY, ListKeyManager, LiveAnnouncer, MESSAGES_CONTAINER_ID, TOUCH_BUFFER_MS, isFakeMousedownFromScreenReader, FocusTrapManager as ɵangular_material_src_cdk_a11y_a11y_a, ConfigurableFocusTrapConfig as ɵangular_material_src_cdk_a11y_a11y_b };
+export { A11yModule, ActiveDescendantKeyManager, AriaDescriber, CDK_DESCRIBEDBY_HOST_ATTRIBUTE, CDK_DESCRIBEDBY_ID_PREFIX, CdkAriaLive, CdkMonitorFocus, CdkTrapFocus, ConfigurableFocusTrap, ConfigurableFocusTrapFactory, EventListenerFocusTrapInertStrategy, FOCUS_MONITOR_DEFAULT_OPTIONS, FOCUS_TRAP_INERT_STRATEGY, FocusKeyManager, FocusMonitor, FocusTrap, FocusTrapFactory, HighContrastModeDetector, InteractivityChecker, IsFocusableConfig, LIVE_ANNOUNCER_DEFAULT_OPTIONS, LIVE_ANNOUNCER_ELEMENT_TOKEN, LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY, ListKeyManager, LiveAnnouncer, MESSAGES_CONTAINER_ID, TOUCH_BUFFER_MS, isFakeMousedownFromScreenReader, FocusTrapManager as ɵangular_material_src_cdk_a11y_a11y_a, ConfigurableFocusTrapConfig as ɵangular_material_src_cdk_a11y_a11y_b };
 //# sourceMappingURL=a11y.js.map