diff --git a/ui/docs/order-composer.md b/ui/docs/order-composer.md index d9537bf..236ad44 100644 --- a/ui/docs/order-composer.md +++ b/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: diff --git a/ui/frontend/playwright.config.ts b/ui/frontend/playwright.config.ts index f2d664c..d414a70 100644 --- a/ui/frontend/playwright.config.ts +++ b/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"] } }, diff --git a/ui/frontend/src/lib/sidebar/order-tab.svelte b/ui/frontend/src/lib/sidebar/order-tab.svelte index cceb9ae..a6d308f 100644 --- a/ui/frontend/src/lib/sidebar/order-tab.svelte +++ b/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)}
  • @@ -197,7 +201,7 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft` {describe(cmd)} {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")} +
    • {/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); } diff --git a/ui/frontend/tests/order-tab.test.ts b/ui/frontend/tests/order-tab.test.ts index eabed0d..1dc5237 100644 --- a/ui/frontend/tests/order-tab.test.ts +++ b/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(); });