feat: use keyboard mode tracker from core (#555)

* feat: use keyboard mode tracker from core

* feat: enable keyboard mode for toolbox shortcut

* chore: add tests

* fix: rename test method after rebase

* chore: fix tests

* chore: try to fix tests

Author: maribethb

src/actions/arrow_navigation.ts

@@ -4,7 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ShortcutRegistry, utils as BlocklyUtils, Field} from 'blockly/core';
+import {
+  ShortcutRegistry,
+  utils as BlocklyUtils,
+  Field,
+  keyboardNavigationController,
+} from 'blockly/core';
 
 import type {Toolbox, WorkspaceSvg} from 'blockly/core';
 
@@ -122,6 +127,7 @@ export class ArrowNavigation {
         preconditionFn: (workspace) =>
           this.navigation.canCurrentlyNavigate(workspace),
         callback: (workspace, e, shortcut) => {
+          keyboardNavigationController.setIsActive(true);
           return workspace.RTL
             ? navigateOut(workspace, e, shortcut)
             : navigateIn(workspace, e, shortcut);
@@ -135,6 +141,7 @@ export class ArrowNavigation {
         preconditionFn: (workspace) =>
           this.navigation.canCurrentlyNavigate(workspace),
         callback: (workspace, e, shortcut) => {
+          keyboardNavigationController.setIsActive(true);
           return workspace.RTL
             ? navigateIn(workspace, e, shortcut)
             : navigateOut(workspace, e, shortcut);
@@ -148,6 +155,7 @@ export class ArrowNavigation {
         preconditionFn: (workspace) =>
           this.navigation.canCurrentlyNavigate(workspace),
         callback: (workspace, e, shortcut) => {
+          keyboardNavigationController.setIsActive(true);
           const toolbox = workspace.getToolbox() as Toolbox;
           const flyout = workspace.getFlyout();
           let isHandled = false;
@@ -205,6 +213,7 @@ export class ArrowNavigation {
         preconditionFn: (workspace) =>
           this.navigation.canCurrentlyNavigate(workspace),
         callback: (workspace, e, shortcut) => {
+          keyboardNavigationController.setIsActive(true);
           const flyout = workspace.getFlyout();
           const toolbox = workspace.getToolbox() as Toolbox;
           let isHandled = false;

src/actions/disconnect.ts

@@ -11,6 +11,7 @@ import {
   utils as BlocklyUtils,
   Connection,
   ConnectionType,
+  keyboardNavigationController,
 } from 'blockly';
 import * as Constants from '../constants';
 import type {WorkspaceSvg} from 'blockly';
@@ -56,6 +57,7 @@ export class DisconnectAction {
       preconditionFn: (workspace) =>
         this.navigation.canCurrentlyEdit(workspace),
       callback: (workspace) => {
+        keyboardNavigationController.setIsActive(true);
         switch (this.navigation.getState(workspace)) {
           case Constants.STATE.WORKSPACE:
             this.disconnectBlocks(workspace);

src/actions/edit.ts

@@ -4,7 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ContextMenuRegistry, LineCursor, Msg} from 'blockly';
+import {
+  ContextMenuRegistry,
+  LineCursor,
+  Msg,
+  keyboardNavigationController,
+} from 'blockly';
 import {Navigation} from 'src/navigation';
 import {getShortActionShortcut} from '../shortcut_formatting';
 import * as Constants from '../constants';
@@ -67,6 +72,7 @@ export class EditAction {
         return cursor.atEndOfLine() ? 'hidden' : 'enabled';
       },
       callback: (scope: ContextMenuRegistry.Scope) => {
+        keyboardNavigationController.setIsActive(true);
         const workspace = scope.block?.workspace;
         if (!workspace) return false;
         workspace.getCursor()?.in();

src/actions/move.ts

@@ -11,6 +11,7 @@ import {
   ShortcutRegistry,
   utils,
   WorkspaceSvg,
+  keyboardNavigationController,
 } from 'blockly';
 import {Direction} from '../drag_direction';
 import {Mover} from './mover';
@@ -40,6 +41,7 @@ export class MoveActions {
           return !!startBlock && this.mover.canMove(workspace, startBlock);
         },
         callback: (workspace) => {
+          keyboardNavigationController.setIsActive(true);
           const startBlock = this.getCurrentBlock(workspace);
           return (
             !!startBlock && this.mover.startMove(workspace, startBlock, null)

src/actions/ws_movement.ts

@@ -4,7 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ShortcutRegistry, utils as BlocklyUtils} from 'blockly';
+import {
+  ShortcutRegistry,
+  utils as BlocklyUtils,
+  keyboardNavigationController,
+} from 'blockly';
 import * as Constants from '../constants';
 import type {WorkspaceSvg} from 'blockly';
 import {Navigation} from 'src/navigation';
@@ -66,7 +70,10 @@ export class WorkspaceMovement {
       name: Constants.SHORTCUT_NAMES.CREATE_WS_CURSOR,
       preconditionFn: (workspace) =>
         this.navigation.canCurrentlyEdit(workspace),
-      callback: (workspace) => this.createWSCursor(workspace),
+      callback: (workspace) => {
+        keyboardNavigationController.setIsActive(true);
+        return this.createWSCursor(workspace);
+      },
       keyCodes: [KeyCodes.W],
     },
   ];

src/index.ts

@@ -7,7 +7,6 @@
 import * as Blockly from 'blockly/core';
 import {NavigationController} from './navigation_controller';
 import {enableBlocksOnDrag} from './disabled_blocks';
-import {InputModeTracker} from './input_mode_tracker';
 
 /** Plugin for keyboard navigation. */
 export class KeyboardNavigation {
@@ -20,11 +19,6 @@ export class KeyboardNavigation {
   /** Cursor for the main workspace. */
   private cursor: Blockly.LineCursor;
 
-  /**
-   * Input mode tracking.
-   */
-  private inputModeTracker: InputModeTracker;
-
   /**
    * Focus ring in the workspace.
    */
@@ -54,7 +48,6 @@ export class KeyboardNavigation {
     this.navigationController.init();
     this.navigationController.addWorkspace(workspace);
     this.navigationController.enable(workspace);
-    this.inputModeTracker = new InputModeTracker(workspace);
 
     this.cursor = new Blockly.LineCursor(workspace);
 
@@ -124,7 +117,6 @@ export class KeyboardNavigation {
     // Remove the event listener that enables blocks on drag
     this.workspace.removeChangeListener(enableBlocksOnDrag);
     this.navigationController.dispose();
-    this.inputModeTracker.dispose();
   }
 
   /**

src/input_mode_tracker.ts

@@ -18,6 +18,7 @@ import {
   Toolbox,
   utils as BlocklyUtils,
   WorkspaceSvg,
+  keyboardNavigationController,
 } from 'blockly/core';
 
 import * as Constants from './constants';
@@ -198,6 +199,7 @@ export class NavigationController {
       preconditionFn: (workspace) =>
         !workspace.isDragging() && this.navigation.canCurrentlyEdit(workspace),
       callback: (workspace) => {
+        keyboardNavigationController.setIsActive(true);
         switch (this.navigation.getState(workspace)) {
           case Constants.STATE.WORKSPACE:
             Blockly.getFocusManager().focusTree(

src/navigation_controller.ts

@@ -43,6 +43,7 @@ suite('Keyboard navigation on Blocks', function () {
 
   test('Selected block', async function () {
     await tabNavigateToWorkspace(this.browser);
+    await this.browser.pause(PAUSE_TIME);
 
     await keyDown(this.browser, 14);
 

test/webdriverio/test/basic_test.ts

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as chai from 'chai';
+import * as Blockly from 'blockly';
+import {
+  focusOnBlock,
+  testSetup,
+  testFileLocations,
+  PAUSE_TIME,
+  getBlockElementById,
+  tabNavigateToWorkspace,
+} from './test_setup.js';
+import {Key} from 'webdriverio';
+
+const isKeyboardNavigating = function (browser: WebdriverIO.Browser) {
+  return browser.execute(() => {
+    return document.body.classList.contains('blocklyKeyboardNavigation');
+  });
+};
+
+suite(
+  'Keyboard navigation mode set on mouse or keyboard interaction',
+  function () {
+    // Setting timeout to unlimited as these tests take a longer time to run than most mocha tests
+    this.timeout(0);
+
+    setup(async function () {
+      // Reload the page between tests
+      this.browser = await testSetup(testFileLocations.NAVIGATION_TEST_BLOCKS);
+
+      await this.browser.pause(PAUSE_TIME);
+
+      // Reset the keyboard navigation state between tests.
+      await this.browser.execute(() => {
+        Blockly.keyboardNavigationController.setIsActive(false);
+      });
+
+      // Start with the workspace focused.
+      await tabNavigateToWorkspace(this.browser);
+    });
+
+    test('T to open toolbox enables keyboard mode', async function () {
+      await this.browser.pause(PAUSE_TIME);
+      await this.browser.keys('t');
+      await this.browser.pause(PAUSE_TIME);
+
+      chai.assert.isTrue(await isKeyboardNavigating(this.browser));
+    });
+
+    test('M for move mode enables keyboard mode', async function () {
+      await focusOnBlock(this.browser, 'controls_if_2');
+      await this.browser.pause(PAUSE_TIME);
+      await this.browser.keys('m');
+
+      chai.assert.isTrue(await isKeyboardNavigating(this.browser));
+    });
+
+    test('W for workspace cursor enables keyboard mode', async function () {
+      await this.browser.pause(PAUSE_TIME);
+      await this.browser.keys('w');
+      await this.browser.pause(PAUSE_TIME);
+
+      chai.assert.isTrue(await isKeyboardNavigating(this.browser));
+    });
+
+    test('X to disconnect enables keyboard mode', async function () {
+      await focusOnBlock(this.browser, 'controls_if_2');
+      await this.browser.pause(PAUSE_TIME);
+      await this.browser.keys('x');
+      await this.browser.pause(PAUSE_TIME);
+
+      chai.assert.isTrue(await isKeyboardNavigating(this.browser));
+    });
+
+    test('Copy does not change keyboard mode state', async function () {
+      // Make sure we're on a copyable block so that copy occurs
+      await focusOnBlock(this.browser, 'controls_if_2');
+      await this.browser.pause(PAUSE_TIME);
+      await this.browser.keys(Key.Ctrl);
+      await this.browser.keys('c');
+      await this.browser.keys(Key.Ctrl); // release ctrl key
+      await this.browser.pause(PAUSE_TIME);
+
+      chai.assert.isFalse(await isKeyboardNavigating(this.browser));
+
+      this.browser.execute(() => {
+        Blockly.keyboardNavigationController.setIsActive(true);
+      });
+
+      await this.browser.pause(PAUSE_TIME);
+      await this.browser.keys(Key.Ctrl);
+      await this.browser.keys('c');
+      await this.browser.keys(Key.Ctrl); // release ctrl key
+      await this.browser.pause(PAUSE_TIME);
+
+      chai.assert.isTrue(await isKeyboardNavigating(this.browser));
+    });
+
+    test('Delete does not change keyboard mode state', async function () {
+      // Make sure we're on a deletable block so that delete occurs
+      await focusOnBlock(this.browser, 'controls_if_2');
+      await this.browser.pause(PAUSE_TIME);
+      await this.browser.keys(Key.Backspace);
+      await this.browser.pause(PAUSE_TIME);
+
+      chai.assert.isFalse(await isKeyboardNavigating(this.browser));
+
+      this.browser.execute(() => {
+        Blockly.keyboardNavigationController.setIsActive(true);
+      });
+
+      // Focus a different deletable block
+      await focusOnBlock(this.browser, 'controls_if_1');
+      await this.browser.pause(PAUSE_TIME);
+      await this.browser.keys(Key.Backspace);
+      await this.browser.pause(PAUSE_TIME);
+
+      chai.assert.isTrue(await isKeyboardNavigating(this.browser));
+    });
+
+    test('Right clicking a block disables keyboard mode', async function () {
+      await this.browser.execute(() => {
+        Blockly.keyboardNavigationController.setIsActive(true);
+      });
+
+      await this.browser.pause(PAUSE_TIME);
+      // Right click a block
+      const element = await getBlockElementById(this.browser, 'controls_if_1');
+      await element.click({button: 'right'});
+      await this.browser.pause(PAUSE_TIME);
+
+      chai.assert.isFalse(await isKeyboardNavigating(this.browser));
+    });
+
+    test('Dragging a block with mouse disables keyboard mode', async function () {
+      await this.browser.execute(() => {
+        Blockly.keyboardNavigationController.setIsActive(true);
+      });
+
+      await this.browser.pause(PAUSE_TIME);
+      // Drag a block
+      const element = await getBlockElementById(this.browser, 'controls_if_1');
+      await element.dragAndDrop({x: 10, y: 10});
+      await this.browser.pause(PAUSE_TIME);
+
+      chai.assert.isFalse(await isKeyboardNavigating(this.browser));
+    });
+  },
+);