From 2649f5171debef03eb88bdc84ab7d0965f71eb96 Mon Sep 17 00:00:00 2001 From: Maribeth Moffatt Date: Fri, 12 Sep 2025 10:59:37 -0700 Subject: [PATCH] chore: add keyboard nav to advanced playground (#9359) --- package-lock.json | 10 ++++++++ package.json | 1 + tests/playgrounds/advanced_playground.html | 30 ++++++++++++++++++++++ 3 files changed, 41 insertions(+) diff --git a/package-lock.json b/package-lock.json index 8b80ff60ba1..8dc8efdbcba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "devDependencies": { "@blockly/block-test": "^7.0.2", "@blockly/dev-tools": "^9.0.2", + "@blockly/keyboard-navigation": "^3.0.1", "@blockly/theme-modern": "^7.0.1", "@hyperjump/browser": "^1.1.4", "@hyperjump/json-schema": "^1.5.0", @@ -199,6 +200,15 @@ "node": "*" } }, + "node_modules/@blockly/keyboard-navigation": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@blockly/keyboard-navigation/-/keyboard-navigation-3.0.1.tgz", + "integrity": "sha512-qSOPqsqRgkSLEoUeEZc81PWe558pXqY0e+4jkRODoAD+I1hMpCoD+6ivveRp7Jpb8WE1lj2PrAFOVuIVpphjHA==", + "dev": true, + "peerDependencies": { + "blockly": "^12.3.0" + } + }, "node_modules/@blockly/theme-dark": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/@blockly/theme-dark/-/theme-dark-8.0.1.tgz", diff --git a/package.json b/package.json index 7b639a872ea..b2892977c91 100644 --- a/package.json +++ b/package.json @@ -102,6 +102,7 @@ "devDependencies": { "@blockly/block-test": "^7.0.2", "@blockly/dev-tools": "^9.0.2", + "@blockly/keyboard-navigation": "^3.0.1", "@blockly/theme-modern": "^7.0.1", "@hyperjump/browser": "^1.1.4", "@hyperjump/json-schema": "^1.5.0", diff --git a/tests/playgrounds/advanced_playground.html b/tests/playgrounds/advanced_playground.html index 1fcbbd812a9..5c00de6ee99 100644 --- a/tests/playgrounds/advanced_playground.html +++ b/tests/playgrounds/advanced_playground.html @@ -18,6 +18,11 @@ await loadScript( '../../node_modules/@blockly/theme-modern/dist/index.js', ); + await loadScript( + '../../node_modules/@blockly/keyboard-navigation/dist/index.js', + ); + + let kbNavigation; function start() { setBackgroundColour(); @@ -47,6 +52,28 @@ // Refresh theme. ws.setTheme(ws.getTheme()); }); + + // Keyboard navigation options. + const kbOptions = { + 'Enable keyboard navigation': false, + }; + gui.remember(kbOptions); + gui.add(kbOptions, 'Enable keyboard navigation').onChange((enabled) => { + setupKeyboardNav(enabled, playground); + }); + + // Set up keyboard navigation on page load + setupKeyboardNav(kbOptions['Enable keyboard navigation'], playground); + } + + function setupKeyboardNav(enabled, playground) { + if (enabled) { + kbNavigation = new KeyboardNavigation(playground.getWorkspace()); + } else { + if (kbNavigation) { + kbNavigation.dispose(); + } + } } function initPlayground() { @@ -101,6 +128,8 @@ }; Blockly.ContextMenuItems.registerCommentOptions(); + KeyboardNavigation.registerKeyboardNavigationStyles(); + // TODO: register the navigation-deferring toolbox. createPlayground( document.getElementById('root'), @@ -153,6 +182,7 @@ +