marcel/familienarchiv
1
0
Fork 0
Code Issues 125 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): QUEUED badge test, touch target on dismiss button, focus ring on expand toggle

Browse Source 
Add missing test coverage for the amber QUEUED status badge in TrainingHistory.
Fix WCAG 2.2 minimum touch target (24 × 24 px) on the success-message dismiss
button in OcrTrainingCard. Add focus-visible ring to the expand/collapse toggle
in TrainingHistory so keyboard users get a visible focus indicator.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-17 21:36:26 +02:00
committed by marcel
parent 699d5e5759
commit 38a9719bdb
3 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/OcrTrainingCard.svelte
View File

@@ -82,7 +82,7 @@ async function startTraining() {
{successMessage}
<button
type="button"
class="underline hover:no-underline"
class="ml-1 inline-flex h-6 w-6 items-center justify-center rounded-sm underline hover:no-underline focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
onclick={() => (successMessage = null)}
aria-label={m.comp_dismiss()}>×</button
>

2
frontend/src/lib/components/TrainingHistory.svelte
View File

@@ -146,7 +146,7 @@ function formatCer(cer: number | undefined | null): string {
type="button"
aria-expanded={expanded}
aria-controls="training-history-rows"
class="text-xs font-medium text-ink-3 transition-colors hover:text-ink"
class="rounded-sm py-2 text-xs font-medium text-ink-3 transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-1 focus-visible:outline-none"
onclick={() => (expanded = !expanded)}
>
{expanded ? m.comp_expandable_show_less() : m.comp_expandable_show_more()}

9
frontend/src/lib/components/TrainingHistory.svelte.spec.ts
View File

@@ -51,6 +51,15 @@ describe('TrainingHistory — expand/collapse', () => {
});
});
describe('TrainingHistory — status badges', () => {
it('shows amber QUEUED badge for queued runs', async () => {
const run = { ...makeRun(0), status: 'QUEUED' as const };
render(TrainingHistory, { runs: [run] });
await expect.element(page.getByText(/Warteschlange/i)).toBeInTheDocument();
});
});
describe('TrainingHistory — type and person columns', () => {
it('shows "Basis" for runs without personId', async () => {
render(TrainingHistory, { runs: [makeRun(0)] });