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

feat(focus-rings): update interactive widgets to ring-focus-ring

Browse Source 
PersonTypeahead, MentionEditor, PanelHistory, UserGroupsSection,
notifications filter buttons, CorrespondentSuggestionsDropdown:
replace ring-accent/ring-primary with ring-focus-ring

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-31 15:25:02 +02:00
parent 1541afd470
commit a5cc8fd16e
6 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/MentionEditor.svelte
View File

@@ -187,7 +187,7 @@ const popupOpen = $derived(query !== null);
<div class="relative"> <div class="relative">
<textarea <textarea
{@attach attachTextarea} {@attach attachTextarea}
class="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:ring-1 focus:ring-accent focus:outline-none" class="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
rows={rows} rows={rows}
placeholder={placeholder} placeholder={placeholder}
disabled={disabled} disabled={disabled}

4
frontend/src/lib/components/PanelHistory.svelte
View File

@@ -302,7 +302,7 @@ $effect(() => {
<select <select
id="compare-a" id="compare-a"
bind:value={compareA} bind:value={compareA}
class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:ring-1 focus:ring-accent focus:outline-none" class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
> >
<option value="">—</option> <option value="">—</option>
{#each versions as v, i (v.id)} {#each versions as v, i (v.id)}
@@ -317,7 +317,7 @@ $effect(() => {
<select <select
id="compare-b" id="compare-b"
bind:value={compareB} bind:value={compareB}
class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:ring-1 focus:ring-accent focus:outline-none" class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
> >
<option value="">—</option> <option value="">—</option>
{#each versions as v, i (v.id)} {#each versions as v, i (v.id)}

4
frontend/src/lib/components/PersonTypeahead.svelte
View File

@@ -154,8 +154,8 @@ function clickOutside(node: HTMLElement) {
onfocus={handleFocus} onfocus={handleFocus}
placeholder={placeholder ?? m.comp_typeahead_placeholder()} placeholder={placeholder ?? m.comp_typeahead_placeholder()}
class={compact class={compact
? 'mt-1 block h-9 w-full rounded border border-line bg-surface px-2 text-sm text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none' ? 'mt-1 block h-9 w-full rounded border border-line bg-surface px-2 text-sm text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'
: 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:border-accent focus:ring-accent'} : 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}
/> />
{#if showDropdown && (results.length > 0 || loading)} {#if showDropdown && (results.length > 0 || loading)}

2
frontend/src/lib/components/user/UserGroupsSection.svelte
View File

@@ -18,7 +18,7 @@ let selected = $derived([...selectedGroupIds]);
name="groupIds" name="groupIds"
value={group.id} value={group.id}
bind:group={selected} bind:group={selected}
class="rounded border-line text-ink focus:ring-accent" class="rounded border-line text-ink focus:ring-focus-ring"
/> />
{group.name} {group.name}
</label> </label>

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

@@ -78,7 +78,7 @@ function getInitials(person: Correspondent): string {
role="option" role="option"
aria-selected="false" aria-selected="false"
tabindex="0" tabindex="0"
class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none" class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset"
onclick={() => onselect(person.id)} onclick={() => onselect(person.id)}
onkeydown={(e) => e.key === 'Enter' && onselect(person.id)} onkeydown={(e) => e.key === 'Enter' && onselect(person.id)}
> >
@@ -103,7 +103,7 @@ function getInitials(person: Correspondent): string {
role="option" role="option"
aria-selected="false" aria-selected="false"
tabindex="0" tabindex="0"
class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none" class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset"
onclick={() => onselect('')} onclick={() => onselect('')}
onkeydown={(e) => e.key === 'Enter' && onselect('')} onkeydown={(e) => e.key === 'Enter' && onselect('')}
> >

8
frontend/src/routes/notifications/+page.svelte
View File

@@ -111,7 +111,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
aria-checked={activeType === null && activeReadFilter === null} aria-checked={activeType === null && activeReadFilter === null}
onclick={() => setFilter({ type: null, read: null })} onclick={() => setFilter({ type: null, read: null })}
class={[ class={[
'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2', 'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
activeType === null && activeReadFilter === null activeType === null && activeReadFilter === null
? 'bg-primary text-primary-fg' ? 'bg-primary text-primary-fg'
: 'bg-muted text-ink' : 'bg-muted text-ink'
@@ -126,7 +126,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
aria-checked={activeReadFilter === 'false'} aria-checked={activeReadFilter === 'false'}
onclick={() => setFilter({ read: 'false', type: null })} onclick={() => setFilter({ read: 'false', type: null })}
class={[ class={[
'inline-flex items-center gap-1.5 rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2', 'inline-flex items-center gap-1.5 rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
activeReadFilter === 'false' activeReadFilter === 'false'
? 'bg-primary text-primary-fg' ? 'bg-primary text-primary-fg'
: 'bg-muted text-ink' : 'bg-muted text-ink'
@@ -149,7 +149,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
aria-checked={activeType === 'MENTION'} aria-checked={activeType === 'MENTION'}
onclick={() => setFilter({ type: 'MENTION', read: null })} onclick={() => setFilter({ type: 'MENTION', read: null })}
class={[ class={[
'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2', 'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
activeType === 'MENTION' activeType === 'MENTION'
? 'bg-primary text-primary-fg' ? 'bg-primary text-primary-fg'
: 'bg-muted text-ink' : 'bg-muted text-ink'
@@ -164,7 +164,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
aria-checked={activeType === 'REPLY'} aria-checked={activeType === 'REPLY'}
onclick={() => setFilter({ type: 'REPLY', read: null })} onclick={() => setFilter({ type: 'REPLY', read: null })}
class={[ class={[
'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2', 'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
activeType === 'REPLY' activeType === 'REPLY'
? 'bg-primary text-primary-fg' ? 'bg-primary text-primary-fg'
: 'bg-muted text-ink' : 'bg-muted text-ink'