feat(cdk/interactivity-checker) add optional parameters to isFocusable

Adds parameters to isFocusable to optionally return true even when an
element is invisible or disabled. Setting both to true makes isFocusable
behave like the internal method isPotentiallyFocusable. Example use
case: call isFocusable with includeInvisible=true to find a focusable
element within a collapsed element. If isFocusable returns true, expand
the collapsed element and focus the focusable element.

Fixes #6468.

Author: vanessanschmitt

src/cdk/a11y/interactivity-checker/interactivity-checker.spec.ts

@@ -144,6 +144,17 @@ describe('InteractivityChecker', () => {
       });
     });
 
+    it('should return true for disabled form controls with includeDisabled', () => {
+      const elements = createElements('input', 'textarea', 'select', 'button');
+      elements.forEach(el => el.setAttribute('disabled', ''));
+      appendElements(elements);
+
+      elements.forEach(el => {
+        expect(checker.isFocusable(el, true, false))
+            .toBe(true, `Expected <${el.nodeName} disabled> to to be focusable`);
+      });
+    });
+
     it('should return false for a `display: none` element', () => {
       testContainerElement.innerHTML =
           `<input style="display: none;">`;
@@ -153,6 +164,15 @@ describe('InteractivityChecker', () => {
           .toBe(false, 'Expected element with `display: none` to not be visible');
     });
 
+    it('should return true for a `display: none` element with includeInvisible', () => {
+      testContainerElement.innerHTML =
+          `<input style="display: none;">`;
+      const input = testContainerElement.querySelector('input') as HTMLElement;
+
+      expect(checker.isFocusable(input, false, true))
+          .toBe(true, 'Expected element with `display: none` to be focusable');
+    });
+
     it('should return false for the child of a `display: none` element', () => {
       testContainerElement.innerHTML =
         `<div style="display: none;">

src/cdk/a11y/interactivity-checker/interactivity-checker.ts

@@ -132,12 +132,15 @@ export class InteractivityChecker {
    * Gets whether an element can be focused by the user.
    *
    * @param element Element to be checked.
+   * @param includeDisabled When true, considers element to be focusable even if it is disabled.
+   * @param includeInvisible When true, considers element to be focusable even if it is not visible.
    * @returns Whether the element is focusable.
    */
-  isFocusable(element: HTMLElement): boolean {
+  isFocusable(element: HTMLElement, includeDisabled = false, includeInvisible = false): boolean {
     // 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) && (includeDisabled || !this.isDisabled(element)) &&
+      (includeInvisible || this.isVisible(element));
   }
 
 }

tools/public_api_guard/cdk/a11y.d.ts

@@ -181,7 +181,7 @@ export interface Highlightable extends ListKeyManagerOption {
 export declare class InteractivityChecker {
     constructor(_platform: Platform);
     isDisabled(element: HTMLElement): boolean;
-    isFocusable(element: HTMLElement): boolean;
+    isFocusable(element: HTMLElement, includeDisabled?: boolean, includeInvisible?: boolean): boolean;
     isTabbable(element: HTMLElement): boolean;
     isVisible(element: HTMLElement): boolean;
     static ɵfac: i0.ɵɵFactoryDef<InteractivityChecker, never>;