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/pxtarget.d.ts

@@ -415,7 +415,6 @@ declare namespace pxt {
         extendEditor?: boolean; // whether a target specific editor.js is loaded
         extendFieldEditors?: boolean; // wether a target specific fieldeditors.js is loaded
         highContrast?: boolean; // simulator has a high contrast mode
-        accessibleBlocks?: boolean; // enable keyboard navigation in blockly
         print?: boolean; //Print blocks and text feature
         greenScreen?: boolean; // display webcam stream in background
         instructions?: boolean; // display make instructions

localtypings/pxteditor.d.ts

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

package.json

@@ -63,7 +63,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",
@@ -161,9 +161,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/copyPaste.ts

@@ -8,7 +8,7 @@ let oldCut: Blockly.ShortcutRegistry.KeyboardShortcut;
 let oldPaste: Blockly.ShortcutRegistry.KeyboardShortcut;
 
 export function initCopyPaste() {
-    if (oldCopy) return;
+    if (oldCopy || !getCopyPasteHandlers()) return;
 
     const shortcuts = Blockly.ShortcutRegistry.registry.getRegistry()
 

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/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/blockInflater.ts

@@ -1,6 +1,6 @@
 import * as Blockly from "blockly";
 
-const HIDDEN_CLASS_NAME = "pxtFlyoutHidden";
+export const HIDDEN_CLASS_NAME = "pxtFlyoutHidden";
 
 export class MultiFlyoutRecyclableBlockInflater extends Blockly.BlockFlyoutInflater {
     protected keyToBlock: Map<string, Blockly.BlockSvg> = new Map();
@@ -43,6 +43,7 @@ export class MultiFlyoutRecyclableBlockInflater extends Blockly.BlockFlyoutInfla
         this.blockToKey.set(block, key);
 
         block.removeClass(HIDDEN_CLASS_NAME);
+        block.setDisabledReason(false, HIDDEN_CLASS_NAME);
         return block;
     }
 
@@ -72,6 +73,7 @@ export class MultiFlyoutRecyclableBlockInflater extends Blockly.BlockFlyoutInfla
         const xy = block.getRelativeToSurfaceXY();
         block.moveBy(-xy.x, -xy.y);
         block.addClass(HIDDEN_CLASS_NAME);
+        block.setDisabledReason(true, HIDDEN_CLASS_NAME);
         const key = this.blockToKey.get(block);
         this.keyToBlock.set(key, block);
         this.removeListeners(block.id);

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

@@ -161,12 +161,6 @@ export function all(): Experiment[] {
             name: lf("Open in New Connected Tab"),
             description: lf("Open connected editors in different browser tabs.")
         },
-        {
-            id: "accessibleBlocks",
-            name: lf("Accessible Blocks"),
-            description: lf("Use the WASD keys to move and modify blocks."),
-            feedbackUrl: "https://github.com/microsoft/pxt/issues/6850"
-        },
         {
             id: "errorList",
             name: lf("Error List"),

pxtlib/auth.ts

@@ -62,6 +62,7 @@ namespace pxt.auth {
     export type UserPreferences = {
         language?: string;
         highContrast?: boolean;
+        accessibleBlocks?: boolean;
         colorThemeIds?: ColorThemeIdsState;
         reader?: string;
         skillmap?: UserSkillmapState;
@@ -72,6 +73,7 @@ namespace pxt.auth {
     export const DEFAULT_USER_PREFERENCES: () => UserPreferences = () => ({
         language: pxt.appTarget.appTheme.defaultLocale,
         highContrast: false,
+        accessibleBlocks: false,
         colorThemeIds: {}, // Will lookup pxt.appTarget.appTheme.defaultColorTheme for active target
         reader: "",
         skillmap: { mapProgress: {}, completedTags: {} },

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">
+            {this.getData<boolean>(auth.ACCESSIBLE_BLOCKS) ? <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}