Add global shortcuts to improve keyboard navigation

This PR adds three shortcuts to help keyboard users navigate to the
editor (workspace), toolbox and trigger the hex download.

Co-authored-by: Grace <145345672+microbit-grace@users.noreply.github.com>

Author: 2 people

localtypings/pxteditor.d.ts

@@ -716,6 +716,7 @@ declare namespace pxt.editor {
         zoomOut(): void;
         resize(): void;
         setScale(scale: number): void;
+        focusWorkspace(): void;
     }
 
     export interface IFile {

pxtsim/accessibility.ts

@@ -8,6 +8,30 @@ namespace pxsim.accessibility {
         elem.setAttribute("tabindex", "0");
     }
 
+    export function getKeyboardShortcutEditorAction(e: KeyboardEvent): pxsim.SimulatorActionMessage["type"] | null {
+        const meta  = e.metaKey || e.ctrlKey;
+        if (e.key === "e" && meta) {
+            e.preventDefault();
+            return "focusWorkspace"
+        } else if (e.key === "b" && meta) {
+            e.preventDefault();
+            return "focusSimulator"
+        } else if (e.key === "d" && meta) {
+            e.preventDefault();
+            return "webUSBDownload"
+        }
+        return null
+    }
+
+    export function postKeyboardEvent() {
+        document.addEventListener("keydown", (e) => {
+            const action = getKeyboardShortcutEditorAction(e)
+            if (action) {
+                Runtime.postMessage({ type: action })
+            }
+        });
+    }
+
     export function enableKeyboardInteraction(elem: Element, handlerKeyDown?: () => void, handlerKeyUp?: () => void): void {
         if (handlerKeyDown) {
             elem.addEventListener('keydown', (e: KeyboardEvent) => {

pxtsim/embed.ts

@@ -75,6 +75,10 @@ namespace pxsim {
         url: string;
     }
 
+    export interface SimulatorActionMessage extends SimulatorMessage {
+        type: "toggleShortcutDoc" | "focusWorkspace" | "focusSimulator" | "webUSBDownload";
+    }
+
     export interface SimulatorStateMessage extends SimulatorMessage {
         type: "status";
         frameid?: string;

theme/common.less

@@ -347,6 +347,11 @@ div.simframe > iframe {
     top:0; left: 0; width:100%; height:100%;
 }
 
+#boardview:focus-visible {
+    outline: 3px solid var(--pxt-focus-border);
+    outline-offset: 3px;
+}
+
 .simHeadless {
     height: 0 !important;
     width: 0 !important;

webapp/src/blocks.tsx

@@ -17,6 +17,7 @@ import * as dialogs from "./dialogs";
 import * as blocklyFieldView from "./blocklyFieldView";
 import { CreateFunctionDialog } from "./createFunction";
 import { initializeSnippetExtensions } from './snippetBuilder';
+import * as cmds from "./cmds"
 
 import * as pxtblockly from "../../pxtblocks";
 import { KeyboardNavigation } from '@blockly/keyboard-experiment';
@@ -40,6 +41,7 @@ import { Measurements } from "./constants";
 import { flow } from "../../pxtblocks";
 import { HIDDEN_CLASS_NAME } from "../../pxtblocks/plugins/flyout/blockInflater";
 import { FlyoutButton } from "../../pxtblocks/plugins/flyout/flyoutButton";
+import { userPrefersDownloadFlagSet } from "./webusb";
 
 interface CopyDataEntry {
     version: 1;
@@ -585,6 +587,53 @@ export class Editor extends toolboxeditor.ToolboxEditor {
                     return true
                 }
             });
+
+            const triggerEditorAction = (action: pxsim.SimulatorActionMessage["type"]) => {
+                switch (action) {
+                    case "focusWorkspace": {
+                        this.parent.editor.focusWorkspace();
+                        return
+                    }
+                    case "focusSimulator": {
+                        // Note that pxtsim.driver.focus() isn't the same as tabbing to the sim.
+                        (document.querySelector("#boardview") as HTMLElement).focus();
+                        return
+                    }
+                    case "webUSBDownload": {
+                        (async () => {
+                            // TODO: refactor and share with editortoolbar.tsx
+                            const shouldShowPairingDialogOnDownload = pxt.appTarget.appTheme.preferWebUSBDownload
+                                && pxt.appTarget?.compile?.webUSB
+                                && pxt.usb.isEnabled
+                                && !userPrefersDownloadFlagSet();
+                            if (shouldShowPairingDialogOnDownload
+                                && !pxt.packetio.isConnected()
+                                && !pxt.packetio.isConnecting()
+                            ) {
+                                await cmds.pairAsync(true);
+                            }
+                            this.parent.compile();
+                        })();
+                        return
+                    }
+                }
+            }
+
+            const simulatorOrigins = [
+                window.location.origin,
+                // Simulator deployed origin.
+                "https://trg-microbit.userpxt.io"
+            ]
+            window.addEventListener("message", (e: MessageEvent<pxsim.SimulatorActionMessage>) => {
+                // Listen to simulator iframe keydown post messages.
+                if (simulatorOrigins.includes(e.origin)) {
+                    triggerEditorAction(e.data.type)
+                }
+            }, false)
+            document.addEventListener("keydown", (e: KeyboardEvent) => {
+                const action = pxsim.accessibility.getKeyboardShortcutEditorAction(e)
+                triggerEditorAction(action)
+            });
         }
     }