From 2620064ef1d7d7acdd30902a6d1eb5b540565014 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 16 May 2026 17:57:28 +0200
Subject: [PATCH] fix(a11y): repair non-sequential heading order on three
 surfaces

Lighthouse v1.4.33 a11y pass flagged "heading elements not in
sequentially descending order" (score 91/94). Three offenders:

- `<TherapyTimeline>` (insights/medikamente sub-page): sr-only
  drug-name heading was an h4, but the parent SubPageShell ships
  the only h1 and CardTitle is a <div>. Promoted to h2 so the
  outline stays h1 -> h2 without skipping levels.
- `<FeedbackInboxDetailSheet>`: metadata + screenshot section
  headings rendered as h4 inside a ResponsiveSheet whose dialog
  title is h2 (Radix default). Demoted to h3 to stay sequential
  beneath the sheet title.
- `<RemindersSection>`: results heading was h4 inside the admin
  SectionFrame's h1. Promoted to h2.

Coach panel headings (IW5 surface) audited but not changed.
---
 src/components/admin/feedback-inbox-section.tsx | 10 ++++++----
 src/components/admin/reminders-section.tsx      |  6 ++++--
 src/components/insights/therapy-timeline.tsx    |  9 +++++++--
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/admin/feedback-inbox-section.tsx b/src/components/admin/feedback-inbox-section.tsx
index d42fe14ee..cc2e71a55 100644
--- a/src/components/admin/feedback-inbox-section.tsx
+++ b/src/components/admin/feedback-inbox-section.tsx
@@ -434,9 +434,11 @@ function FeedbackDetailDialog({
 
           {(url || locale || userAgent || appVersion) && (
             <div>
-              <h4 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
+              {/* v1.4.33 IW9 — h4 -> h3 so the sheet outline stays
+                  sequential beneath the ResponsiveSheet's h2 title. */}
+              <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
                 {t("admin.feedback.metadataHeading")}
-              </h4>
+              </h3>
               <dl className="mt-2 grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-xs">
                 {url && (
                   <>
@@ -476,9 +478,9 @@ function FeedbackDetailDialog({
 
           {item.screenshotBase64 && (
             <div>
-              <h4 className="text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase">
+              <h3 className="text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase">
                 {t("admin.feedback.screenshotHeading")}
-              </h4>
+              </h3>
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src={item.screenshotBase64}
diff --git a/src/components/admin/reminders-section.tsx b/src/components/admin/reminders-section.tsx
index c1f1877cb..779780777 100644
--- a/src/components/admin/reminders-section.tsx
+++ b/src/components/admin/reminders-section.tsx
@@ -252,9 +252,11 @@ export function RemindersSection() {
       {reminderCheck.data?.medications &&
         reminderCheck.data.medications.length > 0 && (
           <div className="mt-4 space-y-2">
-            <h4 className="text-sm font-medium">
+            {/* v1.4.33 IW9 — h4 -> h2 so the page outline stays
+                sequential (parent admin SectionFrame ships <h1>). */}
+            <h2 className="text-sm font-medium">
               {t("admin.reminderCheckResults")}
-            </h4>
+            </h2>
             <div className="space-y-2">
               {reminderCheck.data.medications.map((med, i) => (
                 <div key={i} className="bg-muted/50 space-y-1.5 rounded-lg p-3">
diff --git a/src/components/insights/therapy-timeline.tsx b/src/components/insights/therapy-timeline.tsx
index dd025a9db..afcecb39a 100644
--- a/src/components/insights/therapy-timeline.tsx
+++ b/src/components/insights/therapy-timeline.tsx
@@ -111,9 +111,14 @@ export function TherapyTimeline({ limit }: TherapyTimelineProps) {
                 {/* v1.4.27 B7 / L4 — sr-only drug-name heading per
                     entry so screen-reader users can jump between
                     medication blocks; the visible row keeps the
-                    inline <strong> rendering. */}
+                    inline <strong> rendering.
+                    v1.4.33 IW9 — promoted from h4 -> h2 so the page
+                    outline stays sequential. The parent SubPageShell
+                    ships an <h1>; CardTitle is a <div>, so the timeline
+                    is the only heading-bearing surface here and h2
+                    nests directly under h1 without skipping levels. */}
                 {entry.medicationName && (
-                  <h4 className="sr-only">{entry.medicationName}</h4>
+                  <h2 className="sr-only">{entry.medicationName}</h2>
                 )}
                 <p className="text-muted-foreground text-xs">
                   {fmt.dateWithWeekday(new Date(entry.date))}