fix: dropzone focus state and add-more-files button semantics (#32)

* fix: add focus state to dropzone remove button and make add-more-files a button (#23)

- Add :focus-visible outline to the remove button in UploadedFileTemplate for keyboard visibility
- Pass onclick to the Chip component in FileInput so it renders as a <button> element, fixing keyboard accessibility and semantics for the "add more files" control

* fix: remove hardcoded container names to allow multiple worktrees to run simultaneously

* 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)

Author: rubenhensen

src/lib/components/HelpToggle.svelte

@@ -30,7 +30,8 @@
         width: 100%;
         box-sizing: border-box;
         min-width: 0;
-        overflow: hidden;
+        overflow: clip;
+        overflow-clip-margin: 4px;
     }
 
     .help-section.bordered {
@@ -56,6 +57,8 @@
         outline: 2px solid var(--pg-primary);
         outline-offset: 2px;
         border-radius: var(--pg-border-radius-sm);
+        position: relative;
+        z-index: 1;
     }
 
     .help-section.bordered .help-toggle {

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

@@ -135,6 +135,7 @@
                             icon="+"
                             size="lg"
                             variant="default"
+                            onclick={() => {}}
                         />
                     </div>
                 {/if}
@@ -343,7 +344,10 @@
         gap: 0.5rem;
         max-height: 300px;
         overflow-y: auto;
+        overflow-x: clip;
+        overflow-clip-margin: 4px;
         pointer-events: auto;
+        padding-right: 4px;
     }
 
     .dz-previews.encrypting :global(.remove-button) {
@@ -356,6 +360,7 @@
         margin: 0;
         min-height: 0;
         position: relative;
+        background: transparent;
     }
 
     /* Preview template styles (injected by Dropzone, so must be :global) */
@@ -416,7 +421,7 @@
     .dz-previews :global(.remove-button) {
         cursor: pointer;
         height: 100%;
-        padding: 4px 0 4px 4px;
+        padding: 4px 4px 4px 4px;
         border-radius: var(--pg-border-radius-md);
         transition: all 0.2s ease;
         display: flex;
@@ -429,6 +434,12 @@
         background-color: var(--pg-soft-background);
     }
 
+    .dz-previews :global(.remove-button:focus-visible) {
+        outline: 2px solid var(--pg-primary);
+        outline-offset: 2px;
+        z-index: 1;
+    }
+
     .dz-previews :global(.remove-button *) {
         cursor: pointer;
     }

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

@@ -99,6 +99,11 @@
         background-color: var(--pg-soft-background);
     }
 
+    .remove-button:focus-visible {
+        outline: 2px solid var(--pg-primary);
+        outline-offset: 2px;
+    }
+
     .remove-button * {
         cursor: pointer;
     }

src/lib/global.scss

@@ -594,7 +594,8 @@ h3 {
     }
 
     .primary-btn:focus-visible {
-        outline: none;
+        outline: 2px solid var(--pg-primary);
+        outline-offset: 2px;
     }
 
     .crypt-btn:hover:not(:disabled):not([disabled]):not(.crypt-btn-disabled) {