Add global shortcuts to improve keyboard navigation

Adds Ctrl/Cmd+B shortcut that shows a numbered navigation overlay.
Integrates with a pxt-microbit change that propagates global-nav actions from
the simulator (otherwise they don't take effect when the iframe has focus).

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

Author: microbit-matt-hillsdon

localtypings/pxteditor.d.ts

@@ -716,6 +716,8 @@ declare namespace pxt.editor {
         zoomOut(): void;
         resize(): void;
         setScale(scale: number): void;
+        focusWorkspace(): void;
+        focusToolbox(): void;
     }
 
     export interface IFile {
@@ -819,6 +821,7 @@ declare namespace pxt.editor {
         extensionsVisible?: boolean;
         isMultiplayerGame?: boolean; // Arcade: Does the current project contain multiplayer blocks?
         onboarding?: pxt.tour.BubbleStep[];
+        navigateRegions?: boolean;
         feedback?: FeedbackState;
         themePickerOpen?: boolean;
     }
@@ -1056,6 +1059,8 @@ declare namespace pxt.editor {
         hideLightbox(): void;
         showOnboarding(): void;
         hideOnboarding(): void;
+        showNavigateRegions(): void;
+        hideNavigateRegions(): void;
         showKeymap(show: boolean): void;
         toggleKeymap(): void;
         signOutGithub(): void;

pxtsim/accessibility.ts

@@ -8,6 +8,31 @@ namespace pxsim.accessibility {
         elem.setAttribute("tabindex", "0");
     }
 
+    export function getKeyboardShortcutEditorAction(e: KeyboardEvent): pxsim.SimulatorAction | null {
+        const meta  = e.metaKey || e.ctrlKey;
+        if (e.key === "Escape") {
+            e.preventDefault();
+            return "escape"
+        } else if (e.key === "b" && meta) {
+            e.preventDefault();
+            return "navigateregions"
+        }
+        return null
+    }
+
+    export function postKeyboardEvent() {
+        document.addEventListener("keydown", (e) => {
+            const action = getKeyboardShortcutEditorAction(e)
+            if (action) {
+                const message = {
+                    type: "pxtsim",
+                    action
+                } as pxsim.SimulatorActionMessage;
+                Runtime.postMessage(message)
+            }
+        });
+    }
+
     export function enableKeyboardInteraction(elem: Element, handlerKeyDown?: () => void, handlerKeyUp?: () => void): void {
         if (handlerKeyDown) {
             elem.addEventListener('keydown', (e: KeyboardEvent) => {

pxtsim/embed.ts

@@ -75,6 +75,12 @@ namespace pxsim {
         url: string;
     }
 
+    export type SimulatorAction = "escape" | "navigateregions";
+
+    export interface SimulatorActionMessage extends SimulatorMessage {
+        action: SimulatorAction;
+    }
+
     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;

theme/navigateregions.less

@@ -0,0 +1,72 @@
+/* Import all components */
+@import 'themes/default/globals/site.variables';
+@import 'themes/pxt/globals/site.variables';
+
+/* Reference import */
+@import (reference) "semantic.less";
+
+.navigate-regions-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0);
+    width: 100%;
+    height: 100%;
+    z-index: @modalDimmerZIndex;
+
+    .region-button {
+        position: absolute;
+        background-color: rgba(0, 0, 0, .6);
+        border-radius: 0;
+        border: 3px solid white;
+        padding: 0;
+
+        &.simulator-region {
+            z-index: 1;
+        }
+
+        &.simulator-collapsed {
+            border-start-end-radius: 100px;
+            border-end-end-radius: 100px;
+        }
+
+        &:focus-visible {
+            background-color: rgba(0, 0, 0, .3);
+
+            div {
+                border: 5px solid white;
+                background-color: black;
+            }
+
+            p {
+                font-weight: bold;
+            }
+        }
+
+        div {
+            background-color: rgba(0, 0, 0, .6);
+            border: 2px solid white;
+            width: fit-content;
+            margin: auto;
+            padding-right: 1em;
+            padding-left: 1em;
+            border-radius: 5px;
+
+            @media only screen and (max-width: @largestMobileScreen) {
+                padding-right: 0.5em;
+                padding-left: 0.5em;
+            }
+        }
+        p {
+            color: white;
+            font-size: 2rem;
+
+            @media only screen and (max-width: @largestTabletScreen), 
+            only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestMobileScreen) {
+                font-size: 1.5rem;
+            }
+        }
+    }
+}

theme/pxt.less

@@ -32,6 +32,7 @@
 @import 'accessibility';
 @import 'highcontrast';
 @import 'greenscreen';
+@import 'navigateregions';
 
 @import 'extension';
 @import 'extensionErrors';

webapp/src/app.tsx

@@ -80,6 +80,7 @@ import Util = pxt.Util;
 import { HintManager } from "./hinttooltip";
 import { mergeProjectCode, appendTemporaryAssets } from "./mergeProjects";
 import { Tour } from "./components/onboarding/Tour";
+import { NavigateRegionsOverlay } from "./components/NavigateRegionsOverlay";
 import { parseTourStepsAsync } from "./onboarding";
 import { initGitHubDb } from "./idbworkspace";
 import { BlockDefinition, CategoryNameID } from "./toolbox";
@@ -5247,6 +5248,21 @@ export class ProjectView
 
     }
 
+    ///////////////////////////////////////////////////////////
+    ////////////             Navigate regions     /////////////
+    ///////////////////////////////////////////////////////////
+
+    hideNavigateRegions() {
+        this.setState({ navigateRegions: false });
+    }
+
+    showNavigateRegions() {
+        const dialog = Array.from(document.querySelectorAll("[role=dialog]")).find(dialog => (dialog as any).checkVisibility());
+        if (!dialog) {
+            this.setState(state => state.home ? state : { navigateRegions: true })
+        }
+    }
+
     ///////////////////////////////////////////////////////////
     ////////////             Key map              /////////////
     ///////////////////////////////////////////////////////////
@@ -5507,6 +5523,7 @@ export class ProjectView
                 {lightbox ? <sui.Dimmer isOpen={true} active={lightbox} portalClassName={'tutorial'} className={'ui modal'}
                     shouldFocusAfterRender={false} closable={true} onClose={this.hideLightbox} /> : undefined}
                 {this.state.onboarding && <Tour tourSteps={this.state.onboarding} onClose={this.hideOnboarding} />}
+                {accessibleBlocks && this.state.navigateRegions && <NavigateRegionsOverlay parent={this}/>}
                 {this.state.themePickerOpen && <ThemePickerModal themes={this.themeManager.getAllColorThemes()} onThemeClicked={theme => this.setColorThemeById(theme?.id, true)} onClose={this.hideThemePicker} />}
             </div>
         );

webapp/src/blocks.tsx

@@ -585,6 +585,35 @@ export class Editor extends toolboxeditor.ToolboxEditor {
                     return true
                 }
             });
+
+            const triggerEditorAction = (action: pxsim.SimulatorAction) => {
+                switch (action) {
+                    case "escape": {
+                        this.parent.setSimulatorFullScreen(false);
+                        return;
+                    }
+                    case "navigateregions" : {
+                        this.parent.showNavigateRegions();
+                        return
+                    }
+                }
+            }
+
+            const simulatorOrigins = [
+                window.location.origin,
+                // Simulator deployed origin.
+                "https://trg-microbit.userpxt.io"
+            ]
+            window.addEventListener("message", (e: MessageEvent) => {
+                // Listen to simulator iframe keydown post messages.
+                if (simulatorOrigins.includes(e.origin) && e.data.type === "pxtsim") {
+                    triggerEditorAction((e.data as pxsim.SimulatorActionMessage).action)
+                }
+            }, false)
+            document.addEventListener("keydown", (e: KeyboardEvent) => {
+                const action = pxsim.accessibility.getKeyboardShortcutEditorAction(e)
+                triggerEditorAction(action)
+            });
         }
     }