diff --git a/packages/blockly/core/keyboard_navigation_controller.ts b/packages/blockly/core/keyboard_navigation_controller.ts index 37fc447d8ac..78463e13700 100644 --- a/packages/blockly/core/keyboard_navigation_controller.ts +++ b/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); } } } diff --git a/packages/blockly/core/rendered_connection.ts b/packages/blockly/core/rendered_connection.ts index faa448d3a10..a9f8a9fc6a5 100644 --- a/packages/blockly/core/rendered_connection.ts +++ b/packages/blockly/core/rendered_connection.ts @@ -719,9 +719,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; } } diff --git a/packages/blockly/tests/mocha/keyboard_navigation_controller_test.js b/packages/blockly/tests/mocha/keyboard_navigation_controller_test.js index dd81e9e4b45..d2ba74b646d 100644 --- a/packages/blockly/tests/mocha/keyboard_navigation_controller_test.js +++ b/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'), ); }); });