refactor: Make INavigable extend IFocusableNode. (#9033)

Author: gonfunko

core/block_svg.ts

@@ -1824,15 +1824,6 @@ export class BlockSvg
     return true;
   }
 
-  /**
-   * Returns whether or not this block can be navigated to via the keyboard.
-   *
-   * @returns True if this block is keyboard navigable, otherwise false.
-   */
-  isNavigable() {
-    return true;
-  }
-
   /**
    * Returns this block's class.
    *

core/field.ts

@@ -1385,20 +1385,6 @@ export abstract class Field<T = any>
     );
   }
 
-  /**
-   * Returns whether or not this field is accessible by keyboard navigation.
-   *
-   * @returns True if this field is keyboard accessible, otherwise false.
-   */
-  isNavigable() {
-    return (
-      this.isClickable() &&
-      this.isCurrentlyEditable() &&
-      !(this.getSourceBlock()?.isSimpleReporter() && this.isFullBlockField()) &&
-      this.getParentInput().isVisible()
-    );
-  }
-
   /**
    * Returns this field's class.
    *

core/flyout_button.ts

@@ -413,16 +413,6 @@ export class FlyoutButton
     return true;
   }
 
-  /**
-   * Returns whether or not this button is accessible through keyboard
-   * navigation.
-   *
-   * @returns True if this button is keyboard accessible, otherwise false.
-   */
-  isNavigable() {
-    return true;
-  }
-
   /**
    * Returns this button's class.
    *

core/flyout_separator.ts

@@ -5,14 +5,16 @@
  */
 
 import type {IBoundedElement} from './interfaces/i_bounded_element.js';
+import type {IFocusableNode} from './interfaces/i_focusable_node.js';
+import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
 import type {INavigable} from './interfaces/i_navigable.js';
 import {Rect} from './utils/rect.js';
 
 /**
  * Representation of a gap between elements in a flyout.
  */
 export class FlyoutSeparator
-  implements IBoundedElement, INavigable<FlyoutSeparator>
+  implements IBoundedElement, INavigable<FlyoutSeparator>, IFocusableNode
 {
   private x = 0;
   private y = 0;
@@ -75,6 +77,27 @@ export class FlyoutSeparator
   getClass() {
     return FlyoutSeparator;
   }
+
+  /** See IFocusableNode.getFocusableElement. */
+  getFocusableElement(): HTMLElement | SVGElement {
+    throw new Error('Cannot be focused');
+  }
+
+  /** See IFocusableNode.getFocusableTree. */
+  getFocusableTree(): IFocusableTree {
+    throw new Error('Cannot be focused');
+  }
+
+  /** See IFocusableNode.onNodeFocus. */
+  onNodeFocus(): void {}
+
+  /** See IFocusableNode.onNodeBlur. */
+  onNodeBlur(): void {}
+
+  /** See IFocusableNode.canBeFocused. */
+  canBeFocused(): boolean {
+    return false;
+  }
 }
 
 /**

core/interfaces/i_navigable.ts

@@ -4,24 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import type {IFocusableNode} from './i_focusable_node.js';
+
 /**
  * Represents a UI element which can be navigated to using the keyboard.
  */
-export interface INavigable<T> {
-  /**
-   * Returns whether or not this specific instance should be reachable via
-   * keyboard navigation.
-   *
-   * Implementors should generally return true, unless there are circumstances
-   * under which this item should be skipped while using keyboard navigation.
-   * Common examples might include being disabled, invalid, readonly, or purely
-   * a visual decoration. For example, while Fields are navigable, non-editable
-   * fields return false, since they cannot be interacted with when focused.
-   *
-   * @returns True if this element should be included in keyboard navigation.
-   */
-  isNavigable(): boolean;
-
+export interface INavigable<T> extends IFocusableNode {
   /**
    * Returns the class of this instance.
    *

core/interfaces/i_navigation_policy.ts

@@ -43,4 +43,18 @@ export interface INavigationPolicy<T> {
    *     there is none.
    */
   getPreviousSibling(current: T): INavigable<any> | null;
+
+  /**
+   * Returns whether or not the given instance should be reachable via keyboard
+   * navigation.
+   *
+   * Implementors should generally return true, unless there are circumstances
+   * under which this item should be skipped while using keyboard navigation.
+   * Common examples might include being disabled, invalid, readonly, or purely
+   * a visual decoration. For example, while Fields are navigable, non-editable
+   * fields return false, since they cannot be interacted with when focused.
+   *
+   * @returns True if this element should be included in keyboard navigation.
+   */
+  isNavigable(current: T): boolean;
 }

core/keyboard_nav/block_navigation_policy.ts

@@ -114,4 +114,14 @@ export class BlockNavigationPolicy implements INavigationPolicy<BlockSvg> {
     }
     return block.outputConnection;
   }
+
+  /**
+   * Returns whether or not the given block can be navigated to.
+   *
+   * @param current The instance to check for navigability.
+   * @returns True if the given block can be focused.
+   */
+  isNavigable(current: BlockSvg): boolean {
+    return current.canBeFocused();
+  }
 }

core/keyboard_nav/connection_navigation_policy.ts

@@ -166,4 +166,14 @@ export class ConnectionNavigationPolicy
     }
     return block.outputConnection;
   }
+
+  /**
+   * Returns whether or not the given connection can be navigated to.
+   *
+   * @param current The instance to check for navigability.
+   * @returns True if the given connection can be focused.
+   */
+  isNavigable(current: RenderedConnection): boolean {
+    return current.canBeFocused();
+  }
 }

core/keyboard_nav/field_navigation_policy.ts

@@ -88,4 +88,23 @@ export class FieldNavigationPolicy implements INavigationPolicy<Field<any>> {
     }
     return null;
   }
+
+  /**
+   * Returns whether or not the given field can be navigated to.
+   *
+   * @param current The instance to check for navigability.
+   * @returns True if the given field can be focused and navigated to.
+   */
+  isNavigable(current: Field<any>): boolean {
+    return (
+      current.canBeFocused() &&
+      current.isClickable() &&
+      current.isCurrentlyEditable() &&
+      !(
+        current.getSourceBlock()?.isSimpleReporter() &&
+        current.isFullBlockField()
+      ) &&
+      current.getParentInput().isVisible()
+    );
+  }
 }

core/keyboard_nav/flyout_button_navigation_policy.ts

@@ -53,4 +53,14 @@ export class FlyoutButtonNavigationPolicy
   getPreviousSibling(_current: FlyoutButton): INavigable<unknown> | null {
     return null;
   }
+
+  /**
+   * Returns whether or not the given flyout button can be navigated to.
+   *
+   * @param current The instance to check for navigability.
+   * @returns True if the given flyout button can be focused.
+   */
+  isNavigable(current: FlyoutButton): boolean {
+    return current.canBeFocused();
+  }
 }