diff --git a/src/components/mode-home-template.tsx b/src/components/mode-home-template.tsx index 29d52d385f..532436347f 100644 --- a/src/components/mode-home-template.tsx +++ b/src/components/mode-home-template.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import { type ReactNode } from "react"; import { type LucideIcon, ArrowRight } from "lucide-react"; -import { cn } from "@/components/ui-primitives"; +import { cn, eyebrowText } from "@/components/ui-primitives"; export type ModeHomeAction = { title: string; @@ -16,6 +16,7 @@ export type ModeHomeAction = { export type ModeHomePill = { label: string; + shortLabel?: string; href?: string; onClick?: () => void; icon?: LucideIcon; @@ -289,40 +290,41 @@ export function ModeHomeTemplate({ ) : null} {pills?.length ? ( -
+
{pillsTitle || pillsAction ? ( -
- {pillsTitle ? ( -

{pillsTitle}

- ) : ( - - )} +
+ {pillsTitle ?

{pillsTitle}

: } {pillsAction}
) : null} -
+
{pills.map((pill) => { const PillIcon = pill.icon; + const displayLabel = pill.shortLabel ?? pill.label; const content = ( <> {PillIcon ? ( - + ) : ( - + )} - {pill.label} + {displayLabel} ); const pillClassName = - "inline-flex min-h-11 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-4 text-sm font-semibold text-[color:var(--text)] shadow-[var(--shadow-inset)] transition hover:border-[color:var(--clinical-accent)]/35 hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] sm:min-w-0 sm:px-3"; + "inline-flex min-h-9 items-center justify-center gap-2 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-2 text-xs font-semibold text-[color:var(--text)] shadow-[var(--shadow-inset)] transition hover:border-[color:var(--clinical-accent)]/35 hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] sm:text-sm"; + const pillA11y = pill.shortLabel ? { "aria-label": pill.label, title: pill.label } : {}; return pill.href ? ( - + {content} ) : ( - ); diff --git a/src/components/services/services-home-page.tsx b/src/components/services/services-home-page.tsx index 6624fc2e62..ef4b90e66d 100644 --- a/src/components/services/services-home-page.tsx +++ b/src/components/services/services-home-page.tsx @@ -47,7 +47,8 @@ const commonPathways: ModeHomePill[] = [ href: appModeHomeHref("services", { query: "crisis support services", focus: true, run: true }), }, { - label: "Aboriginal and Torres Strait Islander", + label: "Aboriginal and Torres Strait Islander services", + shortLabel: "ATSI services", tone: "rose", href: appModeHomeHref("services", { query: "Aboriginal Torres Strait Islander services", @@ -121,7 +122,7 @@ export function ServicesHomePage() { desktopComposerSlotId={modeHomeDesktopComposerSlotId} actionsLabel="Service tasks" actions={hasRegistryRecords ? taskCards : []} - pillsTitle="Common pathways" + pillsTitle="Browse by need" pills={hasRegistryRecords ? commonPathways : []} footer={ hasRegistryRecords ? ( diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts index 2f481b6600..4e6e264d54 100644 --- a/tests/ui-tools.spec.ts +++ b/tests/ui-tools.spec.ts @@ -785,7 +785,9 @@ test.describe("Clinical KB tools launcher", () => { await expect(page.locator('input[placeholder="Ask or search a presentation"]:visible').first()).toBeVisible(); await expect(page.getByRole("button", { name: "Search presentations" })).toBeVisible(); await expect(page.getByRole("button", { name: "Compare differentials" })).toBeVisible(); - await expect(page.getByRole("heading", { name: "Recent work" })).toBeVisible(); + await expect( + page.getByTestId("differentials-home").getByRole("region", { name: /^(Recent work|Library matches)$/ }), + ).toBeVisible(); await expect(page.getByTestId("global-search-input")).toHaveCount(1); const differentialsHomeSearch = page.getByTestId("differentials-home").getByTestId("global-search-input"); await expect(differentialsHomeSearch).toBeVisible();