feat(ui): harden design-system a11y contracts (cn, warning contrast, MissingValue, forced-colors, LinkAction)

src/components/AccessibleTable.tsx

@@ -328,7 +328,9 @@ function AccessibleTableMarkup({
  className={cn(
  "block min-w-0",
  renderDensePreview
- ? "truncate text-2xs leading-4"
+ ? cell
+ ? "truncate text-2xs leading-4"
+ : "whitespace-normal break-words text-2xs leading-4"
  : "text-sm leading-6 md:text-inherit md:leading-inherit",
  )}
  >

tests/accessible-table.dom.test.tsx

@@ -107,6 +107,18 @@ describe("AccessibleTable (jsdom)", () => {
  expect(screen.queryByText("-")).not.toBeInTheDocument();
  });
 
+ it("keeps the full missing-value phrase readable in the dense 320px preview", () => {
+ render(<AccessibleTable caption="Clozapine monitoring" columns={columns} rows={[["0", ""]]} densePreview />);
+
+ const missingValue = screen.getByTestId("missing-value");
+ const valueWrapper = missingValue.parentElement;
+
+ expect(missingValue).toHaveTextContent("Not recorded");
+ expect(valueWrapper).not.toBeNull();
+ expect(valueWrapper!).toHaveClass("whitespace-normal", "break-words");
+ expect(valueWrapper!).not.toHaveClass("truncate");
+ });
+
  it("opens the full-screen dialog when the mobile expand control is clicked", async () => {
  setMatchMedia(true); // emulate the mobile/coarse-pointer breakpoint that enables expansion
  const user = userEvent.setup();

tests/design-token-contract.test.ts

@@ -158,6 +158,33 @@ describe("elevation ladder", () => {
  expect(tokens.get("--e0")).toBe("none");
  });
 
+ // `--shadow-focus` is retired (`#261`). It was not an elevation alias at all:
+ // it packed a 3px accent halo in FRONT of `--shadow-soft`, so its one consumer
+ // — `.chat-composer-shell-delta:focus-within` — painted a companion ring on
+ // top of the accent border swap, which is the second focus affordance the
+ // shared `:focus-visible` treatment is written to prevent. The composer now
+ // uses the sanctioned `outline: 2px solid var(--focus)`.
+ //
+ // Unlike the `--shadow-tight` assertion above this is not a raw substring
+ // check: the stylesheet comment at the composer rule names the retired token
+ // on purpose, so that the next author reaching for a focus halo finds the
+ // reason it is gone rather than re-deriving it. The two spellings below are
+ // the only ways the token can actually come back to life — a declaration and
+ // a `var()` consumer — so they are what the gate rejects.
+ it("keeps the retired --shadow-focus token deleted in every scope", () => {
+ for (const [name, stylesheet] of [
+ ["globals.css", globals],
+ ["ckb-v2-tokens.css", v2Stylesheet],
+ ] as const) {
+ expect(stylesheet, `${name} redeclares --shadow-focus; focus is an outline, not a ring`).not.toContain(
+ "--shadow-focus:",
+ );
+ expect(stylesheet, `${name} consumes --shadow-focus; focus is an outline, not a ring`).not.toContain(
+ "var(--shadow-focus)",
+ );
+ }
+ });
+
  it("flattens the ladder itself under forced colors, not only the role aliases", () => {
  const forced = globals.slice(globals.indexOf("@media (forced-colors: active)"));
  for (const tier of ["--e1", "--e2", "--e3", "--e4"]) {
@@ -167,6 +194,11 @@ describe("elevation ladder", () => {
 });
 
 describe("status colour ranking", () => {
+ it.each(themes)("keeps warning body text AA-safe on the default surface in $name", ({ tokens, name }) => {
+ const ratio = contrastRatio(colourOf(tokens, "--warning"), colourOf(tokens, "--surface"));
+ expect(ratio, `${name} --warning body text on --surface`).toBeGreaterThanOrEqual(4.5);
+ });
+
  // Every status pair used to sit in a 4.6–5.2:1 band, so nothing read as more
  // urgent than anything else.
  it("clears 5.5:1 for every light-mode status pair", () => {