From e10090b9efc9bffe6166439961756d9a3830f439 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 17 May 2026 22:51:48 +0200
Subject: [PATCH] style(login): banner has an aria-hidden warning icon

Color-blind reader cohort (8% of men) on a phone in sunlight cannot rely on
amber alone to parse the banner as a warning. Add a Heroicons-style
exclamation-triangle SVG, aria-hidden because the heading text already
conveys the meaning to assistive tech. Addresses PR #612 / Leonie L2.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/routes/login/+page.svelte | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index ad01e5a0..7771b7e7 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -45,10 +45,24 @@ let {
 					<div
 						role="status"
 						aria-live="polite"
-						class="mb-5 rounded-sm border border-amber-200 bg-amber-50 px-4 py-3 font-sans"
+						class="mb-5 flex items-start gap-3 rounded-sm border border-amber-200 bg-amber-50 px-4 py-3 font-sans"
 					>
-						<p class="text-xs font-medium text-warning">{m.error_session_expired()}</p>
-						<p class="mt-1 text-xs text-warning">{m.error_session_expired_explainer()}</p>
+						<svg
+							aria-hidden="true"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="mt-0.5 h-5 w-5 shrink-0 text-warning"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 6a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 6Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+						<div>
+							<p class="text-xs font-medium text-warning">{m.error_session_expired()}</p>
+							<p class="mt-1 text-xs text-warning">{m.error_session_expired_explainer()}</p>
+						</div>
 					</div>
 				{/if}