Add whiteboard keyboard shortcuts

Allow users to switch between pen, eraser, and text tools
using keyboard shortcuts (P, E, and T), reducing reliance
on toolbar clicks and improving interaction efficiency.

Repeated P presses cycle through pen colors, while
repeated E presses cycle through eraser sizes. Pressing T
toggles between the text tool and the previously selected
pen or eraser.

Add always-visible shortcut labels beside the corresponding
toolbar controls to improve discoverability.

Ignore shortcuts while typing in text inputs or editing
text labels, on repeated keydown events, and when the
whiteboard is inactive to prevent unintended tool changes.

Change-Id: I58c3d5051267641f928724d0d722ed997f16beff

Author: yunhsuan0510

README.md

@@ -240,9 +240,9 @@ what you can draw, say aloud and defend by tracing an example by hand.
 
    | Control | What it does |
    |---|---|
-   | Pen colors | Black, red, blue and green. Write in black and mark up in the others. |
-   | Eraser | Rubs out what it passes over. The three size buttons beside it pick a size and the eraser together: small for one character, medium for one line, large for a region. Pick a pen color, or press Eraser again, to draw again. |
-   | Text | Click or drag on the board to create a text draft. Enter inserts a newline; Ctrl+Enter or Confirm places the label; Escape or Cancel discards it. Committed labels cannot be edited, moved or resized. |
+   | Pen colors | Black, red, blue and green. Write in black and mark up in the others. With focus on the canvas or drawing toolbar, press P to select the pen, or press P while the pen is selected to cycle through colors. |
+   | Eraser | Rubs out what it passes over. The three size buttons beside it pick a size and the eraser together: small for one character, medium for one line, large for a region. With focus on the canvas or drawing toolbar, press E to select the eraser, or press E while the eraser is selected to cycle through sizes. Pick a pen color, or press Eraser again, to draw again. |
+   | Text | With focus on the canvas or drawing toolbar, press T to toggle the text tool and the previously selected pen or eraser. Click or drag on the board to create a text draft. Enter inserts a newline; Ctrl+Enter or Confirm places the label; Escape or Cancel discards it. Committed labels cannot be edited, moved or resized. |
    | Undo, Redo | Step back and forward one stroke, erasure or confirmed text label at a time. With focus in the whiteboard canvas or drawing toolbar, use Ctrl+Z to undo and Ctrl+Y or Ctrl+Shift+Z to redo on Windows/Linux, or Cmd+Z / Cmd+Shift+Z on macOS. Tab reaches the drawing toolbar; the canvas is not a Tab stop. |
    | Clear board | Wipes the board in one step, which Undo brings back. |
 

tests/browser/whiteboard-shortcuts.test.js

@@ -844,3 +844,156 @@ test("text targets and focus outside the drawing toolbar keep their own undo and
     assert.equal(await page.evaluate(() => globalThis.keyTaken), false);
   }
 });
+
+test("P, E, and T shortcuts respect text, lock, and drawing states", async (t) => {
+  const ctx = await boardPage(t);
+  if (!ctx) return;
+  const { page } = ctx;
+  const board = page.locator("#board");
+  const pressed = (name) =>
+    page
+      .getByRole("button", { name, exact: true })
+      .getAttribute("aria-pressed");
+
+  await board.focus();
+
+  for (const [key, name] of [
+    ["p", "Red pen"],
+    ["p", "Blue pen"],
+    ["p", "Green pen"],
+    ["p", "Black pen"],
+  ]) {
+    await page.keyboard.press(key);
+    assert.equal(await pressed(name), "true", `${key} selects ${name}`);
+  }
+
+  await page.evaluate(() => {
+    document.querySelector("#board").dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "p",
+        repeat: true,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+  });
+  assert.equal(
+    await pressed("Black pen"),
+    "true",
+    "held keys do not cycle colors",
+  );
+
+  const modifiedShortcutHandled = await page.evaluate(() => {
+    const event = new KeyboardEvent("keydown", {
+      key: "p",
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    document.querySelector("#board").dispatchEvent(event);
+    return event.defaultPrevented;
+  });
+  assert.equal(
+    modifiedShortcutHandled,
+    false,
+    "modified keys remain available to the browser",
+  );
+  assert.equal(await pressed("Black pen"), "true");
+
+  await page.getByRole("button", { name: "Eraser", exact: true }).focus();
+  await page.keyboard.press("p");
+  assert.equal(
+    await pressed("Red pen"),
+    "true",
+    "shortcuts also work from the toolbar",
+  );
+  for (const name of ["Blue pen", "Green pen", "Black pen"]) {
+    await page.keyboard.press("p");
+    assert.equal(
+      await pressed(name),
+      "true",
+      `P selects ${name} from the toolbar`,
+    );
+  }
+
+  await page.keyboard.press("e");
+  assert.equal(await pressed("Eraser"), "true");
+  assert.equal(await pressed("Medium eraser"), "true");
+  for (const name of ["Large eraser", "Small eraser", "Medium eraser"]) {
+    await page.keyboard.press("e");
+    assert.equal(await pressed(name), "true", `E selects ${name}`);
+  }
+
+  await page.keyboard.press("t");
+  assert.equal(await pressed("Text"), "true");
+  await page.keyboard.press("t");
+  assert.equal(
+    await pressed("Eraser"),
+    "true",
+    "T returns to the previous tool",
+  );
+
+  await page.keyboard.press("p");
+  assert.equal(await pressed("Black pen"), "true");
+  await page.keyboard.press("t");
+  assert.equal(await pressed("Text"), "true");
+  await page.keyboard.press("t");
+  assert.equal(
+    await pressed("Black pen"),
+    "true",
+    "T returns to the previous pen",
+  );
+
+  await page.keyboard.press("t");
+  const box = await board.boundingBox();
+  await page.mouse.click(box.x + 100, box.y + 100);
+  const input = page.locator(".board-text-input");
+  await input.waitFor();
+  await page.keyboard.type("pet");
+  assert.equal(await input.inputValue(), "pet");
+  assert.equal(await pressed("Text"), "true", "typing does not switch tools");
+
+  await page.locator(".board-text-cancel").click();
+  await page.evaluate(() => globalThis.boardTest.lock("ended"));
+  await board.focus();
+  for (const key of ["p", "e", "t"]) {
+    await page.keyboard.press(key);
+    assert.equal(
+      await pressed("Text"),
+      "true",
+      `${key} is ignored while locked`,
+    );
+    assert.equal(
+      await page.evaluate(() => globalThis.keyTaken),
+      false,
+      `${key} is not consumed while locked`,
+    );
+  }
+
+  await page.evaluate(() => globalThis.boardTest.lock("live"));
+  await page.getByRole("button", { name: "Black pen", exact: true }).click();
+  await board.focus();
+  const boardBox = await board.boundingBox();
+  await page.mouse.move(boardBox.x + 80, boardBox.y + 80);
+  await page.mouse.down();
+  for (const key of ["p", "e", "t"]) {
+    await page.keyboard.press(key);
+    assert.equal(
+      await pressed("Black pen"),
+      "true",
+      `${key} is ignored while drawing`,
+    );
+    assert.equal(
+      await pressed("Eraser"),
+      "false",
+      `${key} does not select eraser`,
+    );
+    assert.equal(await pressed("Text"), "false", `${key} does not select text`);
+    assert.equal(
+      await page.evaluate(() => globalThis.keyTaken),
+      false,
+      `${key} is not consumed while drawing`,
+    );
+  }
+  await page.mouse.up();
+});

web/interview.html

@@ -483,14 +483,17 @@ <h1 id="problem-title">Loading interview...</h1>
             class="board-pens"
             role="group"
             aria-label="Pen colour"
+            aria-keyshortcuts="P"
           ></div>
+          <kbd class="board-shortcut-key" aria-hidden="true">P</kbd>
           <button
             id="board-eraser"
             class="board-tool"
             type="button"
             aria-pressed="false"
+            aria-keyshortcuts="E"
           >
-            Eraser
+            Eraser <kbd class="board-shortcut-key" aria-hidden="true">E</kbd>
           </button>
           <!-- Filled from ERASER_WIDTHS like the pens are from PEN_COLORS.
                Picking a size picks the eraser too: nobody sizes an eraser they
@@ -507,8 +510,9 @@ <h1 id="problem-title">Loading interview...</h1>
             type="button"
             aria-pressed="false"
             title="Drag on the board to create a text label"
+            aria-keyshortcuts="T"
           >
-            Text
+            Text <kbd class="board-shortcut-key" aria-hidden="true">T</kbd>
           </button>
           <button id="board-undo" class="board-tool" type="button">Undo</button>
           <button id="board-redo" class="board-tool" type="button">Redo</button>

web/interview.js

@@ -408,6 +408,7 @@ const board = {
   }),
   color: PEN_COLORS[0].color,
   tool: "pen",
+  previousNonTextTool: "pen",
   eraserWidth: ERASER_WIDTH,
   /// Whether the board takes edits yet; see `boardLocked`.
   ready: false,
@@ -5506,9 +5507,7 @@ function initWhiteboard() {
       event.defaultPrevented ||
       event.repeat ||
       event.isComposing ||
-      event.keyCode === 229 ||
-      event.altKey ||
-      (mac ? !event.metaKey || event.ctrlKey : !event.ctrlKey || event.metaKey)
+      event.keyCode === 229
     )
       return;
     const target = event.target;
@@ -5519,11 +5518,45 @@ function initWhiteboard() {
       (target !== nodes.board && !target.closest(".board-toolbar"))
     )
       return;
+
     const printable = /^[\x20-\x7e]$/.test(event.key);
     if (!printable && !/^[^\x00-\x7f]$/u.test(event.key)) return;
     const key = printable
       ? event.key.toLowerCase()
       : event.code.replace(/^Key/, "").toLowerCase();
+
+    if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) {
+      if (boardLocked() || board.model.isDrawing()) return;
+      if (key === "p") {
+        if (board.tool !== "pen") {
+          selectPen(board.color);
+        } else {
+          const index = PEN_COLORS.findIndex(
+            ({ color }) => color === board.color,
+          );
+          selectPen(PEN_COLORS[(index + 1) % PEN_COLORS.length].color);
+        }
+      } else if (key === "e") {
+        if (board.tool !== "eraser") {
+          selectTool("eraser");
+        } else {
+          const index = ERASER_WIDTHS.indexOf(board.eraserWidth);
+          selectEraserWidth(ERASER_WIDTHS[(index + 1) % ERASER_WIDTHS.length]);
+        }
+      } else if (key === "t") {
+        selectTool(board.tool === "text" ? board.previousNonTextTool : "text");
+      } else {
+        return;
+      }
+      event.preventDefault();
+      return;
+    }
+
+    if (
+      event.altKey ||
+      (mac ? !event.metaKey || event.ctrlKey : !event.ctrlKey || event.metaKey)
+    )
+      return;
     let action = "";
     if (key === "z" && !event.shiftKey) action = "undo";
     else if (
@@ -5604,19 +5637,18 @@ function bindBoardPointer() {
 
 function selectPen(color) {
   board.color = color;
-  board.tool = "pen";
-  paintToolState();
+  selectTool("pen");
 }
 
 function selectTool(tool) {
+  if (tool !== "text") board.previousNonTextTool = tool;
   board.tool = tool;
   paintToolState();
 }
 
 function selectEraserWidth(width) {
   board.eraserWidth = width;
-  board.tool = "eraser";
-  paintToolState();
+  selectTool("eraser");
 }
 
 /// The toolbar and the cursor, from `board` alone, so no selector has to

web/styles.css

@@ -2420,6 +2420,21 @@ table.phase-scores {
   margin-left: auto;
 }
 
+.board-shortcut-key {
+  display: inline-grid;
+  place-items: center;
+  margin-left: 0.35rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.2rem;
+  border: 1px solid var(--hairline);
+  border-radius: 0.25rem;
+  color: var(--sub);
+  font: inherit;
+  font-size: 0.7rem;
+  line-height: 1;
+}
+
 /* The pens sit on a strip of the board's own white, so each swatch looks like
    the ink it draws. On the dark toolbar the black pen was a dark disc on a dark
    ground and could not be found. */