Public: anyone can read this; the crew can change it.
The reports list is keyboard-first: j/k move between rows, enter opens one #10366
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/10355-the-reports-list-is-keyboard-first-j-k-m → main 4 commits fork
2 files
changed +58
−0
src/web/pages/reports.ts +1
| @@ -234,6 +234,7 @@ function reportRow(base: string, report: Report): Html { | ||
| 234 | 234 | `${base}/reports/${report.id}/${verb}`; |
| 235 | 235 | return row({ |
| 236 | 236 | title: report.title, |
| 237 | nav: true, | |
| 237 | 238 | meta: html`From outside, ${filerWords(report.filedBy)}, not checked · ${time(report.createdAt)}`, |
| 238 | 239 | fold: { |
| 239 | 240 | id: `report-${report.id}`, |
test/keys-reports-list.test.ts added +57
| @@ -0,0 +1,57 @@ | ||
| 1 | /** The reports list joins the shell's j/k row traversal (#10355): one data-nav per row, none on the empty page. */ | |
| 2 | import { afterAll, beforeAll, expect, test } from "bun:test"; | |
| 3 | import { mkdtemp, rm } from "node:fs/promises"; | |
| 4 | import { tmpdir } from "node:os"; | |
| 5 | import { join } from "node:path"; | |
| 6 | import { createRepo } from "../src/actions/repos.ts"; | |
| 7 | import { fileReport } from "../src/actions/reports.ts"; | |
| 8 | import { createApp, type App } from "../src/app.ts"; | |
| 9 | import { createSession } from "../src/core/sessions.ts"; | |
| 10 | import { createUser } from "../src/core/users.ts"; | |
| 11 | import { serve, type Servers } from "../src/http/server.ts"; | |
| 12 | ||
| 13 | let dataDir: string; | |
| 14 | let app: App; | |
| 15 | let servers: Servers; | |
| 16 | let cookie = ""; | |
| 17 | ||
| 18 | beforeAll(async () => { | |
| 19 | dataDir = await mkdtemp(join(tmpdir(), "forge-keys-reports-")); | |
| 20 | app = createApp({ dataDir, port: 0 }); | |
| 21 | servers = await serve(app); | |
| 22 | const made = await createUser(app.db, { | |
| 23 | origin: "seed", trusted: true, username: "alice", email: "[email protected]", | |
| 24 | password: "a-good-passphrase", adminIfFirst: true, | |
| 25 | }); | |
| 26 | if (!made.ok) throw new Error(String(made.error)); | |
| 27 | cookie = `forge_session=${createSession(app.db, made.value.id).token}`; | |
| 28 | const full = await createRepo(app, made.value, { name: "full", visibility: "public" }); | |
| 29 | const bare = await createRepo(app, made.value, { name: "bare", visibility: "public" }); | |
| 30 | if (!full.ok || !bare.ok) throw new Error("repo"); | |
| 31 | for (const [i, title] of ["First", "Second", "Third"].entries()) { | |
| 32 | const filed = fileReport(app, full.value, { title, body: "", page: "" }, `src-${i}`); | |
| 33 | if (!filed.ok) throw new Error(JSON.stringify(filed.error)); | |
| 34 | } | |
| 35 | }); | |
| 36 | ||
| 37 | afterAll(async () => { | |
| 38 | await servers.stop(); | |
| 39 | app.close(); | |
| 40 | await rm(dataDir, { recursive: true, force: true }); | |
| 41 | }); | |
| 42 | ||
| 43 | const get = (path: string) => fetch(`${servers.url}${path}`, { headers: { cookie } }); | |
| 44 | ||
| 45 | test("each report row is one data-nav summary, no nested data-nav", async () => { | |
| 46 | const text = await (await get("/alice/full/reports")).text(); | |
| 47 | const navs = [...text.matchAll(/<summary[^>]*data-nav tabindex="-1"/g)]; | |
| 48 | expect(navs.length).toBe(3); | |
| 49 | expect(text.match(/data-nav/g)!.length).toBe(3); | |
| 50 | expect(text.match(/<details id="report-/g)!.length).toBe(3); | |
| 51 | }); | |
| 52 | ||
| 53 | test("the empty list draws no data-nav", async () => { | |
| 54 | const res = await get("/alice/bare/reports"); | |
| 55 | expect(res.status).toBe(200); | |
| 56 | expect(await res.text()).not.toContain("data-nav"); | |
| 57 | }); |