From 9f7dfe4d4e8a3080b4e717ec25e7be38b25bea9e Mon Sep 17 00:00:00 2001
From: MechaCat02 <fabian@diekaulbachs.de>
Date: Fri, 19 Jun 2026 11:55:48 +0200
Subject: [PATCH] fix(admin): keyboard-reachable audit payload toggle; drop
 dead step ternary

Review follow-ups: the audit row's expand was mouse-only (onclick on a bare
<tr>). Move the toggle to a real <button> in the actions cell with
aria-expanded + aria-label so keyboard/AT users can open a row's payload; the
row onclick stays as a mouse convenience (stopPropagation avoids a double
toggle). Also simplify a no-op `step={'%' ? '1' : '1'}` to step="1" on the
threshold inputs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../lib/components/admin/AuditTable.svelte    | 28 +++++++++++++++++--
 .../lib/components/admin/HealthChecks.svelte  |  2 +-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/admin/AuditTable.svelte b/frontend/src/lib/components/admin/AuditTable.svelte
index 0bbd661..038f74d 100644
--- a/frontend/src/lib/components/admin/AuditTable.svelte
+++ b/frontend/src/lib/components/admin/AuditTable.svelte
@@ -149,9 +149,20 @@
                         <td><span class="action">{r.action}</span></td>
                         <td class="target">{targetLabel(r)}</td>
                         <td class="actions">
-                            <span class="chev" aria-hidden="true"
-                                >{expanded === r.id ? '▾' : '▸'}</span
+                            <!-- Real button so the payload toggle is keyboard-
+                                 reachable; the row onclick is a mouse convenience. -->
+                            <button
+                                type="button"
+                                class="chev"
+                                aria-expanded={expanded === r.id}
+                                aria-label={expanded === r.id ? 'Collapse payload' : 'Expand payload'}
+                                onclick={(e) => {
+                                    e.stopPropagation();
+                                    expanded = expanded === r.id ? null : r.id;
+                                }}
                             >
+                                {expanded === r.id ? '▾' : '▸'}
+                            </button>
                         </td>
                     </tr>
                     {#if expanded === r.id}
@@ -213,6 +224,19 @@
         text-align: right;
         color: var(--text-muted);
     }
+    .chev {
+        background: none;
+        border: none;
+        color: var(--text-muted);
+        cursor: pointer;
+        font-size: var(--font-sm);
+        padding: 2px var(--space-1);
+        border-radius: var(--radius-sm);
+    }
+    .chev:hover {
+        color: var(--text);
+        background: var(--surface-elevated);
+    }
     tr.clickable {
         cursor: pointer;
     }
diff --git a/frontend/src/lib/components/admin/HealthChecks.svelte b/frontend/src/lib/components/admin/HealthChecks.svelte
index 3158644..3b27e92 100644
--- a/frontend/src/lib/components/admin/HealthChecks.svelte
+++ b/frontend/src/lib/components/admin/HealthChecks.svelte
@@ -158,7 +158,7 @@
                             <span>{f.label}{f.unit ? ` (${f.unit})` : ''}</span>
                             <input
                                 type="number"
-                                step={f.unit === '%' ? '1' : '1'}
+                                step="1"
                                 min="0"
                                 bind:value={form[f.key]}
                                 data-testid={`threshold-${f.key}`}