From b9f11fad85a73fd814f8989ce2eb3c08504066df Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 15 Aug 2026 05:00:06 +0000
Subject: [PATCH 1/2] =?UTF-8?q?UX(dashboard):=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1=20=EC=9C=A0=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 대시보드의 기본 `<input type="file">`을 `sr-only` 등을 통해 시각적으로 숨김
- 스타일이 적용된 프록시 `<button>`을 추가하고 `addEventListener`로 파일 입력을 연결
- 네이티브 인풋의 `aria-label` 등 접근성 속성을 보존함
- 반복되는 파일 선택 시 정상적으로 동작하도록 구성
- `palette.md`에 관련된 UX 및 접근성 학습 내용 기록 추가
---
 .jules/palette.md            | 3 +++
 scanner/dashboard/index.html | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index ea004e2d..e0de0d76 100644
--- a/.jules/palette.md
+++ b/.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.
+## 2024-05-19 - Visually hiding file inputs for better UX
+**Learning:** Browsers natively suppress `change` events on `<input type="file">` if the user selects the same file repeatedly. Also, native file inputs are often difficult to style consistently. Replacing them with a styled proxy `<button>` element is a huge UX win.
+**Action:** When modifying file inputs, visually hide them (using `class="sr-only" tabindex="-1" aria-hidden="true"`) and use a proxy `<button>`. Always preserve the original `aria-label` on the hidden input to maintain accessibility, and use `addEventListener('click')` instead of inline handlers. Additionally, ensure the proxy triggers the click on the native input, and immediately clear the input value (`fileInput.value = ''`) inside the `change` listener to allow sequential selections of the same file.
diff --git a/scanner/dashboard/index.html b/scanner/dashboard/index.html
index 132bc31b..069f40b3 100644
--- a/scanner/dashboard/index.html
+++ b/scanner/dashboard/index.html
@@ -93,7 +93,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="file-proxy" aria-label="Upload findings file" style="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 Findings</button>
+  <input type="file" id="file" accept="application/json,.json" class="sr-only" tabindex="-1" aria-hidden="true" aria-label="Upload findings file">
 </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 +326,9 @@ <h1>Dashboard</h1>
 }
 
 const fileInput = document.getElementById('file');
+const fileProxy = document.getElementById('file-proxy');
+fileProxy.addEventListener('click', () => fileInput.click());
+
 fileInput.addEventListener('change', () => {
   const selectedFile = fileInput.files?.[0];
   fileInput.value = '';

From 587174c216f8931d2c10512c1d9c7eec24cf7d25 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 15 Aug 2026 05:32:46 +0000
Subject: [PATCH 2/2] =?UTF-8?q?UX(dashboard):=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1=20=EC=9C=A0=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 대시보드의 기본 `<input type="file">`을 `sr-only` 등을 통해 시각적으로 숨김
- 스타일이 적용된 프록시 `<button>`을 추가하고 `addEventListener`로 파일 입력을 연결
- 네이티브 인풋의 `aria-label` 등 접근성 속성을 보존함
- 반복되는 파일 선택 시 정상적으로 동작하도록 구성
- `palette.md`에 관련된 UX 및 접근성 학습 내용 기록 추가