marcel
e8d1835ae1
Closes #344 ## What was implemented ### Commit 1 — `feat(nav): add cursor-pointer and tooltip to notification bell` - Extracted `bellLabel` as `$derived` in `NotificationBell.svelte` — eliminates the duplicated inline ternary and keeps tooltip/label in sync reactively - Added `title={bellLabel}` to the bell `<button>` — native tooltip mirrors `aria-label` in both zero and non-zero unread states - Added `cursor-pointer` to the bell button's class list - Added global `button { cursor: pointer; }` rule in `@layer base` of `layout.css` — prevents future regressions (global scope per Decision Queue) - Added 3 component tests in `NotificationBell.svelte.spec.ts`: cursor-pointer class present, title equals aria-label when unread=0, title equals aria-label when unread=3 ### Commit 2 — `fix(nav): replace hardcoded ThemeToggle title with Paraglide i18n keys` - Added `theme_toggle_to_light` / `theme_toggle_to_dark` keys to `de/en/es` messages - Extracted `themeLabel` as `$derived` in `ThemeToggle.svelte` and bound both `aria-label` and `title` to it - Fixes the pre-existing hardcoded English strings (`'light mode'` / `'dark mode'`) per Decision Queue resolution Touch target size was descoped per the Decision Queue. ## Decision Queue resolutions (from issue #344) - **cursor-pointer scope**: global via `@layer base` ✅ - **ThemeToggle scope**: fixed in this issue ✅ - **Touch target**: descoped ✅ ## Test results All 5 `NotificationBell` tests pass. Co-authored-by: Marcel <marcel@familienarchiv> Reviewed-on: http://heim-nas:3005/marcel/familienarchiv/pulls/351
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page } from 'vitest/browser';
|
|
import ThemeToggle from './ThemeToggle.svelte';
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
localStorage.removeItem('theme');
|
|
});
|
|
|
|
describe('ThemeToggle — label derivation (light mode)', () => {
|
|
beforeEach(() => {
|
|
localStorage.setItem('theme', 'light');
|
|
});
|
|
|
|
it('aria-label invites switching to dark mode when theme is light', async () => {
|
|
render(ThemeToggle);
|
|
const btn = await page.getByRole('button').element();
|
|
expect(btn.getAttribute('aria-label')).toBe('Zu dunklem Design wechseln');
|
|
});
|
|
|
|
it('title equals aria-label in light mode', async () => {
|
|
render(ThemeToggle);
|
|
const btn = await page.getByRole('button').element();
|
|
expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
|
|
});
|
|
});
|
|
|
|
describe('ThemeToggle — label derivation (dark mode)', () => {
|
|
beforeEach(() => {
|
|
localStorage.setItem('theme', 'dark');
|
|
});
|
|
|
|
it('aria-label invites switching to light mode when theme is dark', async () => {
|
|
render(ThemeToggle);
|
|
const btn = await page.getByRole('button').element();
|
|
expect(btn.getAttribute('aria-label')).toBe('Zu hellem Design wechseln');
|
|
});
|
|
|
|
it('title equals aria-label in dark mode', async () => {
|
|
render(ThemeToggle);
|
|
const btn = await page.getByRole('button').element();
|
|
expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
|
|
});
|
|
});
|