From bd24f130eecb7d5c02a30a8000a77044f23723b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 9 May 2026 17:44:05 +0200
Subject: [PATCH] fix(a11y): drop duplicate h2 inside single-section
 /admin/<slug> routes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 4b's `<SectionFrame>` already paints the canonical h1 + subtitle
for each `/admin/<slug>` route, but every section card kept its v1.4
in-card h2 with the same (or near-same) text. The result was the
section title announcing twice — once as h1, then immediately again as
h2 — both visually redundant and a screen-reader landmark anti-pattern.

Demoting the in-card label to a `<div>` preserves the visual look
(same Tailwind classes) while removing the duplicate heading. The
four sub-cards inside `IntegrationsGroupSection` (umami, glitchtip,
web-push, bug-report) keep their h2 because they live under the
"Integrations" h1 and genuinely deserve a heading level — that is the
non-duplicating case.

Closes H1 from .planning/phase-6-design-findings.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/admin/api-token-overview-section.tsx | 2 +-
 src/components/admin/backups-section.tsx            | 4 ++--
 src/components/admin/danger-zone-section.tsx        | 4 ++--
 src/components/admin/feedback-inbox-section.tsx     | 2 +-
 src/components/admin/general-settings-section.tsx   | 2 +-
 src/components/admin/login-overview-section.tsx     | 2 +-
 src/components/admin/reminders-section.tsx          | 4 ++--
 src/components/admin/services-section.tsx           | 2 +-
 src/components/admin/system-status-section.tsx      | 2 +-
 src/components/admin/user-management-section.tsx    | 2 +-
 10 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/admin/api-token-overview-section.tsx b/src/components/admin/api-token-overview-section.tsx
index 0504f9460..58121ff76 100644
--- a/src/components/admin/api-token-overview-section.tsx
+++ b/src/components/admin/api-token-overview-section.tsx
@@ -28,7 +28,7 @@ export function ApiTokenOverviewSection() {
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           <Key className="text-primary h-5 w-5" />
-          <h2 className="text-lg font-semibold">{t("admin.apiTokens")}</h2>
+          <div className="text-lg font-semibold">{t("admin.apiTokens")}</div>
         </div>
         <Button
           variant="ghost"
diff --git a/src/components/admin/backups-section.tsx b/src/components/admin/backups-section.tsx
index 8f7568e65..a21c1447b 100644
--- a/src/components/admin/backups-section.tsx
+++ b/src/components/admin/backups-section.tsx
@@ -76,9 +76,9 @@ export function BackupsSection() {
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           <Database className="text-primary h-5 w-5" />
-          <h2 className="text-lg font-semibold">
+          <div className="text-lg font-semibold">
             {t("admin.section.backups.title")}
-          </h2>
+          </div>
           {data && (
             <Badge variant="secondary" className="text-xs">
               {rows.length}
diff --git a/src/components/admin/danger-zone-section.tsx b/src/components/admin/danger-zone-section.tsx
index ed7b53a06..c75b77bb6 100644
--- a/src/components/admin/danger-zone-section.tsx
+++ b/src/components/admin/danger-zone-section.tsx
@@ -68,9 +68,9 @@ export function DangerZoneSection() {
     <div className="bg-destructive/5 border-destructive/30 rounded-xl border p-6">
       <div className="flex items-center gap-2">
         <AlertTriangle className="text-destructive h-5 w-5" />
-        <h2 className="text-destructive text-lg font-semibold">
+        <div className="text-destructive text-lg font-semibold">
           {t("admin.dangerZone")}
-        </h2>
+        </div>
       </div>
       <div className="mt-4">
         <p className="text-sm font-medium">{t("admin.deleteAllData")}</p>
diff --git a/src/components/admin/feedback-inbox-section.tsx b/src/components/admin/feedback-inbox-section.tsx
index b3bd89559..59d4306b3 100644
--- a/src/components/admin/feedback-inbox-section.tsx
+++ b/src/components/admin/feedback-inbox-section.tsx
@@ -75,7 +75,7 @@ export function FeedbackInboxSection() {
     <div className="bg-card border-border rounded-xl border p-6">
       <div className="flex items-center gap-2">
         <Inbox className="text-primary h-5 w-5" />
-        <h2 className="text-lg font-semibold">{t("admin.feedback.title")}</h2>
+        <div className="text-lg font-semibold">{t("admin.feedback.title")}</div>
       </div>
       <p className="text-muted-foreground mt-1 text-xs">
         {t("admin.feedback.description")}
diff --git a/src/components/admin/general-settings-section.tsx b/src/components/admin/general-settings-section.tsx
index 71fa24dac..60a5f1ad9 100644
--- a/src/components/admin/general-settings-section.tsx
+++ b/src/components/admin/general-settings-section.tsx
@@ -13,7 +13,7 @@ export function GeneralSettingsSection() {
     <div className="bg-card border-border rounded-xl border p-6">
       <div className="flex items-center gap-2">
         <Settings className="text-primary h-5 w-5" />
-        <h2 className="text-lg font-semibold">{t("admin.appSettings")}</h2>
+        <div className="text-lg font-semibold">{t("admin.appSettings")}</div>
       </div>
       <div className="mt-4 space-y-4">
         <SettingsToggle
diff --git a/src/components/admin/login-overview-section.tsx b/src/components/admin/login-overview-section.tsx
index f593d6791..086b95ba9 100644
--- a/src/components/admin/login-overview-section.tsx
+++ b/src/components/admin/login-overview-section.tsx
@@ -53,7 +53,7 @@ export function LoginOverviewSection() {
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           <ScrollText className="text-primary h-5 w-5" />
-          <h2 className="text-lg font-semibold">{t("admin.loginOverview")}</h2>
+          <div className="text-lg font-semibold">{t("admin.loginOverview")}</div>
         </div>
         <Button
           variant="ghost"
diff --git a/src/components/admin/reminders-section.tsx b/src/components/admin/reminders-section.tsx
index 66fea8867..4aa52137b 100644
--- a/src/components/admin/reminders-section.tsx
+++ b/src/components/admin/reminders-section.tsx
@@ -116,9 +116,9 @@ export function RemindersSection() {
     <div className="bg-card border-border rounded-xl border p-6">
       <div className="flex items-center gap-2">
         <Clock className="text-primary h-5 w-5" />
-        <h2 className="text-lg font-semibold">
+        <div className="text-lg font-semibold">
           {t("admin.medicationReminders")}
-        </h2>
+        </div>
       </div>
       <p className="text-muted-foreground mt-1 text-xs">
         {t("admin.medicationRemindersDescription")}
diff --git a/src/components/admin/services-section.tsx b/src/components/admin/services-section.tsx
index f84960c32..8fc203e99 100644
--- a/src/components/admin/services-section.tsx
+++ b/src/components/admin/services-section.tsx
@@ -13,7 +13,7 @@ export function ServicesSection() {
     <div className="bg-card border-border rounded-xl border p-6">
       <div className="flex items-center gap-2">
         <Globe className="text-primary h-5 w-5" />
-        <h2 className="text-lg font-semibold">{t("admin.servicesGlobal")}</h2>
+        <div className="text-lg font-semibold">{t("admin.servicesGlobal")}</div>
       </div>
       <p className="text-muted-foreground mt-1 text-xs">
         {t("admin.servicesGlobalDescription")}
diff --git a/src/components/admin/system-status-section.tsx b/src/components/admin/system-status-section.tsx
index 2d883465b..f5109ebb9 100644
--- a/src/components/admin/system-status-section.tsx
+++ b/src/components/admin/system-status-section.tsx
@@ -28,7 +28,7 @@ export function SystemStatusSection() {
     <div className="bg-card border-border rounded-xl border p-6">
       <div className="flex items-center gap-2">
         <Server className="text-primary h-5 w-5" />
-        <h2 className="text-lg font-semibold">{t("admin.systemStatus")}</h2>
+        <div className="text-lg font-semibold">{t("admin.systemStatus")}</div>
       </div>
       {status ? (
         <div className="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
diff --git a/src/components/admin/user-management-section.tsx b/src/components/admin/user-management-section.tsx
index fd319bb9e..aefb87404 100644
--- a/src/components/admin/user-management-section.tsx
+++ b/src/components/admin/user-management-section.tsx
@@ -158,7 +158,7 @@ export function UserManagementSection() {
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">
           <Users className="text-primary h-5 w-5" />
-          <h2 className="text-lg font-semibold">{t("admin.userManagement")}</h2>
+          <div className="text-lg font-semibold">{t("admin.userManagement")}</div>
           {filteredUsers && (
             <Badge variant="secondary" className="text-xs">
               {filteredUsers.length}