From f004b1f2a6c6633cc1117d425d77c5c66329dc28 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 9 Jun 2026 09:09:30 +0200
Subject: [PATCH] fix(a11y): add role="note" to JourneyInterlude so aria-label
 is announced

Without a landmark or widget role, aria-label on a generic <div> is
silently ignored by most screen readers (ARIA spec). Adding role="note"
gives the element an ARIA role that accepts an accessible name, making
the interlude label actually announced.

Also adds a test asserting role="note" and the matching aria-label are
both present on the same element.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/geschichte/JourneyInterlude.svelte       | 1 +
 .../src/lib/geschichte/JourneyInterlude.svelte.spec.ts    | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/frontend/src/lib/geschichte/JourneyInterlude.svelte b/frontend/src/lib/geschichte/JourneyInterlude.svelte
index 1a517fd5..9bfcca9e 100644
--- a/frontend/src/lib/geschichte/JourneyInterlude.svelte
+++ b/frontend/src/lib/geschichte/JourneyInterlude.svelte
@@ -9,6 +9,7 @@ let { note }: Props = $props();
 </script>
 
 <div
+	role="note"
 	aria-label={m.journey_interlude_aria_label()}
 	class="my-2 border-l-4 border-journey-border bg-journey-tint px-4 py-3"
 >
diff --git a/frontend/src/lib/geschichte/JourneyInterlude.svelte.spec.ts b/frontend/src/lib/geschichte/JourneyInterlude.svelte.spec.ts
index e6e487bb..2fc28ec0 100644
--- a/frontend/src/lib/geschichte/JourneyInterlude.svelte.spec.ts
+++ b/frontend/src/lib/geschichte/JourneyInterlude.svelte.spec.ts
@@ -27,6 +27,14 @@ describe('JourneyInterlude', () => {
 		expect(el).not.toBeNull();
 	});
 
+	it('has role="note" so the aria-label is announced by screen readers', async () => {
+		render(JourneyInterlude, { props: { note: 'Notiz' } });
+
+		const el = document.querySelector('[role="note"]');
+		expect(el).not.toBeNull();
+		expect(el?.getAttribute('aria-label')).toBe(m.journey_interlude_aria_label());
+	});
+
 	it('renders the section-break glyph ❦', async () => {
 		render(JourneyInterlude, { props: { note: 'Notiz' } });