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><span class="action">{r.action}</span></td>
<td class="target">{targetLabel(r)}</td> <td class="target">{targetLabel(r)}</td>
<td class="actions"> <td class="actions">
<span class="chev" aria-hidden="true" <!-- Real button so the payload toggle is keyboard-
>{expanded === r.id ? '▾' : '▸'}</span 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> </td>
</tr> </tr>
{#if expanded === r.id} {#if expanded === r.id}
@@ -213,6 +224,19 @@
text-align: right; text-align: right;
color: var(--text-muted); 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 { tr.clickable {
cursor: pointer; cursor: pointer;
} }

View File

@@ -158,7 +158,7 @@
<span>{f.label}{f.unit ? ` (${f.unit})` : ''}</span> <span>{f.label}{f.unit ? ` (${f.unit})` : ''}</span>
<input <input
type="number" type="number"
step={f.unit === '%' ? '1' : '1'} step="1"
min="0" min="0"
bind:value={form[f.key]} bind:value={form[f.key]}
data-testid={`threshold-${f.key}`} data-testid={`threshold-${f.key}`}