Tab navigation improvement for the docs sidebar.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "12.1.0",
+  "version": "12.1.1",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",

pxtblocks/builtins/variables.ts

@@ -199,7 +199,7 @@ export function initVariables() {
          * @this Blockly.Block
          */
         customContextMenu: function (this: Blockly.BlockSvg, options: any[]) {
-            if (!(this.workspace?.options?.readOnly)) {
+            if (!(this.workspace?.options?.readOnly) && !this.isInFlyout) {
                 let option: any = {
                     enabled: this.workspace.remainingCapacity() > 0
                 };

pxtblocks/fields/field_ledmatrix.ts

@@ -310,7 +310,8 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom {
     }
 
     setValue(newValue: string | number, restoreState = true) {
-        super.setValue(String(newValue));
+        const shouldFireChangeEvent = newValue !== this.value_;
+        super.setValue(String(newValue), shouldFireChangeEvent);
         if (this.matrixSvg) {
             if (restoreState) this.restoreStateFromString();
 

teachertool/src/components/SignInModal.tsx

@@ -14,6 +14,15 @@ export const SignInModal: React.FC<IProps> = () => {
         params: pxt.Util.parseQueryString(window.location.href),
     }
 
+    // Projects loaded from urls get cleared after load, so check if we need to add that back.
+    if (teacherTool.projectMetadata?.persistId && !callbackState.params?.["project"]) {
+        if (!callbackState.params) {
+            callbackState.params = {};
+        }
+
+        callbackState.params["project"] = teacherTool.projectMetadata.persistId;
+    }
+
     return teacherTool.modalOptions?.modal === "sign-in" ? (
         <RCSignInModal
             onClose={hideModal}

theme/docs.less

@@ -29,6 +29,7 @@
 
 @docsCardBorderColor: #e9eef2;
 @docsCardHoverBorderColor: #1dacf4;
+@docsCardFocusBorderColor: #0078D4; // --pxt-focus-border not available in iframed documentation
 
 #docs .footer,
 #docs .topbar,
@@ -219,6 +220,7 @@
     #sidedocs-back-button {
         margin-top: 1.25rem;
         margin-left: 1.25rem;
+        margin-right: 5rem; // Safety margin for the "open in new tab" button
         cursor: pointer;
         user-select: none;
         color: var(--pxt-page-foreground);
@@ -227,6 +229,11 @@
         &:hover {
             text-decoration: none;
         }
+
+        &:focus-visible {
+            outline: 3px solid @docsCardFocusBorderColor;
+            outline-offset: 3px;
+        }
     }
 
     #sidedocs-back-button.disabled {
@@ -483,6 +490,10 @@
 
 .sideDocs #sidedocsbar a {
     color: @docsLinkColor;
+    &:focus-visible {
+        outline: 3px solid var(--pxt-focus-border);
+        outline-offset: 3px;
+    }
 }
 
 .replaceDocsAvatar() when not (@docsAvatarImage = none) {

webapp/src/app.tsx

@@ -3742,10 +3742,10 @@ export class ProjectView
         if (enabled) {
             document.addEventListener('keydown', this.closeOnEscape);
             simulator.driver.focus();
+            this.closeFlyout();
         } else {
             document.removeEventListener('keydown', this.closeOnEscape);
         }
-        this.closeFlyout();
         this.setState({ fullscreen: enabled });
     }
 
@@ -5332,8 +5332,10 @@ export class ProjectView
     ///////////////////////////////////////////////////////////
 
     toggleAreaMenu() {
-        // Close the simulator if needed.
-        if (this.state.fullscreen) {
+        // Restore the simulator if needed. If the area menu is open, allow the simulator to
+        // stay fullscreened. The desired behaviour is that the mini sim can be fullscreened
+        // through the area menu, otherwise it has been restored already.
+        if (this.state.fullscreen && !this.state.areaMenuOpen) {
             this.setSimulatorFullScreen(false);
         }
 

webapp/src/container.tsx

@@ -608,12 +608,14 @@ export interface SideDocsState {
 interface BuiltInHelpDetails {
     component: () => JSX.Element;
     popOutHref: string;
+    singleTabStop: boolean; // if the whole doc is only one tab stop, the "open in new tab" button placement becomes unintuitive.
 }
 
 const builtIns: Record<pxt.editor.BuiltInHelp, BuiltInHelpDetails> = {
     "keyboardControls": {
         component: KeyboardControlsHelp,
-        popOutHref: "https://makecode.com/accessibility"
+        popOutHref: "https://makecode.com/accessibility",
+        singleTabStop: true
     }
 }
 
@@ -778,20 +780,27 @@ export class SideDocs extends data.Component<SideDocsProps, SideDocsState> {
             tabIndex: 0,
         };
 
+        const openInNewTab = !lockedEditor && <div key="newTab" className="ui app hide" id="sidedocsbar">
+            <a className="ui icon link" aria-label={lf("Open documentation in new tab")} {...openInNewTabLinkProps}>
+                <sui.Icon icon="external" />
+            </a>
+        </div>;
+
+        const content = <div key="content" id="sidedocsframe-wrapper">
+            {this.renderContent(url, builtIn, lockedEditor)}
+        </div>;
+
+        const flipNewTabLinkOrder = builtIn?.singleTabStop;
+
+        const contentParts = flipNewTabLinkOrder ? [content, openInNewTab] : [openInNewTab, content];
+
         /* eslint-disable @microsoft/sdl/react-iframe-missing-sandbox */
         return <div>
             <button id="sidedocstoggle" role="button" aria-label={sideDocsCollapsed ? lf("Expand the side documentation") : lf("Collapse the side documentation")} className="ui icon button large" onClick={this.toggleVisibility}>
                 <sui.Icon icon={`icon inverted chevron ${showLeftChevron ? 'left' : 'right'}`} />
             </button>
             <div id="sidedocs" onKeyDown={this.handleKeyDown}>
-                {!lockedEditor && <div className="ui app hide" id="sidedocsbar">
-                    <a className="ui icon link" aria-label={lf("Open documentation in new tab")} {...openInNewTabLinkProps}>
-                        <sui.Icon icon="external" />
-                    </a>
-                </div>}
-                <div id="sidedocsframe-wrapper">
-                    {this.renderContent(url, builtIn, lockedEditor)}
-                </div>
+                {contentParts}
             </div>
         </div>
         /* eslint-enable @microsoft/sdl/react-iframe-missing-sandbox */