mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-14 14:40:52 +00:00
fix(a11y): label per-reminder toggles and wire disclosure controls
The diabetes PATCH parsed its body without a size cap; bound it through safeJson like the sibling routes. Label each reminder's enable/disable switch by its own name span so screen readers hear the reminder rather than one generic label repeated per row. Point the chronotype and illness disclosure triggers at the regions they reveal via aria-controls.
This commit is contained in:
1 parent
397423dddc
commit
9014203d8a
4 files changed
+22
-11
No files matched your search
@@ -15,7 +15,7 @@
|
||||
* per-day timeline and correlation card live. Retrospective-only copy — a
|
||||
* journal, not a medical device, and it does not diagnose.
|
||||
*/
|
||||
import { useMemo, useState } from "react";
|
||||
import { useId, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ChevronDown, Plus, Stethoscope, Wrench } from "lucide-react";
|
||||
|
||||
@@ -245,10 +245,12 @@ function EpisodeGroup({
|
||||
}) {
|
||||
// Hooks must run unconditionally; bail on the empty render afterwards.
|
||||
const [open, setOpen] = useState(false);
|
||||
const gridId = useId();
|
||||
if (parents.length === 0) return null;
|
||||
|
||||
const grid = (
|
||||
<div
|
||||
id={gridId}
|
||||
className={cn(
|
||||
view === "list" ? "space-y-2" : "grid gap-4 sm:grid-cols-2",
|
||||
)}
|
||||
@@ -275,6 +277,7 @@ function EpisodeGroup({
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
aria-expanded={open}
|
||||
aria-controls={gridId}
|
||||
className="text-muted-foreground hover:text-foreground -mx-1 flex w-fit items-center gap-1.5 rounded-md px-1 py-0.5 text-xs font-medium uppercase tracking-wide transition-colors"
|
||||
>
|
||||
<ChevronDown
|
||||
|
||||
Reference in new issue
Block a user