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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lib/timeline/EventForm.svelte
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 -->

9
frontend/src/lib/timeline/EventForm.svelte.spec.ts
View File

@@ -73,6 +73,15 @@ describe('EventForm — required-field error (REQ-010)', () => {
});
});
describe('EventForm — server date error wired per-field (REQ-011)', () => {
it('marks the date field aria-invalid and shows the message on a server date error', async () => {
render(EventForm, { form: { dateError: 'Bitte ein Datum eingeben.' } });
await expect.element(page.getByText('Bitte ein Datum eingeben.')).toBeInTheDocument();
const dateInput = document.querySelector('#eventDate') as HTMLInputElement;
expect(dateInput.getAttribute('aria-invalid')).toBe('true');
});
});
describe('EventForm — submitting state (named AC)', () => {
it('renders an enabled submit button initially', async () => {
render(EventForm, { event: makeEvent() });