fix(documents): address review cycle 2 — a11y, CSS injection, debounce tests
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 2m33s
CI / OCR Service Tests (pull_request) Successful in 38s
CI / Unit & Component Tests (push) Failing after 2m40s
CI / OCR Service Tests (push) Successful in 36s
CI / Backend Unit Tests (push) Failing after 2m54s
CI / Backend Unit Tests (pull_request) Failing after 2m58s
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 2m33s
CI / OCR Service Tests (pull_request) Successful in 38s
CI / Unit & Component Tests (push) Failing after 2m40s
CI / OCR Service Tests (push) Successful in 36s
CI / Backend Unit Tests (push) Failing after 2m54s
CI / Backend Unit Tests (pull_request) Failing after 2m58s
- ContributorStack: text-xs for WCAG 1.4.4 (was text-[10px]), safeColor()
validation to block CSS injection via actor.color, role="img" aria-label
on empty placeholder, {#each} keyed by index
- ContributorStack spec: update empty-state assertion to getByRole('img')
- DocumentRow spec: add stopPropagation regression test for tag click
- documents/page.svelte.spec.ts: new — debounce, URL building, initial state
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -11,21 +11,26 @@ interface Props {
|
||||
let { contributors, hasMore }: Props = $props();
|
||||
|
||||
const safeContributors = $derived(contributors ?? []);
|
||||
|
||||
function safeColor(color: string): string {
|
||||
return /^#[0-9a-fA-F]{6}$/.test(color) ? color : '#8c9aa3';
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if safeContributors.length === 0}
|
||||
<span
|
||||
role="img"
|
||||
aria-label="Noch niemand angefangen"
|
||||
class="inline-block h-[22px] w-[22px] flex-shrink-0 rounded-full border-[1.5px] border-dashed border-[#cdcbbf]"
|
||||
title="Noch niemand angefangen"
|
||||
></span>
|
||||
{:else}
|
||||
<span class="inline-flex items-center">
|
||||
{#each safeContributors as actor, i (actor.initials + '-' + actor.color)}
|
||||
{#each safeContributors as actor, i (i)}
|
||||
<span
|
||||
role="img"
|
||||
aria-label={actor.name ?? actor.initials}
|
||||
class="inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full font-sans text-[10px] font-bold text-white ring-2 ring-white {i > 0 ? '-ml-1.5' : ''}"
|
||||
style="background-color: {actor.color || '#8c9aa3'};"
|
||||
class="inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full font-sans text-xs font-bold text-white ring-2 ring-white {i > 0 ? '-ml-1.5' : ''}"
|
||||
style="background-color: {safeColor(actor.color)};"
|
||||
title={actor.name ?? actor.initials}
|
||||
>
|
||||
{actor.initials}
|
||||
@@ -33,7 +38,7 @@ const safeContributors = $derived(contributors ?? []);
|
||||
{/each}
|
||||
{#if hasMore}
|
||||
<span
|
||||
class="-ml-1.5 inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full bg-[#e4e2d7] font-sans text-[10px] font-bold text-ink-3 ring-2 ring-white"
|
||||
class="-ml-1.5 inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full bg-[#e4e2d7] font-sans text-xs font-bold text-ink-3 ring-2 ring-white"
|
||||
>
|
||||
…
|
||||
</span>
|
||||
|
||||
@@ -45,6 +45,8 @@ describe('ContributorStack', () => {
|
||||
|
||||
it('renders empty placeholder when no contributors', async () => {
|
||||
render(ContributorStack, { contributors: [], hasMore: false });
|
||||
await expect.element(page.getByTitle('Noch niemand angefangen')).toBeInTheDocument();
|
||||
await expect
|
||||
.element(page.getByRole('img', { name: 'Noch niemand angefangen' }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -145,6 +145,19 @@ describe('DocumentRow – tags', () => {
|
||||
await page.getByRole('button', { name: 'Urlaub & Reise' }).click();
|
||||
expect(goto).toHaveBeenCalledWith('/documents?tag=Urlaub%20%26%20Reise');
|
||||
});
|
||||
|
||||
it('tag click does not navigate to the document detail page', async () => {
|
||||
const item = makeItem({
|
||||
document: {
|
||||
...makeItem().document,
|
||||
tags: [{ id: 't2', name: 'Familie', color: null, parentId: null }]
|
||||
}
|
||||
});
|
||||
render(DocumentRow, { item });
|
||||
const before = window.location.href;
|
||||
await page.getByRole('button', { name: 'Familie' }).click();
|
||||
expect(window.location.href).toBe(before);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── ProgressRing & ContributorStack ─────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user