fix: Fix styling and focusing of connections in shadow DOM (#9952)

Author: gonfunko

packages/blockly/core/keyboard_navigation_controller.ts

@@ -4,6 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {getMainWorkspace} from './common.js';
+import type {WorkspaceSvg} from './workspace_svg.js';
+
 /**
  * The KeyboardNavigationController handles coordinating Blockly-wide
  * keyboard navigation behavior, such as enabling/disabling full
@@ -69,10 +72,12 @@ export class KeyboardNavigationController {
 
   /** Adds or removes the css class that indicates keyboard navigation is active. */
   private updateActiveVisualization() {
+    const root = (getMainWorkspace() as WorkspaceSvg).getInjectionDiv()
+      .parentElement;
     if (this.isActive) {
-      document.body.classList.add(this.activeClassName);
+      root?.classList.add(this.activeClassName);
     } else {
-      document.body.classList.remove(this.activeClassName);
+      root?.classList.remove(this.activeClassName);
     }
   }
 }

packages/blockly/core/rendered_connection.ts

@@ -720,9 +720,10 @@ export class RenderedConnection
   private findHighlightSvg(): SVGPathElement | null {
     // This cast is valid as TypeScript's definition is wrong. See:
     // https://github.com/microsoft/TypeScript/issues/60996.
-    return document.getElementById(this.id) as
-      | unknown
-      | null as SVGPathElement | null;
+    const root = this.getSourceBlock().getSvgRoot().getRootNode() as
+      | ShadowRoot
+      | HTMLDocument;
+    return root.getElementById(this.id) as SVGPathElement | null;
   }
 }
 

packages/blockly/tests/mocha/keyboard_navigation_controller_test.js

@@ -13,6 +13,7 @@ import {
 suite('Keyboard Navigation Controller', function () {
   setup(function () {
     sharedTestSetup.call(this);
+    this.workspace = Blockly.inject('blocklyDiv');
     Blockly.keyboardNavigationController.setIsActive(false);
   });
 
@@ -24,14 +25,18 @@ suite('Keyboard Navigation Controller', function () {
   test('Setting active keyboard navigation adds css class', function () {
     Blockly.keyboardNavigationController.setIsActive(true);
     assert.isTrue(
-      document.body.classList.contains('blocklyKeyboardNavigation'),
+      Blockly.getMainWorkspace()
+        .getInjectionDiv()
+        .parentElement.classList.contains('blocklyKeyboardNavigation'),
     );
   });
 
   test('Disabling active keyboard navigation removes css class', function () {
     Blockly.keyboardNavigationController.setIsActive(false);
     assert.isFalse(
-      document.body.classList.contains('blocklyKeyboardNavigation'),
+      Blockly.getMainWorkspace()
+        .getInjectionDiv()
+        .parentElement.classList.contains('blocklyKeyboardNavigation'),
     );
   });
 });