fix(dashboard): add an accessible file-upload proxy

.jules/palette.md

@@ -81,3 +81,6 @@
 ## 2026-08-12 - Skip to Content Accessibility
 **Learning:** Screen reader and keyboard-only users experience significant friction when forced to navigate through repetitive header controls on every page load.
 **Action:** Keep a visible-on-focus skip link as the first interactive element, target a programmatically focusable main container, and give the focused link a high-contrast outline.
+## 2026-08-16 - Proxy Button for Native File Input
+**Learning:** When replacing a native file input with a proxy button for better UX/consistency, visually hiding the input with `sr-only` and proxying the click via a button improves interaction without breaking accessibility contract tests, as long as `aria-label` is preserved on the new button. Furthermore, resetting `fileInput.value = ''` inside the change handler is crucial in SPAs to allow the user to select the same file consecutively.
+**Action:** Always maintain the original `aria-label` on proxy elements and handle sequential file selection manually in vanilla JS SPA contexts.

scanner/dashboard/index.html

@@ -78,6 +78,9 @@
   .empty code{background:var(--bg);padding:2px 6px;border-radius:4px;color:var(--text)}
   .primary-action{min-height:44px;padding:10px 16px;border:1px solid var(--primary);border-radius:8px;background:var(--primary);color:var(--on-primary);cursor:pointer;font:inherit;font-weight:700}
   .primary-action:hover{filter:brightness(.94)}
+  .upload-action{margin-left:12px;padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font:inherit;color:var(--text);font-weight:500;transition:background 0.2s}
+  .upload-action:hover{background:var(--bg)}
+  .upload-action:disabled{opacity:0.6;cursor:not-allowed}
   .drop{margin-top:14px}
   body.drag-active::after{content:"Drop findings.json here";position:fixed;inset:0;z-index:99;background:rgba(37,110,244,.08);border:4px dashed var(--primary);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--primary);pointer-events:none;backdrop-filter:blur(2px)}
   .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@@ -93,7 +96,8 @@
   <span class="logo"></span><span class="brand">AppGuardrail</span>
   <span class="spacer"></span>
   <span class="meta" id="src">no findings loaded</span>
-  <input type="file" id="file" accept="application/json,.json" aria-label="Upload findings file" style="margin-left:12px">
+  <button type="button" id="upload-btn" class="upload-action" aria-label="Upload findings file">Upload file</button>
+  <input type="file" id="file" accept="application/json,.json" class="sr-only" tabindex="-1" aria-hidden="true">
 </header>
 <p id="findings-summary" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></p>
 <main id="app" tabindex="-1"></main>
@@ -325,6 +329,8 @@ <h1>Dashboard</h1>
 }
 
 const fileInput = document.getElementById('file');
+const uploadBtn = document.getElementById('upload-btn');
+uploadBtn.addEventListener('click', () => fileInput.click());
 fileInput.addEventListener('change', () => {
   const selectedFile = fileInput.files?.[0];
   fileInput.value = '';

tests/test_dashboard_file_upload_contract.py

@@ -19,6 +19,34 @@ def test_empty_state_browse_action_uses_an_accessible_event_listener() -> None:
     assert 'onclick="document.getElementById(\'file\').click()"' not in html
 
 
+def test_header_upload_proxy_is_native_tokenized_and_state_perceivable() -> None:
+    """The header proxy must stay keyboard-native and use reusable visual states."""
+    html = _dashboard_html()
+
+    assert (
+        '<button type="button" id="upload-btn" class="upload-action" '
+        'aria-label="Upload findings file">Upload file</button>'
+    ) in html
+    assert "const uploadBtn = document.getElementById('upload-btn');" in html
+    assert "uploadBtn.addEventListener('click', () => fileInput.click());" in html
+    assert ".upload-action{" in html
+    assert ".upload-action:hover{" in html
+    assert ".upload-action:disabled{" in html
+    assert 'id="upload-btn" aria-label=' not in html
+    assert 'id="upload-btn" style=' not in html
+
+
+def test_proxy_hides_the_native_input_without_duplicate_accessible_naming() -> None:
+    """Only the native proxy button should appear in the accessibility tree."""
+    html = _dashboard_html()
+
+    assert (
+        '<input type="file" id="file" accept="application/json,.json" '
+        'class="sr-only" tabindex="-1" aria-hidden="true">'
+    ) in html
+    assert 'aria-hidden="true" aria-label="Upload findings file"' not in html
+
+
 def test_file_input_resets_only_after_a_selection_change() -> None:
     """Clearing after change enables same-file reloads without losing cancelled picks."""
     html = _dashboard_html()