From ae055a460d71637b77809455454b4550207f9d4b Mon Sep 17 00:00:00 2001
From: Michael Harvey <43474485+mikeharv@users.noreply.github.com>
Date: Mon, 11 May 2026 19:40:04 -0400
Subject: [PATCH] fix!: Flyout follows toolbox in DOM (#9849)

---
 packages/blockly/core/inject.ts              |  2 +-
 packages/blockly/core/toolbox/toolbox.ts     |  2 +-
 packages/blockly/tests/mocha/toolbox_test.js | 18 ++++++++++++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/blockly/core/inject.ts b/packages/blockly/core/inject.ts
index 8afe54181..cc6165fe9 100644
--- a/packages/blockly/core/inject.ts
+++ b/packages/blockly/core/inject.ts
@@ -177,7 +177,7 @@ function createMainWorkspace(
   if (!wsOptions.hasCategories && wsOptions.languageTree) {
     // Add flyout as an <svg> that is a sibling of the workspace SVG.
     const flyout = mainWorkspace.addFlyout(Svg.SVG);
-    dom.insertAfter(flyout, svg);
+    injectionDiv.insertBefore(flyout, svg);
   }
   if (wsOptions.hasTrashcan) {
     mainWorkspace.addTrashcan();
diff --git a/packages/blockly/core/toolbox/toolbox.ts b/packages/blockly/core/toolbox/toolbox.ts
index d87500fc6..065202d02 100644
--- a/packages/blockly/core/toolbox/toolbox.ts
+++ b/packages/blockly/core/toolbox/toolbox.ts
@@ -156,8 +156,8 @@ export class Toolbox
 
     this.HtmlDiv = this.createDom_(this.workspace_);
     const flyoutDom = this.flyout.createDom('svg');
+    workspace.getInjectionDiv().insertBefore(flyoutDom, svg);
     dom.addClass(flyoutDom, 'blocklyToolboxFlyout');
-    dom.insertAfter(flyoutDom, svg);
     this.setVisible(true);
     this.flyout.init(workspace);
 
diff --git a/packages/blockly/tests/mocha/toolbox_test.js b/packages/blockly/tests/mocha/toolbox_test.js
index 000183b1d..923f08b54 100644
--- a/packages/blockly/tests/mocha/toolbox_test.js
+++ b/packages/blockly/tests/mocha/toolbox_test.js
@@ -216,6 +216,24 @@ suite('Toolbox', function () {
       Blockly.getFocusManager().focusNode(this.toolbox.getWorkspace());
       assert.isTrue(this.toolbox.getFlyout().isVisible());
     });
+
+    test('Tab order follows toolbox, flyout, workspace DOM order', function () {
+      const injectionDiv = this.toolbox.getWorkspace().getInjectionDiv();
+      const children = Array.from(injectionDiv.children);
+
+      const toolboxIndex = children.indexOf(this.toolbox.HtmlDiv);
+      const flyoutIndex = children.indexOf(this.toolbox.getFlyout().svgGroup_);
+      const workspaceIndex = children.indexOf(
+        this.toolbox.getWorkspace().getParentSvg(),
+      );
+
+      assert.isAtLeast(toolboxIndex, 0);
+      assert.isAtLeast(flyoutIndex, 0);
+      assert.isAtLeast(workspaceIndex, 0);
+
+      assert.isBelow(toolboxIndex, flyoutIndex);
+      assert.isBelow(flyoutIndex, workspaceIndex);
+    });
   });
 
   suite('onClick_', function () {