pxt-core 10.0.21 → 10.0.23

package/common-docs/teachertool/catalog-shared.json

@@ -6,6 +6,7 @@
             "template": "${Block} used ${count} times",
             "description": "This block was used the specified number of times in your project.",
             "docPath": "/teachertool",
+            "tags": ["General"],
             "params": [
                 {
                     "name": "block",
@@ -27,6 +28,7 @@
             "description": "The project contains at least the specified number of comments.",
             "docPath": "/teachertool",
             "maxCount": 1,
+            "tags": ["General"],
             "params": [
                 {
                     "name": "count",
@@ -43,6 +45,7 @@
             "docPath": "/teachertool",
             "description": "The program uses at least this many loops of any kind (for, repeat, while, or for-of).",
             "maxCount": 1,
+            "tags": ["Code Elements"],
             "params": [
                 {
                     "name": "count",
@@ -59,6 +62,7 @@
             "docPath": "/teachertool",
             "description": "At least this many user-defined functions are created and called.",
             "maxCount": 1,
+            "tags": ["Code Elements"],
             "params": [
                 {
                     "name": "count",
@@ -75,6 +79,7 @@
             "docPath": "/teachertool",
             "description": "The program creates and uses at least this many user-defined variables.",
             "maxCount": 1,
+            "tags": ["Code Elements"],
             "params": [
                 {
                     "name": "count",

package/common-docs/teachertool/test/catalog-shared.json

@@ -7,6 +7,7 @@
             "description": "Experimental: AI outputs may not be accurate. Use with caution and always review responses.",
             "docPath": "/teachertool",
             "maxCount": 10,
+            "tags": ["General"],
             "params": [
                 {
                     "name": "question",

package/docfiles/pxtweb/cookieCompliance.ts

@@ -9,6 +9,7 @@ namespace pxt {
     let analyticsLoaded = false;
     let interactiveConsent = false;
     let isProduction = false;
+    let partnerName: string;
 
     class TelemetryQueue<A, B, C> {
         private q: [A, B, C][] = [];
@@ -185,6 +186,16 @@ namespace pxt {
     }
 
     export function initializeAppInsightsInternal(includeCookie = false) {
+        try {
+            const params = new URLSearchParams(window.location.search);
+            if (params.has("partner")) {
+                partnerName = params.get("partner");
+            }
+        }
+        catch (e) {
+            console.warn("Could not parse search string", e);
+        }
+
         // loadAppInsights is defined in docfiles/tracking.html
         const loadAI = (window as any).loadAppInsights;
         if (loadAI) {
@@ -221,6 +232,10 @@ namespace pxt {
         telemetryItem.properties["target"] = pxtConfig.targetId;
         telemetryItem.properties["stage"] = (pxtConfig.relprefix || "/--").replace(/[^a-z]/ig, '')
 
+        if (partnerName) {
+            telemetryItem.properties["partner"] = partnerName;
+        }
+
         const userAgent = navigator.userAgent.toLowerCase();
         const electronRegexResult = /\belectron\/(\d+\.\d+\.\d+.*?)(?: |$)/i.exec(userAgent); // Example navigator.userAgent: "Mozilla/5.0 Chrome/61.0.3163.100 Electron/2.0.0 Safari/537.36"
         if (electronRegexResult) {

package/package.json

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

package/react-common/components/controls/Accordion/Accordion.tsx

@@ -1,15 +1,19 @@
 import * as React from "react";
 import { ContainerProps, classList, fireClickOnEnter } from "../../util";
 import { useId } from "../../../hooks/useId";
-import { AccordionProvider, clearExpanded, setExpanded, useAccordionDispatch, useAccordionState } from "./context";
+import { AccordionProvider, removeExpanded, setExpanded, useAccordionDispatch, useAccordionState } from "./context";
 
 export interface AccordionProps extends ContainerProps {
+    multiExpand?: boolean;
+    defaultExpandedIds?: string[];
     children?: React.ReactElement<AccordionItemProps>[] | React.ReactElement<AccordionItemProps>;
 }
 
 export interface AccordionItemProps extends ContainerProps {
     children?: [React.ReactElement<AccordionHeaderProps>, React.ReactElement<AccordionPanelProps>];
     noChevron?: boolean;
+    itemId?: string;
+    onExpandToggled?: (expanded: boolean) => void;
 }
 
 export interface AccordionHeaderProps extends ContainerProps {
@@ -27,10 +31,12 @@ export const Accordion = (props: AccordionProps) => {
         ariaHidden,
         ariaDescribedBy,
         role,
+        multiExpand,
+        defaultExpandedIds
     } = props;
 
     return (
-        <AccordionProvider>
+        <AccordionProvider multiExpand={multiExpand} defaultExpandedIds={defaultExpandedIds}>
             <div
                 className={classList("common-accordion", className)}
                 id={id}
@@ -54,23 +60,26 @@ export const AccordionItem = (props: AccordionItemProps) => {
         ariaHidden,
         ariaDescribedBy,
         role,
-        noChevron
+        noChevron,
+        itemId,
+        onExpandToggled,
     } = props;
 
     const { expanded } = useAccordionState();
     const dispatch = useAccordionDispatch();
 
-    const panelId = useId();
+    const panelId = itemId ?? useId();
     const mappedChildren = React.Children.toArray(children);
-    const isExpanded = expanded === panelId;
+    const isExpanded = expanded.indexOf(panelId) !== -1;
 
     const onHeaderClick = React.useCallback(() => {
         if (isExpanded) {
-            dispatch(clearExpanded());
+            dispatch(removeExpanded(panelId));
         }
         else {
             dispatch(setExpanded(panelId));
         }
+        onExpandToggled?.(!isExpanded);
     }, [isExpanded]);
 
     return (
@@ -150,4 +159,4 @@ export const AccordionPanel = (props: AccordionPanelProps) => {
             {children}
         </div>
     );
-}
+}

package/react-common/components/controls/Accordion/context.tsx

@@ -1,17 +1,22 @@
 import * as React from "react";
 
 interface AccordionState {
-    expanded?: string;
+    multiExpand?: boolean;
+    expanded: string[];
 }
 
 const AccordionStateContext = React.createContext<AccordionState>(null);
 const AccordionDispatchContext = React.createContext<(action: Action) => void>(null);
 
-export const AccordionProvider = ({ children }: React.PropsWithChildren<{}>) => {
-    const [state, dispatch] = React.useReducer(
-        accordionReducer,
-        {}
-    );
+export const AccordionProvider = ({
+    multiExpand,
+    defaultExpandedIds,
+    children,
+}: React.PropsWithChildren<{ multiExpand?: boolean; defaultExpandedIds?: string[] }>) => {
+    const [state, dispatch] = React.useReducer(accordionReducer, {
+        expanded: defaultExpandedIds ?? [],
+        multiExpand,
+    });
 
     return (
         <AccordionStateContext.Provider value={state}>
@@ -27,11 +32,12 @@ type SetExpanded = {
     id: string;
 };
 
-type ClearExpanded = {
-    type: "CLEAR_EXPANDED";
+type RemoveExpanded = {
+    type: "REMOVE_EXPANDED";
+    id: string;
 };
 
-type Action = SetExpanded | ClearExpanded;
+type Action = SetExpanded | RemoveExpanded;
 
 export const setExpanded = (id: string): SetExpanded => (
     {
@@ -40,14 +46,15 @@ export const setExpanded = (id: string): SetExpanded => (
     }
 );
 
-export const clearExpanded = (): ClearExpanded => (
+export const removeExpanded = (id: string): RemoveExpanded => (
     {
-        type: "CLEAR_EXPANDED"
+        type: "REMOVE_EXPANDED",
+        id
     }
 );
 
 export function useAccordionState() {
-    return React.useContext(AccordionStateContext)
+    return React.useContext(AccordionStateContext);
 }
 
 export function useAccordionDispatch() {
@@ -59,12 +66,12 @@ function accordionReducer(state: AccordionState, action: Action): AccordionState
         case "SET_EXPANDED":
             return {
                 ...state,
-                expanded: action.id
+                expanded: state.multiExpand ? [...state.expanded, action.id] : [action.id],
             };
-        case "CLEAR_EXPANDED":
+        case "REMOVE_EXPANDED":
             return {
                 ...state,
-                expanded: undefined
+                expanded: state.expanded.filter((id) => id !== action.id),
             };
     }
-}
+}

package/react-common/components/controls/EditorToggle.tsx

@@ -125,7 +125,11 @@ const EditorToggleAccessibleMenu = (props: EditorToggleProps) => {
         next.push({...current});
 
         // The selected item will always be a top-level option, not in a dropdown
-        if (selected === index) next[next.length - 1].selected = true;
+        if (selected === index) {
+            next[next.length - 1].selected = true;
+        } else {
+            next[next.length - 1].selected = false;
+        }
 
         if (isDropdownItem(current)) {
             next.push(...current.items.filter(i => i.focusable))

package/react-common/components/controls/FocusList.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ContainerProps } from "../util";
+import { ContainerProps, findNextFocusableElement } from "../util";
 
 export interface FocusListProps extends ContainerProps {
     role: string;
@@ -62,37 +62,6 @@ export const FocusList = (props: FocusListProps) => {
             && getComputedStyle(e).display !== "none";
     }
 
-    const firstFocusableElement = () => {
-        return focusableElements.find(e => isFocusable(e))
-    }
-
-    const lastFocusableElement = () => {
-        for (let i = 0; i < focusableElements.length; i++) {
-            if (isFocusable(focusableElements[focusableElements.length - 1 - i])) {
-                return focusableElements[focusableElements.length - 1 - i];
-            }
-        }
-
-        return focusableElements[0];
-    }
-
-    const nextFocusableElement = (index: number, forwards: boolean) => {
-        let current: HTMLElement
-        for (let i = 1; i < focusableElements.length; i++) {
-            if (forwards) {
-                current = focusableElements[(index + i) % focusableElements.length];
-            }
-            else {
-                current = focusableElements[(index + focusableElements.length - i) % focusableElements.length];
-            }
-
-            if (isFocusable(current)) {
-                return current;
-            }
-        }
-        return focusableElements[0];
-    }
-
     const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
         if  (!focusableElements?.length) return;
 
@@ -120,31 +89,31 @@ export const FocusList = (props: FocusListProps) => {
         }
         else if (e.key === (useUpAndDownArrowKeys ? "ArrowDown" : "ArrowRight")) {
             if (index === focusableElements.length - 1 || target === focusList) {
-                focus(firstFocusableElement());
+                focus(findNextFocusableElement(focusableElements, index, 0, true, isFocusable));
             }
             else {
-                focus(nextFocusableElement(index, true));
+                focus(findNextFocusableElement(focusableElements, index, index + 1, true, isFocusable));
             }
             e.preventDefault();
             e.stopPropagation();
         }
         else if (e.key === (useUpAndDownArrowKeys ? "ArrowUp" : "ArrowLeft")) {
             if (index === 0 || target === focusList) {
-                focus(lastFocusableElement());
+                focus(findNextFocusableElement(focusableElements, index, focusableElements.length - 1, false, isFocusable));
             }
             else {
-                focus(nextFocusableElement(index, false));
+                focus(findNextFocusableElement(focusableElements, index, index - 1, false, isFocusable));
             }
             e.preventDefault();
             e.stopPropagation();
         }
         else if (e.key === "Home") {
-            focus(firstFocusableElement());
+            focus(findNextFocusableElement(focusableElements, index, 0, true, isFocusable));
             e.preventDefault();
             e.stopPropagation();
         }
         else if (e.key === "End") {
-            focus(lastFocusableElement());
+            focus(findNextFocusableElement(focusableElements, index, focusableElements.length - 1, true, isFocusable));
             e.preventDefault();
             e.stopPropagation();
         }

package/react-common/components/controls/FocusTrap.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { classList, nodeListToArray } from "../util";
+import { classList, nodeListToArray, findNextFocusableElement } from "../util";
 
 export interface FocusTrapProps extends React.PropsWithChildren<{}> {
     onEscape: () => void;
@@ -58,24 +58,24 @@ export const FocusTrap = (props: FocusTrapProps) => {
 
             if (forward) {
                 if (goToEnd) {
-                    focusable[focusable.length - 1].focus();
+                    findNextFocusableElement(focusable, index, focusable.length - 1, forward).focus();
                 }
                 else if (index === focusable.length - 1) {
-                    focusable[0].focus();
+                    findNextFocusableElement(focusable, index, 0, forward).focus();
                 }
                 else {
-                    focusable[index + 1].focus();
+                    findNextFocusableElement(focusable, index, index + 1, forward).focus();
                 }
             }
             else {
                 if (goToEnd) {
-                    focusable[0].focus();
+                    findNextFocusableElement(focusable, index, 0, forward).focus();
                 }
                 else if (index === 0) {
-                    focusable[focusable.length - 1].focus();
+                    findNextFocusableElement(focusable, index, focusable.length - 1, forward).focus();
                 }
                 else {
-                    focusable[Math.max(index - 1, 0)].focus();
+                    findNextFocusableElement(focusable, index, Math.max(index - 1, 0), forward).focus();
                 }
             }
 

package/react-common/components/share/ShareInfo.tsx

@@ -32,6 +32,7 @@ export interface ShareInfoProps {
     onClose: () => void;
 }
 
+
 export const ShareInfo = (props: ShareInfoProps) => {
     const {
         projectName,
@@ -323,7 +324,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
             {showSimulator && shareState !== "gifrecord" &&
                 <div className="project-share-thumbnail">
                     {thumbnailUri
-                        ? <img src={thumbnailUri} />
+                        ? <img src={thumbnailUri} alt={lf("Preview of your code running on the simulator")} aria-label={lf("Simulator preview")}/>
                         : <div className="project-thumbnail-placeholder">
                              <div className="common-spinner" />
                         </div>
@@ -406,6 +407,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
                             <div className="common-input-attached-button">
                                 <Input
                                     ariaDescribedBy="share-input-title"
+                                    ariaLabel={lf("Your shareable project link")}
                                     handleInputRef={handleInputRef}
                                     initialValue={shareData.url}
                                     readOnly={true}
@@ -462,7 +464,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
                                     className="menu-button project-qrcode"
                                     buttonRef={handleQRCodeButtonRef}
                                     title={lf("Show QR Code")}
-                                    label={<img className="qrcode-image" src={shareData?.qr} />}
+                                    label={<img className="qrcode-image" src={shareData?.qr} alt={lf("QR code to access your project")} aria-label={lf("Project share link QR code")}/>}
                                     onClick={handleQRCodeClick}
                                 />
                             </div>
@@ -475,7 +477,8 @@ export const ShareInfo = (props: ShareInfoProps) => {
                             selected={embedOptions.findIndex(i => i.name === embedState)} />
                         <Textarea readOnly={true}
                             rows={5}
-                            initialValue={shareData?.embed[embedState]} />
+                            initialValue={shareData?.embed[embedState]}
+                            ariaLabel={lf("Embed code textarea")} />
                     </div>}
                     {kioskState &&
                         <div>
@@ -511,9 +514,9 @@ export const ShareInfo = (props: ShareInfoProps) => {
             </div>
 
             {showQRCode &&
-                <Modal title={lf("QR Code")} onClose={handleQRCodeModalClose}>
+                <Modal title={lf("QR Code")} onClose={handleQRCodeModalClose} ariaLabel={lf("QR Code modal")} >
                     <div className="qrcode-modal-body">
-                        <img className="qrcode-image" src={shareData?.qr} />
+                        <img className="qrcode-image" src={shareData?.qr} alt={lf("QR code to access your project")} aria-label={lf("Project share link QR code enlarged")} />
                     </div>
                 </Modal>
             }

package/react-common/components/util.tsx

@@ -91,4 +91,25 @@ export function screenToSVGCoord(ref: SVGSVGElement, coord: ClientCoordinates) {
     screenCoord.x = coord.clientX;
     screenCoord.y = coord.clientY;
     return screenCoord.matrixTransform(ref.getScreenCTM().inverse());
+}
+
+export function findNextFocusableElement(elements: HTMLElement[], focusedIndex: number, index: number, forward: boolean, isFocusable?: (e: HTMLElement) => boolean): HTMLElement {
+    const increment = forward ? 1 : -1;
+    const element = elements[index];
+    // in this case, there are no focusable elements
+    if (focusedIndex === index) {
+        return element;
+    }
+    if (isFocusable ? isFocusable(element) : getComputedStyle(element).display !== "none") {
+        return element;
+    } else {
+        if (index + increment >= elements.length) {
+            index = 0;
+        } else if (index + increment < 0) {
+            index = elements.length - 1;
+        } else {
+            index += increment;
+        }
+    }
+    return findNextFocusableElement(elements, focusedIndex, index, forward);
 }

package/react-common/styles/controls/Modal.less

@@ -20,8 +20,10 @@
 .common-modal {
     width: 50%;
     max-width: 40rem;
+    max-height: 100%;
     border-radius: .285rem;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 .wide > .common-modal {

package/react-common/styles/react-common-variables.less

@@ -105,7 +105,7 @@
  *              EditorToggle                        *
  ****************************************************/
 
-@editorToggleBackgroundColor: rgba(52,73,94,.4);
+@editorToggleBackgroundColor: rgba(52,73,94,.8);
 @editorToggleBorderColor: rgba(52,73,94,.2);
 @editorToggleBorderWidth: 3px;
 

package/react-common/styles/share/share.less

@@ -150,6 +150,7 @@
     margin-top: 1rem;
     position: relative;
     margin-bottom: 2rem;
+    justify-content: space-between;
 }
 
 .project-share-social {
@@ -312,6 +313,12 @@
     .gif-recorder-content .thumbnail-controls {
         padding: 0 2rem;
     }
+
+    .common-button.square-button.embed.gray.mobile-portrait-hidden {
+        // important is need for color to override semantic ui's use of important
+        color: #323130 !important;
+        background: #e0e1e2;
+    }
 }
 
 @media @mobileAndBelow {

package/webapp/public/multiplayer.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css">
     <link rel="stylesheet" href="/blb/icons.css">
     <link rel="stylesheet" href="/blb/react-common-multiplayer.css">
-  <script defer="defer" src="/blb/multiplayer/js/main.0e73ac24.js"></script><link href="/blb/multiplayer/css/main.2a6ba47d.css" rel="stylesheet"></head>
+  <script defer="defer" src="/blb/multiplayer/js/main.121cfaf0.js"></script><link href="/blb/multiplayer/css/main.2a6ba47d.css" rel="stylesheet"></head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
 

package/webapp/public/skillmap.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css">
     <link rel="stylesheet" href="/blb/icons.css">
     <link rel="stylesheet" href="/blb/react-common-skillmap.css">
-  <script defer="defer" src="/blb/skillmap/js/main.f7e01730.js"></script><link href="/blb/skillmap/css/main.3c703680.css" rel="stylesheet"></head>
+  <script defer="defer" src="/blb/skillmap/js/main.e95746dc.js"></script><link href="/blb/skillmap/css/main.3c703680.css" rel="stylesheet"></head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
 

package/webapp/public/teachertool.html

@@ -16,7 +16,7 @@
     <!-- <link rel="manifest" href="/teachertool-data/manifest.json" /> -->
     <title>MakeCode Teacher Tool</title>
     <script>var pxtConfig=null</script>
-  <script defer="defer" src="/blb/teachertool/js/main.dc513d1e.js"></script><link href="/blb/teachertool/css/main.7ff56db5.css" rel="stylesheet"></head>
+  <script defer="defer" src="/blb/teachertool/js/main.b94a6d6a.js"></script><link href="/blb/teachertool/css/main.00de32e9.css" rel="stylesheet"></head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
 

package/webapp/public/tutorialtool.html

@@ -17,7 +17,7 @@
   <!-- <link rel="manifest" href="/tutorialtool-data/manifest.json" /> -->
   <title>MakeCode Tutorial Tool</title>
   <script>var pxtConfig=null</script>
-<script defer="defer" src="/blb/tutorialtool/js/main.c3bf42cf.js"></script><link href="/blb/tutorialtool/css/main.02bb1797.css" rel="stylesheet"></head>
+<script defer="defer" src="/blb/tutorialtool/js/main.03b71032.js"></script><link href="/blb/tutorialtool/css/main.02bb1797.css" rel="stylesheet"></head>
 
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>