mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 04:50:59 +00:00
fix(a11y): distinguish errors from empty states and close naming gaps
Add isError branches with a retry affordance to the mood, illness, and vorsorge lists so a failed read no longer renders as "no entries yet" and invites duplicate re-entry, matching the labs and cycle pattern. Make the admin backups table reachable on a phone with a card fallback, name the admin language and timezone selects and the AI raw-data switch for screen readers, and replace the touch-unreachable title= help on the glucose clinical panels with a tap-capable info popover. Route the password-strength label through the AA-tuned semantic tokens, underline the register login link so it is not distinguished by colour alone, give the labs load error alert semantics, and explain why the target editor Save button is disabled with aria-invalid and a live alert.
This commit is contained in:
1 parent
b02e3e4072
commit
c38271bc44
13 files changed
+350
-88
No files matched your search
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import { Info } from "lucide-react";
|
||||
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { useTranslations } from "@/lib/i18n/context";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* A small, tap-reachable help affordance. Replaces the bare `title=`
|
||||
* attribute, which never surfaces on touch. The trigger is a real button
|
||||
* with an accessible name, so keyboard and screen-reader users reach the
|
||||
* same hint a pointer user gets on hover; tapping the button focuses it,
|
||||
* which opens the tooltip on touch devices.
|
||||
*/
|
||||
export function InfoHint({
|
||||
label,
|
||||
className,
|
||||
}: {
|
||||
/** The hint text shown inside the tooltip. */
|
||||
label: string;
|
||||
className?: string;
|
||||
}) {
|
||||
const { t } = useTranslations();
|
||||
return (
|
||||
<TooltipProvider delayDuration={150}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
data-slot="info-hint"
|
||||
aria-label={t("common.moreInfo")}
|
||||
className={cn(
|
||||
"text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 -m-1 inline-flex min-h-6 min-w-6 shrink-0 items-center justify-center rounded-full p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<Info className="size-3.5" aria-hidden="true" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
data-slot="info-hint-body"
|
||||
align="start"
|
||||
className="max-w-xs leading-relaxed"
|
||||
>
|
||||
{label}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
@@ -10,12 +10,16 @@ interface PasswordStrengthProps {
|
||||
minLength?: number;
|
||||
}
|
||||
|
||||
// The bar fill stays vivid (it's a non-text indicator), but the label text
|
||||
// routes through the AA-tuned semantic tokens — the raw Tailwind 500 tones
|
||||
// failed contrast against the white card. Weakest is destructive, the middle
|
||||
// band warning, the strong band success.
|
||||
const SCORE_COLORS = [
|
||||
{ color: "bg-red-500", textColor: "text-red-500" },
|
||||
{ color: "bg-orange-500", textColor: "text-orange-500" },
|
||||
{ color: "bg-yellow-500", textColor: "text-yellow-500" },
|
||||
{ color: "bg-green-500", textColor: "text-green-500" },
|
||||
{ color: "bg-emerald-600", textColor: "text-emerald-600" },
|
||||
{ color: "bg-red-500", textColor: "text-destructive" },
|
||||
{ color: "bg-orange-500", textColor: "text-destructive" },
|
||||
{ color: "bg-yellow-500", textColor: "text-warning" },
|
||||
{ color: "bg-green-500", textColor: "text-success" },
|
||||
{ color: "bg-emerald-600", textColor: "text-success" },
|
||||
];
|
||||
|
||||
export function PasswordStrength({
|
||||
|
||||
Reference in new issue
Block a user