Add Playwright keyboard-editing tests for executive-meetings schedule

Task #139: cover Enter/Esc/Tab keyboard editing of time, title, and attendee inline editors with end-to-end tests that seed via DB and log in via UI as admin/admin123. What this adds - artifacts/tx-os/tests/executive-meetings-keyboard-editing.spec.mjs with 7 tests: * Tab into time cell + Enter opens edit + valid times save via Enter (asserts PATCH on /api/executive-meetings/:id and DB row updated) * Time cell Esc restores originals and sends no PATCH * Title cell Enter opens edit and Enter saves via PATCH * Title cell Esc restores original and sends no PATCH * Attendee cell Enter opens edit and Enter saves via PUT on /api/executive-meetings/:id/attendees * Attendee cell Esc restores original and sends no PUT * Tab from title cell reaches the time cell in the same row Implementation notes / deviations - Each test seeds its own future-dated meeting (and attendee where needed) directly through the pg pool with a unique date, then cleans those rows in afterAll — same pattern as the existing schedule-features spec. - After every save the page invalidates the day query and refetches; assertions wait for that GET to land before reading the DOM, which removed an early flaky-timing failure. - The title save test was originally written to do select-all + type. We discovered (via instrumented PATCH inspection) that the EditableCell writes to title_ar vs title_en based on the user's preferredLanguage, not the visible UI direction — admin's preferred language is ar, so saves go to title_ar even when the schedule is rendered LTR. The test now appends a unique suffix and asserts against whichever column actually received the saved HTML, mirroring the schedule-features formatting test. The underlying language-write mismatch is captured as a follow-up. - All 7 tests pass locally (~58s total). The pre-existing failures in the `test` workflow are unrelated PDF tests, not from this work. Code-review feedback applied - Removed two unrelated stray files (artifacts/tx-os/nohup.out and artifacts/tx-os/public/opengraph.jpg) that had no code references. - Scoped both attendee selectors under the seeded row's testid (em-row-:meetingId) so the locator stays unambiguous even if another test ever shares a date. Follow-ups proposed - #201 (test_gaps): Shift+Tab + cross-row + ghost-row keyboard tests - #202 (tech_debt): Save edits to the column matching the visible UI Replit-Task-Id: cbd9619c-1475-43c6-998e-163e8e6ec94a
2026-04-30 09:30:38 +00:00
parent afa79fb618
commit 4ace4469eb
2 changed files with 700 additions and 0 deletions
@@ -0,0 +1,700 @@
+import { test, expect } from "@playwright/test";
+import pg from "pg";
+
+// E2E coverage for keyboard editing in the executive-meetings schedule.
+// These tests verify the keyboard contract for the three inline-edit
+// cells (time range, title, attendee name):
+//
+//   - Tab navigation reaches the cell (it is keyboard-reachable via
+//     tabIndex=0).
+//   - Pressing Enter on the focused display opens edit mode.
+//   - Pressing Enter inside the editor saves (PATCH/PUT succeeds,
+//     editor collapses to display mode).
+//   - Pressing Escape cancels — original value is restored, NO PATCH/PUT
+//     is sent, editor collapses.
+//   - Focus does not get stranded on an unmounted node after save/cancel
+//     (it returns to body or the row, not into the void).
+//
+// Each scenario seeds its own meeting row on a far-future date so we
+// never collide with real schedule data, and afterAll cleanup deletes
+// the rows we created.
+
+const DATABASE_URL = process.env.DATABASE_URL;
+if (!DATABASE_URL) {
+  throw new Error(
+    "DATABASE_URL must be set to run the executive-meetings keyboard-editing UI tests",
+  );
+}
+
+const pool = new pg.Pool({ connectionString: DATABASE_URL });
+
+const createdMeetingIds = [];
+
+async function loginViaUi(page, username, password) {
+  await page.goto("/login");
+  await page.locator("#username").fill(username);
+  await page.locator("#password").fill(password);
+  await Promise.all([
+    page.waitForURL((url) => !url.pathname.endsWith("/login"), {
+      timeout: 15_000,
+    }),
+    page.locator('form button[type="submit"]').click(),
+  ]);
+}
+
+// Wipe the schedule's persisted UI prefs so each test starts from a
+// known baseline. Must be called AFTER login because the edit-mode
+// storage key is namespaced by userId.
+async function resetSchedulePrefs(page) {
+  await page.evaluate(() => {
+    try {
+      const keys = Object.keys(window.localStorage);
+      for (const k of keys) {
+        if (
+          k.startsWith("em-schedule-edit-mode-v1") ||
+          k === "em-schedule-cols-v1" ||
+          k === "em-schedule-row-colors-v1" ||
+          k === "em-current-meeting-highlight-v1"
+        ) {
+          window.localStorage.removeItem(k);
+        }
+      }
+    } catch {
+      /* ignore */
+    }
+  });
+}
+
+async function setLangEn(page) {
+  await page.addInitScript(() => {
+    try {
+      window.localStorage.setItem("tx-lang", "en");
+    } catch {
+      /* localStorage may not be ready before navigation */
+    }
+  });
+}
+
+async function insertMeeting({
+  meetingDate,
+  dailyNumber,
+  titleEn,
+  titleAr,
+  startTime,
+  endTime,
+}) {
+  const { rows } = await pool.query(
+    `INSERT INTO executive_meetings
+       (daily_number, title_ar, title_en, meeting_date, start_time, end_time, status)
+     VALUES ($1, $2, $3, $4, $5, $6, 'scheduled')
+     RETURNING id`,
+    [dailyNumber, titleAr, titleEn, meetingDate, startTime, endTime],
+  );
+  const id = rows[0].id;
+  createdMeetingIds.push(id);
+  return id;
+}
+
+async function insertAttendee({ meetingId, name, attendanceType, sortOrder }) {
+  await pool.query(
+    `INSERT INTO executive_meeting_attendees
+       (meeting_id, name, attendance_type, sort_order)
+     VALUES ($1, $2, $3, $4)`,
+    [meetingId, name, attendanceType, sortOrder],
+  );
+}
+
+const RANDOM_DATE_BASE_DAYS =
+  730 + Math.floor(Math.random() * 1000) + ((Date.now() / 1000) | 0) % 500;
+function uniqueFutureDate(offsetDays) {
+  const d = new Date();
+  d.setUTCDate(d.getUTCDate() + RANDOM_DATE_BASE_DAYS + offsetDays * 7);
+  return d.toISOString().slice(0, 10);
+}
+
+// Switch the schedule into edit mode so the inline editors are
+// interactive. Idempotent — clicks the toggle only when off.
+async function ensureEditMode(page) {
+  const toggle = page.getByTestId("em-edit-mode-toggle");
+  await expect(toggle).toBeVisible();
+  const pressed = await toggle.getAttribute("aria-pressed");
+  if (pressed !== "true") {
+    await toggle.click();
+    await expect(toggle).toHaveAttribute("aria-pressed", "true");
+  }
+}
+
+// Common setup: log in, navigate to /executive-meetings, reset prefs,
+// reload, jump to the seeded date, wait for the row, flip on edit mode.
+async function gotoMeetingRow(page, meetingId, date) {
+  await loginViaUi(page, "admin", "admin123");
+  await page.goto("/executive-meetings");
+  await resetSchedulePrefs(page);
+  await page.reload();
+  await page.locator('input[type="date"]').first().fill(date);
+  const row = page.getByTestId(`em-row-${meetingId}`);
+  await expect(row).toBeVisible({ timeout: 10_000 });
+  await ensureEditMode(page);
+  return row;
+}
+
+// Returns the data-testid attribute of the currently-focused element,
+// or null when focus is on body / has no testid. Useful for asserting
+// keyboard navigation lands on the right cell without depending on a
+// fragile Tab count.
+async function activeTestId(page) {
+  return await page.evaluate(() => {
+    const el = document.activeElement;
+    if (!el || el === document.body) return null;
+    return el.getAttribute("data-testid");
+  });
+}
+
+// Tab forward up to `maxSteps` times until the focused element has the
+// given test id. Throws via expect() if we never reach it. We use this
+// instead of a hard-coded number of Tab presses so the test stays
+// stable against small DOM changes (e.g. extra row-overlay buttons).
+async function tabUntilFocused(page, targetTestId, maxSteps = 25) {
+  for (let i = 0; i < maxSteps; i++) {
+    const cur = await activeTestId(page);
+    if (cur === targetTestId) return;
+    await page.keyboard.press("Tab");
+  }
+  const cur = await activeTestId(page);
+  expect(
+    cur,
+    `expected focus to reach ${targetTestId} within ${maxSteps} Tab presses`,
+  ).toBe(targetTestId);
+}
+
+// Wait for the schedule's day-level GET refetch to land. After every
+// inline save the page calls qc.invalidateQueries({ queryKey: [
+// "/api/executive-meetings", date ] }), which fires a fresh GET. The
+// cell re-renders only AFTER that GET resolves, so polling for the new
+// text without first awaiting the refetch can race.
+function waitForDayRefetch(page, date) {
+  return page.waitForResponse(
+    (resp) => {
+      const u = new URL(resp.url());
+      return (
+        u.pathname === "/api/executive-meetings" &&
+        u.searchParams.get("date") === date &&
+        resp.request().method() === "GET" &&
+        resp.ok()
+      );
+    },
+    { timeout: 15_000 },
+  );
+}
+
+test.afterAll(async () => {
+  if (createdMeetingIds.length > 0) {
+    await pool.query(
+      `DELETE FROM executive_meeting_attendees WHERE meeting_id = ANY($1::int[])`,
+      [createdMeetingIds],
+    );
+    await pool.query(
+      `DELETE FROM executive_meeting_audit_logs WHERE entity_type = 'meeting' AND entity_id = ANY($1::int[])`,
+      [createdMeetingIds],
+    );
+    await pool.query(
+      `DELETE FROM executive_meetings WHERE id = ANY($1::int[])`,
+      [createdMeetingIds],
+    );
+  }
+  await pool.end();
+});
+
+test("Schedule keyboard: Tab into time cell, Enter opens edit, valid times save via Enter and PATCH succeeds", async ({
+  page,
+}) => {
+  await setLangEn(page);
+
+  const date = uniqueFutureDate(1);
+  const meetingId = await insertMeeting({
+    meetingDate: date,
+    dailyNumber: 1,
+    titleEn: `Keyboard Time ${Date.now().toString(36)}`,
+    titleAr: `وقت لوحة المفاتيح ${Date.now().toString(36)}`,
+    startTime: "09:00:00",
+    endTime: "10:00:00",
+  });
+
+  await gotoMeetingRow(page, meetingId, date);
+
+  const timeCell = page.getByTestId(`em-time-${meetingId}`);
+  await expect(timeCell).toBeVisible();
+  // Display variant is rendered as <div role="button" tabindex="0">.
+  // Confirm the cell is keyboard-reachable: focus it via the DOM (a
+  // raw Tab walk is also covered by a separate tab-order test below;
+  // the exact step count from the start of the page would depend on
+  // how many overlay buttons render in this row, which is not the
+  // target of this assertion).
+  await timeCell.evaluate((el) => el.focus());
+  expect(await activeTestId(page)).toBe(`em-time-${meetingId}`);
+
+  // Enter on the focused display opens edit mode.
+  await page.keyboard.press("Enter");
+  const startInput = page.getByTestId(`em-time-start-${meetingId}`);
+  const endInput = page.getByTestId(`em-time-end-${meetingId}`);
+  await expect(startInput).toBeVisible();
+  await expect(endInput).toBeVisible();
+  // The start input auto-focuses on enter-edit so the user can begin
+  // typing immediately.
+  await expect(startInput).toBeFocused();
+
+  // Type valid new times.
+  await startInput.fill("13:30");
+  await endInput.focus();
+  await endInput.fill("14:45");
+
+  // Watch for the PATCH that the Enter keypress should trigger AND
+  // for the day-level GET refetch the page kicks off afterwards. The
+  // displayed cell only updates once the refetch resolves.
+  const savePromise = page.waitForResponse(
+    (resp) => {
+      const u = new URL(resp.url());
+      return (
+        u.pathname === `/api/executive-meetings/${meetingId}` &&
+        resp.request().method() === "PATCH" &&
+        resp.ok()
+      );
+    },
+    { timeout: 15_000 },
+  );
+  const refetchPromise = waitForDayRefetch(page, date);
+  await page.keyboard.press("Enter");
+  await Promise.all([savePromise, refetchPromise]);
+
+  // Editor must collapse back to display mode and show the new values.
+  await expect(startInput).toHaveCount(0);
+  await expect(endInput).toHaveCount(0);
+  await expect(timeCell).toHaveText(/13:30\s*[\u2013\-]\s*14:45/, {
+    timeout: 10_000,
+  });
+
+  // The DB must reflect the PATCH (server is the source of truth).
+  const { rows } = await pool.query(
+    `SELECT start_time, end_time FROM executive_meetings WHERE id = $1`,
+    [meetingId],
+  );
+  expect(String(rows[0].start_time)).toBe("13:30:00");
+  expect(String(rows[0].end_time)).toBe("14:45:00");
+
+  // Focus must return to a sensible element — either the (re-rendered)
+  // display cell or the document body. What it MUST NOT do is land on
+  // an unmounted input or escape the page entirely.
+  const focused = await activeTestId(page);
+  expect(focused === null || focused === `em-time-${meetingId}`).toBe(true);
+});
+
+test("Schedule keyboard: time cell Esc restores original times and sends no PATCH", async ({
+  page,
+}) => {
+  await setLangEn(page);
+
+  const date = uniqueFutureDate(2);
+  const meetingId = await insertMeeting({
+    meetingDate: date,
+    dailyNumber: 1,
+    titleEn: `Keyboard Time Esc ${Date.now().toString(36)}`,
+    titleAr: `إلغاء الوقت ${Date.now().toString(36)}`,
+    startTime: "08:15:00",
+    endTime: "09:45:00",
+  });
+
+  await gotoMeetingRow(page, meetingId, date);
+
+  const timeCell = page.getByTestId(`em-time-${meetingId}`);
+  await expect(timeCell).toHaveText(/08:15\s*[\u2013\-]\s*09:45/);
+
+  // Spy on any PATCH to this meeting — Escape must not trigger one.
+  let patchSeen = false;
+  page.on("response", (resp) => {
+    try {
+      const u = new URL(resp.url());
+      if (
+        u.pathname === `/api/executive-meetings/${meetingId}` &&
+        resp.request().method() === "PATCH"
+      ) {
+        patchSeen = true;
+      }
+    } catch {
+      /* ignore */
+    }
+  });
+
+  await timeCell.evaluate((el) => el.focus());
+  await page.keyboard.press("Enter");
+  const startInput = page.getByTestId(`em-time-start-${meetingId}`);
+  const endInput = page.getByTestId(`em-time-end-${meetingId}`);
+  await expect(startInput).toBeFocused();
+
+  // Type something different from the saved value so that, if Escape
+  // failed to cancel, we'd see a real change in the cell.
+  await startInput.fill("17:00");
+  await endInput.focus();
+  await endInput.fill("18:30");
+
+  // Esc cancels — editor closes, original values restored.
+  await page.keyboard.press("Escape");
+  await expect(startInput).toHaveCount(0);
+  await expect(endInput).toHaveCount(0);
+  await expect(timeCell).toHaveText(/08:15\s*[\u2013\-]\s*09:45/);
+
+  // Give the page a beat to make sure no late PATCH fires from a
+  // delayed blur path before we assert.
+  await page.waitForTimeout(400);
+  expect(patchSeen).toBe(false);
+
+  // DB must still hold the originals.
+  const { rows } = await pool.query(
+    `SELECT start_time, end_time FROM executive_meetings WHERE id = $1`,
+    [meetingId],
+  );
+  expect(String(rows[0].start_time)).toBe("08:15:00");
+  expect(String(rows[0].end_time)).toBe("09:45:00");
+
+  // Focus is sensible after cancel (cell or body, not on a removed input).
+  const focused = await activeTestId(page);
+  expect(focused === null || focused === `em-time-${meetingId}`).toBe(true);
+});
+
+test("Schedule keyboard: title cell Enter opens edit and Enter saves the new value via PATCH", async ({
+  page,
+}) => {
+  await setLangEn(page);
+
+  const date = uniqueFutureDate(3);
+  const uniq = Date.now().toString(36);
+  const originalTitle = `KbdTitle Original ${uniq}`;
+  // We append (instead of select-all + replace) because typing-as-append
+  // exercises the same Enter-saves contract without depending on the
+  // ProseMirror selectAll keymap (which can be flaky to drive from
+  // outside the editor in headless Chromium).
+  const appended = ` SAVED-${uniq}`;
+  const meetingId = await insertMeeting({
+    meetingDate: date,
+    dailyNumber: 1,
+    titleEn: originalTitle,
+    titleAr: originalTitle,
+    startTime: "09:00:00",
+    endTime: "10:00:00",
+  });
+
+  await gotoMeetingRow(page, meetingId, date);
+
+  const titleCell = page.getByTestId(`em-edit-title-${meetingId}`);
+  await expect(titleCell).toContainText(originalTitle);
+
+  // Confirm the title cell is keyboard-reachable (tabIndex=0) by
+  // focusing it directly, then press Enter to enter edit mode.
+  await titleCell.evaluate((el) => el.focus());
+  expect(await activeTestId(page)).toBe(`em-edit-title-${meetingId}`);
+  await page.keyboard.press("Enter");
+
+  const toolbar = page.getByTestId("em-edit-toolbar");
+  await expect(toolbar).toBeVisible();
+  const editorContent = titleCell.locator('[contenteditable="true"]');
+  await expect(editorContent).toBeVisible();
+  await expect(editorContent).toBeFocused();
+
+  // The editor opens with the cursor at the end of the existing text
+  // (commands.focus("end")), so plain typing appends.
+  await page.keyboard.type(appended);
+
+  const savePromise = page.waitForResponse(
+    (resp) => {
+      const u = new URL(resp.url());
+      return (
+        u.pathname === `/api/executive-meetings/${meetingId}` &&
+        resp.request().method() === "PATCH" &&
+        resp.ok()
+      );
+    },
+    { timeout: 15_000 },
+  );
+  const refetchPromise = waitForDayRefetch(page, date);
+  // Single-line title (multiline=false): Enter (no Shift) saves via
+  // the EditableCell keydown handler.
+  await page.keyboard.press("Enter");
+  await Promise.all([savePromise, refetchPromise]);
+
+  const expectedTitle = originalTitle + appended;
+  await expect(toolbar).toBeHidden();
+  await expect(titleCell).toContainText(expectedTitle, { timeout: 10_000 });
+
+  // DB confirms the save round-tripped. The EditableCell saves to
+  // title_ar when the page is RTL (admin's preferredLanguage drives
+  // this) and title_en when LTR — so check whichever column actually
+  // received the saved HTML, exactly like the schedule-features
+  // formatting test does.
+  const { rows } = await pool.query(
+    `SELECT title_ar, title_en FROM executive_meetings WHERE id = $1`,
+    [meetingId],
+  );
+  const savedTitle = String(rows[0].title_ar).includes(appended)
+    ? String(rows[0].title_ar)
+    : String(rows[0].title_en);
+  expect(savedTitle).toContain(originalTitle);
+  expect(savedTitle).toContain(appended);
+
+  const focused = await activeTestId(page);
+  expect(focused === null || focused === `em-edit-title-${meetingId}`).toBe(
+    true,
+  );
+});
+
+test("Schedule keyboard: title cell Esc closes editor, restores the original, and sends no PATCH", async ({
+  page,
+}) => {
+  await setLangEn(page);
+
+  const date = uniqueFutureDate(4);
+  const uniq = Date.now().toString(36);
+  const originalTitle = `KbdTitleEsc Original ${uniq}`;
+  const meetingId = await insertMeeting({
+    meetingDate: date,
+    dailyNumber: 1,
+    titleEn: originalTitle,
+    titleAr: originalTitle,
+    startTime: "09:00:00",
+    endTime: "10:00:00",
+  });
+
+  await gotoMeetingRow(page, meetingId, date);
+
+  const titleCell = page.getByTestId(`em-edit-title-${meetingId}`);
+  await expect(titleCell).toContainText(originalTitle);
+
+  let patchSeen = false;
+  page.on("response", (resp) => {
+    try {
+      const u = new URL(resp.url());
+      if (
+        u.pathname === `/api/executive-meetings/${meetingId}` &&
+        resp.request().method() === "PATCH"
+      ) {
+        patchSeen = true;
+      }
+    } catch {
+      /* ignore */
+    }
+  });
+
+  await titleCell.evaluate((el) => el.focus());
+  await page.keyboard.press("Enter");
+
+  const toolbar = page.getByTestId("em-edit-toolbar");
+  await expect(toolbar).toBeVisible();
+  const editorContent = titleCell.locator('[contenteditable="true"]');
+  await expect(editorContent).toBeFocused();
+
+  // Type a draft change that we expect Esc to throw away.
+  await page.keyboard.type(" DRAFT-NEVER-SAVED");
+  await page.keyboard.press("Escape");
+  await expect(toolbar).toBeHidden();
+  await expect(titleCell).toContainText(originalTitle);
+  await expect(titleCell).not.toContainText("DRAFT-NEVER-SAVED");
+  await page.waitForTimeout(400);
+  expect(patchSeen).toBe(false);
+
+  // DB still holds the original.
+  const { rows } = await pool.query(
+    `SELECT title_en FROM executive_meetings WHERE id = $1`,
+    [meetingId],
+  );
+  expect(String(rows[0].title_en)).toBe(originalTitle);
+
+  const focused = await activeTestId(page);
+  expect(focused === null || focused === `em-edit-title-${meetingId}`).toBe(
+    true,
+  );
+});
+
+test("Schedule keyboard: attendee cell Enter opens edit and Enter saves the new name via PUT", async ({
+  page,
+}) => {
+  await setLangEn(page);
+
+  const date = uniqueFutureDate(5);
+  const uniq = Date.now().toString(36);
+  const originalName = `KbdAtt Original ${uniq}`;
+  // Append a suffix rather than replace, for the same reason as the
+  // title test above: it exercises the same Enter-saves contract
+  // without depending on an external select-all keymap.
+  const appended = ` SAVED-${uniq}`;
+  const meetingId = await insertMeeting({
+    meetingDate: date,
+    dailyNumber: 1,
+    titleEn: `Att Host ${uniq}`,
+    titleAr: `مضيف ${uniq}`,
+    startTime: "09:00:00",
+    endTime: "10:00:00",
+  });
+  await insertAttendee({
+    meetingId,
+    name: originalName,
+    attendanceType: "internal",
+    sortOrder: 0,
+  });
+
+  const row = await gotoMeetingRow(page, meetingId, date);
+
+  // The testid uses the original index in meeting.attendees (0).
+  // Scope under the seeded row so the selector stays unambiguous even
+  // if a future test ever shares the same date.
+  const attendeeCell = row.getByTestId(`em-edit-attendee-0`);
+  await expect(attendeeCell).toBeVisible();
+  await expect(attendeeCell).toContainText(originalName);
+
+  await attendeeCell.evaluate((el) => el.focus());
+  expect(await activeTestId(page)).toBe(`em-edit-attendee-0`);
+  await page.keyboard.press("Enter");
+
+  const toolbar = page.getByTestId("em-edit-toolbar");
+  await expect(toolbar).toBeVisible();
+  const editorContent = attendeeCell.locator('[contenteditable="true"]');
+  await expect(editorContent).toBeVisible();
+  await expect(editorContent).toBeFocused();
+
+  // Cursor opens at end (focus("end")), so typing appends.
+  await page.keyboard.type(appended);
+
+  const savePromise = page.waitForResponse(
+    (resp) => {
+      const u = new URL(resp.url());
+      return (
+        u.pathname === `/api/executive-meetings/${meetingId}/attendees` &&
+        resp.request().method() === "PUT" &&
+        resp.ok()
+      );
+    },
+    { timeout: 15_000 },
+  );
+  const refetchPromise = waitForDayRefetch(page, date);
+  await page.keyboard.press("Enter");
+  await Promise.all([savePromise, refetchPromise]);
+
+  const expectedName = originalName + appended;
+  await expect(toolbar).toBeHidden();
+  await expect(attendeeCell).toContainText(expectedName, { timeout: 10_000 });
+
+  const { rows } = await pool.query(
+    `SELECT name FROM executive_meeting_attendees
+       WHERE meeting_id = $1 ORDER BY sort_order`,
+    [meetingId],
+  );
+  expect(rows.length).toBe(1);
+  expect(String(rows[0].name)).toContain(originalName);
+  expect(String(rows[0].name)).toContain(appended);
+
+  const focused = await activeTestId(page);
+  expect(focused === null || focused === `em-edit-attendee-0`).toBe(true);
+});
+
+test("Schedule keyboard: attendee cell Esc closes editor, restores the original, and sends no PUT", async ({
+  page,
+}) => {
+  await setLangEn(page);
+
+  const date = uniqueFutureDate(6);
+  const uniq = Date.now().toString(36);
+  const originalName = `KbdAttEsc Original ${uniq}`;
+  const meetingId = await insertMeeting({
+    meetingDate: date,
+    dailyNumber: 1,
+    titleEn: `Att Host Esc ${uniq}`,
+    titleAr: `مضيف إلغاء ${uniq}`,
+    startTime: "09:00:00",
+    endTime: "10:00:00",
+  });
+  await insertAttendee({
+    meetingId,
+    name: originalName,
+    attendanceType: "internal",
+    sortOrder: 0,
+  });
+
+  const row = await gotoMeetingRow(page, meetingId, date);
+
+  const attendeeCell = row.getByTestId(`em-edit-attendee-0`);
+  await expect(attendeeCell).toContainText(originalName);
+
+  let putSeen = false;
+  page.on("response", (resp) => {
+    try {
+      const u = new URL(resp.url());
+      if (
+        u.pathname === `/api/executive-meetings/${meetingId}/attendees` &&
+        resp.request().method() === "PUT"
+      ) {
+        putSeen = true;
+      }
+    } catch {
+      /* ignore */
+    }
+  });
+
+  await attendeeCell.evaluate((el) => el.focus());
+  await page.keyboard.press("Enter");
+
+  const toolbar = page.getByTestId("em-edit-toolbar");
+  await expect(toolbar).toBeVisible();
+  const editorContent = attendeeCell.locator('[contenteditable="true"]');
+  await expect(editorContent).toBeFocused();
+
+  await page.keyboard.type(" DRAFT-NEVER-SAVED");
+  await page.keyboard.press("Escape");
+  await expect(toolbar).toBeHidden();
+  await expect(attendeeCell).toContainText(originalName);
+  await expect(attendeeCell).not.toContainText("DRAFT-NEVER-SAVED");
+  await page.waitForTimeout(400);
+  expect(putSeen).toBe(false);
+
+  // DB unchanged.
+  const { rows } = await pool.query(
+    `SELECT name FROM executive_meeting_attendees
+       WHERE meeting_id = $1 ORDER BY sort_order`,
+    [meetingId],
+  );
+  expect(rows.length).toBe(1);
+  expect(String(rows[0].name)).toBe(originalName);
+
+  const focused = await activeTestId(page);
+  expect(focused === null || focused === `em-edit-attendee-0`).toBe(true);
+});
+
+test("Schedule keyboard: Tab from the title cell reaches the time cell in the same row", async ({
+  page,
+}) => {
+  // Covers the keyboard-reachability requirement ("Tab into a time
+  // cell"). We seed a row with NO attendees so the tab path between
+  // the title and the time cell is short and stable.
+  await setLangEn(page);
+
+  const date = uniqueFutureDate(7);
+  const meetingId = await insertMeeting({
+    meetingDate: date,
+    dailyNumber: 1,
+    titleEn: `Tab Order ${Date.now().toString(36)}`,
+    titleAr: `ترتيب التبويب ${Date.now().toString(36)}`,
+    startTime: "09:00:00",
+    endTime: "10:00:00",
+  });
+
+  await gotoMeetingRow(page, meetingId, date);
+
+  const titleCell = page.getByTestId(`em-edit-title-${meetingId}`);
+  await titleCell.evaluate((el) => el.focus());
+  expect(await activeTestId(page)).toBe(`em-edit-title-${meetingId}`);
+
+  // Walk forward with Tab until we land on the time cell. Bounded so a
+  // future regression that breaks tab order fails fast instead of
+  // tabbing forever.
+  await tabUntilFocused(page, `em-time-${meetingId}`, 30);
+
+  // Pressing Enter on the focused time display opens edit mode.
+  await page.keyboard.press("Enter");
+  await expect(page.getByTestId(`em-time-start-${meetingId}`)).toBeFocused();
+});