Skip to content

Simplify simulator aria-labels #6793

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
riknoll merged 5 commits into from
Apr 30, 2026
Merged

Simplify simulator aria-labels #6793

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e208a7
Simplify simulator aria-labels
microbit-robert Apr 22, 2026
19168de
Remove duplicate microphone title
microbit-robert Apr 23, 2026
f2b51a3
Ensure default aria-valuenow is set for RSSI
microbit-robert Apr 23, 2026
daffcf0
Merge branch 'master' into sim-aria-labels
microbit-robert Apr 30, 2026
fb5e6d9
Merge branch 'master' into sim-aria-labels
riknoll Apr 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 38 additions & 31 deletions sim/visuals/microbit.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,29 +219,37 @@
"P12", "P2", "P13", "P14", "P15", "P16", "P17", "P18", "P19", "P20",
"GND0", "GND", "+3v3", "GND1"
];
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"
interface PinTitle {
title: string,
ariaLabel: string
}
// title is currently unused.
const pinTitles: PinTitle[] = [
{ 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;
Expand Down Expand Up @@ -554,7 +562,7 @@
this.board.accelerometerState.shake();
}
);
accessibility.setAria(this.shakeButton, "button", "Shake the board");
accessibility.setAria(this.shakeButton, "button", pxsim.localization.lf("Shake"));
this.shakeText = svg.child(this.g, "text", { x: 420, y: 122, class: "sim-text-small", "aria-hidden": true }) as SVGTextElement;
this.shakeText.textContent = "SHAKE";
}
Expand Down Expand Up @@ -666,7 +674,7 @@
})

accessibility.makeFocusable(this.thermometer);
accessibility.setAria(this.thermometer, "slider", pxsim.localization.lf("Thermometer"));
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");
Expand Down Expand Up @@ -816,7 +824,7 @@
setValue((-138 + (pos.x - ANTENNA_X) / antennaWidth * 100) | 0);
};
const keyboardEventHandler = (ev: KeyboardEvent) => {
const value = commonKeyHandler(ev, this.board.radioState.datagram.rssi ?? -75, valueMin, valueMax);

Check failure on line 827 in sim/visuals/microbit.ts

View workflow job for this annotation

GitHub Actions / buildpush 

':' expected.

Check failure on line 827 in sim/visuals/microbit.ts

View workflow job for this annotation

GitHub Actions / buildpush 

Expression expected.
if (value !== undefined) {
setValue(value);
}
Expand All @@ -827,11 +835,11 @@
this.antenna.addEventListener('keydown', keyboardEventHandler);

accessibility.makeFocusable(this.antenna);
accessibility.setAria(this.antenna, "slider", "RSSI");
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", "");
this.antenna.setAttribute("aria-valuenow", (this.board.radioState.datagram.rssi ?? -75).toString());

Check failure on line 842 in sim/visuals/microbit.ts

View workflow job for this annotation

GitHub Actions / buildpush 

':' expected.

Check failure on line 842 in sim/visuals/microbit.ts

View workflow job for this annotation

GitHub Actions / buildpush 

Expression expected.
}
let now = Date.now();
if (now - this.lastAntennaFlash > 200) {
Expand Down Expand Up @@ -907,7 +915,7 @@
this.updateTheme();

accessibility.makeFocusable(this.lightLevelButton);
accessibility.setAria(this.lightLevelButton, "slider", "Light level");
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");
Expand Down Expand Up @@ -1169,7 +1177,7 @@
this.pins = pinDrawOrder.reduce((pins, pinName) => {
const simPinIndex = pinNames.indexOf(pinName);
const newPin = drawList[simPinIndex]();
svg.hydrate(newPin, { title: pinTitles[simPinIndex] });
svg.hydrate(newPin, { title: pinTitles[simPinIndex].ariaLabel });
pins[simPinIndex] = newPin;
return pins;
}, new Array(pinDrawOrder.length));
Expand Down Expand Up @@ -1289,8 +1297,7 @@
this.microphoneLed = 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");
svg.fills([this.microphoneLed], this.props.theme.ledOff);
// ring
const microhole = svg.child(this.g, "circle", { cx: 336, cy: 86, r: 3, stroke: "gold", strokeWidth: "1px" })
svg.title(microhole, pxsim.localization.lf("microphone (micro:bit v2 needed)"))
svg.child(this.g, "circle", { cx: 336, cy: 86, r: 3, stroke: "gold", strokeWidth: "1px" })

this.updateMicrophone();
this.updateTheme();
Expand Down
Loading