From 66e9309d8aae0b67815b2b131df3ebaacac88a09 Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 11 Jun 2026 08:30:59 +0200 Subject: [PATCH] fix(geschichte-ui): a11y and visual round-3 batch MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - JourneyItemCard: 'Brief öffnen' back to a >=44px touch target with the height regression spec restored - GeschichteListRow: REISE badges text-[10px] -> text-xs; drop the hardcoded aria-label and the mobile badge's aria-hidden so phone screen readers learn a row is a Lesereise; mobile avatar initials -> color dot - detail page: badge text-xs, metabar Edit/Delete h-9 -> h-11, avatar color keyed by name to match the list - JourneyReader: dead border-subtle class -> border-line-2 - DocumentPickerDropdown: aria-controls only while the listbox exists - JourneyAddBar: aria-expanded/aria-controls on both toggles + focus hand-off into the revealed picker input / interlude textarea - GeschichteSidebar: section h2s hidden below sm (summary already shows the label there) - JourneyCreate: bg-brand-navy -> semantic bg-primary/text-primary-fg; title maxlength=255 - JourneyItemRow interlude: neutral frame border + left accent only, token utilities instead of arbitrary var() syntax and inline style Review round 3: Leonie (1-8 + round-1 leftovers), Elicit. Co-Authored-By: Claude Fable 5 --- .../document/DocumentPickerDropdown.svelte | 4 +- .../lib/geschichte/GeschichteListRow.svelte | 15 ++---- .../GeschichteListRow.svelte.spec.ts | 8 +-- .../lib/geschichte/GeschichteSidebar.svelte | 9 +++- .../src/lib/geschichte/JourneyAddBar.svelte | 51 +++++++++++++------ .../src/lib/geschichte/JourneyItemCard.svelte | 2 +- .../geschichte/JourneyItemCard.svelte.spec.ts | 10 ++++ .../src/lib/geschichte/JourneyReader.svelte | 2 +- .../src/routes/geschichten/[id]/+page.svelte | 8 +-- .../geschichten/new/JourneyCreate.svelte | 3 +- 10 files changed, 73 insertions(+), 39 deletions(-) diff --git a/frontend/src/lib/document/DocumentPickerDropdown.svelte b/frontend/src/lib/document/DocumentPickerDropdown.svelte index 0d59575d..5a3f454b 100644 --- a/frontend/src/lib/document/DocumentPickerDropdown.svelte +++ b/frontend/src/lib/document/DocumentPickerDropdown.svelte @@ -84,7 +84,9 @@ function handleKeydown(e: KeyboardEvent) { autocomplete="off" aria-label={placeholder} aria-expanded={picker.isOpen} - aria-controls={listboxId} + aria-controls={picker.isOpen && !picker.loading && !picker.error && picker.results.length > 0 + ? listboxId + : undefined} aria-autocomplete="list" aria-activedescendant={activeOptionId} placeholder={placeholder} diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte b/frontend/src/lib/geschichte/GeschichteListRow.svelte index 0962f520..0138443b 100644 --- a/frontend/src/lib/geschichte/GeschichteListRow.svelte +++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte @@ -39,9 +39,7 @@ const authorName = $derived(formatAuthorName(geschichte.author)); {#if isJourney} {m.journey_badge_list()} @@ -52,13 +50,12 @@ const authorName = $derived(formatAuthorName(geschichte.author));
+ + > {authorName} {#if publishedAt} {publishedAt} @@ -72,9 +69,7 @@ const authorName = $derived(formatAuthorName(geschichte.author)); {#if isJourney} diff --git a/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts index fee33bb5..52babd9c 100644 --- a/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts +++ b/frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts @@ -79,12 +79,12 @@ describe('GeschichteListRow', () => { expect(badge?.tagName.toLowerCase()).toBe('span'); }); - it('badge has small font size appropriate for a label', async () => { + it('badge uses the 12px label size — text-xs is the visible-text floor', async () => { render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } }); const badge = document.querySelector('[data-testid="journey-badge"]'); - const fontSize = parseFloat(window.getComputedStyle(badge!).fontSize); - expect(fontSize).toBeGreaterThan(0); - expect(fontSize).toBeLessThanOrEqual(14); // label badge must not exceed body text size + expect(badge!.className).toContain('text-xs'); + // 10px was below the house floor for the 60+ audience (round-3 review) + expect(badge!.className).not.toContain('text-[10px]'); }); it('renders author name in meta line', async () => { diff --git a/frontend/src/lib/geschichte/GeschichteSidebar.svelte b/frontend/src/lib/geschichte/GeschichteSidebar.svelte index 83f69f76..a468ae76 100644 --- a/frontend/src/lib/geschichte/GeschichteSidebar.svelte +++ b/frontend/src/lib/geschichte/GeschichteSidebar.svelte @@ -22,7 +22,10 @@ const isDraft = $derived(status === 'DRAFT'); {m.geschichte_sidebar_status()}
-

+ +

@@ -50,7 +53,9 @@ const isDraft = $derived(status === 'DRAFT'); {m.geschichte_editor_personen_heading()}

-

+

{m.geschichte_editor_personen_hint()}

diff --git a/frontend/src/lib/geschichte/JourneyAddBar.svelte b/frontend/src/lib/geschichte/JourneyAddBar.svelte index c096e669..22576e24 100644 --- a/frontend/src/lib/geschichte/JourneyAddBar.svelte +++ b/frontend/src/lib/geschichte/JourneyAddBar.svelte @@ -1,4 +1,5 @@ -
+
{#if showPicker} - +
+ +
{/if} {#if showInterludeForm} -
+