pxt-core 7.4.15 → 7.4.19

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

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { classList, ContainerProps } from "../util";
+
+export interface MenuBarProps extends ContainerProps {
+}
+
+export const MenuBar = (props: MenuBarProps) => {
+    const {
+        id,
+        className,
+        role,
+        ariaHidden,
+        ariaLabel,
+        children
+    } = props;
+
+    let focusableElements: HTMLElement[];
+    let menubar: HTMLDivElement;
+
+    const handleRef = (ref: HTMLDivElement) => {
+        if (!ref || menubar) return;
+
+        menubar = ref;
+
+        const focusable = ref.querySelectorAll(`[tabindex]:not([tabindex="-1"]),[data-isfocusable]`);
+        focusableElements = [];
+
+        for (const element of focusable.values()) {
+            focusableElements.push(element as HTMLElement);
+
+            // Remove them from the tab order, menu items are navigable using the arrow keys
+            element.setAttribute("tabindex", "-1");
+            element.setAttribute("data-isfocusable", "true");
+        }
+    }
+
+    const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+        if  (!focusableElements?.length) return;
+
+        const target = document.activeElement as HTMLElement;
+        const index = focusableElements.indexOf(target);
+
+        if (index === -1 && target !== menubar) return;
+
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (target.click) {
+                target.click();
+            }
+            else {
+                // SVG Elements
+                target.dispatchEvent(new Event("click"));
+            }
+        }
+        else if (e.key === "ArrowRight") {
+            if (index === focusableElements.length - 1 || target === menubar) {
+                focusableElements[0].focus();
+            }
+            else {
+                focusableElements[index + 1].focus();
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else if (e.key === "ArrowLeft") {
+            if (index === 0 || target === menubar) {
+                focusableElements[focusableElements.length - 1].focus();
+            }
+            else {
+                focusableElements[Math.max(index - 1, 0)].focus();
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else if (e.key === "Home") {
+            focusableElements[0].focus();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else if (e.key === "End") {
+            focusableElements[focusableElements.length - 1].focus();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+
+    return (
+        <div id={id}
+            className={classList("common-menubar", className)}
+            role={role || "menubar"}
+            tabIndex={0}
+            onKeyDown={onKeyDown}
+            ref={handleRef}
+            aria-hidden={ariaHidden}
+            aria-label={ariaLabel}>
+            {children}
+        </div>
+    );
+}

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

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { classList, ControlProps } from "../util";
+import { Button, ButtonProps } from "./Button";
+import { FocusTrap } from "./FocusTrap";
+
+export interface MenuItem extends ButtonProps {
+    role?: "menuitem" | undefined;
+    ariaPosInSet?: undefined;
+    ariaSetSize?: undefined;
+}
+
+export interface MenuDropdownProps extends ControlProps {
+    id: string;
+    items: MenuItem[];
+    label?: string | JSX.Element;
+    title: string;
+    icon?: string;
+}
+
+export const MenuDropdown = (props: MenuDropdownProps) => {
+    const {
+        id,
+        className,
+        ariaHidden,
+        ariaLabel,
+        role,
+        items,
+        label,
+        title,
+        icon
+    } = props;
+
+    const [ expanded, setExpanded ] = React.useState(false);
+
+    let container: HTMLDivElement;
+    let expandButton: HTMLButtonElement;
+
+    const handleContainerRef = (ref: HTMLDivElement) => {
+        if (!ref) return;
+        container = ref;
+    }
+
+    const handleButtonRef = (ref: HTMLButtonElement) => {
+        if (!ref) return;
+        expandButton = ref;
+    }
+
+    const onMenuButtonClick = () => {
+        setExpanded(!expanded);
+    }
+
+    const onSubpaneEscape = () => {
+        setExpanded(false);
+        if (expandButton) expandButton.focus();
+    }
+
+    const onBlur = (e: React.FocusEvent) => {
+        if (!container) return;
+        if (expanded && !container.contains(e.relatedTarget as HTMLElement)) setExpanded(false);
+    }
+
+    const classes = classList("common-menu-dropdown", className);
+    const menuId = id + "-menu";
+
+    return <div className={classes} ref={handleContainerRef} onBlur={onBlur}>
+        <Button
+            id={id}
+            label={label}
+            buttonRef={handleButtonRef}
+            title={title}
+            leftIcon={icon}
+            role={role || "menuitem"}
+            className={classList("menu-button", expanded && "expanded")}
+            onClick={onMenuButtonClick}
+            ariaHasPopup="true"
+            ariaExpanded={expanded}
+            ariaControls={expanded ? menuId : undefined}
+            ariaLabel={ariaLabel}
+            ariaHidden={ariaHidden}
+            />
+        {expanded &&
+            <div role="menu"
+                className="common-menu-dropdown-pane"
+                tabIndex={0}
+                id={menuId}
+                aria-labelledby={id}>
+                <FocusTrap arrowKeyNavigation={true} onEscape={onSubpaneEscape}>
+                    <ul role="presentation">
+                        { items.map((item, index) =>
+                            <li key={index} role="presentation">
+                                <Button
+                                    {...item}
+                                    className={classList("common-menu-dropdown-item", item.className)}
+                                    onClick={() => {
+                                        setExpanded(false);
+                                        item.onClick();
+                                    }}
+                                    role="menuitem"
+                                    ariaPosInSet={index + 1}
+                                    ariaSetSize={items.length}/>
+                            </li>
+                        )}
+                    </ul>
+                </FocusTrap>
+            </div>
+        }
+    </div>
+}

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

@@ -1,6 +1,8 @@
 import React = require("react");
+import ReactDOM = require("react-dom");
 import { classList, ContainerProps } from "../util";
 import { Button } from "./Button";
+import { FocusTrap } from "./FocusTrap";
 
 export interface ModalAction {
     label: string;
@@ -22,6 +24,7 @@ export interface ModalProps extends ContainerProps {
     actions?: ModalAction[];
     onClose?: () => void;
     fullscreen?: boolean;
+    parentElement?: Element;
 }
 
 export const Modal = (props: ModalProps) => {
@@ -36,6 +39,7 @@ export const Modal = (props: ModalProps) => {
         title,
         actions,
         onClose,
+        parentElement,
         fullscreen
     } = props;
 
@@ -43,49 +47,13 @@ export const Modal = (props: ModalProps) => {
         if (onClose) onClose();
     }
 
-    let firstFocusableElement: HTMLElement;
-    let lastFocusableElement: HTMLElement;
-
-    const handleRef = (ref: HTMLDivElement) => {
-        if (!ref) return;
-
-        const focusable = ref.querySelectorAll(`[tabindex]:not([tabindex="-1"])`);
-
-        firstFocusableElement = focusable.item(0) as HTMLElement;
-        lastFocusableElement = focusable.item(focusable.length - 1) as HTMLElement;
-
-        // TODO: Add an error here? this should never happen
-        if (!firstFocusableElement) return;
-
-        if (!ref.contains(document.activeElement)) firstFocusableElement.focus();
-    }
-
-    const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
-        if (e.key !== "Tab") return;
-
-        const target = e.target;
-
-        if (e.shiftKey) {
-            if (target === firstFocusableElement) {
-                lastFocusableElement.focus();
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }
-        else if (target === lastFocusableElement) {
-            firstFocusableElement.focus();
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    }
-
     const classes = classList(
         "common-modal-container",
         fullscreen && "fullscreen",
         className
     );
 
-    return <div className={classes} ref={handleRef} onKeyDown={onKeyDown}>
+    return ReactDOM.createPortal(<FocusTrap className={classes} onEscape={closeClickHandler}>
         <div id={id}
             className="common-modal"
             role={role || "dialog"}
@@ -139,5 +107,5 @@ export const Modal = (props: ModalProps) => {
                 </div>
             }
         </div>
-    </div>
+    </FocusTrap>, parentElement || document.body)
 }

package/react-common/components/util.tsx

@@ -54,6 +54,15 @@ export function classList(...classes: string[]) {
         .join(" ");
 }
 
+export function nodeListToArray<U extends Node>(list: NodeListOf<U>): U[] {
+    const out: U[] = [];
+
+    for (const node of list) {
+        out.push(node);
+    }
+    return out;
+}
+
 export enum CheckboxStatus {
     Selected,
     Unselected,

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

@@ -163,7 +163,11 @@
 }
 
 .common-button.menu-button:hover {
-    background: rgba(0,0,0,.1);
+    background: @buttonMenuBackgroundHoverColor;
+}
+
+.common-button.menu-button:active {
+    background: @buttonMenuBackgroundActiveColor;
 }
 
 .common-button.menu-button.inverted,
@@ -172,3 +176,19 @@
     color: @buttonMenuTextColorInverted;
 }
 
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast, .hc {
+    .common-button {
+        color: @highContrastTextColor !important;
+        background: @highContrastBackgroundColor !important;
+        border-color: @highContrastTextColor !important;
+
+        &:hover, &:focus {
+            outline: @highContrastFocusOutline !important;
+            z-index: @highContrastFocusZIndex;
+        }
+    }
+}

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

@@ -10,4 +10,15 @@
 .common-checkbox:focus-within {
     outline: @checkboxFocusOutline;
     border-radius: 0.2em;
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .common-checkbox:hover,
+    .common-checkbox:focus-within {
+        outline: @highContrastFocusOutline;
+    }
 }

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

@@ -92,4 +92,22 @@
     i {
         color: @inputTextColorDisabled;
     }
-}
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .common-input {
+        color: @highContrastTextColor;
+        border-color: @highContrastTextColor;
+        background-color: @highContrastBackgroundColor;
+    }
+
+    .common-input-group:focus::after,
+    .common-input-group:focus-within::after {
+        border-color: @highContrastHighlightColor;
+    }
+
+}

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

@@ -0,0 +1,55 @@
+.common-menu-dropdown {
+    height: 100%;
+    position: relative;
+}
+
+.common-menu-dropdown > .menu-button.expanded {
+    background: @buttonMenuBackgroundActiveColor;
+}
+
+.common-menu-dropdown-pane {
+    position: absolute;
+    right: 0;
+    width: 12rem;
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        background: @menuDropdownPaneBackground;
+    }
+
+    li {
+        width: 100%;
+    }
+}
+
+.common-menu-dropdown-item {
+    background: none;
+    text-align: left;
+    width: 100%;
+    margin: 0;
+    padding: 1rem;
+}
+
+.common-menu-dropdown-item.common-button:focus::after {
+    outline: @buttonFocusOutlineInverted;
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .common-menu-dropdown-pane {
+        color: @highContrastTextColor;
+        background-color: @highContrastBackgroundColor;
+        border: 1px solid @highContrastTextColor;
+    }
+
+    .common-menu-dropdown-item:hover,
+    .common-menu-dropdown > .menu-button.expanded {
+        outline: @highContrastFocusOutline;
+        z-index: @highContrastFocusZIndex;
+    }
+}

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

@@ -8,7 +8,7 @@
     right: 0;
     bottom: 0;
     background-color: var(--modal-overlay-color);
-    z-index: var(--modal-dimmer-zindex);
+    z-index: @modalDimmerZIndex;
 }
 
 .common-modal-container.fullscreen {
@@ -102,4 +102,33 @@
     background-color: var(--body-background-color);
     padding: 1rem;
     max-height: unset;
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast, .hc {
+    .common-modal-header,
+    .common-modal-body,
+    .common-modal-footer {
+        background-color: @highContrastBackgroundColor;
+        color: @highContrastTextColor;
+        border-color: @highContrastTextColor;
+
+        .common-modal-close .common-button .fas {
+            opacity: 1;
+            color: @highContrastTextColor;
+        }
+    }
+
+    .fullscreen > .common-modal > .common-modal-header,
+    .fullscreen > .common-modal > .common-modal-body {
+        background-color: @highContrastBackgroundColor;
+        color: @highContrastTextColor;
+    }
+
+    .common-modal {
+        border: 1px solid @highContrastTextColor;
+    }
 }

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

@@ -315,6 +315,26 @@
     }
 }
 
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .profile-badges .profile-badge,
+    .profile-badges-background .profile-badge,
+    .profile-badge-and-title,
+    .profile-initials-portrait,
+    .profile-badge-subtitle,
+    .profile-username {
+        color: @highContrastTextColor;
+        background-color: @highContrastBackgroundColor;
+    }
+
+    .profile-badge.clickable:hover {
+        outline: @highContrastFocusOutline;
+    }
+}
+
 @media only screen and (max-width: 1200px) and (min-width: 992px) {
     .profile-badges, .profile-badges-background {
         background-size: 25%;

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

@@ -16,6 +16,8 @@
 @buttonMenuBackgroundColorInverted: @buttonMenuTextColor;
 @buttonFocusOutline: @buttonTextColorInverted solid 1px;;
 @buttonFocusOutlineInverted: @commonBorderColor solid 1px;
+@buttonMenuBackgroundHoverColor: rgba(0,0,0,.1);
+@buttonMenuBackgroundActiveColor: rgba(0,0,0,.15);
 
 /****************************************************
  *                    Modals                        *
@@ -26,6 +28,15 @@
 @modalHeaderBackgroundColor: @modalBodyBackgroundColor;
 @modalFooterBackgroundColor: #f9fafb;
 @modalSeparatorBorder: 1px solid rgba(34, 36, 38, .15);
+@modalDimmerZIndex: 1000;
+
+
+/****************************************************
+ *                 MenuDropdowns                    *
+ ****************************************************/
+
+ @menuDropdownPaneBackground: #ffffff;
+
 
 /****************************************************
  *                    Checkboxes                    *
@@ -45,3 +56,13 @@
 @inputBackgroundColorDisabled: @commonBackgroundDisabledColor;
 @inputButtonColor: rgb(0, 120, 212);
 @inputButtonColorHover: rgb(16, 110, 190);
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+ @highContrastTextColor: #ffffff;
+ @highContrastBackgroundColor: #000000;
+ @highContrastHighlightColor: #ffff00;
+ @highContrastFocusOutline: 2px solid @highContrastHighlightColor;
+ @highContrastFocusZIndex: 1;

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

@@ -3,6 +3,7 @@
 @import "controls/Checkbox.less";
 @import "controls/Icon.less";
 @import "controls/Input.less";
+@import "controls/MenuDropdown.less";
 @import "controls/Modal.less";
 @import "controls/Spinner.less";
 @import "./react-common-variables.less";

package/theme/highcontrast.less

@@ -11,6 +11,7 @@
 
 @selected: yellow;
 @disabled: #3ff23f;
+@hyperlink: #807FFF;
 
 /* Messages */
 #msg .hc {
@@ -77,6 +78,10 @@
         text-decoration: underline;
     }
 
+    ul > li {
+        color: @HCtextColor;
+    }
+
     #tutorialcard .prevbutton,
     #tutorialcard .nextbutton {
         &:hover, &:focus {
@@ -498,7 +503,7 @@
                 border-color: @HCtextColor;
                 border-style: solid;
             }
-            .actions {
+            .ui.grid.stackable .actions {
                 .card-action {
                     border: 2px solid @HCtextColor;
                     .button.attached i {
@@ -509,6 +514,10 @@
                 .card-action-title {
                     color: @HCtextColor;
                 }
+                .card-action:hover,
+                .card-action:focus-within {
+                    border-color: @selected;
+                }
             }
         }
     }
@@ -666,7 +675,8 @@
     #assetEditor {
         .asset-editor-sidebar,
         .asset-editor-sidebar-preview,
-        .asset-editor-preview {
+        .asset-editor-preview,
+        .asset-editor-sidebar-temp {
             color: @HCtextColor;
             background-color: @HCbackground;
             border-color: @HCtextColor;
@@ -682,7 +692,10 @@
             border-bottom: 1px solid @HCtextColor;
         }
 
-        .asset-editor-button,
+        .common-button {
+            border: 1px solid;
+        }
+
         .asset-editor-card,
         .create-new {
             color: @HCtextColor;
@@ -695,10 +708,7 @@
             color: @HCbackground;
         }
 
-        .delete-asset {
-            border: 1px solid @red;
-        }
-
+        .asset-editor-card.selected,
         .asset-editor-gallery-tab.selected,
         .asset-editor-button:hover,
         .create-new:hover {
@@ -716,7 +726,8 @@
 
     /* Hyperlinks */
     a {
-        color: @HCtextColor !important;
+        color: @hyperlink !important;
+        text-decoration: underline !important;
     }
 
     #sidedocsbar {
@@ -809,7 +820,7 @@
         }
     }
 
-    .tutorialhint {
+    .tutorialhint, .tutorial-hint .tutorial-callout {
         border-color: @HCtextColor;
         background-color: @HCbackground;
         color: @HCtextColor;
@@ -856,6 +867,17 @@
         border-color: @selected !important;
     }
 
+    .formatted-bullet {
+        background: linear-gradient(@HCtextColor, @HCtextColor) ~"no-repeat 45%/2px 100%";
+        i.icon, i.xicon {
+            color: @HCbackground;
+            background-color: @HCtextColor;
+        }
+        &:after {
+            border-color: @HCtextColor !important;
+        }
+    }
+
 
     /* Modals */
     .ui.modal {