feat: Display action menu, containing insert action, for input connections (#242)

* fix: Insert action on stack nodes

* feat: Support action menu on input connections

* feat: Position action menu relative to connection, not block

* chore: format

* fix: Capitalise insert menu option

Author: cpcallen

README.md

@@ -4,7 +4,7 @@ This plugin for Blockly enables keyboard navigation. It is intended to
 experiment with different actions that might help visually impaired and motor
 impaired people navigate a Blockly workspace.
 
-Keyboard navigation and screenreader support are closely coupled. The Blockly 
+Keyboard navigation and screenreader support are closely coupled. The Blockly
 team intends to add screenreader support incrementally in Q2 and Q3 of 2025,
 as we validate the general approach to navigation.
 
@@ -15,35 +15,36 @@ on the wiki](https://github.com/google/blockly-keyboard-experimentation/wiki/Jan
 
 You can explore the current state of the plugin on the [test page](https://google.github.io/blockly-keyboard-experimentation/).
 
-To use keyboard navigation, click on the workspace or press tab until you 
+To use keyboard navigation, click on the workspace or press tab until you
 reach the workspace.
 
-Once browser focus is on the Blockly workspace, you can use arrow keys to 
-move a **cursor** around the workspace. You can use keyboard shortcuts to 
-take actions at the cursor. 
+Once browser focus is on the Blockly workspace, you can use arrow keys to
+move a **cursor** around the workspace. You can use keyboard shortcuts to
+take actions at the cursor.
 
-For instance, you can move the cursor to a 
+For instance, you can move the cursor to a
 dropdown field and press the `Enter` key to edit the field.
 
-The available actions depend on the cursor location. For instance, if the 
+The available actions depend on the cursor location. For instance, if the
 cursor is on a block you can copy it with `Ctrl + C`.
 
 You can open the toolbox by pressing `T` or pressing `Tab` until the toolbox is
 highlighted. Just like the workspace, you can use the arrow keys to move around
 the toolbox and select a block. Pressing `Enter` will place the block at the
 cursor's location on the workspace.
 
-If you don't know which actions are available at your cursor location, you 
+If you don't know which actions are available at your cursor location, you
 can press `Ctrl + Enter` to open the context menu and see a list of actions.
 
 ### Giving feedback
 
 If you use the test page and find a bug, please let us know by opening an issue
 on this repository! Include information about how to reproduce the bug, what
-the bad behaviour was, and what you expected it to do. The Blockly team will 
+the bad behaviour was, and what you expected it to do. The Blockly team will
 triage the bug and add it to the roadmap.
 
 ### Note on @blockly/keyboard-navigation plugin
+
 There is also an [existing keyboard navigation plugin](https://www.npmjs.com/package/@blockly/keyboard-navigation). That plugin may be where
 a finalized version of keyboard navigation eventually lives. But for now, this
 is where experimentation will be done.

src/navigation.ts

@@ -1347,6 +1347,7 @@ export class Navigation {
       // case Blockly.ASTNode.types.INPUT:
       case Blockly.ASTNode.types.NEXT:
       case Blockly.ASTNode.types.PREVIOUS:
+      case Blockly.ASTNode.types.INPUT:
         const connection = node.getLocation() as Blockly.Connection;
         rtl = connection.getSourceBlock().RTL;
 
@@ -1465,7 +1466,8 @@ function fakeEventForNode(node: Blockly.ASTNode): PointerEvent {
       return fakeEventForBlockNode(node);
     case Blockly.ASTNode.types.NEXT:
     case Blockly.ASTNode.types.PREVIOUS:
-      return fakeEventForStackNode(node);
+    case Blockly.ASTNode.types.INPUT:
+      return fakeEventForConnectionNode(node);
     default:
       throw new TypeError('unhandled node type');
   }
@@ -1513,32 +1515,44 @@ function fakeEventForBlockNode(node: Blockly.ASTNode): PointerEvent {
 
 /**
  * Create a fake PointerEvent for opening the action menu for the
- * given ASTNode of type NEXT or PREVIOUS.
+ * given ASTNode of type NEXT, PREVIOUS or INPUT.
  *
  * For now this just puts the action menu in the same place as the
  * context menu for the source block.
  *
  * @param node The node to open the action menu for.
  * @returns A synthetic pointerdown PointerEvent.
  */
-function fakeEventForStackNode(node: Blockly.ASTNode): PointerEvent {
+function fakeEventForConnectionNode(node: Blockly.ASTNode): PointerEvent {
   if (
     node.getType() !== Blockly.ASTNode.types.NEXT &&
-    node.getType() !== Blockly.ASTNode.types.PREVIOUS
+    node.getType() !== Blockly.ASTNode.types.PREVIOUS &&
+    node.getType() !== Blockly.ASTNode.types.INPUT
   ) {
-    throw new TypeError(
-      'can only create PointerEvents for NEXT / PREVIOUS nodes',
-    );
+    throw new TypeError('can only create PointerEvents for connection nodes');
   }
 
   const connection = node.getLocation() as Blockly.Connection;
+  const block = connection.getSourceBlock();
+  const workspace = block.workspace as Blockly.WorkspaceSvg;
 
-  return fakeEventForBlockNode(
-    new Blockly.ASTNode(
-      Blockly.ASTNode.types.BLOCK,
-      connection.getSourceBlock(),
-    ),
+  if (typeof connection.x !== 'number') {
+    // No coordinates for connection?  Fall back to the parent block.
+    const blockNode = new Blockly.ASTNode(Blockly.ASTNode.types.BLOCK, block);
+    return fakeEventForBlockNode(blockNode);
+  }
+  const connectionWSCoords = new Blockly.utils.Coordinate(
+    connection.x,
+    connection.y,
+  );
+  const connectionScreenCoords = Blockly.utils.svgMath.wsToScreenCoordinates(
+    workspace,
+    connectionWSCoords,
   );
+  return new PointerEvent('pointerdown', {
+    clientX: connectionScreenCoords.x + 5,
+    clientY: connectionScreenCoords.y + 5,
+  });
 }
 
 /**

src/navigation_controller.ts

@@ -18,6 +18,7 @@ import {
   BlockSvg,
   comments,
   Connection,
+  ConnectionType,
   ContextMenuRegistry,
   ICopyData,
   ShortcutRegistry,
@@ -727,20 +728,18 @@ export class NavigationController {
   protected registerInsertAction() {
     const insertAboveAction: ContextMenuRegistry.RegistryItem = {
       displayText: (scope: Scope) =>
-        scope.block
-          ? 'Insert block above'
-          : scope.connection
-            ? 'Insert block here'
-            : 'Insert',
+        scope.block?.previousConnection ? 'Insert Block Above' : 'Insert Block',
       preconditionFn: (scope: Scope) => {
         const block = scope.block ?? scope.connection?.getSourceBlock();
         const ws = block?.workspace as WorkspaceSvg | null;
         if (!ws) return 'hidden';
 
         return this.canCurrentlyEdit(ws) ? 'enabled' : 'hidden';
       },
-      callback: (scope) => {
-        const ws = scope.block?.workspace;
+      callback: (scope: Scope) => {
+        let ws =
+          scope.block?.workspace ??
+          (scope.connection?.getSourceBlock().workspace as WorkspaceSvg);
         if (!ws) return false;
 
         if (this.navigation.getState(ws) === Constants.STATE.WORKSPACE) {