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

fix(a11y): focus-visible ring on reader-dashboard view-all links

Browse Source 
Both view-all links (Alle Personen → in ReaderPersonChips, Alle
Geschichten → in ReaderRecentStories) were missing the
focus-visible:ring-2 ring used by every other interactive element on
the reader dashboard, leaving keyboard users with no visible focus
indicator. WCAG 2.1 §2.4.7 (Focus Visible, Level AA).

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

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

@@ -54,7 +54,7 @@ const { persons }: Props = $props();
</div> </div>
<a <a
href="/persons" href="/persons"
class="self-end font-sans text-sm text-brand-navy underline hover:text-brand-mint" class="self-end rounded-sm font-sans text-sm text-brand-navy underline hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
>{m.dashboard_reader_all_persons()}</a >{m.dashboard_reader_all_persons()}</a
> >
</div> </div>

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

@@ -58,6 +58,14 @@ describe('ReaderPersonChips', () => {
await expect.element(allLink).toHaveAttribute('href', '/persons'); await expect.element(allLink).toHaveAttribute('href', '/persons');
}); });
it('exposes a focus-visible ring on the "Alle Personen" link', async () => {
render(ReaderPersonChips, { persons: [person1] });
const allLink = page.getByRole('link', { name: /Alle Personen/i });
const cls = ((await allLink.element()) as HTMLElement).className;
expect(cls).toMatch(/focus-visible:ring-2/);
expect(cls).toMatch(/focus-visible:ring-brand-navy/);
});
it('renders empty state without chips when persons array is empty', async () => { it('renders empty state without chips when persons array is empty', async () => {
render(ReaderPersonChips, { persons: [] }); render(ReaderPersonChips, { persons: [] });
const chips = page.getByRole('link', { name: /Müller|Schmidt/ }); const chips = page.getByRole('link', { name: /Müller|Schmidt/ });

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

@@ -48,7 +48,7 @@ function excerpt(body: string | undefined): string {
</ul> </ul>
<a <a
href="/geschichten" href="/geschichten"
class="mt-4 block font-sans text-sm text-brand-navy underline hover:text-brand-mint" class="mt-4 block rounded-sm font-sans text-sm text-brand-navy underline hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
> >
{m.dashboard_reader_all_stories()} {m.dashboard_reader_all_stories()}
</a> </a>

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

@@ -57,4 +57,12 @@ describe('ReaderRecentStories', () => {
const allLink = page.getByRole('link', { name: /Alle Geschichten/i }); const allLink = page.getByRole('link', { name: /Alle Geschichten/i });
await expect.element(allLink).toHaveAttribute('href', '/geschichten'); await expect.element(allLink).toHaveAttribute('href', '/geschichten');
}); });
it('exposes a focus-visible ring on the "Alle Geschichten" link', async () => {
render(ReaderRecentStories, { stories: [story1] });
const allLink = page.getByRole('link', { name: /Alle Geschichten/i });
const cls = ((await allLink.element()) as HTMLElement).className;
expect(cls).toMatch(/focus-visible:ring-2/);
expect(cls).toMatch(/focus-visible:ring-brand-navy/);
});
}); });