From 45544d9822d88e082f15109e1b1f1d0ab9687baf Mon Sep 17 00:00:00 2001
From: sakinu <sakinu080712345@gmail.com>
Date: Fri, 2 Oct 2026 22:47:17 +0800
Subject: [PATCH] Name the yield chord once, for both keyboards

Apple keyboards print the modifier as the option sign, so "Alt+Enter"
named a key a candidate on a Mac cannot find, though the chord itself
already worked there: Option sets altKey. Naming both spellings in
#turn-status would have put them in a live region, which is for status
changes rather than reference already heard, so the hint sits beside it
and the tooltip spells the Mac chord as Run tests spells Command.
---
 tests/browser/turn-taking.test.js | 36 ++++++++++++++++++++++++-------
 web/interview.html                | 14 +++++++++---
 web/interview.js                  |  2 +-
 web/styles.css                    |  3 +++
 4 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/tests/browser/turn-taking.test.js b/tests/browser/turn-taking.test.js
index 357d95d6..1a7e58c9 100644
--- a/tests/browser/turn-taking.test.js
+++ b/tests/browser/turn-taking.test.js
@@ -277,10 +277,11 @@ test("the page names the yield control and its shortcut the way the handler read
     button.indexOf("</button>"),
   );
   assert.equal(label.trim(), "Your turn is done");
-  assert.match(
-    button.slice(0, button.indexOf(">")),
-    /aria-keyshortcuts="Alt\+Enter"/,
-  );
+  const attributes = button.slice(0, button.indexOf(">"));
+  assert.match(attributes, /aria-keyshortcuts="Alt\+Enter"/);
+  // Apple keyboards print the modifier as the option sign, so the tooltip
+  // names the Mac chord the way the Run tests button names Command.
+  assert.match(attributes, /title="Alt\+Enter \/ &#8997;Enter"/);
   const ring = html.slice(html.indexOf('id="turn-ring"'));
   assert.match(
     ring.slice(0, ring.indexOf(">")),
@@ -290,8 +291,26 @@ test("the page names the yield control and its shortcut the way the handler read
   const copy = status
     .slice(status.indexOf(">") + 1, status.indexOf("</p>"))
     .replace(/\s+/g, " ");
-  assert.match(copy, /Your turn is done \(Alt\+Enter\)/);
-  // The shortcut the copy names is the one the handler takes.
+  assert.match(copy, /Choose Your turn is done to let Jim reply early\./);
+
+  // #turn-status is a live region, so a chord named there is read out again on
+  // every Thinking toggle, to a listener who may be on the other platform.
+  // The hint carries it instead, from an element nothing rewrites.
+  assert.doesNotMatch(copy, /Enter/);
+  const shortcut = html.slice(html.indexOf('id="turn-shortcut"'));
+  assert.doesNotMatch(
+    shortcut.slice(0, shortcut.indexOf(">")),
+    /role=|aria-live=/,
+  );
+  assert.equal(
+    shortcut
+      .slice(shortcut.indexOf(">") + 1, shortcut.indexOf("</p>"))
+      .replace(/\s+/g, " ")
+      .trim(),
+    "Alt+Enter, or &#8997;Enter on a Mac.",
+  );
+
+  // The shortcut the page names is the one the handler takes.
   const editor = { tagName: "TEXTAREA" };
   assert.equal(
     isYieldShortcut(
@@ -300,9 +319,10 @@ test("the page names the yield control and its shortcut the way the handler read
     ),
     true,
   );
-  // The status line the page restores after a hold says the same.
+  // The line the page restores after a hold goes into the same live region,
+  // so it carries no chord either.
   assert.match(
     read("web/interview.js"),
-    /Choose Your turn is done \(Alt\+Enter\) to let Jim reply early\./,
+    /: "Take your time\. Choose Your turn is done to let Jim reply early\.";/,
   );
 });
diff --git a/web/interview.html b/web/interview.html
index fb7ecaa9..c9f540ad 100644
--- a/web/interview.html
+++ b/web/interview.html
@@ -61,7 +61,7 @@ <h1 id="problem-title">Loading interview...</h1>
               id="yield-turn"
               class="pill-button"
               type="button"
-              title="Alt+Enter"
+              title="Alt+Enter / &#8997;Enter"
               aria-keyshortcuts="Alt+Enter"
             >
               Your turn is done
@@ -467,8 +467,16 @@ <h2>Media preflight</h2>
             hidden
           ></button>
           <p id="turn-status" class="muted small" role="status">
-            Take your time. Choose Your turn is done (Alt+Enter) to let Jim
-            reply early.
+            Take your time. Choose Your turn is done to let Jim reply early.
+          </p>
+          <!-- Outside the live region on purpose. A shortcut is reference, not
+               a status change, and naming it in #turn-status read both chords
+               out again on every Thinking toggle, telling a Windows listener
+               about a Mac key and the reverse. Nothing writes this element, so
+               it is announced once, as ordinary text. The same reasoning gave
+               #jim-avatar-status a span of its own. -->
+          <p id="turn-shortcut" class="muted small">
+            Alt+Enter, or &#8997;Enter on a Mac.
           </p>
         </div>
         <div
diff --git a/web/interview.js b/web/interview.js
index 583e435c..167d74c0 100644
--- a/web/interview.js
+++ b/web/interview.js
@@ -1973,7 +1973,7 @@ function applyThinking(thinking) {
   nodes.thinking.setAttribute("aria-pressed", String(thinking));
   nodes.turnStatus.textContent = thinking
     ? "Jim will wait. Speak again or choose Continue when ready. The timer keeps running."
-    : "Take your time. Choose Your turn is done (Alt+Enter) to let Jim reply early.";
+    : "Take your time. Choose Your turn is done to let Jim reply early.";
   recordReplay("lifecycle", {
     state: thinking ? "thinking_started" : "thinking_ended",
   });
diff --git a/web/styles.css b/web/styles.css
index 5e6af1e9..45e61767 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -519,6 +519,9 @@ p {
 .turn-row {
   display: flex;
   align-items: center;
+  /* The shortcut hint sits beside the status line and drops below it rather
+     than squeezing both into two narrow columns when the panel is thin. */
+  flex-wrap: wrap;
   gap: 0.4rem;
   margin-top: 0.35rem;
 }