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>
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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}`}
|
||||||
|
|||||||
Reference in New Issue
Block a user