feat(cdk/interactivity-checker) isFocusable optionally includes invisible/disabled elements

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>;