fix(login): add role=alert to error divs; fix clock icon color to red

Regular error div was missing role="alert" — screen readers did not
announce it on dynamic display. Rate-limited clock icon used text-ink-3
(muted grey) instead of text-red-600, visually inconsistent with the
surrounding error text. Also removes the erroneous aria-invalid="true"
from the rate-limit alert div (not a permitted attribute on role=alert).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-18 14:02:24 +02:00
committed by marcel
parent 9f4a1141ef
commit 9bf8cf831d

View File

@@ -108,7 +108,6 @@ let {
{#if form?.error}
{#if form?.rateLimited}
<div
aria-invalid="true"
role="alert"
class="flex items-center gap-2 font-sans text-xs font-medium text-red-600"
>
@@ -118,7 +117,7 @@ let {
fill="none"
stroke="currentColor"
stroke-width="1.5"
class="h-4 w-4 shrink-0 text-ink-3"
class="h-4 w-4 shrink-0 text-red-600"
>
<path
stroke-linecap="round"
@@ -129,7 +128,9 @@ let {
<span>{form.error}</span>
</div>
{:else}
<div class="text-center font-sans text-xs font-medium text-red-600">{form.error}</div>
<div role="alert" class="text-center font-sans text-xs font-medium text-red-600">
{form.error}
</div>
{/if}
{/if}