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

fix(geschichte-ui): a11y and visual round-3 batch

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-11 08:30:59 +02:00
parent 836c9594d4
commit 66e9309d8a
10 changed files with 73 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/lib/geschichte/GeschichteListRow.svelte
View File

@@ -39,9 +39,7 @@ const authorName = $derived(formatAuthorName(geschichte.author));
{#if isJourney}
<span
data-testid="journey-badge"
aria-label="Lesereise"
style="font-size: 10px"
class="inline-flex items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-[10px] font-bold tracking-wide text-journey uppercase"
class="inline-flex items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-xs font-bold tracking-wide text-journey uppercase"
>
{m.journey_badge_list()}
</span>
@@ -52,13 +50,12 @@ const authorName = $derived(formatAuthorName(geschichte.author));
<div class="min-w-0 flex-1 p-3 sm:px-4">
<!-- Compact meta line (mobile only) -->
<div class="mb-1 flex items-center gap-1.5 sm:hidden">
<!-- 7px initials render as smudge at this size — a plain color dot reads better -->
<span
aria-hidden="true"
class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full font-sans text-[7px] font-bold text-white"
class="h-2.5 w-2.5 shrink-0 rounded-full"
style="background-color: {personAvatarColor(authorName)}"
>
{getInitials(authorName)}
</span>
></span>
<span class="font-sans text-sm font-semibold text-ink">{authorName}</span>
{#if publishedAt}
<span class="ml-auto font-sans text-sm text-ink-3">{publishedAt}</span>
@@ -72,9 +69,7 @@ const authorName = $derived(formatAuthorName(geschichte.author));
{#if isJourney}
<span
data-testid="journey-badge-mobile"
aria-hidden="true"
style="font-size: 10px"
class="inline-flex shrink-0 items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-[10px] font-bold tracking-wide text-journey uppercase sm:hidden"
class="inline-flex shrink-0 items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-xs font-bold tracking-wide text-journey uppercase sm:hidden"
>
{m.journey_badge_list()}
</span>