pxt-microbit 8.1.11 → 8.1.13

package/built/sim.js

@@ -4069,13 +4069,14 @@ var pxsim;
         .sim-button-nut:hover {
             stroke:1px solid #704A4A;
         }
-        .sim-pin:hover {
+        .sim-pin[focusable=true]:hover {
             stroke:#D4AF37;
             stroke-width:2px;
         }
 
-        .sim-pin-touch.touched {
+        .sim-pin-touch[focusable=true].touched {
             stroke:darkorange !important;
+            stroke-width:5px;
         }
 
         .sim-led-back:hover {
@@ -4170,6 +4171,7 @@ var pxsim;
         }
         .sim-label, .sim-button-label {
             fill: #000;
+            pointer-events: none;
         }
         .sim-wireframe .sim-board {
             stroke-width: 2px;
@@ -4177,25 +4179,25 @@ var pxsim;
         *:focus {
             outline: none;
         }
-        *:focus .sim-button-outer,
-        .sim-shake:focus,
-        .sim-thermometer:focus {
+        *:focus-visible .sim-button-outer,
+        .sim-shake:focus-visible,
+        .sim-thermometer:focus-visible {
             outline: 5px solid white;
             stroke: black;
             stroke-width: 10px;
             paint-order: stroke;
         }
-        .sim-button-outer.sim-button-group:focus > .sim-button {
+        .sim-button-outer.sim-button-group:focus-visible > .sim-button {
             outline: 5px solid white;
             stroke: black;
             stroke-width: 5px;
             paint-order: stroke;
         }
-        .sim-light-level-button:focus,
-        .sim-antenna-outer:focus > .sim-antenna {
+        .sim-light-level-button:focus-visible,
+        .sim-antenna-outer:focus-visible > .sim-antenna {
             outline: 5px solid white;
         }
-        .sim-pin:focus { 
+        .sim-pin:focus-visible {
             stroke: white;
             stroke-width: 5px !important;
         }
@@ -4208,6 +4210,9 @@ var pxsim;
             -webkit-user-select: none;
             -ms-user-select: none;
         }
+        [focusable=true] {
+            cursor: pointer;
+        }
     `;
         const MB_HIGHCONTRAST = `
 path.sim-board {
@@ -4220,11 +4225,11 @@ path.sim-board {
 .sim-led-back {
     stroke: white;
 }
-*:focus .sim-button-outer,
-.sim-pin:focus,
-.sim-thermometer:focus,
-.sim-shake:focus,
-.sim-light-level-button:focus {
+*:focus-visible .sim-button-outer,
+.sim-pin:focus-visible,
+.sim-thermometer:focus-visible,
+.sim-shake:focus-visible,
+.sim-light-level-button:focus-visible {
     stroke: #10C8CD !important;
 }
     `;
@@ -4315,6 +4320,7 @@ path.sim-board {
         class MicrobitBoardSvg {
             constructor(props) {
                 this.props = props;
+                this.liveRegionInitialized = false;
                 this.headInitialized = false;
                 this.antennaInitialized = false;
                 this.lightLevelInitialized = false;
@@ -4350,7 +4356,7 @@ path.sim-board {
                 if (props && props.runtime) {
                     this.board = this.props.runtime.board;
                     this.board.updateSubscribers.push(() => this.updateState());
-                    this.updateState();
+                    this.updateState(true);
                     this.attachEvents();
                 }
             }
@@ -4409,7 +4415,7 @@ path.sim-board {
                 pxsim.svg.setGradientColors(this.soundLevelGradient, theme.ledOff, theme.ledOn);
                 this.positionV2Elements();
             }
-            updateState() {
+            updateState(initialCall = false) {
                 const state = this.board;
                 if (!state)
                     return;
@@ -4430,6 +4436,12 @@ path.sim-board {
                     pxsim.U.addClass(this.element, "grayscale");
                 else
                     pxsim.U.removeClass(this.element, "grayscale");
+                if (!initialCall && !this.liveRegionInitialized) {
+                    // The iframe document's innerHTML is cleared after mkBoardView is called.
+                    // Ensure that the live region is created after this.
+                    pxsim.accessibility.setLiveContent("");
+                    this.liveRegionInitialized = true;
+                }
             }
             updateButtonPairs() {
                 const state = this.board;
@@ -4494,7 +4506,7 @@ path.sim-board {
                         this.board.accelerometerState.shake();
                     });
                     pxsim.accessibility.setAria(this.shakeButton, "button", "Shake the board");
-                    this.shakeText = pxsim.svg.child(this.g, "text", { x: 420, y: 122, class: "sim-text-small" });
+                    this.shakeText = pxsim.svg.child(this.g, "text", { x: 420, y: 122, class: "sim-text-small", "aria-hidden": true });
                     this.shakeText.textContent = "SHAKE";
                 }
             }
@@ -4566,7 +4578,6 @@ path.sim-board {
                     this.pins[index].setAttribute("aria-valuemax", pin.mode & pxsim.PinFlags.Analog ? "1023" : "100");
                     this.pins[index].setAttribute("aria-orientation", "vertical");
                     this.pins[index].setAttribute("aria-valuenow", text ? text.textContent : v);
-                    pxsim.accessibility.setLiveContent(text ? text.textContent : v);
                 }
             }
             updateTemperature() {
@@ -4578,7 +4589,7 @@ path.sim-board {
                 if (!this.thermometerInitialized) {
                     this.thermometerInitialized = true;
                     this.thermometer.style.visibility = "visible";
-                    this.thermometerText = pxsim.svg.child(this.g, "text", { class: 'sim-text', x: 58, y: 130 });
+                    this.thermometerText = pxsim.svg.child(this.g, "text", { class: 'sim-text', x: 58, y: 130, "aria-hidden": true });
                     if (this.props.runtime)
                         this.props.runtime.environmentGlobals[pxsim.localization.lf("temperature")] = state.thermometerState.temperature;
                     this.updateTheme();
@@ -4597,21 +4608,9 @@ path.sim-board {
                     ev => { }, 
                     // keydown
                     (ev) => {
-                        let charCode = (typeof ev.which == "number") ? ev.which : ev.keyCode;
-                        if (charCode === 40 || charCode === 37) { // Down/Left arrow
-                            ev.preventDefault();
-                            state.thermometerState.temperature--;
-                            if (state.thermometerState.temperature < -5) {
-                                state.thermometerState.temperature = 50;
-                            }
-                            this.updateTemperature();
-                        }
-                        else if (charCode === 38 || charCode === 39) { // Up/Right arrow
-                            ev.preventDefault();
-                            state.thermometerState.temperature++;
-                            if (state.thermometerState.temperature > 50) {
-                                state.thermometerState.temperature = -5;
-                            }
+                        const value = commonKeyHandler(ev, state.thermometerState.temperature, tmin, tmax);
+                        if (value !== undefined) {
+                            state.thermometerState.temperature = value;
                             this.updateTemperature();
                         }
                     });
@@ -4629,7 +4628,6 @@ path.sim-board {
                 this.thermometerText.textContent = t + "°C";
                 this.thermometer.setAttribute("aria-valuenow", t.toString());
                 this.thermometer.setAttribute("aria-valuetext", t + "°C");
-                pxsim.accessibility.setLiveContent(t + "°C");
             }
             updateSoundLevel() {
                 let state = this.board;
@@ -4641,7 +4639,7 @@ path.sim-board {
                     this.soundLevelInitialized = true;
                     this.soundLevel.style.visibility = "visible";
                     const level = state.microphoneState.getLevel();
-                    this.soundLevelText = pxsim.svg.child(this.g, "text", { class: 'sim-text', x: 370, y: 90 });
+                    this.soundLevelText = pxsim.svg.child(this.g, "text", { class: 'sim-text', x: 370, y: 90, "aria-hidden": true });
                     if (this.props.runtime)
                         this.props.runtime.environmentGlobals[pxsim.localization.lf("sound level")] = state.microphoneState.getLevel();
                     this.updateTheme();
@@ -4660,15 +4658,9 @@ path.sim-board {
                     ev => { }, 
                     // keydown
                     (ev) => {
-                        let charCode = (typeof ev.which == "number") ? ev.which : ev.keyCode;
-                        if (charCode === 40 || charCode === 37) { // Down/Left arrow
-                            ev.preventDefault();
-                            state.microphoneState.setLevel(state.microphoneState.getLevel() - 1);
-                            this.updateMicrophone();
-                        }
-                        else if (charCode === 38 || charCode === 39) { // Up/Right arrow
-                            ev.preventDefault();
-                            state.microphoneState.setLevel(state.microphoneState.getLevel() + 1);
+                        const value = commonKeyHandler(ev, state.microphoneState.getLevel(), tmin, tmax);
+                        if (value !== undefined) {
+                            state.microphoneState.setLevel(value);
                             this.updateMicrophone();
                         }
                     });
@@ -4686,7 +4678,6 @@ path.sim-board {
                 this.soundLevelText.textContent = t + "";
                 this.soundLevel.setAttribute("aria-valuenow", t.toString());
                 this.soundLevel.setAttribute("aria-valuetext", t + "");
-                pxsim.accessibility.setLiveContent(t + "");
             }
             updateHeading() {
                 let xc = 258;
@@ -4714,23 +4705,9 @@ path.sim-board {
                     ev => { }, 
                     // keydown
                     (ev) => {
-                        let charCode = (typeof ev.which == "number") ? ev.which : ev.keyCode;
-                        if (charCode === 40 || charCode === 37) { // Down/Left arrow
-                            ev.preventDefault();
-                            state.compassState.heading--;
-                            if (state.compassState.heading < 0)
-                                state.compassState.heading += 360;
-                            if (state.compassState.heading >= 360)
-                                state.compassState.heading %= 360;
-                            this.updateHeading();
-                        }
-                        else if (charCode === 38 || charCode === 39) { // Up/Right arrow
-                            ev.preventDefault();
-                            state.compassState.heading++;
-                            if (state.compassState.heading < 0)
-                                state.compassState.heading += 360;
-                            if (state.compassState.heading >= 360)
-                                state.compassState.heading %= 360;
+                        const value = commonKeyHandler(ev, state.compassState.heading, 0, 359);
+                        if (value !== undefined) {
+                            state.compassState.heading = value;
                             this.updateHeading();
                         }
                     });
@@ -4778,15 +4755,9 @@ path.sim-board {
                     };
                     const keyboardEventHandler = (ev) => {
                         var _a;
-                        const charCode = (typeof ev.which == "number") ? ev.which : ev.keyCode;
-                        const rs = (_a = this.board.radioState.datagram.rssi) !== null && _a !== void 0 ? _a : -75;
-                        if (charCode === 40 || charCode === 37) { // Down/Left arrow
-                            ev.preventDefault();
-                            setValue(rs - 1);
-                        }
-                        else if (charCode === 38 || charCode === 39) { // Up/Right arrow
-                            ev.preventDefault();
-                            setValue(rs + 1);
+                        const value = commonKeyHandler(ev, (_a = this.board.radioState.datagram.rssi) !== null && _a !== void 0 ? _a : -75, valueMin, valueMax);
+                        if (value !== undefined) {
+                            setValue(value);
                         }
                     };
                     pxsim.svg.buttonEvents(this.antenna.children[0], mouseEventHandler, mouseEventHandler, mouseEventHandler, () => { });
@@ -4798,7 +4769,6 @@ path.sim-board {
                     this.antenna.setAttribute("aria-valuemax", `${valueMax}`);
                     this.antenna.setAttribute("aria-orientation", "horizontal");
                     this.antenna.setAttribute("aria-valuenow", "");
-                    pxsim.accessibility.setLiveContent("");
                 }
                 let now = Date.now();
                 if (now - this.lastAntennaFlash > 200) {
@@ -4819,14 +4789,13 @@ path.sim-board {
                     let ayb = 40;
                     for (let i = 0; i < 4; ++i)
                         pxsim.svg.child(this.g, "rect", { x: ANTENNA_X - 90 + i * 6, y: ayt + 28 - i * 4, width: 4, height: 2 + i * 4, fill: "#fff" });
-                    this.rssi = pxsim.svg.child(this.g, "text", { x: ANTENNA_X - 64, y: ayb, class: "sim-text" });
+                    this.rssi = pxsim.svg.child(this.g, "text", { x: ANTENNA_X - 64, y: ayb, class: "sim-text", "aria-hidden": true });
                     this.rssi.textContent = "";
                 }
                 const vt = v.toString();
                 if (vt !== this.rssi.textContent) {
                     this.rssi.textContent = v.toString();
                     this.antenna.setAttribute("aria-valuenow", this.rssi.textContent);
-                    pxsim.accessibility.setLiveContent(this.rssi.textContent);
                 }
             }
             updatePins() {
@@ -4860,25 +4829,13 @@ path.sim-board {
                     ev => { }, 
                     // keydown
                     (ev) => {
-                        let charCode = (typeof ev.which == "number") ? ev.which : ev.keyCode;
-                        if (charCode === 40 || charCode === 37) { // Down/Left arrow
-                            ev.preventDefault();
-                            this.board.lightSensorState.lightLevel--;
-                            if (this.board.lightSensorState.lightLevel < 0) {
-                                this.board.lightSensorState.lightLevel = 255;
-                            }
-                            this.applyLightLevel();
-                        }
-                        else if (charCode === 38 || charCode === 39) { // Up/Right arrow
-                            ev.preventDefault();
-                            this.board.lightSensorState.lightLevel++;
-                            if (this.board.lightSensorState.lightLevel > 255) {
-                                this.board.lightSensorState.lightLevel = 0;
-                            }
-                            this.applyLightLevel();
+                        const value = commonKeyHandler(ev, state.lightSensorState.lightLevel, 0, 255);
+                        if (value !== undefined) {
+                            state.lightSensorState.lightLevel = value;
+                            this.updateLightLevel();
                         }
                     });
-                    this.lightLevelText = pxsim.svg.child(this.g, "text", { x: 85, y: LIGHT_LEVEL_BUTTON_POSITION_Y + LIGHT_LEVEL_BUTTON_RADIUS - 5, text: '', class: 'sim-text' });
+                    this.lightLevelText = pxsim.svg.child(this.g, "text", { x: 85, y: LIGHT_LEVEL_BUTTON_POSITION_Y + LIGHT_LEVEL_BUTTON_RADIUS - 5, text: '', class: 'sim-text', 'aria-hidden': true });
                     if (this.props.runtime)
                         this.props.runtime.environmentGlobals[pxsim.localization.lf("lightLevel")] = state.lightSensorState.lightLevel;
                     this.updateTheme();
@@ -4897,7 +4854,6 @@ path.sim-board {
                 pxsim.svg.setGradientValue(this.lightLevelGradient, Math.min(100, Math.max(0, Math.floor(lv * 100 / 255))) + '%');
                 this.lightLevelText.textContent = lv.toString();
                 this.lightLevelButton.setAttribute("aria-valuenow", lv.toString());
-                pxsim.accessibility.setLiveContent(lv.toString());
             }
             findParentElement() {
                 let el = this.element;
@@ -4936,21 +4892,21 @@ path.sim-board {
                     // update text
                     if (acc.flags & pxsim.AccelerometerFlag.X) {
                         if (!this.accTextX) {
-                            this.accTextX = pxsim.svg.child(this.g, "text", { x: 365, y: 260, class: "sim-text" });
+                            this.accTextX = pxsim.svg.child(this.g, "text", { x: 365, y: 260, class: "sim-text", "aria-hidden": true });
                             this.accTextX.textContent = "";
                         }
                         this.accTextX.textContent = `ax:${x}`;
                     }
                     if (acc.flags & pxsim.AccelerometerFlag.Y) {
                         if (!this.accTextY) {
-                            this.accTextY = pxsim.svg.child(this.g, "text", { x: 365, y: 285, class: "sim-text" });
+                            this.accTextY = pxsim.svg.child(this.g, "text", { x: 365, y: 285, class: "sim-text", "aria-hidden": true });
                             this.accTextY.textContent = "";
                         }
                         this.accTextY.textContent = `ay:${-y}`;
                     }
                     if (acc.flags & pxsim.AccelerometerFlag.Z) {
                         if (!this.accTextZ) {
-                            this.accTextZ = pxsim.svg.child(this.g, "text", { x: 365, y: 310, class: "sim-text" });
+                            this.accTextZ = pxsim.svg.child(this.g, "text", { x: 365, y: 310, class: "sim-text", "aria-hidden": true });
                             this.accTextZ.textContent = "";
                         }
                         this.accTextZ.textContent = `az:${z}`;
@@ -4968,7 +4924,9 @@ path.sim-board {
                     "y": "0px",
                     "width": MB_WIDTH + "px",
                     "height": MB_HEIGHT + "px",
-                    "fill": "rgba(0,0,0,0)"
+                    "fill": "rgba(0,0,0,0)",
+                    // Allows screen reader users to interact with board properly.
+                    "role": "application"
                 });
                 this.style = pxsim.svg.child(this.element, "style", {});
                 this.style.textContent = MB_STYLE + (this.props.theme.highContrast ? MB_HIGHCONTRAST : "");
@@ -5095,7 +5053,7 @@ path.sim-board {
                 this.heads.push(pxsim.svg.path(this.headParts, "sim-theme", "M269.9,50.2L269.9,50.2l-39.5,0v0c-14.1,0.1-24.6,10.7-24.6,24.8c0,13.9,10.4,24.4,24.3,24.7v0h39.6c14.2,0,24.8-10.6,24.8-24.7C294.5,61,284,50.3,269.9,50.2 M269.7,89.2L269.7,89.2l-39.3,0c-7.7-0.1-14-6.4-14-14.2c0-7.8,6.4-14.2,14.2-14.2h39.1c7.8,0,14.2,6.4,14.2,14.2C283.9,82.9,277.5,89.2,269.7,89.2"));
                 this.heads.push(pxsim.svg.path(this.headParts, "sim-theme", "M230.6,69.7c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3c2.9,0,5.3-2.4,5.3-5.3C235.9,72.1,233.5,69.7,230.6,69.7"));
                 this.heads.push(pxsim.svg.path(this.headParts, "sim-theme", "M269.7,80.3c2.9,0,5.3-2.4,5.3-5.3c0-2.9-2.4-5.3-5.3-5.3c-2.9,0-5.3,2.4-5.3,5.3C264.4,77.9,266.8,80.3,269.7,80.3"));
-                this.headText = pxsim.svg.child(this.g, "text", { x: 160, y: 60, class: "sim-text" });
+                this.headText = pxsim.svg.child(this.g, "text", { x: 160, y: 60, class: "sim-text", "aria-hidden": true });
             }
             buildPinElements() {
                 // https://www.microbit.co.uk/device/pins
@@ -5129,7 +5087,7 @@ path.sim-board {
                     pin.setAttribute("fill", `url(#${gid})`);
                     return lg;
                 });
-                this.pinTexts = [67, 165, 275].map(x => pxsim.svg.child(this.g, "text", { class: "sim-text-pin", x: x, y: 345 }));
+                this.pinTexts = [67, 165, 275].map(x => pxsim.svg.child(this.g, "text", { class: "sim-text-pin", x: x, y: 345, "aria-hidden": true }));
                 pxsim.svg.path(this.g, "sim-label", "M35.7,376.4c0-2.8,2.1-5.1,5.5-5.1c3.3,0,5.5,2.4,5.5,5.1v4.7c0,2.8-2.2,5.1-5.5,5.1c-3.3,0-5.5-2.4-5.5-5.1V376.4zM43.3,376.4c0-1.3-0.8-2.3-2.2-2.3c-1.3,0-2.1,1.1-2.1,2.3v4.7c0,1.2,0.8,2.3,2.1,2.3c1.3,0,2.2-1.1,2.2-2.3V376.4z");
                 pxsim.svg.path(this.g, "sim-label", "M136.2,374.1c2.8,0,3.4-0.8,3.4-2.5h2.9v14.3h-3.4v-9.5h-3V374.1z");
                 pxsim.svg.path(this.g, "sim-label", "M248.6,378.5c1.7-1,3-1.7,3-3.1c0-1.1-0.7-1.6-1.6-1.6c-1,0-1.8,0.6-1.8,2.1h-3.3c0-2.6,1.8-4.6,5.1-4.6c2.6,0,4.9,1.3,4.9,4.3c0,2.4-2.3,3.9-3.8,4.7c-2,1.3-2.5,1.8-2.5,2.9h6.1v2.7h-10C244.8,381.2,246.4,379.9,248.6,378.5z");
@@ -5199,7 +5157,7 @@ path.sim-board {
                 const title = pxsim.localization.lf("micro:bit v2 needed");
                 this.v2Circle = pxsim.svg.child(this.g, "circle", { r: 21, title: title });
                 pxsim.svg.fill(this.v2Circle, "white");
-                this.v2Text = pxsim.svg.child(this.g, "text", { class: "sim-text", title: title });
+                this.v2Text = pxsim.svg.child(this.g, "text", { class: "sim-text", title: title, "aria-hidden": true });
                 this.v2Text.textContent = "V2";
                 pxsim.svg.fill(this.v2Text, "black");
                 this.v2Text.style.fontWeight = "700";
@@ -5523,6 +5481,47 @@ path.sim-board {
             }
         }
         visuals.MicrobitBoardSvg = MicrobitBoardSvg;
+        const isHandledKey = (key) => {
+            return ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(key);
+        };
+        const getSliderStepValue = (min, max) => {
+            const range = max - min;
+            // Assumes slider values are always integers.
+            return Math.max(1, Math.floor(range / 10));
+        };
+        const commonKeyHandler = (e, currentValue, min, max) => {
+            const key = e.key;
+            if (isHandledKey(key)) {
+                e.preventDefault();
+            }
+            switch (key) {
+                case "ArrowDown":
+                case "ArrowLeft": {
+                    return Math.max(min, currentValue - 1);
+                }
+                case "ArrowUp":
+                case "ArrowRight": {
+                    return Math.min(max, currentValue + 1);
+                }
+                case "Home": {
+                    return min;
+                }
+                case "End": {
+                    return max;
+                }
+                case "PageDown": {
+                    const step = getSliderStepValue(min, max);
+                    const value = currentValue - step;
+                    return Math.max(min, value);
+                }
+                case "PageUp": {
+                    const step = getSliderStepValue(min, max);
+                    const value = currentValue + step;
+                    return Math.min(max, value);
+                }
+            }
+            return undefined;
+        };
     })(visuals = pxsim.visuals || (pxsim.visuals = {}));
 })(pxsim || (pxsim = {}));
 var pxsim;