fix(ui): unify heading help, table sizing and navigation contracts

Verified with the coordinated workspace changes by devkit full run
2026-09-08T225814-186389-0000-3e3ed7cd (all seven phases passed).
This shared UI pass does not mark the individual module reviews complete.
This commit is contained in:
2026-09-09 02:03:16 +02:00
parent 6591aaa3fd
commit 6d37aa527f
54 changed files with 1728 additions and 117 deletions
@@ -6,6 +6,14 @@ import { renderToStaticMarkup } from "react-dom/server";
import DocumentationHelpLink, { DocumentationHelpProvider } from "../src/components/help/DocumentationHelpLink";
import FieldLabel from "../src/components/help/FieldLabel";
import { documentationHelpHref } from "../src/components/help/documentationHelp";
import PageLayout from "../src/components/PageLayout";
import PageTitle from "../src/components/PageTitle";
import Card from "../src/components/Card";
import Dialog from "../src/components/Dialog";
import AdminPageLayout from "../src/components/admin/AdminPageLayout";
import WorkspaceActionBar from "../src/components/WorkspaceActionBar";
import TextWithHelp from "../src/components/help/TextWithHelp";
import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
assert(
documentationHelpHref({ topicId: "campaigns.workflow.complete-review" }) ===
@@ -49,3 +57,30 @@ const fieldMarkup = renderToStaticMarkup(
</DocumentationHelpProvider>
);
assert(fieldMarkup.includes("topic=access.reference.admin-access-fields"), "field labels can link to stable reference topics");
for (const language of ["en", "de"]) {
const helpLabel = language === "de" ? "Benutzerdokumentation öffnen" : "Open user documentation";
const help = <DocumentationHelpLink reference={{ contextId: "dashboard" }} />;
for (const [name, element] of [
["page", <PageLayout archetype="overview" title="Dashboard" titleHelp={help} headerLoading actions={<button>Configure</button>}>Data</PageLayout>],
["title", <PageTitle loading titleHelp={help}>Dashboard</PageTitle>],
["administration", <AdminPageLayout title="Dashboard" description="Summary" titleHelp={help}>Data</AdminPageLayout>],
["card", <Card title="Dashboard" titleHelp={help} collapsible>Data</Card>],
["dialog", <Dialog open title="Dashboard" titleHelp={help} onClose={() => undefined}>Data</Dialog>],
["workspace", <WorkspaceActionBar variant="workspace" title="Dashboard" titleHelp={help} titleLevel={1} primaryActions={<button>Edit</button>} />],
["section", <TextWithHelp as="div" help={help}><h3>Dashboard</h3></TextWithHelp>]
] as const) {
const markup = renderToStaticMarkup(<PlatformLanguageProvider preferredLanguageCode={language}>{element}</PlatformLanguageProvider>);
const heading = markup.match(/<h[123]\b[^>]*>[\s\S]*?<\/h[123]>/)?.[0];
assert(heading?.includes("Dashboard"), `${name} retains a visible semantic heading`);
assert(!heading?.includes("documentation-help-link") && !heading?.includes("loading-indicator"), `${name} heading name excludes help and progress controls`);
assert(markup.includes(`aria-label="${helpLabel}"`), `${name} keeps translated documentation access in ${language}`);
assert(markup.indexOf('class="documentation-help-link"') > markup.indexOf(heading!), `${name} help follows its visible heading`);
assert(!/<button\b[^>]*>[\s\S]*?documentation-help-link[\s\S]*?<\/button>/.test(markup), `${name} never nests documentation inside an action`);
}
}
const titleWithoutText = renderToStaticMarkup(<WorkspaceActionBar variant="workspace" titleHelp={<DocumentationHelpLink reference={{ contextId: "dashboard" }} />} />);
assert(!titleWithoutText.includes("documentation-help-link"), "workspace help cannot appear without a visible context heading");
const unheadedCard = renderToStaticMarkup(<Card titleHelp={<DocumentationHelpLink reference={{ contextId: "dashboard" }} />}>Data</Card>);
assert(!unheadedCard.includes("documentation-help-link"), "card help cannot appear without a visible title");