feat: Add support for keyboard navigation in block comments. (#668)

* feat: Add styling for focused bubbles.

* fix: Navigate into bubbles of all bubble-having icons.

* chore: Add tests for block comment navigation.

* fix: Fix bug that could cause focus to move on Enter when dismissing a bubble.

* fix: Fix timing issue with navigating into bubbles.

Author: gonfunko

src/actions/enter.ts

@@ -18,6 +18,7 @@ import {
   renderManagement,
   comments,
   getFocusManager,
+  hasBubble,
 } from 'blockly/core';
 
 import type {Block} from 'blockly/core';
@@ -163,13 +164,11 @@ export class EnterAction {
       // opening a bubble of some sort. We then need to wait for the bubble to
       // appear before attempting to navigate into it.
       curNode.onClick();
-      // This currently only works for MutatorIcons.
-      // See icon_navigation_policy.
-      if (curNode instanceof icons.MutatorIcon) {
-        renderManagement.finishQueuedRenders().then(() => {
+      renderManagement.finishQueuedRenders().then(() => {
+        if (hasBubble(curNode) && curNode.bubbleIsVisible()) {
           cursor.in();
-        });
-      }
+        }
+      });
       return true;
     } else if (curNode instanceof comments.CommentBarButton) {
       curNode.performAction();

src/index.ts

@@ -296,6 +296,14 @@ export class KeyboardNavigation {
     stroke: var(--blockly-active-node-color);
     stroke-width: var(--blockly-selection-width);
   }
+  
+  /* The workspace itself is the active node. */
+  .blocklyKeyboardNavigation
+    .blocklyBubble.blocklyActiveFocus
+    .blocklyDraggable {
+    stroke: var(--blockly-active-node-color);
+    stroke-width: var(--blockly-selection-width);
+  }
 `);
 
     // Keyboard-nav-specific styling for the context menu.

test/webdriverio/test/block_comment_test.ts

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as chai from 'chai';
+import * as Blockly from 'blockly';
+import {
+  focusOnBlock,
+  getCurrentFocusNodeId,
+  testSetup,
+  sendKeyAndWait,
+  testFileLocations,
+  keyRight,
+} from './test_setup.js';
+import {Key} from 'webdriverio';
+
+suite('Block comment navigation', function () {
+  // Setting timeout to unlimited as these tests take a longer time to run than most mocha test
+  this.timeout(0);
+
+  // Setup Selenium for all of the tests
+  setup(async function () {
+    this.browser = await testSetup(testFileLocations.NAVIGATION_TEST_BLOCKS);
+    await this.browser.execute(() => {
+      Blockly.getMainWorkspace()
+        .getBlockById('p5_canvas_1')
+        ?.setCommentText('test comment');
+    });
+  });
+
+  test('Activating a block comment icon focuses the comment', async function () {
+    await focusOnBlock(this.browser, 'p5_canvas_1');
+    await keyRight(this.browser);
+    await sendKeyAndWait(this.browser, Key.Enter);
+    const focusedNodeId = await getCurrentFocusNodeId(this.browser);
+    chai.assert.equal(focusedNodeId, 'blockly-2s_comment_textarea_');
+  });
+
+  test('Escape from a focused comment focuses its bubble', async function () {
+    await focusOnBlock(this.browser, 'p5_canvas_1');
+    await keyRight(this.browser);
+    await sendKeyAndWait(this.browser, Key.Enter);
+    await sendKeyAndWait(this.browser, Key.Escape);
+    const bubbleFocused = await this.browser.execute(() => {
+      return (
+        Blockly.getFocusManager().getFocusedNode() ===
+        Blockly.getMainWorkspace()
+          .getBlockById('p5_canvas_1')
+          ?.getIcon(Blockly.icons.IconType.COMMENT)
+          ?.getBubble()
+      );
+    });
+    chai.assert.isTrue(bubbleFocused);
+  });
+
+  test('Double Escape from a focused comment closes its bubble', async function () {
+    await focusOnBlock(this.browser, 'p5_canvas_1');
+    await keyRight(this.browser);
+    await sendKeyAndWait(this.browser, Key.Enter);
+    await sendKeyAndWait(this.browser, Key.Escape);
+    await sendKeyAndWait(this.browser, Key.Escape);
+    const bubbleVisible = await this.browser.execute(() => {
+      return Blockly.getMainWorkspace()
+        .getBlockById('p5_canvas_1')
+        ?.getIcon(Blockly.icons.IconType.COMMENT)
+        ?.bubbleIsVisible();
+    });
+    chai.assert.isFalse(bubbleVisible);
+  });
+
+  test('Double Escape from a focused comment focuses the comment icon', async function () {
+    await focusOnBlock(this.browser, 'p5_canvas_1');
+    await keyRight(this.browser);
+    await sendKeyAndWait(this.browser, Key.Enter);
+    await sendKeyAndWait(this.browser, Key.Escape);
+    await sendKeyAndWait(this.browser, Key.Escape);
+    const commentIconFocused = await this.browser.execute(() => {
+      return (
+        Blockly.getFocusManager().getFocusedNode() ===
+        Blockly.getMainWorkspace()
+          .getBlockById('p5_canvas_1')
+          ?.getIcon(Blockly.icons.IconType.COMMENT)
+      );
+    });
+    chai.assert.isTrue(commentIconFocused);
+  });
+
+  test('Block comments can be edited', async function () {
+    await focusOnBlock(this.browser, 'p5_canvas_1');
+    await keyRight(this.browser);
+    await sendKeyAndWait(this.browser, Key.Enter);
+    await sendKeyAndWait(this.browser, 'Hello world');
+    await sendKeyAndWait(this.browser, Key.Escape);
+    const commentText = await this.browser.execute(() => {
+      return Blockly.getMainWorkspace()
+        .getBlockById('p5_canvas_1')
+        ?.getCommentText();
+    });
+    chai.assert.equal(commentText, 'test commentHello world');
+  });
+});