fix(login): add role=alert to error divs; fix clock icon color to red
All checks were successful
CI / Unit & Component Tests (pull_request) Successful in 3m3s
CI / OCR Service Tests (pull_request) Successful in 19s
CI / Backend Unit Tests (pull_request) Successful in 3m4s
CI / fail2ban Regex (pull_request) Successful in 45s
CI / Semgrep Security Scan (pull_request) Successful in 20s
CI / Compose Bucket Idempotency (pull_request) Successful in 1m0s

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
parent 05ab8b13a0
commit a23fa4c668

View File

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