Skip to content

UX: 대시보드 파일 입력 버튼 접근성 및 스타일 개선 #962

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
seonghobae wants to merge 2 commits into from
Closed

UX: 대시보드 파일 입력 버튼 접근성 및 스타일 개선 #962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b9f11fa
UX(dashboard): 파일 입력 버튼 스타일 개선 및 접근성 유지
seonghobae Aug 15, 2026
587174c
UX(dashboard): 파일 입력 버튼 스타일 개선 및 접근성 유지
seonghobae Aug 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
6 changes: 5 additions & 1 deletion scanner/dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 = '';
Expand Down
Loading