Skip to content

Commit f1d2a7b

Browse files
committed
fix: prevent focus outlines from being clipped or hidden
- Add focus-visible outline + z-index to remove button in dropzone - Override Dropzone's default white background on file previews - Use overflow:clip with clip-margin on dz-previews and help-section so focus outlines aren't cut off by scroll containers - Add z-index to HelpToggle focus state so outline paints above sibling recipient cards - Restore primary-btn focus-visible outline on 1dppx screens (was incorrectly set to outline:none)
1 parent f030c93 commit f1d2a7b

3 files changed

Lines changed: 17 additions & 3 deletions

File tree

src/lib/components/HelpToggle.svelte

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
width: 100%;
3131
box-sizing: border-box;
3232
min-width: 0;
33-
overflow: hidden;
33+
overflow: clip;
34+
overflow-clip-margin: 4px;
3435
}
3536
3637
.help-section.bordered {
@@ -56,6 +57,8 @@
5657
outline: 2px solid var(--pg-primary);
5758
outline-offset: 2px;
5859
border-radius: var(--pg-border-radius-sm);
60+
position: relative;
61+
z-index: 1;
5962
}
6063
6164
.help-section.bordered .help-toggle {

src/lib/components/filesharing/inputs/FileInput.svelte

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -344,7 +344,10 @@
344344
gap: 0.5rem;
345345
max-height: 300px;
346346
overflow-y: auto;
347+
overflow-x: clip;
348+
overflow-clip-margin: 4px;
347349
pointer-events: auto;
350+
padding-right: 4px;
348351
}
349352
350353
.dz-previews.encrypting :global(.remove-button) {
@@ -357,6 +360,7 @@
357360
margin: 0;
358361
min-height: 0;
359362
position: relative;
363+
background: transparent;
360364
}
361365
362366
/* Preview template styles (injected by Dropzone, so must be :global) */
@@ -417,7 +421,7 @@
417421
.dz-previews :global(.remove-button) {
418422
cursor: pointer;
419423
height: 100%;
420-
padding: 4px 0 4px 4px;
424+
padding: 4px 4px 4px 4px;
421425
border-radius: var(--pg-border-radius-md);
422426
transition: all 0.2s ease;
423427
display: flex;
@@ -430,6 +434,12 @@
430434
background-color: var(--pg-soft-background);
431435
}
432436
437+
.dz-previews :global(.remove-button:focus-visible) {
438+
outline: 2px solid var(--pg-primary);
439+
outline-offset: 2px;
440+
z-index: 1;
441+
}
442+
433443
.dz-previews :global(.remove-button *) {
434444
cursor: pointer;
435445
}

src/lib/global.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -594,7 +594,8 @@ h3 {
594594
}
595595

596596
.primary-btn:focus-visible {
597-
outline: none;
597+
outline: 2px solid var(--pg-primary);
598+
outline-offset: 2px;
598599
}
599600

600601
.crypt-btn:hover:not(:disabled):not([disabled]):not(.crypt-btn-disabled) {

0 commit comments

Comments
 (0)