Upgrade to latest Blockly keyboard navigation plugin

ThirdPartyNotice

@@ -881,7 +881,7 @@ General Public License.
 863. dashjs 4.4.0 (https://www.npmjs.com/package/dashjs/v/4.4.0)
 864. @fortawesome/fontawesome-free 5.15.4 (https://www.npmjs.com/package/@fortawesome/fontawesome-free/v/5.15.4)
 865. @blockly/plugin-workspace-search 4.0.10 (https://www.npmjs.com/package/@blockly/plugin-workspace-search/v/4.0.10)
-866. @blockly/keyboard-navigation 0.1.18 (https://www.npmjs.com/package/@blockly/keyboard-navigation/v/0.1.18)
+866. @blockly/keyboard-experiment 0.0.7 (https://www.npmjs.com/package/@blockly/keyboard-experiment/v/0.0.7)
 
 
 
@@ -28749,7 +28749,7 @@ to represent the company, product, or service to which they refer.**
 END OF @blockly/plugin-workspace-search 4.0.10 NOTICES AND INFORMATION
 
 
-%% @blockly/keyboard-navigation 0.1.18 NOTICES AND INFORMATION BEGIN HERE (https://www.npmjs.com/package/@blockly/keyboard-navigation/v/0.1.18)
+%% @blockly/keyboard-experiment 0.0.7 NOTICES AND INFORMATION BEGIN HERE (https://www.npmjs.com/package/@blockly/keyboard-experiment/v/0.0.7)
 =========================================
 
                                  Apache License
@@ -28954,4 +28954,4 @@ END OF @blockly/plugin-workspace-search 4.0.10 NOTICES AND INFORMATION
    See the License for the specific language governing permissions and
    limitations under the License.
 =========================================
-END OF @blockly/keyboard-navigation 0.1.18 NOTICES AND INFORMATION
+END OF @blockly/keyboard-experiment 0.0.7 NOTICES AND INFORMATION

localtypings/blockly-keyboard-experiment.d.ts

@@ -0,0 +1,7 @@
+declare module "@blockly/keyboard-experiment" {
+  import { WorkspaceSvg } from "blockly";
+
+  class KeyboardNavigation {
+   constructor(workspace: WorkspaceSvg)
+  }
+}

localtypings/pxteditor.d.ts

@@ -1036,8 +1036,6 @@ declare namespace pxt.editor {
         toggleHighContrast(): void;
         setHighContrast(on: boolean): void;
         toggleGreenScreen(): void;
-        toggleAccessibleBlocks(): void;
-        setAccessibleBlocks(enabled: boolean): void;
         launchFullEditor(): void;
         resetWorkspace(): void;
 

package.json

@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@blockly/field-colour": "5.0.12",
-    "@blockly/keyboard-navigation": "0.6.5",
+    "@blockly/keyboard-experiment": "0.0.7",
     "@blockly/plugin-workspace-search": "9.1.0",
     "@crowdin/crowdin-api-client": "^1.33.0",
     "@fortawesome/fontawesome-free": "^5.15.4",
@@ -159,9 +159,6 @@
     },
     "@blockly/plugin-workspace-search": {
       "blockly": "^12.0.0-beta.4"
-    },
-    "@blockly/keyboard-navigation": {
-      "blockly": "^12.0.0-beta.4"
     }
   },
   "scripts": {

pxtblocks/blockDragger.ts

@@ -9,8 +9,10 @@ export class BlockDragger extends Blockly.dragging.Dragger {
             || document.getElementsByClassName('blocklyFlyout')[0] as HTMLElement;
         const trashIcon = document.getElementById("blocklyTrashIcon");
         if (blocklyTreeRoot && trashIcon) {
+            const rect = blocklyTreeRoot.getBoundingClientRect()
             const distance = calculateDistance(blocklyTreeRoot.getBoundingClientRect(), e.clientX);
-            if (distance < 200) {
+            const isMouseDrag = Blockly.Gesture.inProgress();
+            if ((isMouseDrag && distance < 200) || (!isMouseDrag && isOverlappingRect(rect, e.clientX))) {
                 const opacity = distance / 200;
                 trashIcon.style.opacity = `${1 - opacity}`;
                 trashIcon.style.display = 'block';
@@ -45,4 +47,8 @@ export class BlockDragger extends Blockly.dragging.Dragger {
 
 function calculateDistance(elemBounds: DOMRect, mouseX: number) {
     return Math.abs(mouseX - (elemBounds.left + (elemBounds.width / 2)));
+}
+
+function isOverlappingRect(elemBounds: DOMRect, mouseX: number) {
+    return (mouseX - (elemBounds.left + (elemBounds.width))) < 0;
 }

pxtblocks/contextMenu/blockItems.ts

@@ -24,8 +24,16 @@ export function registerBlockitems() {
     registerHelp();
 
     // Fix the weights of the builtin options we do use
-    Blockly.ContextMenuRegistry.registry.getItem("blockDelete").weight = BlockContextWeight.DeleteBlock;
-    Blockly.ContextMenuRegistry.registry.getItem("blockComment").weight = BlockContextWeight.AddComment;
+    // Defensiveness due to action changes in the keyboard navigation plugin.
+    // Needs revisiting when actions are final.
+    const blockDelete = Blockly.ContextMenuRegistry.registry.getItem("blockDelete");
+    if (blockDelete) {
+        blockDelete.weight = BlockContextWeight.DeleteBlock;
+    }
+    const blockComment = Blockly.ContextMenuRegistry.registry.getItem("blockComment");
+    if (blockComment) {
+        blockComment.weight = BlockContextWeight.AddComment;
+    }
 }
 
 /**

pxtblocks/fields/field_ledmatrix.ts

@@ -352,6 +352,8 @@ export class FieldMatrix extends Blockly.Field implements FieldCustom {
             // Clear event listeners and selection used for keyboard navigation.
             this.removeKeyboardFocusHandlers();
             this.clearSelection();
+            // This enables keyboard navigation in the Blockly workspace if not focused already.
+            (this.sourceBlock_.workspace as Blockly.WorkspaceSvg).markFocused();
         }, false));
     }
 

pxtblocks/loader.ts

@@ -609,7 +609,8 @@ function init(blockInfo: pxtc.BlocksInfo) {
     initText();
     initComments();
     initTooltip();
-    initCopyPaste();
+    // FIXME: Disabled while we consider conflict with the keyboard nav plugin
+    // initCopyPaste();
 }
 
 

pxtblocks/plugins/duplicateOnDrag/dragStrategy.ts

@@ -5,6 +5,7 @@
  */
 
 import * as Blockly from "blockly";
+import { ConnectionPreviewer } from "../renderer";
 
 import { DUPLICATE_ON_DRAG_MUTATION_KEY, isAllowlistedShadow, shouldDuplicateOnDrag } from "./duplicateOnDrag";
 import eventUtils = Blockly.Events;

pxtblocks/plugins/flyout/verticalFlyout.ts

@@ -246,7 +246,7 @@ export class VerticalFlyout implements Blockly.IFlyout {
     }
 }
 
-class CachedFlyout extends Blockly.VerticalFlyout {
+export class CachedFlyout extends Blockly.VerticalFlyout {
     protected def: Element[];
     protected buttonListeners: Blockly.browserEvents.Data[] = [];
 

pxtblocks/plugins/renderer/connectionPreviewer.ts

@@ -43,10 +43,11 @@ export class ConnectionPreviewer extends Blockly.InsertionMarkerPreviewer {
         const atan = Math.atan2(dy, dx);
 
         const len = Math.sqrt(dx * dx + dy * dy);
-        // When the indicators are overlapping, we hide the line
-        if (len < radius * 2 + 1) {
+        const isMouseDrag = Blockly.Gesture.inProgress();
+        // When the indicators are overlapping, or if the drag is keyboard driven, we hide the line
+        if (len < radius * 2 + 1 || !isMouseDrag) {
             Blockly.utils.dom.addClass(this.connectionLine, "hidden");
-        } else {
+        } else if (isMouseDrag) {
             Blockly.utils.dom.removeClass(this.connectionLine, "hidden");
             this.connectionLine.setAttribute("x1", String(offset.x + Math.cos(atan) * radius));
             this.connectionLine.setAttribute("y1", String(offset.y + Math.sin(atan) * radius));

pxteditor/experiments.ts

@@ -164,7 +164,7 @@ export function all(): Experiment[] {
         {
             id: "accessibleBlocks",
             name: lf("Accessible Blocks"),
-            description: lf("Use the WASD keys to move and modify blocks."),
+            description: lf("Use the arrow keys to move and modify blocks."),
             feedbackUrl: "https://github.com/microsoft/pxt/issues/6850"
         },
         {

theme/blockly-core.less

@@ -50,6 +50,8 @@ svg.blocklySvg {
     }
 }
 
+
+
 .blocklyMainBackground {
     stroke: none !important;
 }
@@ -283,6 +285,24 @@ text.blocklyCheckbox {
     }
 }
 
+/* Keyboard navigation plugin styles */
+
+.passiveBlockFocus.blocklyPath {
+    stroke-dasharray: 5 3;
+    stroke-width: 3;
+    stroke: #ffa200;
+}
+
+.passiveNextIndicator {
+    stroke: #ffa200;
+    fill: #ffa200;
+ }
+
+.inputActiveFocus {
+    stroke-width: 3;
+    stroke: #ffa200;
+}
+
 /*******************************
         Scrollbars
 *******************************/
@@ -373,3 +393,45 @@ text.blocklyCheckbox {
         font-size: 17pt !important;
     }
 }
+
+
+/*******************************
+        Focus styles
+*******************************/
+
+.accessibleBlocks .blocklyWorkspace:focus,.blocklyWorkspaceFocusLayer:focus {
+    outline: none;
+}
+
+.accessibleBlocks .blocklyWorkspaceFocusRingLayer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    pointer-events: none;
+    z-index: 99;
+}
+
+.accessibleBlocks .blocklyWorkspaceFocusRingLayer[data-focused = 'true'] {
+    outline: 3px solid black;
+    outline-offset: -3px;
+}
+
+div.blocklyTreeRoot > div > div[role="tree"]:focus-visible {
+    outline: none;
+}
+
+.accessibleBlocks div.blocklyTreeRoot > div > div[role="tree"]:focus-visible {
+    outline: 3px solid black;
+    outline-offset: -3px;
+}
+
+.accessibleBlocks .blocklyFlyout:focus {
+    outline: none;
+}
+
+.accessibleBlocks .blocklyFlyout:focus-visible {
+    outline: 3px solid black;
+    outline-offset: -3px;
+}

theme/toolbox.less

@@ -271,6 +271,10 @@ div.blocklyTreeIcon span {
     background-color: var(--pxt-target-background3-hover);
 }
 
+.blocklyToolbox .blocklyTreeRoot [role="treeitem"] {
+    outline: none;
+}
+
 /*******************************
     Inverted Toolbox
 *******************************/

webapp/src/accessibility.tsx

@@ -28,6 +28,11 @@ export class EditorAccessibilityMenu extends data.Component<EditorAccessibilityM
         this.showLanguagePicker = this.showLanguagePicker.bind(this);
         this.showThemePicker = this.showThemePicker.bind(this);
         this.goHome = this.goHome.bind(this);
+        this.openBlocks = this.openBlocks.bind(this);
+    }
+
+    openBlocks(e: React.MouseEvent<HTMLElement>) {
+        this.props.parent.openBlocks();
     }
 
     openJavaScript() {
@@ -73,6 +78,7 @@ export class EditorAccessibilityMenu extends data.Component<EditorAccessibilityM
         const hasHome = !pxt.shell.isControllerMode();
 
         return <div className="ui accessibleMenu borderless fixed menu" role="menubar">
+            {targetTheme.accessibleBlocks ? <sui.Item className={`${targetTheme.invertedMenu ? `inverted` : ''} menu`} role="menuitem" icon="xicon blocks" text={lf("Skip to Blocks workspace")} onClick={this.openBlocks} /> : undefined}
             <sui.Item className={`${targetTheme.invertedMenu ? `inverted` : ''} menu`} role="menuitem" icon="xicon js" text={lf("Skip to JavaScript editor")} onClick={this.openJavaScript} />
             {targetTheme.python ? <sui.Item className={`${targetTheme.invertedMenu ? `inverted` : ''} menu`} role="menuitem" icon="xicon python" text={lf("Skip to Python editor")} onClick={this.openPython} /> : undefined}
             {targetTheme.selectLanguage ? <sui.Item className={`${targetTheme.invertedMenu ? `inverted` : ''} menu`} role="menuitem" icon="xicon globe" text={lf("Select Language")} onClick={this.showLanguagePicker} /> : undefined}

webapp/src/app.tsx

@@ -687,6 +687,9 @@ export class ProjectView
 
         if (this.isBlocksActive()) {
             if (this.state.embedSimView) this.setState({ embedSimView: false });
+            // This timeout prevents key events from being handled by Blockly's keyboard
+            // navigation plugin prematurely.
+            setTimeout(() => {this.editor.focusWorkspace()}, 0)
             return;
         }
 
@@ -2807,7 +2810,7 @@ export class ProjectView
         this.stopSimulator(true); // don't keep simulator around
         this.showKeymap(false); // close keymap if open
         cmds.disconnectAsync(); // turn off any kind of logging
-        if (this.editor) this.editor.unloadFileAsync();
+        if (this.editor) this.editor.unloadFileAsync(home);
         this.extensions.unload();
         this.editorFile = undefined;
 
@@ -4661,7 +4664,7 @@ export class ProjectView
             extensionsVisible: false
         })
 
-        if (this.state.accessibleBlocks) {
+        if (pxt.appTarget.appTheme.accessibleBlocks) {
             this.editor.focusToolbox(CategoryNameID.Extensions);
         }
     }
@@ -5170,16 +5173,6 @@ export class ProjectView
         this.setState({ greenScreen: greenScreenOn });
     }
 
-    toggleAccessibleBlocks() {
-        this.setAccessibleBlocks(!this.state.accessibleBlocks);
-    }
-
-    setAccessibleBlocks(enabled: boolean) {
-        pxt.tickEvent("app.accessibleblocks", { on: enabled ? 1 : 0 });
-        // this.blocksEditor.enableAccessibleBlocks(enabled);
-        this.setState({ accessibleBlocks: enabled })
-    }
-
     setBannerVisible(b: boolean) {
         this.setState({ bannerVisible: b });
     }
@@ -5353,7 +5346,8 @@ export class ProjectView
         const inDebugMode = this.state.debugging;
         const inHome = this.state.home && !sandbox;
         const inEditor = !!this.state.header && !inHome;
-        const { lightbox, greenScreen, accessibleBlocks } = this.state;
+        const { lightbox, greenScreen } = this.state;
+        const accessibleBlocks = pxt.appTarget.appTheme.accessibleBlocks;
         const hideTutorialIteration = inTutorial && tutorialOptions.metadata?.hideIteration;
         const hideToolbox = inTutorial && tutorialOptions.metadata?.hideToolbox;
         // flyoutOnly has become a de facto css class for styling tutorials (especially minecraft HOC), so keep it if hideToolbox is true, even if flyoutOnly is false.
@@ -5443,12 +5437,13 @@ export class ProjectView
                         header={this.state.header}
                         reloadHeaderAsync={async () => {
                             await this.reloadHeaderAsync()
-                            this.shouldFocusToolbox = !!this.state.accessibleBlocks;
+                            this.shouldFocusToolbox = !!accessibleBlocks;
                         }}
                     />
                 }
                 {greenScreen ? <greenscreen.WebCam close={this.toggleGreenScreen} /> : undefined}
-                {accessibleBlocks && <accessibleblocks.AccessibleBlocksInfo />}
+                {/* TODO: Discuss when this onboarding dialog should be shown if accessibleBlocks is enabled by default */}
+                {/* {accessibleBlocks && <accessibleblocks.AccessibleBlocksInfo />} */}
                 {hideMenuBar || inHome ? undefined :
                     <header className="menubar" role="banner">
                         {inEditor ? <accessibility.EditorAccessibilityMenu parent={this} highContrast={hc} /> : undefined}