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

fix(a11y): Aktualisiert badge passes WCAG AA contrast

Browse Source 
text-ink-3 on bg-ink-3/10 (low-saturation grey on lighter grey) gave
roughly 2.8:1 contrast — below the 4.5:1 AA threshold for normal-weight
small text. Switching the foreground to text-ink-1 keeps the muted
background but lifts the text contrast well above 7:1.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-08 12:47:22 +02:00
parent 6fd360a381
commit 0a7b1655e6
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/shared/dashboard/ReaderRecentDocs.svelte
View File

@@ -40,7 +40,7 @@ function isNew(doc: Document): boolean {
</span>
{:else}
<span
class="rounded bg-ink-3/10 px-1.5 py-0.5 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
class="text-ink-1 rounded bg-ink-3/10 px-1.5 py-0.5 font-sans text-xs font-bold tracking-wide uppercase"
>
{m.dashboard_badge_updated()}
</span>

8
frontend/src/lib/shared/dashboard/ReaderRecentDocs.svelte.spec.ts
View File

@@ -49,6 +49,14 @@ describe('ReaderRecentDocs', () => {
await expect.element(badge).toBeInTheDocument();
});
it('renders the "Aktualisiert" badge with high-contrast text-ink-1', async () => {
render(ReaderRecentDocs, { documents: [updatedDoc] });
const badge = page.getByText(/^Aktualisiert$/i);
const cls = ((await badge.element()) as HTMLElement).className;
expect(cls).toMatch(/text-ink-1/);
expect(cls).not.toMatch(/text-ink-3(?!\/)/);
});
it('does not show "Neu" badge when updatedAt differs from createdAt', async () => {
render(ReaderRecentDocs, { documents: [updatedDoc] });
const badge = page.getByText(/^Neu$/i);