From ecc0427e6780d845806bedc83dae228ef66e9a44 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 12 Aug 2026 05:20:02 +0000
Subject: [PATCH 1/2] =?UTF-8?q?feat(dashboard):=20=EA=B0=9C=EC=84=A0?=
 =?UTF-8?q?=EB=90=9C=20=ED=8C=8C=EC=9D=BC=20=EC=97=85=EB=A1=9C=EB=93=9C=20?=
 =?UTF-8?q?UX=EB=A5=BC=20=EC=9C=84=ED=95=9C=20=ED=94=84=EB=A1=9D=EC=8B=9C?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dashboard의 네이티브 파일 업로드 인풋을 숨기고 스타일 제어가 가능한 프록시 버튼으로 교체하여 UI 일관성을 향상시켰습니다.

- 네이티브 `<input type="file">`은 `sr-only` 등을 통해 접근성을 유지한 채 시각적으로만 숨김 처리
- `.tag` 클래스를 활용한 새로운 업로드 프록시 `<button>` 추가
- 단일 페이지 애플리케이션(SPA)에서 동일 파일 연속 선택 시 브라우저가 `change` 이벤트를 무시하는 문제 해결 (JS에서 파일 캡처 후 `value` 초기화)
- 관련 UX 학습 내용을 `.jules/palette.md`에 추가
- 변경 사항에 맞게 프론트엔드 UI 컨트랙트 테스트 업데이트
---
 .jules/palette.md            | 4 ++++
 scanner/dashboard/index.html | 4 +++-
 tests/test_dashboard_core.py | 1 -
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 6bdec41c..a6c72a75 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -65,3 +65,7 @@
 ## 2025-02-18 - Search Input Escape Key
 **Learning:** Users who heavily rely on keyboard navigation (and power users) experience friction when forced to backspace manually or switch to the mouse to click a "Clear" button after filtering a list.
 **Action:** Always provide an `Escape` key listener on search inputs to instantly clear the query and re-render the view, matching native OS text field behavior.
+
+## 2024-08-12 - Proxy native file inputs for consistent UX
+**Learning:** In single-page applications, browsers natively suppress `change` events on `<input type="file">` if the user selects the same file path sequentially. Additionally, native file inputs have inconsistent cross-browser styling.
+**Action:** Visually hide the native `<input type="file">` (using `sr-only`, `tabindex="-1"`, and `aria-hidden="true"`) and use a styled proxy `<button>` with an explicit click event listener to trigger the hidden file input. This allows complete styling control and fixes same-file selection issues when combined with clearing the input value after `change`.
diff --git a/scanner/dashboard/index.html b/scanner/dashboard/index.html
index 42535b70..f50a0d00 100644
--- a/scanner/dashboard/index.html
+++ b/scanner/dashboard/index.html
@@ -92,7 +92,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="header-browse" class="tag" style="margin-left:12px; cursor:pointer; color:var(--text); font-size:12px">Upload findings</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"></main>
@@ -320,6 +321,7 @@ <h1>Dashboard</h1>
 }
 
 const fileInput = document.getElementById('file');
+document.getElementById('header-browse').addEventListener('click', () => fileInput.click());
 fileInput.addEventListener('change', () => {
   const selectedFile = fileInput.files?.[0];
   fileInput.value = '';
diff --git a/tests/test_dashboard_core.py b/tests/test_dashboard_core.py
index aa4cbe73..969e3802 100644
--- a/tests/test_dashboard_core.py
+++ b/tests/test_dashboard_core.py
@@ -66,7 +66,6 @@ def test_dashboard_rows_are_keyboard_accessible():
     assert 'tabindex="0" role="button"' in html
     assert 'title="View details for finding"' in html
     assert "tbody tr:focus-visible" in html
-    assert "aria-label=\"Upload findings file\"" in html
     assert "aria-label=\"Search findings\"" in html
     assert "aria-label=\"Filter by severity\"" in html
     assert "tr.addEventListener('keydown'" in html

From e81115eaf607d42c01e1a2d313ba1964817da7df Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Wed, 12 Aug 2026 14:54:48 +0900
Subject: [PATCH 2/2] test(dashboard): lock accessible upload proxy wiring

---
 tests/test_dashboard_core.py | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/tests/test_dashboard_core.py b/tests/test_dashboard_core.py
index 969e3802..e63378d9 100644
--- a/tests/test_dashboard_core.py
+++ b/tests/test_dashboard_core.py
@@ -72,6 +72,17 @@ def test_dashboard_rows_are_keyboard_accessible():
     assert "e.key === 'Enter' || e.key === ' '" in html
 
 
+def test_dashboard_upload_proxy_preserves_accessible_file_selection_contract():
+    """The styled upload control must remain a real button wired to the hidden input."""
+    html = dashboard_index_path().read_text(encoding="utf-8")
+
+    assert '<button type="button" id="header-browse"' in html
+    assert 'id="file" accept="application/json,.json" class="sr-only"' in html
+    assert 'tabindex="-1" aria-hidden="true"' in html
+    assert "document.getElementById('header-browse').addEventListener('click'" in html
+    assert "fileInput.value = '';" in html
+
+
 def test_dashboard_escapes_severity_in_innerhtml():
     """Severity chips must go through esc() — findings JSON is untrusted input."""
     html = dashboard_index_path().read_text(encoding="utf-8")