From 25f48d66690c42b22ac3cdec83a32e185e69d112 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Wed, 17 Jun 2026 10:08:57 +0100
Subject: [PATCH 1/3] Keyboard help tweaks

- Unify the Control modifier label on "Ctrl" (was a mix of "Ctrl" and
  "Control") with a "Control" aria-label so screen readers don't mangle "Ctrl"
  (which we've chosen for space).

- Format the "Move anywhere" modifier as a key so it gets that label too.

- Avoid showing the bare menu key for the context menu shortcut on Windows:
  prefer the first modifier-bearing shortcut (e.g. Ctrl+Enter) because not
  every keyboard has a menu key. The menu shortcut was new in v13.
---
 .../src/components/KeyboardControlsHelp.tsx   | 14 +++++++++----
 webapp/src/shortcut_formatting.ts             | 21 +++++++++++++------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/KeyboardControlsHelp.tsx b/webapp/src/components/KeyboardControlsHelp.tsx
index 038078d8db0e..5fca36f97cb3 100644
--- a/webapp/src/components/KeyboardControlsHelp.tsx
+++ b/webapp/src/components/KeyboardControlsHelp.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as Blockly from "blockly";
-import { getShortcutKeysShortAll, LIST_SHORTCUTS_SHORTCUT } from "../shortcut_formatting";
+import { CONTROL_KEY_SHORT, getShortcutKeysShortAll, LIST_SHORTCUTS_SHORTCUT } from "../shortcut_formatting";
 
 const names = Blockly.ShortcutItems.names;
 const isMacPlatform = pxt.BrowserUtils.isMac();
@@ -10,10 +10,12 @@ const KeyboardControlsHelp = () => {
     React.useEffect(() => {
         ref.current?.focus()
     }, []);
-    const ctrl = lf("{id:keyboard symbol}Ctrl");
+    const ctrl = CONTROL_KEY_SHORT;
     const cmd = isMacPlatform ? "⌘" : ctrl;
     const orAsJoiner = lf("or")
     const enterOrSpace = { shortcuts: getShortcutKeysShortAll(names.PERFORM_ACTION), joiner: orAsJoiner}
+    // Split around {0} so the modifier renders as a <Key> (for its aria-label).
+    const moveAnywhere = lf("Hold {0} and press arrow keys").split("{0}");
     return (
         <aside id="keyboardnavhelp" aria-label={lf("Keyboard Controls")} ref={ref} tabIndex={0}>
             <h2>{lf("Keyboard Controls")}</h2>
@@ -37,7 +39,7 @@ const KeyboardControlsHelp = () => {
                     <Row name={lf("Next block stack")} shortcuts={[names.NEXT_STACK]} />
                     <Row name={lf("Previous block stack")} shortcuts={[names.PREVIOUS_STACK]} />
                     <Row name={lf("Select workspace")} shortcuts={[names.FOCUS_WORKSPACE]} />
-                    <Row name={lf("Open context menu")} shortcuts={[names.MENU]} />
+                    <Row name={lf("Context menu")} shortcuts={[names.MENU]} />
                     <Row name={lf("Format code")} shortcuts={[names.CLEANUP]} />
                     <Row name={lf("Undo / redo")} shortcuts={[names.UNDO, names.REDO]} joiner="/" />
                     {pxt.canDownload() &&
@@ -78,7 +80,7 @@ const KeyboardControlsHelp = () => {
                 <tbody>
                     <Row name={lf("Move to positions")} shortcuts={[names.NAVIGATE_UP, names.NAVIGATE_DOWN, names.NAVIGATE_LEFT, names.NAVIGATE_RIGHT]} />
                     <Row name={lf("Move anywhere")}>
-                        {lf("Hold {0} and press arrow keys", cmd)}
+                        {moveAnywhere[0]}<Key value={cmd} />{moveAnywhere[1]}
                     </Row>
                     <Row name={lf("Confirm")} {...enterOrSpace} />
                     <Row name={lf("Cancel")} shortcuts={[names.ABORT_MOVE]} />
@@ -177,6 +179,10 @@ const Key = ({ value }: { value: string }) => {
             aria = lf("Option");
             break;
         }
+        case CONTROL_KEY_SHORT: {
+            aria = lf("Control");
+            break;
+        }
     }
     return <span className="key" aria-label={aria}>{value}</span>
 }
diff --git a/webapp/src/shortcut_formatting.ts b/webapp/src/shortcut_formatting.ts
index dd0d5901f503..7d3669c6c4b3 100644
--- a/webapp/src/shortcut_formatting.ts
+++ b/webapp/src/shortcut_formatting.ts
@@ -2,6 +2,8 @@ import * as Blockly from 'blockly';
 
 const isMacPlatform = pxt.BrowserUtils.isMac();
 
+export const CONTROL_KEY_SHORT = lf("{id:keyboard symbol}Ctrl");
+
 /**
  * Name of the shortcut that opens the help dialog. Registered in blocks.tsx
  * initKeyboardControls. The literal string is also hardcoded by Blockly core's
@@ -47,7 +49,7 @@ const longModifierNames: Record<string, string> = {
 };
 
 const shortModifierNames: Record<string, string> = {
-  'Control': Blockly.Msg['CONTROL_KEY'],
+  'Control': CONTROL_KEY_SHORT,
   'Meta': '⌘',
   'Alt': isMacPlatform ? '⌥' : Blockly.Msg['ALT_KEY'],
 };
@@ -149,7 +151,8 @@ function getKeyName(keyCode: number): string {
  *
  * Mirrors Blockly's internal getShortcutKeys (core/utils/shortcut_formatting.ts).
  * Kept as a local copy because Blockly doesn't expose this on its public API
- * surface; the algorithm should track Blockly's version.
+ * surface; the algorithm tracks Blockly's version with an exception to avoid
+ * the menu key for the context menu shortcut (not present on all keyboards).
  *
  * @param shortcutName The action name, e.g. "cut".
  * @param modifierNames The names to use for the Meta/Control/Alt modifiers.
@@ -186,12 +189,13 @@ function getShortcutKeys(
 
   // If there are modifiers return only one shortcut on the assumption they are
   // intended for different platforms. Otherwise assume they are alternatives.
+  // Skips a bare key here for the menu key case.
   const hasModifiers = currentPlatform.some((shortcut) =>
-    shortcut.some(
-      (key) => "Meta" === key || "Alt" === key || "Control" === key,
-    ),
+    shortcut.some(isModifierName),
   );
-  const chosen = hasModifiers ? [currentPlatform[0]] : currentPlatform;
+  const chosen = hasModifiers
+    ? [currentPlatform.find((shortcut) => shortcut.some(isModifierName)) ?? currentPlatform[0]]
+    : currentPlatform;
   return chosen.map((shortcut) =>
     shortcut
       .map((maybeNumeric) =>
@@ -217,3 +221,8 @@ function modifierOrder(key: string): number {
   // Regular keys at the end.
   return order === -1 ? Number.MAX_VALUE : order;
 }
+
+/** Whether a serialized key part is one of the (non-Shift) modifier names. */
+function isModifierName(key: string): boolean {
+  return key === "Meta" || key === "Alt" || key === "Control";
+}

From d6c3fa6731c75cc5894029a683b935fd4a715428 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Wed, 17 Jun 2026 11:44:31 +0100
Subject: [PATCH 2/3] Move "Screen reader mode" to the Blocks Workspace section

It is a workspace toggle, not a global control, so it belongs there.
---
 webapp/src/components/KeyboardControlsHelp.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/KeyboardControlsHelp.tsx b/webapp/src/components/KeyboardControlsHelp.tsx
index 5fca36f97cb3..fe76727e1301 100644
--- a/webapp/src/components/KeyboardControlsHelp.tsx
+++ b/webapp/src/components/KeyboardControlsHelp.tsx
@@ -23,9 +23,6 @@ const KeyboardControlsHelp = () => {
             <table>
                 <tbody>
                     <Row name={lf("Show/hide shortcut help")} shortcuts={[LIST_SHORTCUTS_SHORTCUT]} />
-                    <Row name={lf("Screen reader mode")} shortcuts={[names.TOGGLE_SCREENREADER]}>
-                        <p className="hint">{lf("Additional audio cues and navigation aids for screen reader users")}</p>
-                    </Row>
                     <Row name={lf("Move between menus, simulator and the workspace")} shortcuts={[[lf("{id:keyboard symbol}Tab")], [lf("{id:keyboard symbol}Shift"), lf("{id:keyboard symbol}Tab")]]} joiner="row"/>
                     <Row name={lf("Area menu")} shortcuts={[[cmd, "B"]]}>
                         <p className="hint">{lf("Then press an area's number, or Tab to it and press Enter")}</p>
@@ -47,6 +44,9 @@ const KeyboardControlsHelp = () => {
                     <Row name={lf("Toolbox")} shortcuts={[names.FOCUS_TOOLBOX]} />
                     {pxt.appTarget.simulator &&
                         <Row name={lf("Start or stop simulator")} shortcuts={[["S"]]} />}
+                    <Row name={lf("Screen reader mode")} shortcuts={[names.TOGGLE_SCREENREADER]}>
+                        <p className="hint">{lf("Additional audio cues and navigation aids for screen reader users")}</p>
+                    </Row>
                 </tbody>
             </table>
             <h3>{lf("Toolbox")}</h3>

From 77a6c94eedd9f5410d02d3d07bca20b7a1eacec8 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Fri, 19 Jun 2026 14:44:28 +0100
Subject: [PATCH 3/3] Tweak how we get the Control string to use Blockly.Msg

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 webapp/src/components/KeyboardControlsHelp.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/KeyboardControlsHelp.tsx b/webapp/src/components/KeyboardControlsHelp.tsx
index fe76727e1301..c5f3f43709dc 100644
--- a/webapp/src/components/KeyboardControlsHelp.tsx
+++ b/webapp/src/components/KeyboardControlsHelp.tsx
@@ -180,7 +180,7 @@ const Key = ({ value }: { value: string }) => {
             break;
         }
         case CONTROL_KEY_SHORT: {
-            aria = lf("Control");
+            aria = Blockly.Msg['CONTROL_KEY'];
             break;
         }
     }