chore: merge develop into add-screen-reader

.github/workflows/appengine_deploy.yml

@@ -15,7 +15,7 @@ jobs:
     steps:
       # Checks-out the repository under $GITHUB_WORKSPACE.
       # When running manually this checks out the master branch.
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Prepare demo files
         # Install all dependencies, then copy all the files needed for demos.
@@ -36,13 +36,13 @@ jobs:
     needs: prepare
     steps:
       - name: Download prepared files
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v5
         with:
           name: appengine_files
           path: _deploy/
 
       - name: Deploy to App Engine
-        uses: google-github-actions/deploy-appengine@v2.1.5
+        uses: google-github-actions/deploy-appengine@v2.1.7
         # For parameters see:
         # https://github.com/google-github-actions/deploy-appengine#inputs
         with:

.github/workflows/browser_test.yml

@@ -5,13 +5,15 @@ name: Run browser manually
 
 on:
   workflow_dispatch:
+  schedule:
+    - cron: '0 6 * * 1' # Runs every Monday at 06:00 UTC
 
 permissions:
   contents: read
 
 jobs:
   build:
-    timeout-minutes: 10
+    timeout-minutes: 120
     runs-on: ${{ matrix.os }}
 
     strategy:
@@ -24,7 +26,7 @@ jobs:
         # https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           persist-credentials: false
 

.github/workflows/build.yml

@@ -18,12 +18,12 @@ jobs:
         # TODO (#2114): re-enable osx build.
         # os: [ubuntu-latest, macos-latest]
         os: [ubuntu-latest]
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [18.x, 20.x, 22.x, 24.x]
         # See supported Node.js release schedule at
         # https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           persist-credentials: false
 
@@ -54,7 +54,7 @@ jobs:
     timeout-minutes: 5
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Use Node.js 20.x
         uses: actions/setup-node@v4
@@ -71,7 +71,7 @@ jobs:
     timeout-minutes: 5
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Use Node.js 20.x
         uses: actions/setup-node@v4

.github/workflows/keyboard_plugin_test.yml

@@ -25,12 +25,12 @@ jobs:
 
     steps:
       - name: Checkout core Blockly
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           path: core-blockly
 
       - name: Checkout keyboard navigation plugin
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           repository: 'google/blockly-keyboard-experimentation'
           ref: 'main'

.github/workflows/welcome_new_contributors.yml

@@ -9,7 +9,7 @@ jobs:
     permissions:
       pull-requests: write
     steps:
-      - uses: actions/first-interaction@v2
+      - uses: actions/first-interaction@v3
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           pr-message: >

appengine/app.yaml

@@ -70,6 +70,8 @@ handlers:
 # Blockly files.
 - url: /static
   static_dir: static
+  http_headers:
+    Access-Control-Allow-Origin: "*"
   secure: always
 
 # Storage API.

core/block.ts

@@ -501,22 +501,32 @@ export class Block {
       // Detach this block from the parent's tree.
       this.previousConnection.disconnect();
     }
-    const nextBlock = this.getNextBlock();
-    if (opt_healStack && nextBlock && !nextBlock.isShadow()) {
-      // Disconnect the next statement.
-      const nextTarget = this.nextConnection?.targetConnection ?? null;
-      nextTarget?.disconnect();
-      if (
-        previousTarget &&
-        this.workspace.connectionChecker.canConnect(
-          previousTarget,
-          nextTarget,
-          false,
-        )
-      ) {
-        // Attach the next statement to the previous statement.
-        previousTarget.connect(nextTarget!);
-      }
+
+    if (!opt_healStack) return;
+
+    // Immovable or shadow next blocks need to move along with the block; keep
+    // going until we encounter a normal block or run off the end of the stack.
+    let nextBlock = this.getNextBlock();
+    while (nextBlock && (nextBlock.isShadow() || !nextBlock.isMovable())) {
+      nextBlock = nextBlock.getNextBlock();
+    }
+    if (!nextBlock) return;
+
+    // Disconnect the next statement.
+    const nextTarget =
+      nextBlock.previousConnection?.targetBlock()?.nextConnection
+        ?.targetConnection ?? null;
+    nextTarget?.disconnect();
+    if (
+      previousTarget &&
+      this.workspace.connectionChecker.canConnect(
+        previousTarget,
+        nextTarget,
+        false,
+      )
+    ) {
+      // Attach the next statement to the previous statement.
+      previousTarget.connect(nextTarget!);
     }
   }
 
@@ -1116,7 +1126,7 @@ export class Block {
   /**
    * Returns a generator that provides every field on the block.
    *
-   * @yields A generator that can be used to iterate the fields on the block.
+   * @returns A generator that can be used to iterate the fields on the block.
    */
   *getFields(): Generator<Field, undefined, void> {
     for (const input of this.inputList) {

core/block_svg.ts

@@ -1844,6 +1844,9 @@ export class BlockSvg
   /** See IFocusableNode.onNodeFocus. */
   onNodeFocus(): void {
     this.select();
+    this.workspace.scrollBoundsIntoView(
+      this.getBoundingRectangleWithoutChildren(),
+    );
   }
 
   /** See IFocusableNode.onNodeBlur. */

core/bubbles/bubble.ts

@@ -707,6 +707,10 @@ export abstract class Bubble implements IBubble, ISelectable, IFocusableNode {
   onNodeFocus(): void {
     this.select();
     this.bringToFront();
+    const xy = this.getRelativeToSurfaceXY();
+    const size = this.getSize();
+    const bounds = new Rect(xy.y, xy.y + size.height, xy.x, xy.x + size.width);
+    this.workspace.scrollBoundsIntoView(bounds);
   }
 
   /** See IFocusableNode.onNodeBlur. */

core/clipboard/block_paster.ts

@@ -83,6 +83,9 @@ export function moveBlockToNotConflict(
   block: BlockSvg,
   originalPosition: Coordinate,
 ) {
+  if (block.workspace.RTL) {
+    originalPosition.x = block.workspace.getWidth() - originalPosition.x;
+  }
   const workspace = block.workspace;
   const snapRadius = config.snapRadius;
   const bumpOffset = Coordinate.difference(

core/comments/collapse_comment_bar_button.ts

@@ -10,6 +10,7 @@ import * as dom from '../utils/dom.js';
 import {Svg} from '../utils/svg.js';
 import type {WorkspaceSvg} from '../workspace_svg.js';
 import {CommentBarButton} from './comment_bar_button.js';
+import type {CommentView} from './comment_view.js';
 
 /**
  * Magic string appended to the comment ID to create a unique ID for this button.
@@ -42,8 +43,9 @@ export class CollapseCommentBarButton extends CommentBarButton {
     protected readonly id: string,
     protected readonly workspace: WorkspaceSvg,
     protected readonly container: SVGGElement,
+    protected readonly commentView: CommentView,
   ) {
-    super(id, workspace, container);
+    super(id, workspace, container, commentView);
 
     this.icon = dom.createSvgElement(
       Svg.IMAGE,
@@ -86,14 +88,13 @@ export class CollapseCommentBarButton extends CommentBarButton {
   override performAction(e?: Event) {
     touch.clearTouchIdentifier();
 
-    const comment = this.getParentComment();
-    comment.view.bringToFront();
+    this.getCommentView().bringToFront();
     if (e && e instanceof PointerEvent && browserEvents.isRightButton(e)) {
       e.stopPropagation();
       return;
     }
 
-    comment.setCollapsed(!comment.isCollapsed());
+    this.getCommentView().setCollapsed(!this.getCommentView().isCollapsed());
     this.workspace.hideChaff();
 
     e?.stopPropagation();

core/comments/comment_bar_button.ts

@@ -7,7 +7,7 @@
 import type {IFocusableNode} from '../interfaces/i_focusable_node.js';
 import {Rect} from '../utils/rect.js';
 import type {WorkspaceSvg} from '../workspace_svg.js';
-import type {RenderedWorkspaceComment} from './rendered_workspace_comment.js';
+import type {CommentView} from './comment_view.js';
 
 /**
  * Button displayed on a comment's top bar.
@@ -29,6 +29,7 @@ export abstract class CommentBarButton implements IFocusableNode {
     protected readonly id: string,
     protected readonly workspace: WorkspaceSvg,
     protected readonly container: SVGGElement,
+    protected readonly commentView: CommentView,
   ) {}
 
   /**
@@ -39,17 +40,10 @@ export abstract class CommentBarButton implements IFocusableNode {
   }
 
   /**
-   * Returns the parent comment of this comment bar button.
+   * Returns the parent comment view of this comment bar button.
    */
-  getParentComment(): RenderedWorkspaceComment {
-    const comment = this.workspace.getCommentById(this.id);
-    if (!comment) {
-      throw new Error(
-        `Comment bar button ${this.id} has no corresponding comment`,
-      );
-    }
-
-    return comment;
+  getCommentView(): CommentView {
+    return this.commentView;
   }
 
   /** Adjusts the position of this button within its parent container. */
@@ -93,7 +87,13 @@ export abstract class CommentBarButton implements IFocusableNode {
   }
 
   /** Called when this button's focusable DOM element gains focus. */
-  onNodeFocus() {}
+  onNodeFocus() {
+    const commentView = this.getCommentView();
+    const xy = commentView.getRelativeToSurfaceXY();
+    const size = commentView.getSize();
+    const bounds = new Rect(xy.y, xy.y + size.height, xy.x, xy.x + size.width);
+    commentView.workspace.scrollBoundsIntoView(bounds);
+  }
 
   /** Called when this button's focusable DOM element loses focus. */
   onNodeBlur() {}

core/comments/comment_editor.ts

@@ -10,8 +10,10 @@ import {IFocusableNode} from '../interfaces/i_focusable_node.js';
 import {IFocusableTree} from '../interfaces/i_focusable_tree.js';
 import * as touch from '../touch.js';
 import * as dom from '../utils/dom.js';
+import {Rect} from '../utils/rect.js';
 import {Size} from '../utils/size.js';
 import {Svg} from '../utils/svg.js';
+import * as svgMath from '../utils/svg_math.js';
 import {WorkspaceSvg} from '../workspace_svg.js';
 
 /**
@@ -188,7 +190,16 @@ export class CommentEditor implements IFocusableNode {
   getFocusableTree(): IFocusableTree {
     return this.workspace;
   }
-  onNodeFocus(): void {}
+  onNodeFocus(): void {
+    const bbox = Rect.from(this.foreignObject.getBoundingClientRect());
+    this.workspace.scrollBoundsIntoView(
+      Rect.createFromPoint(
+        svgMath.screenToWsCoordinates(this.workspace, bbox.getOrigin()),
+        bbox.getWidth(),
+        bbox.getHeight(),
+      ),
+    );
+  }
   onNodeBlur(): void {}
   canBeFocused(): boolean {
     if (this.id) return true;

core/comments/comment_view.ts

@@ -102,7 +102,7 @@ export class CommentView implements IRenderedElement {
 
   constructor(
     readonly workspace: WorkspaceSvg,
-    private commentId: string,
+    readonly commentId: string,
   ) {
     this.svgRoot = dom.createSvgElement(Svg.G, {
       'class': 'blocklyComment blocklyEditable blocklyDraggable',
@@ -176,12 +176,18 @@ export class CommentView implements IRenderedElement {
       this.commentId,
       this.workspace,
       topBarGroup,
+      this,
     );
     const foldoutButton = new CollapseCommentBarButton(
       this.commentId,
       this.workspace,
       topBarGroup,
+      this,
     );
+    this.addDisposeListener(() => {
+      deleteButton.dispose();
+      foldoutButton.dispose();
+    });
     const textPreview = dom.createSvgElement(
       Svg.TEXT,
       {
@@ -362,7 +368,10 @@ export class CommentView implements IRenderedElement {
 
     const textPreviewWidth =
       size.width - foldoutSize.getWidth() - deleteSize.getWidth();
-    this.textPreview.setAttribute('x', `${foldoutSize.getWidth()}`);
+    this.textPreview.setAttribute(
+      'x',
+      `${(this.workspace.RTL ? -1 : 1) * foldoutSize.getWidth()}`,
+    );
     this.textPreview.setAttribute(
       'y',
       `${textPreviewMargin + textPreviewSize.height / 2}`,
@@ -612,13 +621,12 @@ export class CommentView implements IRenderedElement {
   /** Disposes of this comment view. */
   dispose() {
     this.disposing = true;
-    this.foldoutButton.dispose();
-    this.deleteButton.dispose();
     dom.removeNode(this.svgRoot);
     // Loop through listeners backwards in case they remove themselves.
     for (let i = this.disposeListeners.length - 1; i >= 0; i--) {
       this.disposeListeners[i]();
     }
+    this.disposeListeners.length = 0;
     this.disposed = true;
   }