fix(admin): keyboard-reachable audit payload toggle; drop dead step ternary
All checks were successful
deploy / test-backend (push) Successful in 27m23s
deploy / test-frontend (push) Successful in 10m20s
deploy / build-and-push (push) Successful in 10m42s
deploy / deploy (push) Successful in 13s

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>
This commit is contained in:
MechaCat02
2026-06-19 11:55:48 +02:00
parent c6a6d1690d
commit 9f7dfe4d4e
2 changed files with 27 additions and 3 deletions

View File

@@ -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;
}

View File

@@ -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}`}