fix(profile): make the group cards headings a reader can navigate by

`CardTitle` renders a div, so the group names looked like headings and were not
ones. The section above them is an `h2`, which makes each card an `h3` — and
without that a screen-reader user has no way to move between groups.

Found by two tests this adds: that the cards are ordered worst standing first,
whatever order the workspace lists its groups in, and that past three the card
collapses and says how many are hidden. Both are behaviour a story cannot show.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MAQxdMw579siMh1wXKEEh4

Author: Valentin Grüner

webapp/src/components/profile/PracticeGroupStandingCard.test.tsx

@@ -47,6 +47,53 @@ describe("PracticeGroupStandingCard", () => {
 		expect(onOpenDetails).toHaveBeenCalledWith(group);
 	});
 
+	it("puts the groups that need attention first", () => {
+		// The order is the registry's, so a reader scanning top-down meets the worst standing first —
+		// and it must not follow the order the workspace happens to list its groups in.
+		const groups = ["going-well", "needs-attention", "mixed"].map((slug, index) => ({
+			...group,
+			id: index + 1,
+			slug,
+			name: slug,
+		}));
+		render(
+			<PracticeGroupStandingCard
+				groups={groups}
+				standings={{
+					"going-well": { ...standing, groupSlug: "going-well", standing: "STRENGTH" },
+					"needs-attention": {
+						...standing,
+						groupSlug: "needs-attention",
+						standing: "DEVELOPING",
+					},
+					mixed: { ...standing, groupSlug: "mixed", standing: "MIXED" },
+				}}
+				isLoading={false}
+			/>,
+		);
+
+		const headings = screen.getAllByRole("heading", { level: 3 }).map((node) => node.textContent);
+		expect(headings).toStrictEqual(["needs-attention", "mixed", "going-well"]);
+	});
+
+	it("collapses past three groups and says how many are hidden", () => {
+		const groups = Array.from({ length: 5 }, (_, index) => ({
+			...group,
+			id: index + 1,
+			slug: `group-${index}`,
+			name: `Group ${index}`,
+		}));
+		render(<PracticeGroupStandingCard groups={groups} standings={{}} isLoading={false} />);
+
+		expect(screen.getAllByRole("heading", { level: 3 })).toHaveLength(3);
+		const toggle = screen.getByRole("button", { name: "Show all 5 practice groups" });
+		expect(toggle.getAttribute("aria-expanded")).toBe("false");
+
+		fireEvent.click(toggle);
+		expect(screen.getAllByRole("heading", { level: 3 })).toHaveLength(5);
+		screen.getByRole("button", { name: "Show fewer groups" });
+	});
+
 	it("shows an empty workspace state", () => {
 		render(<PracticeGroupStandingCard groups={[]} standings={{}} isLoading={false} />);
 		screen.getByText("No practice groups are configured yet.");

webapp/src/components/profile/PracticeGroupStandingCard.tsx

@@ -7,7 +7,7 @@ import { PRACTICE_GROUP_STANDING_DEFS } from "@/components/practice-vocabulary/p
 import { statusToneClass, statusValues } from "@/components/practice-vocabulary/status-def";
 import { StatusBadge } from "@/components/practice-vocabulary/StatusBadge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { artifactKindCountLabel, artifactKindIcon } from "@/lib/artifact-kinds";
 import { cn } from "@/lib/utils";
@@ -117,9 +117,9 @@ export function PracticeGroupStandingCard({
 									>
 										<Icon className="size-5" aria-hidden />
 									</span>
-									<CardTitle className="min-w-0 flex-1 text-lg leading-snug">
-										{group.name}
-									</CardTitle>
+									{/* A real heading, not just card-title styling: the section above is an h2, so
+									    these are the level a reader navigates the groups by. */}
+									<h3 className="min-w-0 flex-1 text-lg font-medium leading-snug">{group.name}</h3>
 									{onOpenDetails && (
 										<ChevronRightIcon className="size-4 text-muted-foreground" aria-hidden />
 									)}

webapp/src/components/profile/practice-trend-presentation.ts

@@ -6,21 +6,13 @@ function reviewedWork(count: number): string {
 	return `${count} ${count === 1 ? "piece" : "pieces"} of reviewed work`;
 }
 
-/**
- * Which trend a chip is showing. The server computes the two differently and the sentence has to
- * follow: a practice trend really does hold one bundle of opportunities against the one before it,
- * while a group trend pools the practices' finished comparisons — there is no group-level "latest
- * against previous" to describe.
- */
+/** A practice trend compares two bundles; a group trend pools finished comparisons. */
 export type TrendScope = "practice" | "group";
 
 /**
- * Says what the returned support actually establishes — never a comparison the server did not make.
- *
- * Three cases the earlier one-liner got wrong. `INSUFFICIENT_EVIDENCE` means no posterior was formed
- * at all, so describing a comparison there contradicted the chip's own "Not enough to compare yet".
- * A group trend never compares bundles. And the calendar span covers the visible evidence trail, not
- * the two bundles, so it is its own sentence rather than a clause hung on the comparison.
+ * Says what the support establishes, never a comparison the server did not make: none is formed for
+ * `INSUFFICIENT_EVIDENCE`, and a group trend compares no bundles at all. The calendar span covers
+ * the visible evidence trail rather than the two bundles, so it stands as its own sentence.
  */
 export function formatTrendProvenance(
 	support: TrendSupport,