From 7b766bedabfd556fce58bb9a28abe526f70d0c6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 14 May 2026 21:45:38 +0200
Subject: [PATCH] fix(a11y): wire aria-controls + aria-expanded on GLP-1
 dose-history details

The native <details>/<summary> element conveys state via the open
attribute, but the rest of the app's accordions also surface
aria-controls + aria-expanded so SR users hear the same contract on
both. The disclosure now references the inner panel by ID and the
expanded state mirrors the React-side toggle. Closes W10 design L3.
---
 .../medications/glp1-medication-card.tsx           | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/medications/glp1-medication-card.tsx b/src/components/medications/glp1-medication-card.tsx
index 3f68c1789..d81aedefa 100644
--- a/src/components/medications/glp1-medication-card.tsx
+++ b/src/components/medications/glp1-medication-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useId, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import Link from "next/link";
 import {
@@ -161,6 +161,7 @@ export function Glp1MedicationCard({
   const fmt = useFormatters();
   const [intakeLoading, setIntakeLoading] = useState<string | null>(null);
   const [showHistory, setShowHistory] = useState(false);
+  const doseHistoryId = useId();
 
   const { data: compliance } = useQuery({
     queryKey: ["medications", medication.id, "compliance"],
@@ -368,7 +369,11 @@ export function Glp1MedicationCard({
             setShowHistory((e.target as HTMLDetailsElement).open)
           }
         >
-          <summary className="text-foreground/85 flex cursor-pointer list-none items-center justify-between px-3 py-2 font-medium">
+          <summary
+            className="text-foreground/85 flex cursor-pointer list-none items-center justify-between px-3 py-2 font-medium"
+            aria-controls={doseHistoryId}
+            aria-expanded={showHistory}
+          >
             <span>{t("medications.glp1DoseHistory")}</span>
             <ChevronDown
               className={`h-3.5 w-3.5 transition-transform ${
@@ -376,7 +381,10 @@ export function Glp1MedicationCard({
               }`}
             />
           </summary>
-          <div className="border-border/60 space-y-1.5 border-t px-3 py-2">
+          <div
+            id={doseHistoryId}
+            className="border-border/60 space-y-1.5 border-t px-3 py-2"
+          >
             {doseChanges.length === 0 && (
               <p className="text-muted-foreground">
                 {t("medications.glp1DoseHistoryEmpty")}