ui/docs/order-composer.md

@@ -105,6 +105,25 @@ the same row, the overlay reapplies, and re-submitting is
 idempotent on the engine side (the rename already matches the
 stored value).
 
+### Visual encoding on the order tab
+
+The order tab's row carries a `status-{status}` class that tints the
+card background through the design-token subtle palette: `applied`
+reads as `--color-success-subtle`, `invalid` / `rejected` / `conflict`
+as `--color-danger-subtle`, and `draft` / `valid` / `submitting` as
+`--color-warning-subtle` (the "not yet acknowledged by the server"
+group, including the offline mode). The textual status name stays in
+the DOM as a `.sr-only` node so screen readers and the existing
+`order-command-status-N` testids still observe it. Card text sits at
+`0.8rem` — the same scale the calculator tab uses for its body labels
+— so the order list reads as part of the same sidebar density rather
+than its own larger surface. Long labels wrap inside the card
+(`overflow-wrap: anywhere`) instead of being truncated. The per-row
+delete control is a tiny framed `✕` flush against the card's
+top-right corner (no offset, sized to fit the corner padding-space)
+— always visible, never hover-only, and labelled by
+`game.sidebar.order.command_delete` for assistive tech.
+
 ## Discriminated union shape
 
 `OrderCommand` is a discriminated union on the `kind` field:

ui/frontend/playwright.config.ts

@@ -17,6 +17,16 @@ export default defineConfig({
 		baseURL: "http://localhost:5173",
 		trace: "retain-on-failure",
 		screenshot: "only-on-failure",
+		// Force `prefers-reduced-motion: reduce` for every spec. The
+		// production UI honours the preference (e.g. report-toc swaps
+		// `scrollIntoView({behavior: "smooth"})` for `"auto"`), so
+		// running the e2e suite in this mode keeps anchor scrolls and
+		// other animations synchronous — which avoids the long-standing
+		// `report-sections › every TOC anchor lands its section in view`
+		// flake where the smooth-scroll for sections near the bottom of
+		// the page failed to settle within Playwright's 5 s viewport
+		// wait under CI load.
+		contextOptions: { reducedMotion: "reduce" },
 	},
 	projects: [
 		{ name: "chromium-desktop", use: { ...devices["Desktop Chrome"] } },

ui/frontend/src/lib/sidebar/order-tab.svelte

@@ -7,10 +7,14 @@ button.
 Phase 14 wires the auto-sync pipeline directly into the draft
 store: every successful `add` / `remove` / `move` triggers a
 `submitOrder` call so the server always mirrors the local draft.
-This view shows the resulting per-command status (`valid`,
-`submitting`, `applied`, `rejected`) and a small status bar at the
-bottom that surfaces the latest sync result. The earlier explicit
-Submit button is gone — there is no separate "send" step anymore.
+Per-command status (`valid`, `submitting`, `applied`, `rejected`,
+`conflict`, `invalid`) is conveyed by the card's background tint
+(`status-{status}` class → `--color-{success,danger,warning}-subtle`),
+while the textual status name stays in the DOM as an `sr-only`
+node so screen readers and the existing tests still observe it.
+A small status bar at the bottom surfaces the latest sync result.
+The earlier explicit Submit button is gone — there is no separate
+"send" step anymore.
 
 Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
 (Playwright) and via direct store / mocked-client construction
@@ -188,7 +192,7 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
 			{#each draft.commands as cmd, index (cmd.id)}
 				{@const status = statusOf(cmd)}
 				<li
-					class="command"
+					class="command status-{status}"
 					data-testid="order-command-{index}"
 					data-command-status={status}
 				>
@@ -197,7 +201,7 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
 						{describe(cmd)}
 					</span>
 					<span
-						class="status status-{status}"
+						class="sr-only"
 						data-testid="order-command-status-{index}"
 					>
 						{i18n.t(statusKeyMap[status])}
@@ -206,9 +210,11 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
 						type="button"
 						class="delete"
 						data-testid="order-command-delete-{index}"
+						aria-label={i18n.t("game.sidebar.order.command_delete")}
+						title={i18n.t("game.sidebar.order.command_delete")}
 						onclick={() => draft?.remove(cmd.id)}
 					>
-						{i18n.t("game.sidebar.order.command_delete")}
+						<span aria-hidden="true">✕</span>
 					</button>
 				</li>
 			{/each}
@@ -275,53 +281,38 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
 		gap: 0.25rem;
 	}
 	.command {
+		position: relative;
 		display: grid;
-		grid-template-columns: auto 1fr auto auto;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.4rem 0.5rem;
+		grid-template-columns: auto 1fr;
+		align-items: baseline;
+		gap: 0.4rem;
+		padding: 0.3rem 1.1rem 0.3rem 0.5rem;
+		font-size: 0.8rem;
+		line-height: 1.3;
 		background: var(--color-surface-overlay);
 		border: 1px solid var(--color-border-subtle);
 		border-radius: 4px;
 	}
+	.command.status-applied {
+		background: var(--color-success-subtle);
+	}
+	.command.status-invalid,
+	.command.status-rejected,
+	.command.status-conflict {
+		background: var(--color-danger-subtle);
+	}
+	.command.status-draft,
+	.command.status-valid,
+	.command.status-submitting {
+		background: var(--color-warning-subtle);
+	}
 	.index {
 		color: var(--color-text-muted);
 		font-variant-numeric: tabular-nums;
 	}
 	.label {
 		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-	.status {
-		font-size: 0.75rem;
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		padding: 0.1rem 0.4rem;
-		border-radius: 999px;
-		border: 1px solid var(--color-border);
-		color: var(--color-text-muted);
-	}
-	.status-applied {
-		color: var(--color-success);
-		border-color: var(--color-success);
-	}
-	.status-rejected {
-		color: var(--color-danger);
-		border-color: var(--color-danger);
-	}
-	.status-invalid {
-		color: var(--color-warning);
-		border-color: var(--color-warning);
-	}
-	.status-submitting {
-		color: var(--color-accent);
-		border-color: var(--color-border);
-	}
-	.status-conflict {
-		color: var(--color-warning);
-		border-color: var(--color-warning);
+		overflow-wrap: anywhere;
 	}
 	.banner {
 		margin: 0 0 0.5rem;
@@ -341,16 +332,26 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
 		border: 1px solid var(--color-border);
 	}
 	.delete {
+		position: absolute;
+		top: 0;
+		right: 0;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 0.95rem;
+		height: 0.95rem;
+		padding: 0;
 		font: inherit;
-		font-size: 0.85rem;
-		padding: 0.2rem 0.55rem;
+		font-size: 0.65rem;
+		line-height: 1;
 		background: transparent;
 		color: var(--color-text-muted);
-		border: 1px solid var(--color-border);
-		border-radius: 3px;
+		border: 1px solid var(--color-border-subtle);
+		border-radius: 0 3px 0 3px;
 		cursor: pointer;
 	}
-	.delete:hover {
+	.delete:hover,
+	.delete:focus-visible {
 		color: var(--color-text);
 		border-color: var(--color-accent);
 	}

ui/frontend/tests/order-tab.test.ts

@@ -76,6 +76,24 @@ describe("order-tab", () => {
 		expect(ui.getByTestId("order-command-status-0")).toHaveTextContent(
 			"invalid",
 		);
+		// The status is encoded into the card's background via a
+		// `status-*` class, so the visual cue survives even after
+		// the textual badge moved into an `sr-only` node.
+		expect(ui.getByTestId("order-command-0")).toHaveClass("status-invalid");
+		draft.dispose();
+	});
+
+	test("delete button exposes an accessible label and is always present", async () => {
+		const { draft, context } = await makeDraft([
+			{ kind: "placeholder", id: "id-1", label: "first" },
+		]);
+		const ui = render(OrderTab, { context });
+		const button = ui.getByTestId("order-command-delete-0");
+		expect(button).toBeVisible();
+		expect(button).toHaveAttribute(
+			"aria-label",
+			i18n.t("game.sidebar.order.command_delete"),
+		);
 		draft.dispose();
 	});