Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
36 changes: 28 additions & 8 deletions tests/browser/turn-taking.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(">")),
Expand All @@ -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.",

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: This locks the hint to another literal rather than the matcher, so a later shortcut change can leave the page copy stale while these assertions still pass. Use a shared shortcut contract for the matcher and displayed labels, and assert against it.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At tests/browser/turn-taking.test.js, line 310:

<comment>This locks the hint to another literal rather than the matcher, so a later shortcut change can leave the page copy stale while these assertions still pass. Use a shared shortcut contract for the matcher and displayed labels, and assert against it.</comment>

<file context>
@@ -291,8 +291,26 @@ test("the page names the yield control and its shortcut the way the handler read
+      .slice(shortcut.indexOf(">") + 1, shortcut.indexOf("</p>"))
+      .replace(/\s+/g, " ")
+      .trim(),
+    "Alt+Enter, or &#8997;Enter on a Mac.",
+  );
+
</file context>

);

// The shortcut the page names is the one the handler takes.
const editor = { tagName: "TEXTAREA" };
assert.equal(
isYieldShortcut(
Expand All @@ -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\.";/,
);
});
14 changes: 11 additions & 3 deletions web/interview.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion web/interview.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
});
Expand Down
3 changes: 3 additions & 0 deletions web/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: When the countdown is visible, the ring and #turn-status do not fit on one flex line at the stage's width, so wrapping isolates the ring above the text it explains. Give #turn-status a zero flex basis (for example, flex: 1 1 0) so the ring stays beside the status while #turn-shortcut wraps below.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At web/styles.css, line 524:

<comment>When the countdown is visible, the ring and `#turn-status` do not fit on one flex line at the stage's width, so wrapping isolates the ring above the text it explains. Give `#turn-status` a zero flex basis (for example, `flex: 1 1 0`) so the ring stays beside the status while `#turn-shortcut` wraps below.</comment>

<file context>
@@ -519,6 +519,9 @@ p {
   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;
</file context>

gap: 0.4rem;
margin-top: 0.35rem;
}
Expand Down