fix(timeline): wire the server date error to the date field's aria-invalid

REQ-011 asks for both required-field errors via per-field aria-invalid, but the
blank-date error was rendered as a standalone <p> after the date card while the
date input's aria-invalid only reflected the client-side malformed-date cue.

DatePrecisionField gains a `dateError` prop: a server error now marks the field
aria-invalid and renders inline under the input (sharing the same error id), and
EventForm drops its detached <p>. While here, migrate the field's two error
texts from hard-coded text-red-600 to the semantic `text-danger` token so they
keep ≥4.5:1 contrast in dark mode (the token remaps; #dc2626 was borderline) —
this also fixes the contrast for WhoWhenSection, the other consumer.

Component test asserts the date input gains aria-invalid on a server date error.

Addresses PR #832 review (Requirements Engineer REQ-011; UI/UX dark-mode contrast).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-14 00:30:40 +02:00
parent c13baa4785
commit 4dc5e3278f
3 changed files with 25 additions and 10 deletions

View File

@@ -221,16 +221,12 @@ async function confirmDelete(e: SubmitEvent) {
endDateInputName="eventDateEnd"
precisionInputName="precision"
dateLabel={m.form_label_date()}
dateError={dateError}
dateTestId="event-date"
precisionTestId="event-precision"
endDateInnerTestId="event-end-date"
/>
</div>
{#if dateError}
<p class="mt-2 text-sm text-danger" role="alert">
<span aria-hidden="true"></span>{dateError}
</p>
{/if}
</div>
<!-- Beschreibung -->