Add global shortcuts to improve keyboard navigation (#10570)

* 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>

* Remove debug log

* RTL fixes for overlay

* Feeback: sim origin, remove useEffect, defined checks

* Pull up checkVisible polyfill so it's always available

* Move sim message handling to correct location

I've moved the key handling too as they share code.
Kept it gated on accessible blocks setting, though this isn't really necessary
if we're happy to enable more widely.

* Comment typo fix

* Use theme colors; fix high contrast z-index bug

* Fix missed theme color

Co-authored-by: Thomas Sparks <69657545+thsparks@users.noreply.github.com>

---------

Co-authored-by: Grace <145345672+microbit-grace@users.noreply.github.com>
Co-authored-by: Thomas Sparks <69657545+thsparks@users.noreply.github.com>
Co-authored-by: Richard Knoll <riknoll@users.noreply.github.com>

Author: 4 people

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;

pxtblocks/loader.ts

@@ -24,7 +24,6 @@ import { initContextMenu } from "./contextMenu";
 import { renderCodeCard } from "./codecardRenderer";
 import { FieldDropdown } from "./fields/field_dropdown";
 import { setDraggableShadowBlocks, setDuplicateOnDrag, setDuplicateOnDragStrategy } from "./plugins/duplicateOnDrag";
-import { applyPolyfills } from "./polyfills";
 import { initCopyPaste } from "./copyPaste";
 
 export const DRAGGABLE_PARAM_INPUT_PREFIX = "HANDLER_DRAG_PARAM_";
@@ -597,8 +596,6 @@ function init(blockInfo: pxtc.BlocksInfo) {
     if (blocklyInitialized) return;
     blocklyInitialized = true;
 
-    applyPolyfills();
-
     initFieldEditors();
     initContextMenu();
     initOnStart();

pxtsim/accessibility.ts

@@ -8,6 +8,31 @@ namespace pxsim.accessibility {
         elem.setAttribute("tabindex", "0");
     }
 
+    export function getGlobalAction(e: KeyboardEvent): pxsim.GlobalAction | 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 = getGlobalAction(e)
+            if (action) {
+                const message = {
+                    type: "action",
+                    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,13 @@ namespace pxsim {
         url: string;
     }
 
+    export type GlobalAction = "escape" | "navigateregions";
+
+    export interface SimulatorActionMessage extends SimulatorMessage {
+        type: "action";
+        action: GlobalAction;
+    }
+
     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,75 @@
+/* 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: var(--pxt-neutral-alpha0);
+    width: 100%;
+    height: 100%;
+    z-index: @modalDimmerZIndex;
+
+    .region-button {
+        position: absolute;
+        background-color: var(--pxt-neutral-alpha50);
+        border-radius: 0;
+        border: 3px solid var(--pxt-neutral-background1);
+        padding: 0;
+
+        &.simulator-region {
+            // Must be more than the z-index of 1 that high contrast mode adds to all buttons.
+            z-index: 2 !important;
+        }
+
+        &.simulator-collapsed {
+            border-start-end-radius: 100px;
+            border-end-end-radius: 100px;
+        }
+
+        &:focus-visible {
+            background-color: var(--pxt-neutral-alpha20);
+
+            div {
+                border-width: 5px;
+                background-color: var(--pxt-neutral-foreground1);
+            }
+
+            p {
+                font-weight: bold;
+            }
+        }
+
+
+
+        div {
+            background-color: var(--pxt-neutral-alpha80);
+            border: 2px solid var(--pxt-secondary-foreground);
+            width: 3.125em;
+
+            margin: auto;
+            border-radius: 5px;
+
+            @media only screen and (max-width: @largestMobileScreen) {
+                padding-right: 0.5em;
+                padding-left: 0.5em;
+            }
+        }
+        p {
+            color: var(--pxt-neutral-background1);
+            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,17 +80,20 @@ 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";
 import { FeedbackModal } from "../../react-common/components/controls/Feedback/Feedback";
 import { ThemeManager } from "../../react-common/components/theming/themeManager";
+import { applyPolyfills } from "./polyfills";
 
 pxt.blocks.requirePxtBlockly = () => pxtblockly as any;
 pxt.blocks.requireBlockly = () => Blockly;
 pxt.blocks.registerFieldEditor = (selector, proto, validator) => pxtblockly.registerFieldEditor(selector, proto, validator);
 
 pxsim.util.injectPolyphils();
+applyPolyfills();
 
 let theEditor: ProjectView;
 let hash: { cmd: string, arg: string };
@@ -236,6 +239,7 @@ export class ProjectView
         this.exitTutorial = this.exitTutorial.bind(this);
         this.setEditorOffset = this.setEditorOffset.bind(this);
         this.resetTutorialTemplateCode = this.resetTutorialTemplateCode.bind(this);
+        this.initGlobalActionHandlers();
         this.initSimulatorMessageHandlers();
         this.showThemePicker = this.showThemePicker.bind(this);
         this.hideThemePicker = this.hideThemePicker.bind(this);
@@ -303,10 +307,39 @@ export class ProjectView
                     };
                     simulator.driver.postMessage(playerOneConnectedMsg);
                 }
+            } else if (msg.type === "action") {
+                const { action } = msg as pxsim.SimulatorActionMessage;
+                this.runGlobalAction(action);
             }
         }, false);
     }
 
+    private initGlobalActionHandlers() {
+        document.addEventListener("keydown", (e: KeyboardEvent) => {
+            const action = pxsim.accessibility.getGlobalAction(e)
+            this.runGlobalAction(action)
+        });
+    }
+
+    /**
+     * Run a global action based on shortcuts triggered in sim or main window.
+     */
+    private runGlobalAction(action: pxsim.GlobalAction) {
+        if (!data.getData<boolean>(auth.ACCESSIBLE_BLOCKS)) {
+            return;
+        }
+        switch (action) {
+            case "escape": {
+                this.setSimulatorFullScreen(false);
+                return;
+            }
+            case "navigateregions" : {
+                this.showNavigateRegions();
+                return
+            }
+        }
+    }
+
     /**
      * Add Github extensions **without** conflict resolution
      */
@@ -5247,6 +5280,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 +5555,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} />}
+                {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>
         );