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

feat(ui): add OverflowPillButton — tooltip, Escape focus return, use:clickOutside

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-31 23:08:53 +02:00
parent eafb566170
commit c7af33b998
2 changed files with 120 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/lib/components/OverflowPillButton.svelte.spec.ts Normal file
View File

@@ -0,0 +1,47 @@
import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page, userEvent } from 'vitest/browser';
import OverflowPillButton from './OverflowPillButton.svelte';
afterEach(cleanup);
const persons = [
{ id: 'p1', firstName: 'Anna', lastName: 'Müller' },
{ id: 'p2', firstName: 'Hans', lastName: 'Schmidt' }
];
describe('OverflowPillButton', () => {
it('renders button with correct aria-haspopup and collapsed aria-expanded', async () => {
render(OverflowPillButton, { extraCount: 2, persons });
const btn = page.getByRole('button');
await expect.element(btn).toHaveAttribute('aria-haspopup', 'true');
await expect.element(btn).toHaveAttribute('aria-expanded', 'false');
});
it('shows tooltip on click and sets aria-expanded true', async () => {
render(OverflowPillButton, { extraCount: 2, persons });
const btn = page.getByRole('button');
await userEvent.click(btn);
const tooltip = page.getByRole('list');
await expect.element(tooltip).toBeInTheDocument();
await expect.element(btn).toHaveAttribute('aria-expanded', 'true');
});
it('closes tooltip on Escape and returns focus to button', async () => {
render(OverflowPillButton, { extraCount: 2, persons });
const btn = page.getByRole('button');
await userEvent.click(btn);
await expect.element(page.getByRole('list')).toBeInTheDocument();
await userEvent.keyboard('{Escape}');
await expect.element(page.getByRole('list')).not.toBeInTheDocument();
await expect.element(btn).toHaveFocus();
});
it('renders person links inside tooltip', async () => {
render(OverflowPillButton, { extraCount: 2, persons });
await userEvent.click(page.getByRole('button'));
const links = page.getByRole('link');
await expect.element(links.nth(0)).toHaveAttribute('href', '/persons/p1');
await expect.element(links.nth(1)).toHaveAttribute('href', '/persons/p2');
});
});