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

fix(focus-rings): remove broken [&_input]:focus selectors and fix error state focus-visible
Some checks failed
CI / Unit & Component Tests (pull_request) Has been cancelled
Details
CI / Backend Unit Tests (pull_request) Has been cancelled
Details
CI / E2E Tests (pull_request) Has been cancelled
Details
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details

Browse Source 
- Strip malformed [[&_input]:focus:*] class fragments from PersonTypeahead
  wrapper divs in both ConversationFilterBar components — PersonTypeahead
  manages its own focus ring; parent selectors were redundant and broken
- Fix WhoWhenSection error state: focus:ring-red-500 → focus-visible:ring-red-500
  so invalid date field ring no longer fires on mouse click

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #170.
This commit is contained in:
Marcel
2026-03-31 16:42:11 +02:00
parent f1bf32ee05
commit 527d174e9c
3 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/document/WhoWhenSection.svelte
View File

@@ -71,7 +71,7 @@ $effect(() => {
placeholder={m.form_placeholder_date()} placeholder={m.form_placeholder_date()}
maxlength="10" maxlength="10"
class="block w-full rounded border border-line p-2 text-sm shadow-sm class="block w-full rounded border border-line p-2 text-sm shadow-sm
{dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}" {dateInvalid ? 'border-red-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500' : 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
aria-describedby={dateInvalid ? 'date-error' : undefined} aria-describedby={dateInvalid ? 'date-error' : undefined}
/> />
<input type="hidden" name="documentDate" value={dateIso} /> <input type="hidden" name="documentDate" value={dateIso} />

4
frontend/src/routes/conversations/ConversationFilterBar.svelte
View File

@@ -31,7 +31,7 @@ let {
<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6"> <div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
<!-- Sender --> <!-- Sender -->
<div <div
class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase" class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
> >
<PersonTypeahead <PersonTypeahead
name="senderId" name="senderId"
@@ -73,7 +73,7 @@ let {
<!-- Receiver --> <!-- Receiver -->
<div <div
class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase" class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
> >
<PersonTypeahead <PersonTypeahead
name="receiverId" name="receiverId"

4
frontend/src/routes/korrespondenz/ConversationFilterBar.svelte
View File

@@ -31,7 +31,7 @@ let {
<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6"> <div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
<!-- Sender --> <!-- Sender -->
<div <div
class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase" class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
> >
<PersonTypeahead <PersonTypeahead
name="senderId" name="senderId"
@@ -73,7 +73,7 @@ let {
<!-- Receiver --> <!-- Receiver -->
<div <div
class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase" class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
> >
<PersonTypeahead <PersonTypeahead
name="receiverId" name="receiverId"