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

style(login): banner has an aria-hidden warning icon

Browse Source 
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>
This commit is contained in:
Marcel
2026-05-17 22:51:48 +02:00
parent 4f1594390e
commit e10090b9ef
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/routes/login/+page.svelte
View File

@@ -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}