fix: nest trashcan and zoom as separate focus trees

Author: mikeharv

packages/blockly/core/blockly.ts

@@ -442,6 +442,7 @@ export * from './keyboard_nav/navigation_policies/workspace_comment_navigation_p
 export * from './keyboard_nav/navigation_policies/workspace_navigation_policy.js';
 export * from './keyboard_nav/navigators/flyout_navigator.js';
 export * from './keyboard_nav/navigators/navigator.js';
+export * from './keyboard_nav/navigators/workspace_control_navigator.js';
 export * from './toast.js';
 
 // Re-export submodules that no longer declareLegacyNamespace.

packages/blockly/core/keyboard_nav/navigators/workspace_control_navigator.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2026 Raspberry Pi Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {Navigator} from './navigator.js';
+
+/**
+ * No-op Navigator for single-node workspace controls (trashcan, zoom).
+ */
+export class WorkspaceControlNavigator extends Navigator {
+  override getNextNode() {
+    return null;
+  }
+
+  override getPreviousNode() {
+    return null;
+  }
+
+  override getInNode() {
+    return null;
+  }
+
+  override getOutNode() {
+    return null;
+  }
+
+  override navigateStacks() {
+    return null;
+  }
+}

packages/blockly/core/sprites.ts

@@ -5,7 +5,7 @@
  */
 
 /**
- * Contains the path to a single png tat holds the images for the trashcan
+ * Contains the path to a single svg that holds the images for the trashcan
  * as well as the zoom controls.
  */
 export const SPRITE = {

packages/blockly/core/trashcan.ts

@@ -26,8 +26,10 @@ import type {IComponent} from './interfaces/i_component';
 import type {IDraggable} from './interfaces/i_draggable.js';
 import type {IFlyout} from './interfaces/i_flyout.js';
 import type {IFocusableNode} from './interfaces/i_focusable_node.js';
+import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
 import type {IPositionable} from './interfaces/i_positionable.js';
 import {KeyboardMover} from './keyboard_nav/keyboard_mover.js';
+import {WorkspaceControlNavigator} from './keyboard_nav/navigators/workspace_control_navigator.js';
 import {keyboardNavigationController} from './keyboard_navigation_controller.js';
 import type {UiMetrics} from './metrics_manager.js';
 import {Msg} from './msg.js';
@@ -50,8 +52,14 @@ import type {WorkspaceSvg} from './workspace_svg.js';
  */
 export class Trashcan
   extends DeleteArea
-  implements IAutoHideable, IPositionable, IFocusableNode, IComponent
+  implements
+    IAutoHideable,
+    IPositionable,
+    IFocusableNode,
+    IFocusableTree,
+    IComponent
 {
+  private readonly navigator = new WorkspaceControlNavigator();
   /**
    * The id for this component that is used to register with the
    * ComponentManager.
@@ -137,17 +145,25 @@ export class Trashcan
    */
   createDom(): SVGElement {
     /* Here's the markup that will be generated:
-        <g class="blocklyTrash">
-          <clippath id="blocklyTrashBodyClipPath837493">
-            <rect width="47" height="45" y="15"></rect>
-          </clippath>
-          <image width="64" height="92" y="-32" xlink:href="media/sprites.png"
-              clip-path="url(#blocklyTrashBodyClipPath837493)"></image>
-          <clippath id="blocklyTrashLidClipPath837493">
-            <rect width="47" height="15"></rect>
-          </clippath>
-          <image width="84" height="92" y="-32" xlink:href="media/sprites.png"
-              clip-path="url(#blocklyTrashLidClipPath837493)"></image>
+        <g role="button" class="blocklyTrash" tabindex="0" id="blockly-0"
+            aria-label="Trash, currently empty" aria-disabled="true">
+          <rect width="55" height="68" x="-4" y="-4" rx="2" ry="2"
+              fill="none" class="blocklyFocusRing"></rect>
+          <clipPath id="blocklyTrashBodyClipPath837493">
+            <rect width="47" height="44" y="16"></rect>
+          </clipPath>
+          <image width="96" x="0" height="124" y="-32"
+              clip-path="url(#blocklyTrashBodyClipPath837493)"
+              xlink:href="../media/sprites.svg"></image>
+          <clipPath id="blocklyTrashLidClipPath837493">
+            <rect width="47" height="16"></rect>
+          </clipPath>
+          <g role="none" class="blocklyTrashLid">
+            <svg role="none" viewBox="0 32 47 16" width="47" height="16">
+              <image width="96" height="124"
+                  href="../media/sprites.svg"></image>
+            </svg>
+          </g>
         </g>
         */
     this.svgGroup = dom.createSvgElement(Svg.G, {
@@ -256,6 +272,7 @@ export class Trashcan
       this.blockMouseDownWhenOpenable,
     );
     browserEvents.bind(this.svgGroup, 'pointerup', this, this.click);
+    getFocusManager().registerTree(this, false);
     return this.svgGroup;
   }
 
@@ -275,7 +292,6 @@ export class Trashcan
         ComponentManager.Capability.DELETE_AREA,
         ComponentManager.Capability.DRAG_TARGET,
         ComponentManager.Capability.POSITIONABLE,
-        ComponentManager.Capability.FOCUSABLE,
       ],
     });
     this.initialized = true;
@@ -287,6 +303,9 @@ export class Trashcan
    * Unlink from all DOM elements to prevent memory leaks.
    */
   dispose() {
+    if (getFocusManager().isRegistered(this)) {
+      getFocusManager().unregisterTree(this);
+    }
     this.workspace.getComponentManager().removeComponent('trashcan');
     if (this.svgGroup) {
       dom.removeNode(this.svgGroup);
@@ -662,7 +681,7 @@ export class Trashcan
   }
 
   getFocusableTree() {
-    return this.workspace;
+    return this;
   }
 
   onNodeFocus() {}
@@ -672,6 +691,37 @@ export class Trashcan
     return !!this.svgGroup;
   }
 
+  /** See IFocusableTree.getRootFocusableNode. */
+  getRootFocusableNode(): IFocusableNode {
+    return this;
+  }
+
+  /** See IFocusableTree.getRestoredFocusableNode. */
+  getRestoredFocusableNode(): IFocusableNode | null {
+    return this;
+  }
+
+  /** See IFocusableTree.getNestedTrees. */
+  getNestedTrees(): IFocusableTree[] {
+    return [];
+  }
+
+  /** See IFocusableTree.lookUpFocusableNode. */
+  lookUpFocusableNode(): IFocusableNode | null {
+    return null;
+  }
+
+  /** See IFocusableTree.onTreeFocus. */
+  onTreeFocus(): void {}
+
+  /** See IFocusableTree.onTreeBlur. */
+  onTreeBlur(): void {}
+
+  /** See IFocusableTree.getNavigator. */
+  getNavigator(): WorkspaceControlNavigator {
+    return this.navigator;
+  }
+
   performAction() {
     this.click();
   }

packages/blockly/core/workspace_svg.ts

@@ -953,6 +953,7 @@ export class WorkspaceSvg
     }
     if (this.zoomControls_) {
       this.zoomControls_.dispose();
+      this.zoomControls_ = null;
     }
 
     if (this.audioManager) {
@@ -1016,7 +1017,7 @@ export class WorkspaceSvg
   addTrashcan() {
     this.trashcan = WorkspaceSvg.newTrashcan(this);
     const svgTrashcan = this.trashcan.createDom();
-    this.svgGroup_.insertBefore(svgTrashcan, this.getCanvas());
+    this.svgGroup_.appendChild(svgTrashcan);
   }
 
   /**
@@ -2875,18 +2876,25 @@ export class WorkspaceSvg
 
   /** See IFocusableTree.getNestedTrees. */
   getNestedTrees(): Array<IFocusableTree> {
-    const nestedWorkspaces = common
+    const nestedTrees: IFocusableTree[] = common
       .getAllWorkspaces()
       .filter(
         (w) => w.isMutator && w.options.parentWorkspace === this,
       ) as WorkspaceSvg[];
 
     const ownFlyout = this.getFlyout(true);
     if (ownFlyout) {
-      nestedWorkspaces.push(ownFlyout.getWorkspace());
+      nestedTrees.push(ownFlyout.getWorkspace());
     }
 
-    return nestedWorkspaces;
+    if (this.trashcan) {
+      nestedTrees.push(this.trashcan);
+    }
+    if (this.zoomControls_) {
+      nestedTrees.push(...this.zoomControls_.getFocusableControls());
+    }
+
+    return nestedTrees;
   }
 
   /**

packages/blockly/core/zoom_controls.ts

@@ -16,9 +16,11 @@ import {ComponentManager} from './component_manager.js';
 import * as Css from './css.js';
 import {EventType} from './events/type.js';
 import * as eventUtils from './events/utils.js';
-import type {IComponent} from './interfaces/i_component.js';
-import {IFocusableNode} from './interfaces/i_focusable_node.js';
+import {getFocusManager} from './focus_manager.js';
+import type {IFocusableNode} from './interfaces/i_focusable_node.js';
+import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
 import type {IPositionable} from './interfaces/i_positionable.js';
+import {WorkspaceControlNavigator} from './keyboard_nav/navigators/workspace_control_navigator.js';
 import type {UiMetrics} from './metrics_manager.js';
 import {Msg} from './msg.js';
 import * as uiPosition from './positionable_helpers.js';
@@ -37,9 +39,10 @@ import type {WorkspaceSvg} from './workspace_svg.js';
  *
  * @internal
  */
-abstract class ZoomControl implements IFocusableNode, IComponent {
+abstract class ZoomControl implements IFocusableNode, IFocusableTree {
   private pointerDownHandler: browserEvents.Data;
   id: string;
+  private readonly navigator = new WorkspaceControlNavigator();
 
   constructor(
     protected workspace: WorkspaceSvg,
@@ -56,6 +59,7 @@ abstract class ZoomControl implements IFocusableNode, IComponent {
 
     this.id = getNextUniqueId();
     this.group.id = this.id;
+    getFocusManager().registerTree(this, false);
   }
 
   /**
@@ -90,7 +94,7 @@ abstract class ZoomControl implements IFocusableNode, IComponent {
   }
 
   getFocusableTree() {
-    return this.workspace;
+    return this;
   }
 
   onNodeFocus() {}
@@ -101,9 +105,43 @@ abstract class ZoomControl implements IFocusableNode, IComponent {
     return true;
   }
 
-  abstract performAction(_e: Event): void;
+  /** See IFocusableTree.getRootFocusableNode. */
+  getRootFocusableNode(): IFocusableNode {
+    return this;
+  }
+
+  /** See IFocusableTree.getRestoredFocusableNode. */
+  getRestoredFocusableNode(): IFocusableNode | null {
+    return this;
+  }
+
+  /** See IFocusableTree.getNestedTrees. */
+  getNestedTrees(): IFocusableTree[] {
+    return [];
+  }
+
+  /** See IFocusableTree.lookUpFocusableNode. */
+  lookUpFocusableNode(): IFocusableNode | null {
+    return null;
+  }
+
+  /** See IFocusableTree.onTreeFocus. */
+  onTreeFocus(): void {}
+
+  /** See IFocusableTree.onTreeBlur. */
+  onTreeBlur(): void {}
+
+  /** See IFocusableTree.getNavigator. */
+  getNavigator(): WorkspaceControlNavigator {
+    return this.navigator;
+  }
+
+  abstract performAction(e: Event): void;
 
   dispose() {
+    if (getFocusManager().isRegistered(this)) {
+      getFocusManager().unregisterTree(this);
+    }
     browserEvents.unbind(this.pointerDownHandler);
   }
 }
@@ -380,23 +418,26 @@ export class ZoomControls implements IPositionable {
       );
     }
 
-    for (const control of [
-      this.zoomOutControl,
-      this.zoomInControl,
-      this.zoomResetControl,
-    ]) {
-      if (!control) continue;
-
-      this.workspace.getComponentManager().addComponent({
-        component: control,
-        weight: ComponentManager.ComponentWeight.ZOOM_CONTROLS_WEIGHT,
-        capabilities: [ComponentManager.Capability.FOCUSABLE],
-      });
-    }
-
     return this.svgGroup;
   }
 
+  /**
+   * Returns the individual zoom buttons as focus trees for nesting under the
+   * workspace.
+   *
+   * @internal
+   */
+  getFocusableControls(): IFocusableTree[] {
+    const controls: IFocusableTree[] = [
+      this.zoomOutControl!,
+      this.zoomInControl!,
+    ];
+    if (this.zoomResetControl) {
+      controls.push(this.zoomResetControl);
+    }
+    return controls;
+  }
+
   /** Initializes the zoom controls. */
   init() {
     this.workspace.getComponentManager().addComponent({
@@ -413,12 +454,12 @@ export class ZoomControls implements IPositionable {
    */
   dispose() {
     this.workspace.getComponentManager().removeComponent('zoomControls');
-    if (this.svgGroup) {
-      dom.removeNode(this.svgGroup);
-    }
     this.zoomInControl?.dispose();
     this.zoomOutControl?.dispose();
     this.zoomResetControl?.dispose();
+    if (this.svgGroup) {
+      dom.removeNode(this.svgGroup);
+    }
   }
 
   /**