knacky/mimic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): a11y on clickable rows + correct c2 source field + pill metric alignment (sprint 8 design-review)

Browse Source 
F1: add tabIndex/role/onKeyDown/aria-expanded to C2TasksPanel expander rows and
    C2CallbackPicker callback rows; focus-visible ring via Tailwind utilities
F2: add source:'mimic'|'import' to C2TaskListItem; C2TasksPanel reads task.source
    instead of mapping_applied for the Source badge label
F3: align C2TaskStatusBadge and C2CallbackPicker Active/Inactive pill metrics to
    py-[6px] text-[14px] font-medium (matches SimulationStatusBadge / StatusBadge)
F4: replace hand-rolled Source pill class string with badge-pill-outline recipe
Tests: 212/212 passing (+3 new: Enter/Space key on expander, Enter key on callback row)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
2026-06-10 20:22:45 +02:00
parent 7ff153905b
commit 184a2a16c9
8 changed files with 63 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/api/types.ts
View File

@@ -216,6 +216,7 @@ export interface C2TaskListItem {
completed: boolean;
output: string | null;
mapping_applied: boolean;
source: 'mimic' | 'import';
created_at: string;
completed_at: string | null;
}

12
frontend/src/components/C2CallbackPicker.tsx
View File

@@ -57,14 +57,22 @@ export function C2CallbackPicker({
key={cb.display_id}
data-testid={rowTestId}
onClick={() => onSelect(cb.display_id)}
className={`cursor-pointer border-b border-hairline ${
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onSelect(cb.display_id);
}
}}
tabIndex={0}
role="button"
className={`cursor-pointer border-b border-hairline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
isSelected ? 'bg-primary-soft' : 'hover:bg-cloud'
}`}
>
<td className="px-md py-sm font-mono">{cb.display_id}</td>
<td className="px-md py-sm">
<span
className={`inline-flex items-center rounded-pill px-3 py-[4px] text-[12px] leading-[1.3] font-bold ${
className={`inline-flex items-center rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${
cb.active
? 'bg-primary-soft text-primary-deep'
: 'bg-cloud text-graphite border border-hairline'

2
frontend/src/components/C2TaskStatusBadge.tsx
View File

@@ -19,7 +19,7 @@ function badgeClass(status: string): string {
export function C2TaskStatusBadge({ status }: C2TaskStatusBadgeProps): JSX.Element {
return (
<span
className={`inline-flex items-center rounded-pill px-3 py-[4px] text-[12px] leading-[1.3] font-bold ${badgeClass(status)}`}
className={`inline-flex items-center rounded-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${badgeClass(status)}`}
>
{status}
</span>

15
frontend/src/components/C2TasksPanel.tsx
View File

@@ -72,7 +72,16 @@ export function C2TasksPanel({ simulationId }: C2TasksPanelProps): JSX.Element {
<tr
data-testid="c2-task-row"
onClick={() => toggleExpand(task.id, task.completed)}
className={`border-b border-hairline ${canExpand ? 'cursor-pointer hover:bg-cloud' : ''}`}
onKeyDown={(e) => {
if (canExpand && (e.key === 'Enter' || e.key === ' ')) {
e.preventDefault();
toggleExpand(task.id, task.completed);
}
}}
tabIndex={canExpand ? 0 : undefined}
role={canExpand ? 'button' : undefined}
aria-expanded={canExpand ? isExpanded : undefined}
className={`border-b border-hairline ${canExpand ? 'cursor-pointer hover:bg-cloud focus:outline-none focus-visible:ring-2 focus-visible:ring-primary' : ''}`}
>
<td className="px-md py-sm text-graphite">
{canExpand ? (
@@ -91,8 +100,8 @@ export function C2TasksPanel({ simulationId }: C2TasksPanelProps): JSX.Element {
{task.command}
</td>
<td className="px-md py-sm">
<span className="inline-flex items-center rounded-pill px-3 py-[4px] text-[12px] leading-[1.3] font-bold bg-cloud text-graphite border border-hairline">
{task.mapping_applied ? 'MIMIC' : 'IMPORT'}
<span className="badge-pill-outline">
{task.source === 'mimic' ? 'MIMIC' : 'IMPORT'}
</span>
</td>
<td className="px-md py-sm">

1
frontend/tests/SimulationFormPage.test.tsx
View File

@@ -388,6 +388,7 @@ describe('SimulationFormPage — C2 tasks panel visibility', () => {
completed: true,
output: 'SYSTEM',
mapping_applied: false,
source: 'import',
created_at: '2026-06-10T10:00:00',
completed_at: '2026-06-10T10:00:05',
},

1
frontend/tests/api/c2.test.ts
View File

@@ -152,6 +152,7 @@ describe('getC2Tasks', () => {
completed: true,
output: 'NT AUTHORITY\\SYSTEM',
mapping_applied: true,
source: 'mimic',
created_at: '2026-06-10T10:00:00',
completed_at: '2026-06-10T10:00:05',
},

28
frontend/tests/components/C2TasksPanel.test.tsx
View File

@@ -28,6 +28,7 @@ const COMPLETED_TASK = {
completed: true,
output: 'NT AUTHORITY\\SYSTEM',
mapping_applied: true,
source: 'mimic' as const,
created_at: '2026-06-10T10:00:00',
completed_at: '2026-06-10T10:00:05',
};
@@ -42,6 +43,7 @@ const PENDING_TASK = {
completed: false,
output: null,
mapping_applied: false,
source: 'import' as const,
created_at: '2026-06-10T10:00:10',
completed_at: null,
};
@@ -91,14 +93,14 @@ describe('C2TasksPanel — populated rows', () => {
});
});
it('shows MIMIC source badge for mapping_applied=true', async () => {
it('shows MIMIC source badge for source=mimic', async () => {
renderWithProviders(<C2TasksPanel simulationId={7} />);
await waitFor(() => {
expect(screen.getByText('MIMIC')).toBeInTheDocument();
});
});
it('shows IMPORT source badge for mapping_applied=false', async () => {
it('shows IMPORT source badge for source=import', async () => {
renderWithProviders(<C2TasksPanel simulationId={7} />);
await waitFor(() => {
expect(screen.getByText('IMPORT')).toBeInTheDocument();
@@ -163,6 +165,28 @@ describe('C2TasksPanel — expand on click', () => {
fireEvent.click(screen.getByTestId('c2-task-row'));
expect(screen.queryByTestId('c2-task-output')).toBeNull();
});
it('Enter key on completed row toggles output (a11y)', async () => {
renderWithProviders(<C2TasksPanel simulationId={7} />);
await waitFor(() => {
expect(screen.getAllByTestId('c2-task-row')).toHaveLength(1);
});
const row = screen.getByTestId('c2-task-row');
fireEvent.keyDown(row, { key: 'Enter' });
expect(screen.getByTestId('c2-task-output')).toBeInTheDocument();
fireEvent.keyDown(row, { key: 'Enter' });
expect(screen.queryByTestId('c2-task-output')).toBeNull();
});
it('Space key on completed row toggles output (a11y)', async () => {
renderWithProviders(<C2TasksPanel simulationId={7} />);
await waitFor(() => {
expect(screen.getAllByTestId('c2-task-row')).toHaveLength(1);
});
const row = screen.getByTestId('c2-task-row');
fireEvent.keyDown(row, { key: ' ' });
expect(screen.getByTestId('c2-task-output')).toBeInTheDocument();
});
});
describe('C2TasksPanel — refresh indicator', () => {

11
frontend/tests/components/ExecuteViaC2Modal.test.tsx
View File

@@ -157,4 +157,15 @@ describe('ExecuteViaC2Modal', () => {
const textarea = screen.getByTestId('c2-commands-textarea') as HTMLTextAreaElement;
expect(textarea.value).toBe('net user\nwhoami /all');
});
it('Enter key on callback row selects it (a11y)', async () => {
renderModal('whoami');
await waitFor(() => {
expect(screen.getAllByTestId('c2-callback-row')).toHaveLength(2);
});
const firstRow = screen.getAllByTestId('c2-callback-row')[0];
fireEvent.keyDown(firstRow, { key: 'Enter' });
// Row is now selected → Launch button should be enabled
expect(screen.getByTestId('c2-launch-btn')).not.toBeDisabled();
});
});