mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 21:32:18 +00:00
Marc-André Bombeck
0cdfb97a45
The shared-record accessibility suite had four tests for five states: success and empty shared one, and neither of them ever entered an empty state. A browser run reports what it ran and never what it did not, so a state nobody wrote a test for produced exactly the same output as a state that passed. The five states are enumerated in a fixture, each test names its state, and a fast guard reads the spec back against the list — a state that loses its test, its anchor, or one of its proofs now fails in the ordinary gate rather than at the point somebody notices the spinner is silent. Every state runs four proofs: an axe scan, the document reading order, either a keyboard reach with a visible focus indicator or a live-region announcement for the one state with nothing to press, and, where the copy is something a person has to act on, that it renders as content rather than as muted meta and clears the contrast floor. The retry control on the read-failure card gained a stable slot so the keyboard proof targets the affordance rather than its wording. The eight release journeys are enumerated in the same fixture.
69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { AlertTriangle, RotateCw } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { useTranslations } from "@/lib/i18n/context";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Read-failure card for list / data surfaces.
|
|
*
|
|
* Mirrors `<ChartErrorState>`'s shape + tone (AlertTriangle, a title line, a
|
|
* muted description, an optional Retry button) but renders inside a `Card` so
|
|
* a list page can tell "load failed" apart from an honest empty state — a
|
|
* failed query must never fall through to the "no data yet" copy. Defaults are
|
|
* the generic `common.*` strings so a caller can drop it in with just
|
|
* `onRetry`; a surface with its own "couldn't load X" string passes it through
|
|
* `title` / `description`.
|
|
*/
|
|
export function QueryErrorCard({
|
|
title,
|
|
description,
|
|
onRetry,
|
|
retryLabel,
|
|
className,
|
|
}: {
|
|
title?: ReactNode;
|
|
description?: ReactNode;
|
|
onRetry?: () => void;
|
|
retryLabel?: string;
|
|
className?: string;
|
|
}) {
|
|
const { t } = useTranslations();
|
|
return (
|
|
<Card data-slot="query-error-card" className={cn(className)}>
|
|
<CardContent
|
|
role="alert"
|
|
className="flex flex-col items-center justify-center gap-3 px-6 py-10 text-center"
|
|
>
|
|
<AlertTriangle
|
|
className="text-muted-foreground h-8 w-8"
|
|
aria-hidden="true"
|
|
/>
|
|
<p className="text-sm font-medium">{title ?? t("common.loadFailed")}</p>
|
|
{description ? (
|
|
<p className="text-muted-foreground text-sm">{description}</p>
|
|
) : null}
|
|
{onRetry ? (
|
|
// The slot is the accessibility suite's handle on the one control
|
|
// this card offers: the error state has to be recoverable by
|
|
// keyboard, and asserting that against viewport text would pin the
|
|
// copy instead of the affordance.
|
|
<Button
|
|
data-slot="query-error-retry"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onRetry}
|
|
>
|
|
<RotateCw className="h-3.5 w-3.5" aria-hidden="true" />
|
|
{retryLabel ?? t("common.retry")}
|
|
</Button>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|