fix!: Flyout follows toolbox in DOM (#9849)

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();

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);
 

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 () {