Skip to content

Commit ebf8ac2

Browse files
Stefan ErnstStefan Ernst
Stefan Ernst
authored and
Stefan Ernst
committed
Fixes for noisy frontend build
1 parent 9a83cec commit ebf8ac2

19 files changed

Lines changed: 213 additions & 34 deletions

‎frontend/src/lib/components/Input.svelte‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,14 @@
1313
id = undefined,
1414
class: className = '',
1515
// Optional ref binding for parent components that need the raw input element
16-
inputRef = $bindable(null)
16+
inputRef = $bindable(null),
17+
// Event handlers
18+
oninput = undefined,
19+
onchange = undefined,
20+
onfocus = undefined,
21+
onblur = undefined,
22+
onkeydown = undefined,
23+
onkeyup = undefined
1724
} = $props();
1825
export { className as class };
1926
@@ -32,6 +39,7 @@
3239
].filter(Boolean).join(' '));
3340
</script>
3441

42+
<!-- svelte-ignore a11y_autofocus -->
3543
<input
3644
{type}
3745
{id}
@@ -46,10 +54,10 @@
4654
{step}
4755
class={allClasses}
4856
style="background-color: var(--ds-background-input); border-color: var(--ds-border); color: var(--ds-text);"
49-
on:input
50-
on:change
51-
on:focus
52-
on:blur
53-
on:keydown
54-
on:keyup
57+
{oninput}
58+
{onchange}
59+
{onfocus}
60+
{onblur}
61+
{onkeydown}
62+
{onkeyup}
5563
/>

‎frontend/src/lib/components/Select.svelte‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
size = 'medium',
77
id = undefined,
88
class: className = '',
9-
children
9+
children,
10+
onchange = undefined,
11+
onfocus = undefined,
12+
onblur = undefined
1013
} = $props();
1114
export { className as class };
1215
@@ -32,9 +35,9 @@
3235
{required}
3336
class={allClasses}
3437
style="background-color: var(--ds-background-input); border-color: var(--ds-border); color: var(--ds-text);"
35-
on:change
36-
on:focus
37-
on:blur
38+
{onchange}
39+
{onfocus}
40+
{onblur}
3841
>
3942
{@render children?.()}
4043
</select>

‎frontend/src/lib/components/Toggle.svelte‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,15 @@
2626
</script>
2727
2828
{#if label}
29-
<label class="inline-flex items-center gap-3 {labelPosition === 'left' ? 'flex-row-reverse' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}">
29+
<div
30+
class="inline-flex items-center gap-3 {labelPosition === 'left' ? 'flex-row-reverse' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
31+
role="group"
32+
>
3033
<button
3134
type="button"
3235
role="switch"
3336
aria-checked={checked}
37+
aria-label={label}
3438
{disabled}
3539
class="relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--ds-border-focused)]
3640
disabled:cursor-not-allowed {currentSize.button} {className}"
@@ -42,7 +46,7 @@
4246
></span>
4347
</button>
4448
<span class="text-sm text-[var(--ds-text)]">{label}</span>
45-
</label>
49+
</div>
4650
{:else}
4751
<button
4852
type="button"

‎frontend/src/lib/components/UserAvatar.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,7 @@
9393
});
9494
</script>
9595
96-
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
97-
<div on:mouseenter={loadPersonalWorkspaceIfNeeded}>
96+
<div onmouseenter={loadPersonalWorkspaceIfNeeded} onfocusin={loadPersonalWorkspaceIfNeeded}>
9897
<DropdownMenu
9998
triggerAvatar={showAvatar ? authStore.currentUser?.avatar_url : null}
10099
triggerText={expanded && label ? label : (showAvatar ? '' : userInitials)}

‎frontend/src/lib/dialogs/CreateModal.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,8 @@
378378
style="color: var(--ds-text); background-color: {selectedType === type.value ? 'var(--ds-background-selected)' : 'transparent'};"
379379
onmouseover={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-selected)'}
380380
onmouseout={(e) => e.currentTarget.style.backgroundColor = selectedType === type.value ? 'var(--ds-background-selected)' : 'transparent'}
381+
onfocus={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-selected)'}
382+
onblur={(e) => e.currentTarget.style.backgroundColor = selectedType === type.value ? 'var(--ds-background-selected)' : 'transparent'}
381383
onclick={() => {
382384
selectType(type.value);
383385
closePopover();
@@ -421,6 +423,8 @@
421423
style="color: var(--ds-text-subtle);"
422424
onmouseover={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
423425
onmouseout={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
426+
onfocus={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
427+
onblur={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
424428
aria-label="Close"
425429
>
426430
<X size={16} />

‎frontend/src/lib/dialogs/PortalModal.svelte‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,26 @@
4242
4343
{#if isOpen}
4444
<div
45-
class="fixed inset-0 flex items-center justify-center z-50 p-4"
46-
style={`background-color: rgba(0, 0, 0, ${backdropOpacity}); backdrop-filter: ${backdropBlur};`}
47-
onclick={handleBackdropClick}
45+
class="fixed inset-0 z-50 p-4"
46+
role="dialog"
47+
aria-modal="true"
48+
aria-labelledby={title ? 'modal-title' : undefined}
4849
>
49-
<div
50-
class={`w-full ${maxWidth} rounded-2xl shadow-2xl overflow-hidden`}
51-
style={`background-color: ${isDarkMode ? '#1e293b' : '#ffffff'};`}
52-
onclick={(e) => e.stopPropagation()}
53-
>
50+
<!-- Backdrop button - tabindex=-1 keeps it out of tab order, keyboard users use Escape -->
51+
<button
52+
type="button"
53+
class="absolute inset-0 w-full h-full cursor-default"
54+
style={`background-color: rgba(0, 0, 0, ${backdropOpacity}); backdrop-filter: ${backdropBlur};`}
55+
onclick={close}
56+
tabindex="-1"
57+
aria-label="Close dialog"
58+
></button>
59+
<!-- Modal content -->
60+
<div class="relative flex items-center justify-center w-full h-full pointer-events-none">
61+
<div
62+
class={`w-full ${maxWidth} rounded-2xl shadow-2xl overflow-hidden pointer-events-auto`}
63+
style={`background-color: ${isDarkMode ? '#1e293b' : '#ffffff'};`}
64+
>
5465
{#if showHeader}
5566
<div
5667
class={`${headerPaddingClass} border-b flex items-center justify-between`}
@@ -83,6 +94,7 @@
8394
<div class={bodyClass}>
8495
<slot />
8596
</div>
97+
</div>
8698
</div>
8799
</div>
88100
{/if}

‎frontend/src/lib/features/items/ItemDetailSidebar.svelte‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -400,6 +400,7 @@
400400
{#snippet children()}
401401
<div
402402
class="w-full flex items-center justify-between px-2 py-1.5 text-sm transition-colors rounded group"
403+
role="group"
403404
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
404405
onmouseleave={(e) => e.currentTarget.style.backgroundColor = ''}
405406
>
@@ -442,6 +443,7 @@
442443
{#snippet children()}
443444
<div
444445
class="w-full flex items-center justify-between px-2 py-1.5 text-sm transition-colors rounded group"
446+
role="group"
445447
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
446448
onmouseleave={(e) => e.currentTarget.style.backgroundColor = ''}
447449
>
@@ -485,7 +487,8 @@
485487
<button
486488
onclick={startEditingDueDate}
487489
class="w-full flex items-center justify-between px-2 py-1.5 text-sm transition-colors rounded group"
488-
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
490+
role="group"
491+
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
489492
onmouseleave={(e) => e.currentTarget.style.backgroundColor = ''}
490493
>
491494
<Text variant="subtle" size="sm">{t('common.dueDate')}</Text>
@@ -538,7 +541,8 @@
538541
{#snippet children()}
539542
<div
540543
class="w-full flex items-center justify-between px-2 py-1.5 text-sm transition-colors rounded group"
541-
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
544+
role="group"
545+
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
542546
onmouseleave={(e) => e.currentTarget.style.backgroundColor = ''}
543547
>
544548
<Text variant="subtle" size="sm">{t('items.project')}</Text>
@@ -575,6 +579,7 @@
575579
{#snippet children()}
576580
<div
577581
class="w-full flex items-center justify-between px-2 py-1.5 text-sm transition-colors rounded group"
582+
role="group"
578583
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
579584
onmouseleave={(e) => e.currentTarget.style.backgroundColor = ''}
580585
>
@@ -620,6 +625,7 @@
620625
{#snippet children()}
621626
<div
622627
class="w-full flex items-center justify-between px-2 py-1.5 text-sm transition-colors rounded group"
628+
role="group"
623629
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
624630
onmouseleave={(e) => e.currentTarget.style.backgroundColor = ''}
625631
>
@@ -656,6 +662,7 @@
656662
{#snippet children()}
657663
<div
658664
class="w-full flex items-center justify-between px-2 py-1.5 text-sm transition-colors rounded group"
665+
role="group"
659666
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
660667
onmouseleave={(e) => e.currentTarget.style.backgroundColor = ''}
661668
>
@@ -718,7 +725,8 @@
718725
<button
719726
onclick={() => startEditingCustomField(screenField.field_identifier)}
720727
class="w-full flex items-center justify-between px-2 py-1.5 text-sm transition-colors rounded group"
721-
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
728+
role="group"
729+
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-neutral-hovered)'}
722730
onmouseleave={(e) => e.currentTarget.style.backgroundColor = ''}
723731
disabled={!canEdit}
724732
>

‎frontend/src/lib/forms/CollectionForm.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@
8989
style="color: var(--ds-text-subtle);"
9090
onmouseover={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-selected)'}
9191
onmouseout={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
92+
onfocus={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-selected)'}
93+
onblur={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
9294
onclick={() => {
9395
categoryId = null;
9496
closePopover();
@@ -103,6 +105,8 @@
103105
style="color: var(--ds-text);"
104106
onmouseover={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-selected)'}
105107
onmouseout={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
108+
onfocus={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-selected)'}
109+
onblur={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
106110
onclick={() => {
107111
categoryId = category.id;
108112
closePopover();

‎frontend/src/lib/forms/MilestoneForm.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,8 @@
143143
style="color: var(--ds-text);"
144144
onmouseover={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-selected)'}
145145
onmouseout={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
146+
onfocus={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-selected)'}
147+
onblur={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
146148
onclick={() => {
147149
form.setValue('status', status.value);
148150
closePopover();

‎frontend/src/lib/forms/WorkItemForm.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,8 @@
205205
style="color: var(--ds-text); background-color: {store.formData.item_type_id === itemType.id ? 'var(--ds-background-selected)' : 'transparent'};"
206206
onmouseover={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-selected)'}
207207
onmouseout={(e) => e.currentTarget.style.backgroundColor = store.formData.item_type_id === itemType.id ? 'var(--ds-background-selected)' : 'transparent'}
208+
onfocus={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-selected)'}
209+
onblur={(e) => e.currentTarget.style.backgroundColor = store.formData.item_type_id === itemType.id ? 'var(--ds-background-selected)' : 'transparent'}
208210
onclick={() => {
209211
store.setItemType(itemType.id);
210212
closePopover();
@@ -346,6 +348,8 @@
346348
style="background-color: var(--ds-surface); border: 1px solid var(--ds-border); color: var(--ds-text-subtle);"
347349
onmouseover={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-surface-hovered, var(--ds-background-neutral-hovered))'}
348350
onmouseout={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-surface)'}
351+
onfocus={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-surface-hovered, var(--ds-background-neutral-hovered))'}
352+
onblur={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-surface)'}
349353
>
350354
<MoreHorizontal size={14} />
351355
</button>

0 commit comments

Comments
 (0)