refactor!: Use navigation rulesets instead of ASTNode to control keyboard navigation. (#8992)

* feat: Add interfaces for keyboard navigation.

* feat: Add the Navigator.

* feat: Make core types conform to INavigable.

* feat: Require FlyoutItems elements to be INavigable.

* feat: Add navigation policies for built-in types.

* refactor: Convert Marker and LineCursor to operate on INavigables instead of ASTNodes.

* chore: Delete dead code in ASTNode.

* fix: Fix the tests.

* chore: Assuage the linter.

* fix: Fix advanced build/tests.

* chore: Restore ASTNode tests.

* refactor: Move isNavigable() validation into Navigator.

* refactor: Exercise navigation instead of ASTNode.

* chore: Rename astnode_test.js to navigation_test.js.

* chore: Enable the navigation tests.

* fix: Fix bug when retrieving the first child of an empty workspace.

Author: gonfunko

core/block_flyout_inflater.ts

@@ -70,7 +70,7 @@ export class BlockFlyoutInflater implements IFlyoutInflater {
     block.getDescendants(false).forEach((b) => (b.isInFlyout = true));
     this.addBlockListeners(block);
 
-    return new FlyoutItem(block, BLOCK_TYPE, true);
+    return new FlyoutItem(block, BLOCK_TYPE);
   }
 
   /**

core/block_svg.ts

@@ -48,6 +48,7 @@ import type {IDragStrategy, IDraggable} from './interfaces/i_draggable.js';
 import type {IFocusableNode} from './interfaces/i_focusable_node.js';
 import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
 import {IIcon} from './interfaces/i_icon.js';
+import type {INavigable} from './interfaces/i_navigable.js';
 import * as internalConstants from './internal_constants.js';
 import {MarkerManager} from './marker_manager.js';
 import {Msg} from './msg.js';
@@ -80,7 +81,8 @@ export class BlockSvg
     ICopyable<BlockCopyData>,
     IDraggable,
     IDeletable,
-    IFocusableNode
+    IFocusableNode,
+    INavigable<BlockSvg>
 {
   /**
    * Constant for identifying rows that are to be rendered inline.
@@ -1886,4 +1888,25 @@ export class BlockSvg
       common.setSelected(null);
     }
   }
+
+  /**
+   * 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.
+   *
+   * Used by keyboard navigation to look up the rules for navigating from this
+   * block.
+   *
+   * @returns This block's class.
+   */
+  getClass() {
+    return BlockSvg;
+  }
 }

core/blockly.ts

@@ -433,6 +433,16 @@ Names.prototype.populateProcedures = function (
 };
 // clang-format on
 
+export * from './interfaces/i_navigable.js';
+export * from './interfaces/i_navigation_policy.js';
+export * from './keyboard_nav/block_navigation_policy.js';
+export * from './keyboard_nav/connection_navigation_policy.js';
+export * from './keyboard_nav/field_navigation_policy.js';
+export * from './keyboard_nav/flyout_button_navigation_policy.js';
+export * from './keyboard_nav/flyout_navigation_policy.js';
+export * from './keyboard_nav/flyout_separator_navigation_policy.js';
+export * from './keyboard_nav/workspace_navigation_policy.js';
+export * from './navigator.js';
 export * from './toast.js';
 
 // Re-export submodules that no longer declareLegacyNamespace.

core/button_flyout_inflater.ts

@@ -33,7 +33,7 @@ export class ButtonFlyoutInflater implements IFlyoutInflater {
     );
     button.show();
 
-    return new FlyoutItem(button, BUTTON_TYPE, true);
+    return new FlyoutItem(button, BUTTON_TYPE);
   }
 
   /**

core/field.ts

@@ -28,6 +28,7 @@ import type {IASTNodeLocationWithBlock} from './interfaces/i_ast_node_location_w
 import type {IFocusableNode} from './interfaces/i_focusable_node.js';
 import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
 import type {IKeyboardAccessible} from './interfaces/i_keyboard_accessible.js';
+import type {INavigable} from './interfaces/i_navigable.js';
 import type {IRegistrable} from './interfaces/i_registrable.js';
 import {ISerializable} from './interfaces/i_serializable.js';
 import {MarkerManager} from './marker_manager.js';
@@ -76,7 +77,8 @@ export abstract class Field<T = any>
     IKeyboardAccessible,
     IRegistrable,
     ISerializable,
-    IFocusableNode
+    IFocusableNode,
+    INavigable<Field<T>>
 {
   /**
    * To overwrite the default value which is set in **Field**, directly update
@@ -1452,6 +1454,30 @@ export abstract class Field<T = any>
       `Attempted to instantiate a field from the registry that hasn't defined a 'fromJson' method.`,
     );
   }
+
+  /**
+   * 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.
+   *
+   * Used by keyboard navigation to look up the rules for navigating from this
+   * field. Must be implemented by subclasses.
+   *
+   * @returns This field's class.
+   */
+  abstract getClass(): new (...args: any) => Field<T>;
 }
 
 /**

core/field_checkbox.ts

@@ -228,6 +228,18 @@ export class FieldCheckbox extends Field<CheckboxBool> {
     // 'override' the static fromJson method.
     return new this(options.checked, undefined, options);
   }
+
+  /**
+   * Returns this field's class.
+   *
+   * Used by keyboard navigation to look up the rules for navigating from this
+   * field.
+   *
+   * @returns This field's class.
+   */
+  getClass() {
+    return FieldCheckbox;
+  }
 }
 
 fieldRegistry.register('field_checkbox', FieldCheckbox);

core/field_dropdown.ts

@@ -796,6 +796,18 @@ export class FieldDropdown extends Field<string> {
       throw TypeError('Found invalid FieldDropdown options.');
     }
   }
+
+  /**
+   * Returns this field's class.
+   *
+   * Used by keyboard navigation to look up the rules for navigating from this
+   * field.
+   *
+   * @returns This field's class.
+   */
+  getClass() {
+    return FieldDropdown;
+  }
 }
 
 /**

core/field_image.ts

@@ -273,6 +273,18 @@ export class FieldImage extends Field<string> {
       options,
     );
   }
+
+  /**
+   * Returns this field's class.
+   *
+   * Used by keyboard navigation to look up the rules for navigating from this
+   * field.
+   *
+   * @returns This field's class.
+   */
+  getClass() {
+    return FieldImage;
+  }
 }
 
 fieldRegistry.register('field_image', FieldImage);

core/field_label.ts

@@ -126,6 +126,18 @@ export class FieldLabel extends Field<string> {
     // the static fromJson method.
     return new this(text, undefined, options);
   }
+
+  /**
+   * Returns this field's class.
+   *
+   * Used by keyboard navigation to look up the rules for navigating from this
+   * field.
+   *
+   * @returns This field's class.
+   */
+  getClass() {
+    return FieldLabel;
+  }
 }
 
 fieldRegistry.register('field_label', FieldLabel);

core/field_number.ts

@@ -341,6 +341,18 @@ export class FieldNumber extends FieldInput<number> {
       options,
     );
   }
+
+  /**
+   * Returns this field's class.
+   *
+   * Used by keyboard navigation to look up the rules for navigating from this
+   * field.
+   *
+   * @returns This field's class.
+   */
+  getClass() {
+    return FieldNumber;
+  }
 }
 
 fieldRegistry.register('field_number', FieldNumber);