diff --git a/frontend/messages/de.json b/frontend/messages/de.json index 8522580c..3c3b31f1 100644 --- a/frontend/messages/de.json +++ b/frontend/messages/de.json @@ -23,6 +23,8 @@ "nav_conversations": "Briefwechsel", "nav_admin": "Admin", "nav_logout": "Abmelden", + "theme_toggle_to_light": "Zu hellem Design wechseln", + "theme_toggle_to_dark": "Zu dunklem Design wechseln", "btn_save": "Speichern", "btn_cancel": "Abbrechen", "btn_confirm": "Bestätigen", diff --git a/frontend/messages/en.json b/frontend/messages/en.json index cddafac1..57a29039 100644 --- a/frontend/messages/en.json +++ b/frontend/messages/en.json @@ -23,6 +23,8 @@ "nav_conversations": "Letters", "nav_admin": "Admin", "nav_logout": "Sign out", + "theme_toggle_to_light": "Switch to light mode", + "theme_toggle_to_dark": "Switch to dark mode", "btn_save": "Save", "btn_cancel": "Cancel", "btn_confirm": "Confirm", diff --git a/frontend/messages/es.json b/frontend/messages/es.json index f5125884..ef6a4ee6 100644 --- a/frontend/messages/es.json +++ b/frontend/messages/es.json @@ -23,6 +23,8 @@ "nav_conversations": "Cartas", "nav_admin": "Admin", "nav_logout": "Cerrar sesión", + "theme_toggle_to_light": "Cambiar a modo claro", + "theme_toggle_to_dark": "Cambiar a modo oscuro", "btn_save": "Guardar", "btn_cancel": "Cancelar", "btn_confirm": "Confirmar", diff --git a/frontend/src/lib/components/NotificationBell.svelte b/frontend/src/lib/components/NotificationBell.svelte index 0e390357..a06d90e4 100644 --- a/frontend/src/lib/components/NotificationBell.svelte +++ b/frontend/src/lib/components/NotificationBell.svelte @@ -48,6 +48,12 @@ function handleKeydown(event: KeyboardEvent) { } } +const bellLabel = $derived( + stream.unreadCount > 0 + ? m.notification_bell_unread_label({ count: stream.unreadCount }) + : m.notification_bell_label() +); + function attachBellButton(node: HTMLButtonElement) { bellButtonEl = node; return () => { @@ -72,12 +78,11 @@ onDestroy(() => { {@attach attachBellButton} type="button" onclick={toggleDropdown} - aria-label={stream.unreadCount > 0 - ? m.notification_bell_unread_label({ count: stream.unreadCount }) - : m.notification_bell_label()} + aria-label={bellLabel} + title={bellLabel} aria-expanded={open} aria-haspopup="true" - class="relative rounded-sm p-2 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring" + class="relative cursor-pointer rounded-sm p-2 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring" > { + it('bell button has cursor-pointer class', async () => { + render(NotificationBell); + const btn = document.querySelector('button[aria-haspopup="true"]')!; + expect(btn.classList.contains('cursor-pointer')).toBe(true); + }); + + it('bell button title equals aria-label when unreadCount is 0', async () => { + mockNotificationList.value = []; + render(NotificationBell); + const btn = document.querySelector('button[aria-haspopup="true"]')!; + expect(btn.getAttribute('title')).toBe('Benachrichtigungen'); + expect(btn.getAttribute('aria-label')).toBe(btn.getAttribute('title')); + }); + + it('bell button title equals aria-label when unreadCount is 3', async () => { + mockNotificationList.value = [ + makeNotification({ id: 'n1' }), + makeNotification({ id: 'n2' }), + makeNotification({ id: 'n3' }) + ]; + render(NotificationBell); + const btn = document.querySelector('button[aria-haspopup="true"]')!; + expect(btn.getAttribute('title')).toBe('3 ungelesene Benachrichtigungen'); + expect(btn.getAttribute('aria-label')).toBe(btn.getAttribute('title')); + }); +}); + describe('NotificationBell', () => { it('handleMarkRead navigates to URL including annotationId when notification has annotationId', async () => { mockNotificationList.value = [makeNotification({ annotationId: 'annot-1' })]; diff --git a/frontend/src/lib/components/ThemeToggle.svelte b/frontend/src/lib/components/ThemeToggle.svelte index 012fd670..834f765c 100644 --- a/frontend/src/lib/components/ThemeToggle.svelte +++ b/frontend/src/lib/components/ThemeToggle.svelte @@ -1,5 +1,6 @@