Name the yield shortcut the way a Mac prints it

[sakinu]

The Your turn is done button and the turn status line both name the shortcut as Alt+Enter. A US Apple keyboard prints that modifier as option, never as alt, so a candidate on a Mac reads a hint for a key their keyboard does not have, and the control looks mouse-only.

The chord itself needs no change: Option sets altKey, so isYieldShortcut already accepts it. Only the label was missing a reader.

The Run tests button already names both platforms' chords, so this follows that precedent rather than inventing a second convention. It spells the modifier out instead of reaching for the option glyph, so both halves of the hint read alike. aria-+Enter, the canonical ARIA token, which assistive technology maps to Option on macOS.

The test that alreadyw asserts the tooltip too, so dropping the Mac spelling fails the gate.

---

Summary by cubic

Labels the yield shortcut for Mac users. U.S. Apple keyboards print the modifier as the option sign, never "alt", so Alt+Enter alone pointed Mac candidates at a key they don't have; the tooltip now lists both spellings (Alt+Enter / ⌥Enter), and the chord itself already works on Mac since Option sets altKey.

The chord also moved out of the live-region status line into a static hint beside it, so it's read once as reference text instead of both spellings being repeated on every Thinking toggle. The hint wraps below the status line when the panel is thin.

^{Written for commit 45544d9. Summary will update on new commits.}

[cubic-dev-ai]

2 issues found across 4 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. 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. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="tests/browser/turn-taking.test.js">

<violation number="1" location="tests/browser/turn-taking.test.js:310">
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.</violation>
</file>

<file name="web/styles.css">

<violation number="1" location="web/styles.css:524">
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.</violation>
</file>

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

[cubic-dev-ai]

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>

[cubic-dev-ai]

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>