chore: merge main into add-screen-reader branch (#726)

Author: maribethb

.github/workflows/pages.yml

@@ -2,14 +2,16 @@
 name: Deploy static content to Pages
 
 on:
-  # Runs on pushes targeting the default branch
+  # Runs on pushes targeting the default and experimentation branches.
   push:
-    branches: ['main']
+    branches:
+      - main
+      - add-screen-reader-support-experimental
 
-  # Allows you to run this workflow manually from the Actions tab
+  # Allows the workflow to be manually run from the Actions tab.
   workflow_dispatch:
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages.
 permissions:
   contents: read
   pages: write
@@ -26,45 +28,77 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout blockly
+      - name: Checkout tip-of-tree core Blockly
         uses: actions/checkout@v4
         with:
           path: blockly
           repository: google/blockly
           ref: develop
 
-      - name: Checkout blockly-keyboard-experimentation
+      - name: Checkout add-screen-reader-support-experimental core Blockly
+        uses: actions/checkout@v4
+        with:
+          path: blockly-add-screen-reader-support-experimental
+          repository: google/blockly
+          ref: add-screen-reader-support-experimental
+
+      - name: Checkout tip-of-tree blockly-keyboard-experimentation
         uses: actions/checkout@v4
         with:
           path: blockly-keyboard-experimentation
 
+      - name: Checkout add-screen-reader-support-experimental blockly-keyboard-experimentation
+        uses: actions/checkout@v4
+        with:
+          path: blockly-keyboard-experimentation-add-screen-reader-support-experimental
+          ref: add-screen-reader-support-experimental
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: 20.x
 
-      - name: Build blockly
+      - name: Build tip-of-tree core Blockly
         run: |
           cd blockly
           npm ci
           npm run package
           cd dist
           npm link
-          cd ../..
 
-      - name: Build blockly-keyboard-experimentation
+      - name: Build tip-of-tree blockly-keyboard-experimentation
         run: |
           cd blockly-keyboard-experimentation
           npm ci
           npm link blockly
           npm run ghpages
-          cd ..
+          mkdir ../ghpages
+          cp -r build/* ../ghpages/
+
+      - name: Build add-screen-reader-support-experimental core Blockly
+        run: |
+          cd blockly/dist
+          npm unlink -g
+          cd ../../blockly-add-screen-reader-support-experimental
+          npm ci
+          npm run package
+          cd dist
+          npm link
+
+      - name: Build add-screen-reader-support-experimental blockly-keyboard-experimentation
+        run: |
+          cd blockly-keyboard-experimentation-add-screen-reader-support-experimental
+          npm ci
+          npm link blockly
+          npm run ghpages
+          mkdir ../ghpages/screenreader
+          cp -r build/* ../ghpages/screenreader/
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          # Upload build folder
-          path: './blockly-keyboard-experimentation/build'
+          # Upload configured GH pages site files.
+          path: './ghpages'
 
   deploy:
     environment:

README.md

@@ -73,6 +73,11 @@ import {KeyboardNavigation} from '@blockly/keyboard-navigation';
 // Must be done before calling Blockly.inject.
 KeyboardNavigation.registerKeyboardNavigationStyles();
 
+// Register the default toolbox. Only do this once per page-load.
+// Must be done before calling Blockly.inject.
+// See instructions below if you don't use the default toolbox.
+KeyboardNavigation.registerNavigationDeferringToolbox();
+
 // Inject Blockly.
 const workspace = Blockly.inject('blocklyDiv', {
   toolbox: toolboxCategories,
@@ -81,7 +86,7 @@ const workspace = Blockly.inject('blocklyDiv', {
 const keyboardNav = new KeyboardNavigation(workspace);
 ```
 
-## Add shortcuts to page
+### Add shortcuts to page
 
 In order to see the keyboard help popup when the user presses /, you need to add an empty div element to the hosting page that has the Blockly div element with the id "shortcuts". The plugin will take care of layout and formatting.
 
@@ -93,7 +98,20 @@ In order to see the keyboard help popup when the user presses /, you need to add
 ...
 ```
 
-### Usage with cross-tab-copy-paste plugin
+### Use with custom Toolbox implementation
+
+If you supply your own subclass of `Toolbox`, you need to override the `onKeyDown_` method to make it a no-op. The base class has its own keyboard navigation built-in that you need to disable.
+
+```js
+class YourCustomToolbox extends Blockly.Toolbox {
+  protected override onKeyDown_(e: KeyboardEvent) {
+    // No-op, prevent keyboard handling by superclass in order to defer to
+    // global keyboard navigation.
+  }
+}
+```
+
+### Use with cross-tab-copy-paste plugin
 
 This plugin adds context menu items for copying & pasting. It also adds feedback to copying & pasting as toasts that are shown to the user upon successful copy or cut. It is compatible with the `@blockly/plugin-cross-tab-copy-paste` by following these steps: