Add keyboard navigation help documentation

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;
     }
@@ -898,6 +901,8 @@ declare namespace pxt.editor {
 
     export type Activity = "tutorial" | "recipe" | "example";
 
+    export type BuiltInHelp = "keyboardControls";
+
     export interface IProjectView {
         state: IAppState;
         setState(st: IAppState): void;
@@ -955,6 +960,7 @@ declare namespace pxt.editor {
         setSideFile(fn: IFile, line?: number): void;
         navigateToError(diag: pxtc.KsDiagnostic): void;
         setSideDoc(path: string, blocksEditor?: boolean): void;
+        toggleBuiltInSideDoc(help: BuiltInHelp, focusIfOpen: boolean): void;
         setSideMarkdown(md: string): void;
         setSideDocCollapsed(shouldCollapse?: boolean): void;
         removeFile(fn: IFile, skipConfirm?: boolean): void;
@@ -1056,6 +1062,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,34 @@ 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 === "/" && meta) {
+            e.preventDefault();
+            return "togglekeyboardcontrolshelp";
+        } else if (e.key === "u" && 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" | "togglekeyboardcontrolshelp";
+
+    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

@@ -11,6 +11,7 @@
 @import 'tutorial';
 @import 'tutorial-sidebar';
 @import 'sidedoc';
+@import 'sidedoc-keyboard-nav-help';
 @import 'home';
 @import 'serial';
 @import 'docs';
@@ -32,6 +33,7 @@
 @import 'accessibility';
 @import 'highcontrast';
 @import 'greenscreen';
+@import 'navigateregions';
 
 @import 'extension';
 @import 'extensionErrors';

theme/sidedoc-keyboard-nav-help.less

@@ -0,0 +1,50 @@
+/* Import all components */
+@import 'themes/default/globals/site.variables';
+@import 'themes/pxt/globals/site.variables';
+
+/* Reference import */
+@import (reference) "semantic.less";
+
+/*******************************
+        Keyboard nav help 
+*******************************/
+
+#keyboardnavhelp {
+    font-family: @docsPageFont !important;
+    color: @docsTextColor;
+    background-color: @docsBackgroundColor;
+
+    height: 100%;
+    padding: 1rem;
+    overflow: auto;
+    .key {
+        display: inline-flex;
+        justify-content: center;
+        padding: 0.2rem;
+        border: 1px solid var(--pxt-neutral-foreground1);
+        border-radius: 5px;
+        min-width: 1.8em;
+    }
+    .shortcut {
+        gap: 0.5rem;
+    }
+    .hint {
+        font-size: 85%;
+        line-height: 1;
+    }
+    table {
+        width: 100%;
+        table-layout: fixed;
+        text-align: left;
+    }
+    th, td {
+        vertical-align: top;
+        padding: 0.4rem 0.2rem
+    }
+    tr {
+        margin-bottom: 0.3rem;
+    }
+    h3 {
+        margin-top: 2rem;
+    }
+}

theme/sidedoc.less

@@ -63,6 +63,10 @@ code.hljs {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     z-index: @sidedocZIndex;
+
+    &:has(aside:focus-visible) {
+        outline: @editorFocusBorderSize solid  var(--pxt-focus-border);
+    }
 }
 
 .sideDocs #sidedocsframe {

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";
@@ -1436,6 +1437,12 @@ export class ProjectView
         }
     }
 
+    toggleBuiltInSideDoc(help: pxt.editor.BuiltInHelp, focusIfVisible: boolean) {
+        let sd = this.refs["sidedoc"] as container.SideDocs;
+        if (!sd) return;
+        sd.toggleBuiltInHelp(help, focusIfVisible);
+    }
+
     setTutorialInstructionsExpanded(value: boolean): void {
         const tutorialOptions = this.state.tutorialOptions;
         tutorialOptions.tutorialStepExpanded = value;
@@ -1796,6 +1803,13 @@ export class ProjectView
                 this.shouldTryDecompile = true;
             }
 
+            // Onboard accessible blocks if accessible blocks has just been enabled
+            const onboardAccessibleBlocks = pxt.storage.getLocal("onboardAccessibleBlocks") === "1"
+            const sideDocsLoadUrl = onboardAccessibleBlocks ? `${container.builtInPrefix}keyboardControls` : ""
+            if (onboardAccessibleBlocks) {
+                pxt.storage.setLocal("onboardAccessibleBlocks", "0")
+            }
+
             this.setState({
                 home: false,
                 showFiles: h.githubId ? true : false,
@@ -1804,7 +1818,7 @@ export class ProjectView
                 header: h,
                 projectName: h.name,
                 currFile: file,
-                sideDocsLoadUrl: '',
+                sideDocsLoadUrl: sideDocsLoadUrl,
                 debugging: false,
                 isMultiplayerGame: false
             });
@@ -5173,6 +5187,10 @@ export class ProjectView
     }
 
     async toggleAccessibleBlocks() {
+        const nextEnabled = !this.getData<boolean>(auth.ACCESSIBLE_BLOCKS);
+        if (nextEnabled) {
+            pxt.storage.setLocal("onboardAccessibleBlocks", "1")
+        }
         await core.toggleAccessibleBlocks()
         this.reloadEditor();
     }
@@ -5247,6 +5265,18 @@ export class ProjectView
 
     }
 
+    ///////////////////////////////////////////////////////////
+    ////////////             Navigate regions     /////////////
+    ///////////////////////////////////////////////////////////
+
+    hideNavigateRegions() {
+        this.setState({ navigateRegions: false });
+    }
+
+    showNavigateRegions() {
+        this.setState({ navigateRegions: true })
+    }
+
     ///////////////////////////////////////////////////////////
     ////////////             Key map              /////////////
     ///////////////////////////////////////////////////////////
@@ -5488,8 +5518,8 @@ export class ProjectView
                         <projects.Projects parent={this} ref={this.handleHomeRef} />
                     </div>
                 </div> : undefined}
-                {showEditorToolbar && <editortoolbar.EditorToolbar ref="editortools" parent={this} />}
                 {sideDocs ? <container.SideDocs ref="sidedoc" parent={this} sideDocsCollapsed={this.state.sideDocsCollapsed} docsUrl={this.state.sideDocsLoadUrl} /> : undefined}
+                {showEditorToolbar && <editortoolbar.EditorToolbar ref="editortools" parent={this} />}
                 {sandbox ? undefined : <scriptsearch.ScriptSearch parent={this} ref={this.handleScriptSearchRef} />}
                 {sandbox ? undefined : <extensions.Extensions parent={this} ref={this.handleExtensionRef} />}
                 {inHome ? <projects.ImportDialog parent={this} ref={this.handleImportDialogRef} /> : undefined}
@@ -5507,6 +5537,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>
         );