pxt-microbit 7.1.36 → 7.1.37

package/built/sim.d.ts

@@ -891,6 +891,7 @@ declare namespace pxsim.visuals {
         private attachABEvents;
         attachButtonEvents(stateButton: Button, buttonOuter: SVGElement, elButton: SVGElement): void;
         private attachAPlusBEvents;
+        private attachKeyboardEvents;
     }
 }
 declare namespace pxsim {

package/built/sim.js

@@ -132,12 +132,12 @@ var pxsim;
                 highContrast: msg.highContrast
             }), opts);
             document.body.innerHTML = ""; // clear children
-            document.body.appendChild(this.view = this.viewHost.getView());
             if (pxsim.shouldShowMute()) {
                 document.body.appendChild(pxsim.createMuteButton());
                 pxsim.AudioContextManager.mute(true);
                 pxsim.setParentMuteState("disabled");
             }
+            document.body.appendChild(this.view = this.viewHost.getView());
             if (msg.theme === "mbcodal") {
                 this.ensureHardwareVersion(2);
             }
@@ -4088,17 +4088,26 @@ var pxsim;
             outline: none;
         }
         *:focus .sim-button-outer,
-        .sim-antenna-outer:focus,
-        .sim-pin:focus,
-        .sim-thermometer:focus,
         .sim-shake:focus,
-        .sim-light-level-button:focus {
-            stroke: #4D90FE;
-            stroke-width: 5px !important;
+        .sim-thermometer:focus {
+            outline: 5px solid white;
+            stroke: black;
+            stroke-width: 10px;
+            paint-order: stroke;
         }
         .sim-button-outer.sim-button-group:focus > .sim-button {
-            stroke: #4D90FE;
-            stroke-width: 10px !important;
+            outline: 5px solid white;
+            stroke: black;
+            stroke-width: 5px;
+            paint-order: stroke;
+        }
+        .sim-light-level-button:focus,
+        .sim-antenna-outer:focus > .sim-antenna {
+            outline: 5px solid white;
+        }
+        .sim-pin:focus { 
+            stroke: white;
+            stroke-width: 5px !important;
         }
         .no-drag, .sim-text, .sim-text-small,
         .sim-text-pin {
@@ -4595,12 +4604,40 @@ path.sim-board {
                     p.setAttribute("d", "m269.9,50.134647l0,0l-39.5,0l0,0c-14.1,0.1 -24.6,10.7 -24.6,24.8c0,13.9 10.4,24.4 24.3,24.7l0,0l39.6,0c14.2,0 40.36034,-22.97069 40.36034,-24.85394c0,-1.88326 -26.06034,-24.54606 -40.16034,-24.64606m-0.2,39l0,0l-39.3,0c-7.7,-0.1 -14,-6.4 -14,-14.2c0,-7.8 6.4,-14.2 14.2,-14.2l39.1,0c7.8,0 14.2,6.4 14.2,14.2c0,7.9 -6.4,14.2 -14.2,14.2l0,0l0,0z");
                     this.updateTheme();
                     let pt = this.element.createSVGPoint();
-                    pxsim.svg.buttonEvents(this.head, (ev) => {
+                    pxsim.svg.buttonEvents(this.head, 
+                    // move
+                    (ev) => {
                         let cur = pxsim.svg.cursorPoint(pt, this.element, ev);
                         state.compassState.heading = Math.floor(Math.atan2(cur.y - yc, cur.x - xc) * 180 / Math.PI) + 90;
                         if (state.compassState.heading < 0)
                             state.compassState.heading += 360;
                         this.updateHeading();
+                    }, 
+                    // start
+                    ev => { }, 
+                    // stop
+                    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;
+                            this.updateHeading();
+                        }
                     });
                     this.headInitialized = true;
                 }
@@ -4611,6 +4648,9 @@ path.sim-board {
                     if (this.props.runtime)
                         this.props.runtime.environmentGlobals[pxsim.localization.lf("heading")] = state.compassState.heading;
                 }
+                // make sim head focusable when there is a compass
+                this.headParts.setAttribute("class", "sim-button-outer sim-button-group");
+                pxsim.accessibility.makeFocusable(this.headParts);
             }
             flashSystemLed() {
                 if (!this.systemLed)
@@ -5119,6 +5159,7 @@ path.sim-board {
                 this.attachPinsTouchEvents();
                 this.attachABEvents();
                 this.attachAPlusBEvents();
+                this.attachKeyboardEvents();
             }
             attachIFrameEvents() {
                 pxsim.Runtime.messagePosted = (msg) => {
@@ -5364,6 +5405,9 @@ path.sim-board {
                     this.board.bus.queue(bpState.abBtn.id, 3 /* DAL.MICROBIT_BUTTON_EVT_CLICK */);
                 });
             }
+            attachKeyboardEvents() {
+                pxsim.accessibility.postKeyboardEvent();
+            }
         }
         visuals.MicrobitBoardSvg = MicrobitBoardSvg;
     })(visuals = pxsim.visuals || (pxsim.visuals = {}));
@@ -5377,7 +5421,7 @@ var pxsim;
         const el = document.createElement("div");
         el.setAttribute("id", "safari-mute-button-outer");
         el.innerHTML = `
-            <button class="safari-mute-button">
+            <button class="safari-mute-button" tabindex="1">
                 ${icon}
             </button>
         `;