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:
@@ -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}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user