pxt-microbit 8.1.12 → 8.1.14

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;
 }
     `;
@@ -4250,29 +4255,33 @@ path.sim-board {
             "P12", "P2", "P13", "P14", "P15", "P16", "P17", "P18", "P19", "P20",
             "GND0", "GND", "+3v3", "GND1"
         ];
+        // title is currently unused.
         const pinTitles = [
-            "P0, ANALOG IN",
-            "P1, ANALOG IN",
-            "P2, ANALOG IN",
-            "P3, ANALOG IN, LED Col 1",
-            "P4, ANALOG IN, LED Col 2",
-            "P5, BUTTON A",
-            "P6, LED Col 9",
-            "P7, LED Col 8",
-            "P8",
-            "P9, LED Col 7",
-            "P10, ANALOG IN, LED Col 3",
-            "P11, BUTTON B",
-            "P12, RESERVED ACCESSIBILITY",
-            "P13, SPI - SCK",
-            "P14, SPI - MISO",
-            "P15, SPI - MOSI",
-            "P16, SPI - Chip Select",
-            "P17, +3v3",
-            "P18, +3v3",
-            "P19, I2C - SCL",
-            "P20, I2C - SDA",
-            "GND", "GND", "+3v3", "GND"
+            { title: "P0, ANALOG IN", ariaLabel: pxsim.localization.lf("Pin 0") },
+            { title: "P1, ANALOG IN", ariaLabel: pxsim.localization.lf("Pin 1") },
+            { title: "P2, ANALOG IN", ariaLabel: pxsim.localization.lf("Pin 2") },
+            { title: "P3, ANALOG IN, LED Col 1", ariaLabel: pxsim.localization.lf("Pin 3") },
+            { title: "P4, ANALOG IN, LED Col 2", ariaLabel: pxsim.localization.lf("Pin 4") },
+            { title: "P5, BUTTON A", ariaLabel: pxsim.localization.lf("Pin 5") },
+            { title: "P6, LED Col 9", ariaLabel: pxsim.localization.lf("Pin 6") },
+            { title: "P7, LED Col 8", ariaLabel: pxsim.localization.lf("Pin 7") },
+            { title: "P8", ariaLabel: pxsim.localization.lf("Pin 8") },
+            { title: "P9, LED Col 7", ariaLabel: pxsim.localization.lf("Pin 9") },
+            { title: "P10, ANALOG IN, LED Col 3", ariaLabel: pxsim.localization.lf("Pin 10") },
+            { title: "P11, BUTTON B", ariaLabel: pxsim.localization.lf("Pin 11") },
+            { title: "P12, RESERVED ACCESSIBILITY", ariaLabel: pxsim.localization.lf("Pin 12") },
+            { title: "P13, SPI - SCK", ariaLabel: pxsim.localization.lf("Pin 13") },
+            { title: "P14, SPI - MISO", ariaLabel: pxsim.localization.lf("Pin 14") },
+            { title: "P15, SPI - MOSI", ariaLabel: pxsim.localization.lf("Pin 15") },
+            { title: "P16, SPI - Chip Select", ariaLabel: pxsim.localization.lf("Pin 16") },
+            { title: "P17, +3v3", ariaLabel: pxsim.localization.lf("Pin 3V") },
+            { title: "P18, +3v3", ariaLabel: pxsim.localization.lf("Pin 3V") },
+            { title: "P19, I2C - SCL", ariaLabel: pxsim.localization.lf("Pin 19") },
+            { title: "P20, I2C - SDA", ariaLabel: pxsim.localization.lf("Pin 20") },
+            { title: "GND", ariaLabel: pxsim.localization.lf("Pin GND") },
+            { title: "GND", ariaLabel: pxsim.localization.lf("Pin GND") },
+            { title: "+3v3", ariaLabel: pxsim.localization.lf("Pin 3V") },
+            { title: "GND", ariaLabel: pxsim.localization.lf("Pin GND") },
         ];
         const MB_WIDTH = 500;
         const MB_HEIGHT = 408;
@@ -4315,6 +4324,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 +4360,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 +4419,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 +4440,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;
@@ -4493,8 +4509,8 @@ path.sim-board {
                         pxsim.svg.fill(this.shakeButton, this.props.theme.virtualButtonUp);
                         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" });
+                    pxsim.accessibility.setAria(this.shakeButton, "button", pxsim.localization.lf("Shake"));
+                    this.shakeText = pxsim.svg.child(this.g, "text", { x: 420, y: 122, class: "sim-text-small", "aria-hidden": true });
                     this.shakeText.textContent = "SHAKE";
                 }
             }
@@ -4533,19 +4549,23 @@ path.sim-board {
                 }
             }
             updatePin(pin, index) {
+                var _a, _b;
                 if (!pin)
                     return;
                 let text = this.pinTexts[index];
                 let v = "";
+                let ariaValueNow;
                 if (pin.mode & pxsim.PinFlags.Analog) {
                     v = Math.floor(100 - (pin.value || 0) / 1023 * 100) + "%";
                     if (text)
                         text.textContent = (pin.period ? "~" : "") + (pin.value || 0) + "";
+                    ariaValueNow = (_a = pin.value) !== null && _a !== void 0 ? _a : 0;
                 }
                 else if (pin.mode & pxsim.PinFlags.Digital) {
                     v = pin.value > 0 ? "0%" : "100%";
                     if (text)
                         text.textContent = pin.value > 0 ? "1" : "0";
+                    ariaValueNow = pin.value > 0 ? 1 : 0;
                 }
                 else if (pin.mode & pxsim.PinFlags.Touch) {
                     v = pin.touched ? "0%" : "100%";
@@ -4561,12 +4581,37 @@ path.sim-board {
                     pxsim.svg.setGradientValue(this.pinGradients[index], v);
                 if (pin.mode !== pxsim.PinFlags.Unused) {
                     pxsim.accessibility.makeFocusable(this.pins[index]);
-                    pxsim.accessibility.setAria(this.pins[index], "slider", this.pins[index].firstChild.textContent);
-                    this.pins[index].setAttribute("aria-valuemin", "0");
-                    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);
+                    if (pin.mode & pxsim.PinFlags.Touch) {
+                        this.pins[index].setAttribute("role", "button");
+                        this.pins[index].ariaLabel = this.pins[index].firstChild.textContent;
+                        this.pins[index].removeAttribute("aria-valuemin");
+                        this.pins[index].removeAttribute("aria-valuemax");
+                        this.pins[index].removeAttribute("aria-orientation");
+                        this.pins[index].removeAttribute("aria-valuenow");
+                        this.pins[index].removeAttribute("aria-valuetext");
+                        this.pins[index].removeAttribute("aria-readonly");
+                    }
+                    else {
+                        this.pins[index].setAttribute("role", "slider");
+                        this.pins[index].ariaLabel = this.pins[index].firstChild.textContent;
+                        this.pins[index].setAttribute("aria-valuemin", "0");
+                        this.pins[index].setAttribute("aria-valuemax", pin.mode & pxsim.PinFlags.Analog ? "1023" : "1");
+                        this.pins[index].setAttribute("aria-orientation", "vertical");
+                        this.pins[index].setAttribute("aria-valuenow", (_b = ariaValueNow.toString()) !== null && _b !== void 0 ? _b : "");
+                        // Check that the text content isn't just a plain int and only set aria-valuetext if required.
+                        if ((text === null || text === void 0 ? void 0 : text.textContent) && (text === null || text === void 0 ? void 0 : text.textContent) !== parseInt(text === null || text === void 0 ? void 0 : text.textContent).toString()) {
+                            this.pins[index].setAttribute("aria-valuetext", text.textContent);
+                        }
+                        else {
+                            this.pins[index].removeAttribute("aria-valuetext");
+                        }
+                        if (pin.mode & pxsim.PinFlags.Input) {
+                            this.pins[index].removeAttribute("aria-readonly");
+                        }
+                        else {
+                            this.pins[index].setAttribute("aria-readonly", "true");
+                        }
+                    }
                 }
             }
             updateTemperature() {
@@ -4578,7 +4623,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,26 +4642,14 @@ 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();
                         }
                     });
                     pxsim.accessibility.makeFocusable(this.thermometer);
-                    pxsim.accessibility.setAria(this.thermometer, "slider", pxsim.localization.lf("Thermometer"));
+                    pxsim.accessibility.setAria(this.thermometer, "slider", pxsim.localization.lf("Temperature"));
                     this.thermometer.setAttribute("aria-valuemin", "-5");
                     this.thermometer.setAttribute("aria-valuemax", "50");
                     this.thermometer.setAttribute("aria-orientation", "vertical");
@@ -4629,7 +4662,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 +4673,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 +4692,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 +4712,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 +4739,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();
                         }
                     });
@@ -4757,6 +4768,7 @@ path.sim-board {
                 }
             }
             flashAntenna() {
+                var _a;
                 if (!this.antennaInitialized) {
                     this.antenna.style.visibility = "visible";
                     this.antennaInitialized = true;
@@ -4778,27 +4790,21 @@ 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, () => { });
                     pxsim.svg.buttonEvents(this.antenna.children[1], mouseEventHandler, mouseEventHandler, mouseEventHandler, () => { });
                     this.antenna.addEventListener('keydown', keyboardEventHandler);
                     pxsim.accessibility.makeFocusable(this.antenna);
-                    pxsim.accessibility.setAria(this.antenna, "slider", "RSSI");
+                    pxsim.accessibility.setAria(this.antenna, "slider", pxsim.localization.lf("Received Signal Strength Indicator"));
+                    ;
                     this.antenna.setAttribute("aria-valuemin", `${valueMin}`);
                     this.antenna.setAttribute("aria-valuemax", `${valueMax}`);
                     this.antenna.setAttribute("aria-orientation", "horizontal");
-                    this.antenna.setAttribute("aria-valuenow", "");
-                    pxsim.accessibility.setLiveContent("");
+                    this.antenna.setAttribute("aria-valuenow", ((_a = this.board.radioState.datagram.rssi) !== null && _a !== void 0 ? _a : -75).toString());
                 }
                 let now = Date.now();
                 if (now - this.lastAntennaFlash > 200) {
@@ -4819,14 +4825,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,30 +4865,18 @@ 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();
                     pxsim.accessibility.makeFocusable(this.lightLevelButton);
-                    pxsim.accessibility.setAria(this.lightLevelButton, "slider", "Light level");
+                    pxsim.accessibility.setAria(this.lightLevelButton, "slider", pxsim.localization.lf("Light level"));
                     this.lightLevelButton.setAttribute("aria-valuemin", "0");
                     this.lightLevelButton.setAttribute("aria-valuemax", "255");
                     this.lightLevelButton.setAttribute("aria-orientation", "vertical");
@@ -4897,7 +4890,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 +4928,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 +4960,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 +5089,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
@@ -5119,7 +5113,7 @@ path.sim-board {
                 this.pins = pinDrawOrder.reduce((pins, pinName) => {
                     const simPinIndex = pinNames.indexOf(pinName);
                     const newPin = drawList[simPinIndex]();
-                    pxsim.svg.hydrate(newPin, { title: pinTitles[simPinIndex] });
+                    pxsim.svg.hydrate(newPin, { title: pinTitles[simPinIndex].ariaLabel });
                     pins[simPinIndex] = newPin;
                     return pins;
                 }, new Array(pinDrawOrder.length));
@@ -5129,7 +5123,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 +5193,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";
@@ -5225,8 +5219,7 @@ path.sim-board {
                 this.microphoneLed = pxsim.svg.path(microg, "sim-led sim-mic", "M 352.852 71 C 351.315 71 350.07 72.248 350.07 73.784 V 79.056 C 350.07 80.594 351.316 81.838 352.852 81.838 C 354.387 81.838 355.634 80.593 355.634 79.056 V 73.784 C 355.634 72.248 354.387 71 352.852 71 Z M 346.743 79.981 C 346.743 82.84 348.853 85.062 351.501 85.658 V 87.095 H 348.448 V 89.329 H 357.366 V 87.095 H 354.306 V 85.658 C 356.954 85.064 359.071 82.842 359.071 79.981 H 357.057 C 357.057 82.174 355.168 83.81 352.905 83.81 C 350.64 83.81 348.757 82.173 348.757 79.981 Z");
                 pxsim.svg.fills([this.microphoneLed], this.props.theme.ledOff);
                 // ring
-                const microhole = pxsim.svg.child(this.g, "circle", { cx: 336, cy: 86, r: 3, stroke: "gold", strokeWidth: "1px" });
-                pxsim.svg.title(microhole, pxsim.localization.lf("microphone (micro:bit v2 needed)"));
+                pxsim.svg.child(this.g, "circle", { cx: 336, cy: 86, r: 3, stroke: "gold", strokeWidth: "1px" });
                 this.updateMicrophone();
                 this.updateTheme();
             }
@@ -5330,10 +5323,11 @@ path.sim-board {
                         let state = this.board;
                         let pin = state.edgeConnectorState.pins[index];
                         let svgpin = this.pins[index];
-                        if (pin.mode & pxsim.PinFlags.Input) {
+                        if (pin.mode & pxsim.PinFlags.Input && !(pin.mode & pxsim.PinFlags.Touch)) {
                             let cursor = pxsim.svg.cursorPoint(pt, this.element, ev);
-                            let v = (400 - cursor.y) / 40 * 1023;
-                            pin.value = Math.max(0, Math.min(1023, Math.floor(v)));
+                            let maxValue = pin.mode & pxsim.PinFlags.Analog ? 1023 : 1;
+                            let v = (400 - cursor.y) / 40 * maxValue;
+                            pin.value = Math.max(0, Math.min(maxValue, Math.floor(v)));
                         }
                         this.updatePin(pin, index);
                     }, 
@@ -5343,10 +5337,11 @@ path.sim-board {
                         let pin = state.edgeConnectorState.pins[index];
                         let svgpin = this.pins[index];
                         pxsim.U.addClass(svgpin, "touched");
-                        if (pin.mode & pxsim.PinFlags.Input) {
+                        if (pin.mode & pxsim.PinFlags.Input && !(pin.mode & pxsim.PinFlags.Touch)) {
                             let cursor = pxsim.svg.cursorPoint(pt, this.element, ev);
-                            let v = (400 - cursor.y) / 40 * 1023;
-                            pin.value = Math.max(0, Math.min(1023, Math.floor(v)));
+                            let maxValue = pin.mode & pxsim.PinFlags.Analog ? 1023 : 1;
+                            let v = (400 - cursor.y) / 40 * maxValue;
+                            pin.value = Math.max(0, Math.min(maxValue, Math.floor(v)));
                         }
                         this.updatePin(pin, index);
                     }, 
@@ -5361,23 +5356,11 @@ path.sim-board {
                     }, 
                     // keydown
                     (ev) => {
-                        let charCode = (typeof ev.which == "number") ? ev.which : ev.keyCode;
-                        let state = this.board;
-                        let pin = state.edgeConnectorState.pins[index];
-                        if (charCode === 40 || charCode === 37) { // Down/Left arrow
-                            ev.preventDefault();
-                            pin.value -= 10;
-                            if (pin.value < 0) {
-                                pin.value = 1023;
-                            }
-                            this.updatePin(pin, index);
-                        }
-                        else if (charCode === 38 || charCode === 39) { // Up/Right arrow
-                            ev.preventDefault();
-                            pin.value += 10;
-                            if (pin.value > 1023) {
-                                pin.value = 0;
-                            }
+                        const state = this.board;
+                        const pin = state.edgeConnectorState.pins[index];
+                        const value = pinKeyHandler(ev, pin.value, 0, pin.mode & pxsim.PinFlags.Analog ? 1023 : 1, pin.mode);
+                        if (value !== undefined) {
+                            pin.value = value;
                             this.updatePin(pin, index);
                         }
                     });
@@ -5523,6 +5506,65 @@ 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;
+        };
+        const pinKeyHandler = (e, currentValue, min, max, pinMode) => {
+            const key = e.key;
+            if (isHandledKey(key)) {
+                if (!(pinMode & pxsim.PinFlags.Input)) {
+                    e.preventDefault();
+                    pxsim.accessibility.setLiveContent(pxsim.localization.lf("This pin is read-only"));
+                    return undefined;
+                }
+                if (pinMode & pxsim.PinFlags.Touch) {
+                    // The pin is in touch mode and has button markup, not a slider.
+                    e.preventDefault();
+                    return undefined;
+                }
+            }
+            // The pin value for a digital pin may be higher than 1 depending on how its value was set.
+            const currentValueClamped = Math.min(max, currentValue);
+            return commonKeyHandler(e, currentValueClamped, min, max);
+        };
     })(visuals = pxsim.visuals || (pxsim.visuals = {}));
 })(pxsim || (pxsim = {}));
 var pxsim;