chore: merge develop into add-screen-reader

maribethb · web-flow · commit b10f1af6557b · 2025-09-12T11:23:48.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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 @@
     </style>
   </head>
   <body>
+    <div id="shortcuts"></div>
     <div id="root"></div>
   </body>
 </html>
